「RSVP」リンクをクリックしたときのこの Web サイトでの効果を模倣しようとしています。この効果は非表示の DIV 効果で、RSVP リンクをクリックするとメイン メニューが表示され、非表示の DIV が表示されます。
ここに私のウェブサイトがあります。
div と JQuery の構造を正確にコピーしようとしましたが、今のところうまくいきません。RSVP リンクは Web サイトを上にスクロールするだけですが、他の div が表示されるようにヘッダーを下に押す必要があります。すべての ID を JQuery と一致させたので、途方に暮れています。私は JQuery の初心者なので、何かを変更する必要があるかどうかわかりません。JQuery を呼び出している Header.php を次に示します。申し訳ありませんが、スタックを使用するのはこれが初めてなので、すべてのソース コードを貼り付ける必要があるかどうかわかりません。
firebug を使用して「top:-115px;」を無効にすると、css 行を見てみると、何が表示されるかを確認できるはずです。
#header {top: -115px !important;}
また、これはワードプレスのテーマであるため、構造が .php ページで構成されていることに言及する価値があるかもしれません。
....
<!--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-->
JQuery自体は次のとおりです。
$(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;
});
});