1

I have an image slider on my page. I want to code a previous and next button. I believe the code I have is correct but for some reason event.stopPropagation is not working.

<div class="slider-wrapper">

    <div id="slider"> 

     <img id="1" class="slider-image" data-image-num="1" src="images/slider/Pictures/Heaslip.jpg" alt="Overflow: Hidden No More" />
     <img id="2" class="slider-image" data-image-num="2" src="images/slider/Pictures/BOD.jpg"  alt="HTML Captions" />
     <img id="3" class="slider-image" data-image-num="3" src="images/slider/Pictures/Kidney.jpg" alt="and more features" />
     <img id="4" class="slider-image" data-image-num="4" src="images/slider/Pictures/kearney.jpg" alt="and more features" />

    </div>


    <div id="slider-nav">

        <a href="#" class="left" onclick="prev(); return false;">Previous</a>
        <a href="#" class="right" onclick="next(); return false;">Next</a>

    </div>

</div>

jQuery

function prev(event){
 event.stopPropagation();
 var newSlide = sliderInt - 1;
 showSlide(newSlide);
}

The prvious button .left is still causing the browser to jump back to the top of the page. I assumed that event.stopPropagation stops this from happening.

Any Ideas? Thanks

psycho
  • 1,539
  • 4
  • 20
  • 36
  • event.stopPropagation(); just prevents the same event to be captured by other next DOM elements if they are registered.. – Ishank Apr 16 '13 at 10:18
  • but is the href="#" not registered in the DOM for that event? – psycho Apr 16 '13 at 10:22
  • so, event.stopPropagation(); is not of any use here.. – Ishank Apr 16 '13 at 10:43
  • How do I process the functionality within prev() without causing the browser to jump to the top of the page. – psycho Apr 16 '13 at 11:02
  • wats in the showSlide() method? guess it is calling the prev function recursively... – Ishank Apr 16 '13 at 11:03
  • showSlide is checking the number of the image ID and basically calling the startSlide function again yes. So for the prev() method I'm passing the previous image ID and for next() method I am passing the next ID. – psycho Apr 16 '13 at 11:11
  • Can you replace `event.stopPropagation();` with `event.preventDefault()` and add `return false;` on the end your function? – Victor Apr 16 '13 at 12:36
  • yeah tried that still doesn't work – psycho Apr 17 '13 at 09:38

1 Answers1

0

In case you're still wondering, event.preventDefault() is what you're looking for, this prevents the browser from applying default link behaviour.

Bastiaan
  • 45
  • 6