CODEWITHSUNDEEP
javascriptjquery
Edu Ruiz
Edu Ruiz

Reputation: 1877

Issue with a link behavior on jquery, e.preventDefault not working?

I'm learning Jquery and having some little problem with a piece of code... Here it is:

$('.product-box .thumb a').click(function(event) {
    event.preventDefault();
    src = $(this).find('img').attr('src')
    $('.products .product-box .image img.principal').fadeOut('fast', function() {
        $('.products .product-box .image img.principal').attr('src', src);
        $('.products .product-box .image img.principal').fadeIn('fast');
    });
    $('.products .product-box .zoom a.principal').attr('href', src);
});

And here is the HTML:

  <div class="product-box">
    <div class="image">
      <img src="<?php echo $FOTO; ?>" class="principal" alt="<?php echo $NOME; ?>">
      <div class="zoom"><a class="fancybox lupa principal"  rel="group" href="<?php echo $FOTO; ?>">ampliar</a></div>

      <div class="thumb">
        <a href="#"><img src="http://fernandonagao.com.br/img/logo.png" alt="<?php echo $NOME; ?>"></a>
        <a href="#"><img src="<?php echo $FOTO; ?>" alt="<?php echo $NOME; ?>"></a>
        <a href="#"><img src="<?php echo $FOTO; ?>" alt="<?php echo $NOME; ?>"></a>
      </div>

    </div>
    <div class="desc-prod">
      <h1><?php echo $NOME; ?></h1>
      <p>
        <?php echo $DESC_PRODUTO; ?>
      </p>
      <span><!-- R$ --> <?php echo $VALOR; ?></span>
      <!--<span>Cores Disponíveis:</span>
      <div class="color" style="background-color:#dc5f1b"></div><div class="color" style="background-color:#89ca06"></div><div class="color" style="background-color:#d3bb8c"></div><div class="color" style="background-color:#ce925a"></div>-->
      <span class="voltar"><a href="produtos.php?categoria=<?php echo $categoria; ?>">< Voltar às Categorias</a></span>
    </div><!-- desc-prod -->
  </div><!-- product-box -->

So, I want to fade a image on the product, put the src in the right place as you can see here everything goes fine, except that the page act with a link behavior, and focus the window on the top, and I don't know why. First I tried the same code without the link, just with the images, and the same thing happened. Some ideas?

Thanks!!!

Upvotes: 1

Views: 443

Answers (3)

pimvdb
pimvdb

Reputation: 154818

The navigation is prevented, but you fade out the image, which eventually hides it from the page. When the area of the image is visually removed, the page will automatically scroll to the top, because the page becomes less high. After that you fade in the new image, but the necessary scrolling has already happened.

What you want is wrapping the image in a container (e.g. a <div>) with a fixed size, so that the container keeps its size. That way, no scrolling will happen, because the container keeps taking up space even if the image inside is hidden. It looks like you have applied padding to the image, though. You'd be best off moving this to the container as well, so that the padding is also persistent during the transition.

Upvotes: 1

Ayyash
Ayyash

Reputation: 4399

e.preventDefault alone is not good enough, you should return false at the end

Upvotes: 0

coolxeo
coolxeo

Reputation: 563

Eduardo,

Try to change your code from

$('.product-box .thumb a').click(function(event) {

to

$('.product-box').delegate('.thumb a', 'click', function(event) {

In jQuery is important WHEN the code is executed, for general rule, you need to wait for document load

$(function(){
  // put your code here
});

Upvotes: 1

Related Questions