Triggering nested javascript functions

Question

I'm relatively new to javascript and I've been banging my head against an issue all day - I'm hoping someone can point me in the right direction.

I have a PHP script that does a slideshow. I have NEXT and PREVIOUS buttons which contain dynamic links to another javascript function. I'm hoping to find a way of triggering them with the arrow keys on the keyboard.

So far, I've found a way of making the arrow keys launch particular URLs but I'm struggling a bit now. The target URLs change as a result of hiding and showing DIVs on the page. So I think I need to do one of the following:

Trigger this code with URLS constructed within PHP variables later in the main body of the page - without refreshing the page:

<script type="text/javascript">

$(document).keydown(function(e){

 //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
 var keyCode = e.keyCode || e.which;

if (keyCode == 37)
 {
 window.location = 'http://www.domain.com/previous-image.jpg';
 return false;
 }

 if (keyCode == 39)
 {
 window.location = 'http://www.domain.com/next-image.jpg';
 return false;
 }

});

</script>

...or I need to find a way of triggering a link within a DIV of a particular name - but only if the DIV is not hidden.

Any pointers would be appreciated.

Edit: 10/10/12

Thanks for everyone's help so far. I now understand a bit more and I can perhaps be clearer with what I'm trying to achieve.

I have a page which has 5 DIVs - 4 of which are hidden. Each is identical except for the image displayed in it and I use the following code to hide or show the various DIVs: http://jsfiddle.net/edzpgt/ZhjRc/12/

I need to use arrow keys to navigate the pages so I'll add some Jquery for this as we've already discussed: http://jsfiddle.net/edzpgt/b2bWz/3/

I think I have two issues: 1. I'm not sure I have the syntax correct in order to make sure I'm only using the arrow key links from the visible DIV. 2. I don't think I'm setting or using the next/previous page number variable correctly in order to get the right desintation URL passed to the Jquery.

Can anyone help please?

Prinzhorn · Accepted Answer · 2012-10-08 16:39:45Z

1

1) You don't need to handle e.keyCode || e.which. jQuery does that for you. Just use e.which

2) It's better to make two functions outside of handler so you can call them from elsewhere:

function previousLocation() {
    window.location = 'http://www.domain.com/previous-image.jpg';
}

function nextLocation() {
    window.location = 'http://www.domain.com/next-image.jpg';
}

$(document).keydown(function (e) {
    var keyCode = e.which;

    if (keyCode == 37) {
        previousLocation();
        return false;
    }

    if (keyCode == 39) {
        nextLocation();
        return false;
    }

});

3) But if you really need to trigger - here's example:

$(document).keydown(function (e) {
    var keyCode = e.which;

    function previousLocation() {
        window.location = 'http://www.domain.com/previous-image.jpg';
    }

    function nextLocation() {
        window.location = 'http://www.domain.com/next-image.jpg';
    }

    $(document).bind('goprev', previousLocation);
    $(document).bind('gonext', nextLocation);

    if (keyCode == 37) {
        previousLocation(); // no problems here
        return false;
    }

    if (keyCode == 39) {
        nextLocation(); // no problems here
        return false;
    }

});

// external call example
$(document).trigger('goprev');
$(document).trigger('gonext');

edited Oct 8, 2012 at 16:39

Prinzhorn

22.6k7 gold badges65 silver badges69 bronze badges

answered Oct 8, 2012 at 16:33

Inferpse

4,1451 gold badge34 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1729344 Over a year ago

Thanks for the corrections - Does this allow me to use a PHP variable as the destination URL though?

Inferpse Over a year ago

Of course you can use that. Just make two global JS variables using PHP and update functions like window.location = variable1;

user1729344 Over a year ago

Is this as simple as this or am I missing something?: <?$variable="http://www.domain.com";?>

Inferpse Over a year ago

Maybe something like this: <script>var link1 = '<?php echo $phpvar ?>';</script>

user1729344 Over a year ago

Thanks for this but I can't seem to get it to work. I've edited my original post which might make things clearer.

Diode · Accepted Answer · 2012-10-08 16:35:40Z

0

There will be two a tags. one for next and other for previous. So first you have to find those. Suppose they are with ids nextSlide and prevSlide ,

<a id="prevSlide" href="http://www.domain.com/previous-image.jpg">Previous</a>
<a id="nextSlide" href="http://www.domain.com/next-image.jpg">Next</a>

you have rewrite your code as given below

$(document).keydown(function(e){

 //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
 var keyCode = e.keyCode || e.which;

if (keyCode == 37)
 {
 window.location  = $("#prevSlide").attr("href");
 return false;
 }

 if (keyCode == 39)
 {
 window.location  = $("#nextSlide").attr("href");
 return false;
 }

});

edited Oct 8, 2012 at 16:35

answered Oct 8, 2012 at 16:29

Diode

25.2k8 gold badges43 silver badges52 bronze badges

1 Comment

user1729344 Over a year ago

Thanks - the issue I have is that there are technically up to 10 'next' tags and 10 'prev' tags since I can have up to 10 images. All coding is present on the page but there's only one visible DIV at a time. Trouble is, I think that the Java is seeing the first one even though it's hidden. I'm trying to work out how best to get around this issue.

Chase · Accepted Answer · 2012-10-08 16:45:22Z

0

jQuery has a nice .trigger() function that may work for you.

if (keyCode == 37)
 {
 $("#next").trigger("click");
 return false;
 }

 if (keyCode == 39)
 {
 $("#prev").trigger("click");
 return false;
 }

You would need to substitute #next and #previous with the valid selectors for the next and previous links. Without the HTML, I used those as place holders.

EXAMPLE:

HTML

<a href="#" rel="next">next</a>
<a href="#" rel="prev">prev</a>

jQuery

    $(document).keydown(function(e){
      //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
      var keyCode = e.keyCode || e.which;

      if (keyCode == 37)
      {
       $("a[rel='prev']").trigger("click");
       return false;
      }
     else if (keyCode == 39)
     {
       $("a[rel='next']").trigger("click");
       return false;
     }
   });
   $("a[rel='next']").click(function(){
      alert("next");
   });

   $("a[rel='prev']").click(function(){
      alert("prev");
   });

edited Oct 8, 2012 at 16:45

answered Oct 8, 2012 at 16:28

Chase

29.6k1 gold badge52 silver badges49 bronze badges

7 Comments

user1729344 Over a year ago

Looks good, but how do I apply the click to the hyperlink? I mean, what do the #next and #previous tags refer to in your example?

user1729344 Over a year ago

Thanks Chase - that's clearer and I think I understand. Please see my comment above in reply to Diode though as it applies here, too.

Chase Over a year ago

If it's a case where they are being hidden and show, you could use the selector :visible; so something like $(a[rel='next']:visible).click(). api.jquery.com/visible-selector If you can show me the html structure then I can give you a better example. Hope it helps.

user1729344 Over a year ago

Thanks @Chase - I've tried to implement this code today but it didn't seem to work. So, I've created an empty page with just these elements and it's still not working. Nothing happens when the arrow keys are pressed. I'm sure this is something really obvious but i can't spot it! I was going to copy and paste my simple page code here but it seems I don't have enough characters available in this reply box. I'm a bit puzzled!

Chase Over a year ago

You can edit the original post with the code you would like for me to take a look at, or put it on www.jsfiddle.net

|

Collectives™ on Stack Overflow

Triggering nested javascript functions

3 Answers 3

5 Comments

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related