How to prevent page jump when using # href to swap gallery images using a div ID?


Tags: css,html,hash,gallery,href

Problem :

I have been struggling with a problem for a while now. I've made a simple html gallery using CSS and a # href to essentially swap out different div ID's containing gallery images. The problem is that when you select the "next" or "previous" buttons in the gallery it jumps the page up in the browser so the gallery is aligned at the top of the page. Does anybody have any ideas how to prevent this?

Here is what the code for the gallery looks like:

<div id="pic1">
<img src="click/pic1.jpg" alt="" />
<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
</div>
<div id="pic2">
<img src="click/pic2.jpg" alt="" />
<a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"> <b>Next</b></a>
</div>
<div id="pic3">
<img src="click/pic3.jpg" alt="" />
<a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
</div>
<div id="pic4">
<img src="click/pic4.jpg" alt="" />
<a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5">  <b>Next</b></a>
</div>
<div id="pic5">
<img src="click/pic5.jpg" alt="" />
<a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
</div>
<div id="pic6">
<img src="click/pic6.jpg" alt="" />
<a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
</div>
<div id="pic7">
<img src="click/pic7.jpg" alt="" />
<a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
</div>
<div id="pic8">
<img src="click/pic8.jpg" alt="" />
<a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
</div>
<div id="pic9">
<img src="click/pic9.jpg" alt="" />
<a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
</div>
<div id="pic10">
<img src="click/pic10.jpg" alt="" />
<a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1">  <b>Next</b></a>
</div>

Any help would be greatly appreciated!



Solution :

You will need to use JQuery after you set

<a class="previous" href="javascript:void(0);">Next</a>

then call the JS:

$(document).ready(function(){

    $('a.previous').click(function(e){
        var picID= parseInt($(this).parent().attr("id").substr(3));//gets the pic id count
        $("#pic"+(picID)).hide(); //hide the current div
        $("#pic"+(picID-1)).show(); //show the previous div
    });

    $('a.next').click(function(e){
        var picID= parseInt($(this).parent().attr("id").substr(3)); //gets the pic id count
        $("#pic"+(picID)).hide(); //hide the current div
        $("#pic"+(picID+1)).show(); //show the previous div
    });

});

see: http://jsfiddle.net/uZ6g5/


    CSS Howto..

    How to alter CSS properties using PHP based on a conditional

    How do I update an div css to display an complete image when section is complete?

    How can I completely cancel a class when a CSS media style is used?

    How do I make my website’s layout work gracefully with different browser window sizes, like Tumblr does?

    How to Make Glossy Colors in CSS. [closed]

    How to fix responsive drop down menu using css?

    How to add an image toward the right of a textbox and the text not overflowing to it

    How to call am (image) div inside of a list?

    How can I make LIs push their siblings to the same height?

    CSS (Fixed width right, fluid left, left is first in html) How do I keep left div from collapsing?

    How to stop all CSS overrides on a container DIV?

    How to ensure that the css border goes inside the image

    element doesn't show padding in Opera, Safari, IE

    How to center text in the middle of the responsive circle, (text is responsive too)?[css/html only]

    How to declare JavaScript and CSS XHTML-compatible?

    how to change li last anchor color

    how do I override user agent — using buttons from angularjs

    How does Google Web Fonts decide which version of a font to provide to my browser?

    How can I create a CSS arrow, which scales to the size of the containing div?

    How to put bull inside css circle

    Bootstrap: user agent css styles misbehaving how to solve this

    How to change inline css using jquery in joomla

    Skeleton CSS - how to span the width of the screen?

    How to inline the contents of an entire stylesheet with Wordpress?

    How do I add CSS (transition) to an item from a SVG file? [duplicate]

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    How do you center align inline elements inside an html div?

    How to select the last element within an element regardless of type in CSS?

    How to float elements in rows.

    How to center child divs along each side of a parent div