navigate back forth with arrow keys

In this example, in order to see what I am referring to, you must click on one of the images which will reveal a pop up window that includes previous/next navigation arrows. I have enabled the Link to Page action which is great but I want visitors to be able to also navigate between the pages using the arrow keys on their keyboard. It can get tedious clicking the mouse to advance through 100+ pages/images. Does anyone know how to implement this feature? I am using Freeway Pro 6.

http://thepastrystudio.com/weddingcakes1.html#


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, this is the tiniest target I have had to click with a mouse (imagine the poor iPad users! please!) in a very long time. First thing, I would wrap the image and the text (previous/next) with a single link, so you could click anywhere on it. This means you would cut the little arrow graphic to the clipboard, then click into the HTML box where you have the word NEXT and paste the image inline, then select both the image and the text and apply your link there. While you’re in the Hyperlink dialog, you would add some Extended attributes to make scripting this easier.

  • Name: rel
  • Value: next
  • Name: class
  • Value: arrowLink

For each name/value pair, click the New button, then add the name and value exactly as written above. Repeat this process for the PREVIOUS link (again, wrapped around both the text and the arrow) and substitute ‘previous’ for ‘next’ in the rel attribute.

Once you’ve done this, you need to do two things. First, increase the click target area by adding padding (and remove the underline). In your Styles palette, click on the cog menu and create a new style. In the Tag field, enter exactly this:

a.arrowLink

Tab into the Name field, delete whatever Freeway has helpfully added there, and then tab out of that field so it “sticks”. Click the Extended button, and add the following attributes (don’t type the colon, that’s just here to separate the name from the value):

display: inline-block
padding: 8px
margin: -8px 0 0 -8px
text-decoration: none
border: none

Now for the JavaScript. Apply the Protaculous 2 Action to the page, and click on the DOM Loaded Observer button. In the dialog that appears, paste the following code:

Event.observe(window, 'keydown', function(evt){
	var keycode = evt.keyCode;
	// right arrow
	if(key code == 39){
		$$('a[rel="next"]').invoke('click');
	}
	// left arrow
	if(key code == 37){
		$$('a[rel="previous"]').invoke('click');
	}
});

So what this does is provide a handler for the keydown event, which is fired every time you press the keyboard. If the right or left arrow is clicked, it will have the same effect as clicking on the links that have the rel=“next” or rel=“previous” attribute. Ideally, you should only have one of each on the page, but it won’t matter if you have more than that – the first one will fire, and the page will navigate. This is a progressive enhancement of your page – if someone has JavaScript disabled for some reason, they won’t see it work.

Walter

On Mar 4, 2014, at 8:28 AM, Emejai wrote:

In this example, in order to see what I am referring to, you must click on one of the images which will reveal a pop up window that includes previous/next navigation arrows. I have enabled the Link to Page action which is great but I want visitors to be able to also navigate between the pages using the arrow keys on their keyboard. It can get tedious clicking the mouse to advance through 100+ pages/images. Does anyone know how to implement this feature? I am using Freeway Pro 6.

http://thepastrystudio.com/weddingcakes1.html#


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options