How to stop JQuery Animate function from moving entire page

Question

I'm having trouble getting the animate function to only move the specified DIV. Instead, it moves the entire page. If you click "RSVP" on the link below you can see what I am talking about. I've tried switching it to call only certain ID's (ie .wrap vs #header) but it didn't do anything. How do you get it to only animate the header and not scroll anything else?

Here's my code. There's more to it, but I only included the JQuery that had fade/scroll properties:

  $.ajax({
    type: "POST",
    url: "http://mktietheknot.com/wp-content/themes/Retro/rsvp-process.php",
    data: dataString,
    dataType: "json",
    success: function(data) {
      if ( data.status == 'pass' ) {
        $('#rsvp-form').fadeOut(function(){

          $('#rsvp-form').html('<div class="rsvp-received">' +data.response+ '</div>').fadeIn(1000);

        });

        myTimer = $.timer(2500,function(){

          $('#rsvp .rsvp-link').click();

        });

      }
      else {

        $('#rsvp-form').append('<div class="error">' +data.response+ '</div>');
        $('#rsvp .submit').fadeIn('500');
        console.debug(data);

      }
    }
  });

  return false;            

  });
});

  $('#nav-rsvp a').unbind();
$('#nav-rsvp a, .rsvp-link').click(function(){
  if ( $('.wrap').hasClass('open') ) {
  $('.wrap').animate({
  top: '-=115'
  }, 750, 'easeInOutCubic');
  $('.wrap').removeClass('open');
  } 
  else {
  $('.wrap').animate({
  top: '+=115'
  }, 750, 'easeInOutCubic');
  $('.wrap').addClass('open'); 
}
return false;
});

})(jQuery);

Here is he complimenting CSS:

/* === Header Section === */
#header {
background:url(wp-content/themes/Retro/images/structure/body_bg.png) repeat-x scroll center bottom transparent;
padding: 0 0 13px;
position:fixed;
width: 100%;
z-index: 100;
}
#header .section_inn {
padding-top: 0;
background:url(http://mktietheknot.com/wp-content/themes/Retro/images/structure/body_bg_brown.png) repeat-x;
width: 100%;
height: 130px;
z-index: 1000;
}
#header .wrap {
background: none repeat scroll 0 0 transparent;
width: auto;
top:-115px;
}

Thanks guys!

Edit: I tried limiting the animation to 10px but the scroll length on the webpage remains the same. Interesting, this makes me think that the problem lies with the pre-existing JQuery that came with the Wordpress theme... — mikenonymous, Mar 19 '13 at 18:46

score 0 · Answer 1 · answered Mar 19 '13 at 17:34

0

Try animating the top style on #header. it will need to be animated to

#header {top:115px}

answered Mar 19 '13 at 17:34

Gavin Bruce

1,799
16
28

Thanks for the suggestion, I tried switching back to header, but it is still scrolling the page when you click on the link. – mikenonymous Mar 19 '13 at 18:29
what about #header { margin-top:115px } if i change the css using chrome's element inspector, it looks like it would work. #header is position:fixed so it shouldn't affect the rest of the page. – Gavin Bruce Mar 19 '13 at 19:47
i just checked it on firefox, safari and chrome on mac and its working correctly. – Gavin Bruce Mar 19 '13 at 19:49
also ok on win7/ie8, vista/ie7, win7/ie9, win8/ie10. – Gavin Bruce Mar 19 '13 at 19:55
Thanks for the due diligence Gavin, I appreciate it. I found the fix by accident, see comment up top. It was the jQuery onload syntax that was causing it to break. – mikenonymous Mar 19 '13 at 20:18

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I found the fix by accident. My JQuery file had a working onload from my previous question. See (my previous question). However, when I was messing my the default jquery file that the wordpress theme came with, I saw that their onload was a bit different. I tried changing it just for kicks and it fixed it. Not sure why, but it did.

The fix was changing (function($){})(jQuery); to

jQuery.noConflict();
jQuery( document ).ready( function( $ ) {} );

How to stop JQuery Animate function from moving entire page

2 Answers2