How to stop JQuery Animate function from moving entire page


Tags: jquery,css,html,scroll,jquery-animate

Problem :

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!



Solution :

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( $ ) {} );


    CSS Howto..

    How do I inspect CSS pseudo classes with firebug?

    How to keep website footer at bottom even when page expands downwards

    How to handle horizontally uneven navigation in CSS?

    How could I make a menu dropdown on click

    How does one implement dark/transparent text-boxes?

    How do you align the vertical center of text to the vertical center of an image?

    How do I make LessCSS output css which is then uploaded to webserver

    How can i align the text in center of a row in css?

    How to make simple_form input field wider with CSS?

    How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?

    CSS - How to have 100% height element inside of parent

    How to hide or show correctly page element (with media query of pure css)?

    How to include more than one .css file in ASP.NET page?

    How to spread elements evenly (horizonatly)?

    How to adjust progress bar with Jquery?

    How to center div and ul using CSS?

    How to place a footer at the bottom of a page in CSS?

    How to draw a CSS petagon with all borders radius?

    How to attach stylesheet to HTML email?

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How to select classes that are not nested? CSS

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to get a css animation to transition quicker in keyframes

    How to make CSS (or JS?) hideable help bar

    How to read inline styling of an element?

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    How to style input type file using css

    how to fix height:auto css

    how does the path work in css and js