CODEWITHSUNDEEP
javascriptjquery
Bato Dor
Bato Dor

Reputation: 841

drops to the top of the page

i don't want to be dropped to the top of the page when i push the link, what can be the problem? here is the html:

<div style="clear:both;">
<a rel="/documents/templates/bilgiteknolojileri/images/cin/1.jpg"  class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t1.jpg" class="thumb" border="0"/></a>
<a rel="/documents/templates/bilgiteknolojileri/images/cin/2.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t2.jpg" class="thumb" border="0"/></a>
<a rel="/documents/templates/bilgiteknolojileri/images/cin/3.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t3.jpg" class="thumb" border="0"/></a>
<a rel="/documents/templates/bilgiteknolojileri/images/cin/4.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t4.jpg" class="thumb" border="0"/></a>
<a rel="/documents/templates/bilgiteknolojileri/images/cin/5.jpg" class="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/t5.jpg" class="thumb" border="0"/></a>
</div>
<div id="image"><img src="/documents/templates/bilgiteknolojileri/images/cin/1.jpg" border="0"/></div>

here is the javascript:

$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
 });
});

when i push the link, the big image have to be changed, it changes, but after this it drops to top of the page... how to solve it? even tried to use anchors, didn't help, and added javascript:void(0)

Upvotes: 1

Views: 92

Answers (3)

unclenorton
unclenorton

Reputation: 1625

Why do you use rel attribute instead of href? This way, you leave the users who don't have javascript enabled without an option to see all the pictures.

But your problem here is that your div container of the image resets to zero height each time, so the page resizes for a moment, causing jumping. It is also a good idea to wait until your new image is loaded before trying to show it.

Anyway, I would suggest such code (available at http://jsfiddle.net/4tV4E/1/):

HTML:

<div style="clear:both;">
<a href="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/1.jpg"  class="image"><img src="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/t1.jpg" class="thumb" border="0"/></a>

<a href="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/2.jpg" class="image"><img src="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/t2.jpg" class="thumb" border="0"/></a>

<a href="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/3.jpg" class="image"><img src="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/t3.jpg" class="thumb" border="0"/></a>

</div>
<div id="img_container"><img id="big_picture" src="http://www.bilgiteknolojileri.net/documents/templates/bilgiteknolojileri/images/cin/1.jpg" border="0"/></div>

Javascript:

$(document).ready(function() {
    $('.image').click(function(event) {
        event.preventDefault();
        var imagePath = $(this).attr("href");
        var newImg = new Image;
        newImg.src = imagePath;

        newImg.onload = function(){
            $('#img_container').css({
                width: newImg.width,
                height: newImg.height
            });

            $('#big_picture').hide();
            $('#big_picture').attr('src', imagePath);
            $('#big_picture').fadeIn('slow');
        };
     });
});

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 817228

Not 100% sure ( return false should work imo), but you can also access the event object:

$(".image").click(function(event) {
    event.stopPropagation();
    event.preventDefault();
    var image = $(this).attr("rel");
    $('#image').hide();
    $('#image').fadeIn('slow');
    $('#image').html('<img src="' + image + '"/>');
});

Reference: preventDefault, stopPropagation

Update: If this does not work, then it is probably because you don't set a value for the href attribute (I thought preventDefault would also prevent local jumps but maybe it does not?). Change rel to href and it should work with the code shown above.

Update 2: Another possibility that only requires a change in you HTML would be to add href="#image" to all of your links. This makes the browser jump to the div with ID image.

Upvotes: 1

Alin P.
Alin P.

Reputation: 44386

I method I used was to add href="#;". Being that the ; anchor (usually) does not exist the scroll won't change.

Upvotes: 0

Related Questions