Javascript onkeydown event to go to next page 1

[thewhistler1]

On my website I use paging so that all the results don't hit the page all at once. Then of coarse I have links to take you to the next set of results. What I would like to do is make the right and left arrow buttons on the keyboard work to go forward and backward to other pages of results. I use PHP and I believe that I would need to use Javascript to accomplish this. I am trying to understand javascript but so far I am not having too much luck. I found some pieces of code online that watch for keystrokes from the keyboard but have found nothing that will then do what I want to do. Here is the part of my code that will take you to the next page of result when pressed with the mouse.

<a href='index.php?content=movieinfo&id=<?php echo $next;?>NEXT</a>

As you can see the link to go to the next page uses PHP so putting the URL in the head is not the best solution for me since it is a variable address link.

But how to make a the left arrow button to do that same thing as clicking on this link is the hard part for me since I really am not that familiar with Javascript.

Any suggestions would be greatly appreciated.

 

[feherke]

Hi

[teal]<[/teal]a href[teal]=[/teal][green][i]"index.php?content=movieinfo&id=<?php echo $prev;?>"[/i][/green] id[teal]=[/teal][green][i]"prevlink"[/i][/green][teal]>[/teal]PREVIOUS[teal]</[/teal]a[teal]>[/teal]
[teal]<[/teal]a href[teal]=[/teal][green][i]"index.php?content=movieinfo&id=<?php echo $next;?>"[/i][/green] id[teal]=[/teal][green][i]"nextlink"[/i][/green][teal]>[/teal]NEXT[teal]</[/teal]a[teal]>[/teal]

document[teal].[/teal]onkeydown[teal]=[/teal][b]function[/b][teal]([/teal]e[teal])[/teal] [teal]{[/teal]
  [b]var[/b] thelink
  [b]if[/b] [teal]([/teal]e[teal].[/teal]keyCode[teal]==[/teal][purple]37[/purple][teal])[/teal] thelink[teal]=[/teal][green][i]'prevlink'[/i][/green]
  [b]else[/b] [b]if[/b] [teal]([/teal]e[teal].[/teal]keyCode[teal]==[/teal][purple]39[/purple][teal])[/teal] thelink[teal]=[/teal][green][i]'nextlink'[/i][/green]
  [b]else[/b] [b]return[/b]
  document[teal].[/teal]location[teal].[/teal]href[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal]thelink[teal]).[/teal]href
[teal]}[/teal]

According to my tests, it works with Gecko, Presto, WebKit and KHTML. As far as I know, should not work with Trident. See the article Detecting keystrokes by Peter-Paul Koch and solve it yourself.

Feherke.

http://free.rootshell.be/~feherke/

 

[thewhistler1]

EXCELLENT, that worked great.

Another question though, how would I get it to work in another situation such as this. I have another page that uses a little Javascript to change a large picture, by clicking a button you can make the next thumbnail be the large picture. Here is code for it.

<script>
numImages = <?php echo $num_rows; ?>;
curImage = 1;

function changeBGImage(whichImage){
	if (document.body){
		photos.style.backgroundImage = backImage[whichImage]; 
		curImage = whichImage +1;
	}
}

function f_slideshow( xflip ) {
	curImage = curImage + xflip;
	if (curImage > numImages)
		{ curImage = 1 ; }
	if (curImage == 0)
		{ curImage = numImages ; }
	photos.style.backgroundImage =  backImage[curImage - 1];
}

//-->
</script>

And the button code:

<input type="button" value="Prev" name="cb_prev" onclick="f_slideshow(-1)">
<input type="button" value="Next" name="cb_next" onclick="f_slideshow(1)">

Any ideas on how to make it work with this as well?

Thanks

 

[feherke]

Hi

Supposing [small]1)[/small] the [tt]input[/tt] [tt]name[/tt]s are unique in that document, or at least those [tt]button[/tt]s occurs first with those [tt]name[/tt]s, [small]2)[/small] the browser handles the [tt]getElementsByName()[/tt] methods, the changes are simple :

document[teal].[/teal]onkeydown[teal]=[/teal][b]function[/b][teal]([/teal]e[teal])[/teal] [teal]{[/teal]
  [b]var[/b] thelink
  [b]if[/b] [teal]([/teal]e[teal].[/teal]keyCode[teal]==[/teal][purple]37[/purple][teal])[/teal] thelink[teal]=[/teal][green][i]'[highlight]cb_prev[/highlight]'[/i][/green]
  [b]else[/b] [b]if[/b] [teal]([/teal]e[teal].[/teal]keyCode[teal]==[/teal][purple]39[/purple][teal])[/teal] thelink[teal]=[/teal][green][i]'[highlight]cb_next[/highlight]'[/i][/green]
  [b]else[/b] [b]return[/b]
  document[teal].[/teal][COLOR=darkgoldenrod]getElement[highlight]s[/highlight]By[highlight]Name[/highlight][/color][teal]([/teal]thelink[teal])[/teal][highlight][teal][[/teal][purple]0[/purple][teal]].[/teal][COLOR=darkgoldenrod]onclick[/color][teal]()[/teal][/highlight]
[teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[thewhistler1]

THANK YOU SO MUCH Feherke.

I really wish I knew how to use Javascript to the full. I picked up PHP really fast, it just makes sense to me but Javascript seems to be more difficult to learn, I just haven't been able to grasp the context very well yet. grrrr.

Oh well I'll keep trying. Thanks again for the help.