I'm trying to imitate the effect on this website when you click the "RSVP" link. The effect is a hidden DIV effect where if you click the RSVP link, the main menu will come down and reveal the hidden DIV.
Here is my website.
I have tried to copy the structure of the div's and JQuery exactly, but no luck so far. All the RSVP link does is scroll the website up, but I need it to push the header down so the other div will show up. I matched all of the ID's with the JQuery so I am at a loss. I am a beginner with JQuery so I am not sure if I need to change anything. Here is the Header.php that is calling the JQuery. Sorry guys this is my first time using Stack so I don't know if I was supposed to paste in all of my source code.
If you use firebug to disable the 'top:-115px;' css line you should be able to see what is supposed to appear:
#header {top: -115px !important;}
Also, it might be worth mentioning that this is a wordpress theme so the structure is made up of .php pages.
....
<!--Jquery-->
<script type="text/javascript" src="http://mktietheknot.com/wp-content/themes/Retro/js/copycat/default.js"></script>
</head>
<body <?php body_class(); ?>>
<!-- BEGIN HEADER -->
<div id="header" class="open" style="top: 0px;">
<div class="wrap">
<div id="rsvp">
<div class="inside">
<h1 style="font-family: 'Arvo'; display:block;">RSVP</h1>
<form id="rsvp-form" action="/wp-content/themes/Retro/rsvp-process.php" method="post">
<div class="another-wrap">
<div class="input-wrap">
<label for="name">Your Name:</label>
<input class="text" name="name" id="name" type="text">
</div>
<div class="input-wrap">
<label for="guest-names">Name of Guest(s): <span class="fineprint">optional</span></label>
<input class="text" name="guest-names" id="guest-names" type="text">
</div>
<div class="input-wrap">
<label for="number-attending"># Attending:</label>
<input class="text" name="number-attending" id="number-attending" type="text">
</div>
<input class="submit" name="submit" value="Submit" type="submit">
</div>
<p><span style="color:#000000;">For any question please Email: </span>
<a href="mailto:test@gmail.com">test@gmail.com</a></p>
</form>
<a href="#rsvp" class="rsvp-link">Close</a>
</div>
</div><!--EndRSVP-->
<div class="section_inn" align="center"><!--NotOriginal-->
<div id="menu">
<ul id="nav" class="nav">
<li class="first">
<a href="<?php echo home_url(); ?>/#about_section">
<?php echo retro_filter( get_theme_option('about_label') ); ?></a>
</li>
<li class="second">
<a href="<?php echo home_url(); ?>/#portfolio_section">
<?php echo retro_filter( get_theme_option('portfolio_label') ); ?></a>
</li>
<li class="third">
<a href="<?php echo home_url(); ?>/#blog_section">
<?php echo retro_filter( get_theme_option('blog_label') ); ?></a>
</li>
<li id="nav-rsvp" class="last">
<a href="#rsvp">RSVP</a>
</li>
</ul>
<div class="clr"></div>
<?php if ( get_theme_option('logo') ) : ?>
<!-- Logo -->
<div id="top_logo">
<a href="<?php echo home_url(); ?>/#home_section">
<img src="<?php echo get_theme_option('logo'); ?>" alt="" /></a>
</div>
<?php endif; ?>
<div class="clr"></div>
</div><!--EndMenu-->
</div><!--EndSectionInn-->
</div><!--EndWrap-->
</div><!--EndHeader-->
And here is the JQuery itself:
$(document).ready(function() {
jQuery.timer = function(time,func,callback){
var a = {timer:setTimeout(func,time),callback:null}
if(typeof(callback) == 'function'){a.callback = callback;}
return a;
};
jQuery.clearTimer = function(a){
clearTimeout(a.timer);
if(typeof(a.callback) == 'function'){a.callback();};
return this;
};
// RSVP Form Submit
$('#rsvp .submit').click(function(){
$('#rsvp .submit').hide();
});
$(function(){
$("#rsvp-form").submit(function(){
dataString = $("#rsvp-form").serialize();
$('#rsvp-form .error').remove()
//var form_html = $("#rsvp-form");
//console.debug(form_html);
//$('#rsvp-form').fadeOut();
$.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;
});
});
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
$('#nav-rsvp a').unbind();
$('#nav-rsvp a, .rsvp-link').click(function(){
if ( $('#header').hasClass('open') ) {
$('#header').animate({
top: '-=115'
}, 750, 'easeInOutCubic');
$('#header').removeClass('open');
}
else {
$('#header').animate({
top: '+=115'
}, 750, 'easeInOutCubic');
$('#header').addClass('open');
}
return false;
});
});
