Recreating Return True’s Sliding Header Using jQuery

March 29, 2011 / Javascript, jQuery / by Paul Robinson / 19 Comments

This post was published back on March 29, 2011 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

The code to make the header work isn’t really that big. The HTML & CSS all depend upon your header. In my case you can see the HTML actually looks like this:

<div id="header">
	<div id="iLarge">
		<div id="intro">
			<p class="large">Hello, my<br />name is Paul.</p>
			<p>Welcome to Return True. I like messing with <a href="/category/html/" title="View all posts in the HTML category">HTML</a>, playing with <a href="/category/php/" title="View all posts in the PHP category">PHP</a>, experimenting with <a href="/category/css/" title="View all posts in the CSS category">CSS</a>, and fiddling with <a href="/category/jquery/" title="View all posts in the jQuery category">jQuery</a>.</p>
		</div>
	</div>
</div>

<p class="large">Hello, my<br />name is Paul.</p>

<p>Welcome to Return True. I like messing with <a href="/category/html/" title="View all posts in the HTML category">HTML</a>, playing with <a href="/category/php/" title="View all posts in the PHP category">PHP</a>, experimenting with <a href="/category/css/" title="View all posts in the CSS category">CSS</a>, and fiddling with <a href="/category/jquery/" title="View all posts in the jQuery category">jQuery</a>.</p>

</div>

Via CSS the background image is added and the height set to it’s starting height (which is closed). Like this:

#header {
    background: url("/wp-content/themes/returntrue/images/layout/iesquare.png") repeat scroll left top transparent;
    overflow: hidden;
    padding: 1px 0 0;
    width: 100%;
    height: 213px;
}

#header {

background: url("/wp-content/themes/returntrue/images/layout/iesquare.png") repeat scroll left top transparent;

overflow: hidden;

padding: 1px 0 0;

width: 100%;

height: 213px;

}

The 1 pixel padding is just to fix a bug with the margin in Firefox 3.6+.

jQuery Cookies

To remember if you’ve visited the site before we use the jQuery cookie plugin. We could use a bit of PHP but if you have a cache installed it doesn’t always work so I have found using jQuery to manipulate the cookie a lot easier. You can get the jQuery cookie plugin here.

The jQuery Code

Finally we can take a look at the jQuery magic that makes this happen.

jQuery(function($) {
	remember = $.cookie('rtHeader');
	open = false;
	$('#openclose').click(function () {
		if(open == true) {
			$('#header').stop().animate({ height: '213px'});
			open = false;
		} else {
			$('#header').stop().animate({ height: '594px'});
			open = true;
		}
	});
	if(remember == null) {
		$.cookie('rtHeader', 'true', { expires: 7, path: '/' });
		setTimeout(function() {
			$('#openclose').trigger('click');
		}, 500);
	}
});

jQuery(function($) {

remember = $.cookie('rtHeader');

open = false;

$('#openclose').click(function () {

if(open == true) {

$('#header').stop().animate({ height: '213px'});

open = false;

} else {

$('#header').stop().animate({ height: '594px'});

open = true;

}

});

if(remember == null) {

$.cookie('rtHeader', 'true', { expires: 7, path: '/' });

setTimeout(function() {

$('#openclose').trigger('click');

}, 500);

}

});

Okay. First we open the normal DOM ready method. Now we grab the data from our cookie, if it doesn’t exist it will come back as null. We also set open as false (because it’s closed to start).

Next we set our click event. It’s a simple switch. If open is true (our header is open) then run the closing animation and set open to false (because now it’s closed). Otherwise open is false (our header is closed) so open it and set open to true (because now it’s open).

Our last part checks to see if our cookie was null. If it was (as I said earlier) it hasn’t been created yet. So let’s create our cookie I name it ‘rtHeader’ with a value of ‘true’ and set it to expire in 7 days and set the path as the site root. Then we set a time out to open the header when the page finishes loading. This is as opposed to having it be open and then close after a period of time which I’m sure you can do by switching the code around a little.

That’s it. Let me know if you have any trouble implementing any of this, or you are stuck with something and I’ll get back to you asap. Also a small note for those waiting for an updated version of the ImageMagick in Timthumb hack. I’m having a few troubles with my install of ImageMagick at the minute so I’m afraid it will be a little later than planned. Sorry.

Header jQuery Sliding

Paul Robinson

WordPress plugin & theme developer, user of Laravel and learner of React.js. Can usually be found listening to Japanese, and Korean Pop or Vocaloid music while developing.

19 Comments

Another awesome tut Paul. Thanks so much!

author

No problem. 😉

I was going to add some pictures into it but I don’t think it needs it. Trying to be more illustrative with my tutorials, having a graphic designer as a sister helps though. 😛

Great article Paul! I have two, hopefully simple questions.

1.) How can I make the drawer appear closed (instead of open) upon site arrival?

2.) How Could i make the content in the drawer fade in after opening?

Thanks again for the neat tips.

author

Hi Dan,

You would just set the initial CSS height for your header element to the height when it is closed. You would also need to take out the part that uses the cookie.

You would need to use the callback function inside the animation command for when it opens. So something like:

$('#header').stop().animate({ height: '594px'}, 500, "linear", function() {
    $('#content').fadeIn();
});

$('#header').stop().animate({ height: '594px'}, 500, "linear", function() {

$('#content').fadeIn();

});

You’d have to set your content to display none though.

Ok…Thank you. I will give it a shot in the next few days and let you know how things go.

Hi there Paul.

That actually seemed to work, although the fade only occurs the first time the panel slides open. Any other time, it is disregarded.

Here is the bit I’m working with:

$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
		$('#panel').stop().animate({ height: '400px'}, 500, "linear", function() {
    	$('.one-third').fadeIn(2000);
	});	 
});

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#panel").slideToggle("slow");

$(this).toggleClass("active"); return false;

});

$('#panel').stop().animate({ height: '400px'}, 500, "linear", function() {

$('.one-third').fadeIn(2000);

});

author

Hi Dan,

The code is actually running, but since the text had already been faded in, it does nothing. You would have to fade it out again when the header goes back up.

You could replace fadein with fadeToggle() as long as you are using jQuery 1.4.4 or higher. It works just like slideToggle, but for fades.

Hi Paul,

that did not seem to quite work…I’m still experiencing the one fade at first then nothing. Not to sure why. Is the code written correct?

author

Wait I just noticed. Your animate function is outside of your click event, plus you are already using slideToggle so why do you need to animate your header?

You code would probably be something like:

jQuery(function($) {
	open = false;
	$('#openclose').click(function () {
		if(open == true) {
			$('#header').stop().animate({ height: '213px'}, 500, "linear", function() {
				$('.one-third').fadeOut(2000);
   			 });
			open = false;
		} else {
			$('#header').stop().animate({ height: '594px', 500, "linear", function() {
				$('.one-third').fadeIn(2000);
   			 });
			open = true;
		}
	});
});

jQuery(function($) {

open = false;

$('#openclose').click(function () {

if(open == true) {

$('#header').stop().animate({ height: '213px'}, 500, "linear", function() {

$('.one-third').fadeOut(2000);

});

open = false;

} else {

$('#header').stop().animate({ height: '594px', 500, "linear", function() {

$('.one-third').fadeIn(2000);

});

open = true;

}

});

I think that should be what you are trying to achieve. You may want to swap around the fadeOut with it’s animation (the animate becomes the callback) so that the text fades out and them animates shut.

Hi Paul,

Thanks for the reply. For some reason this is still giving me issues. I’m essentially using this bit of JS to slide open a div in a drawer like fashion.

Here is the JS:

$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(500);
$(this).toggleClass(“active”); return false;
});
});

The sliding ‘drawer’ works just fine, however I would also like to fade the content in/out upon opening and closing. I tried the above suggestion with no luck.

Sorry for the confusion.

author

The code I posted above should do exactly that. You can’t do it using slideToggle because you need two separate callbacks. One when the draw opens to fade the text in, and one when the draw closes to fade the text out.

To solve that you have to create your own switching system which is all slideToggle (basically) does anyway. The callbacks are called when the draw animation has been completed. If you want them both to happen at the same time you would just append the text animation to your opening animation instead.

Nice one Paul. Wondering if this code is working with you on IE ? (Not working with me on IE)

author

Hi Waheed,

Which version of IE? IE 6 is a lost cause so I don’t bother checking for compatibility with that.

I don’t see why it shouldn’t work in IE though as the jQuery code used is just standard jQuery functions & jQuery takes care of most of the browser compatibility issues behind the scenes.

I can say for certain that it does work in IE 9. I can’t say for certain for any other version, but again as it’s standard jQuery animate functions it should work, even in IE 6 (possibly).

Hey Paul,
Am checking it in IE8 and IE7. Its not working in both and also showing some javascript error in status bar. “Object doesn’t support this action – Line 56 – Char 4”

author

Unfortunately IE has a very vague error system for JS. I’m not showing any errors in Chrome or Firefox though using their native debugging tools. I can’t check with IE8 or IE7.

I have a feeling though it may be because open is a command in IE7/8 try renaming all references to that variable to something else like say isopen and see if the error goes away.

I’m unable to test it so if you can tell me if that works I’ll update the post to match. 🙂

Hi Paul, I’m trying to implement the header but I’m having some troubles again. I read throughout all of your tutorials, but it seems I just can never figure out what goes where with jQuery. The HTML and CSS seem to be fine.

Could you have a look at what I’ve done? I added to my header.php this:

<head>

<?php wp_head(); ?>
<?php wp_enqueue_script( 'cookie', get_bloginfo('stylesheet_directory').'/js/jquery.cookie.js', 'jquery', '1.0' ); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.cookie.js"></script>

<?php jQuery(function($) {
	remember = $.cookie('rtHeader');
	open = false;
	$('#openclose').click(function () {
		if(open == true) {
			$('#header').stop().animate({ height: '213px'});
			open = false;
		} else {
			$('#header').stop().animate({ height: '594px'});
			open = true;
		}
	});
	if(remember == null) {
		$.cookie('rtHeader', 'true', { expires: 7, path: '/' });
		setTimeout(function() {
			$('#openclose').trigger('click');
		}, 500);
	}
});
 ?>

</head>
<body <?php body_class(); ?>>
<div id="header">
	<div id="iLarge">
		<div id="intro">
			<p class="large">Hello, my<br />name is Paul.</p>
			<p>Welcome to Return True. I like messing with <a href="/category/html/" title="View all posts in the HTML category">HTML</a>, playing with <a href="/category/php/" title="View all posts in the PHP category">PHP</a>, experimenting with <a href="/category/css/" title="View all posts in the CSS category">CSS</a>, and fiddling with <a href="/category/jquery/" title="View all posts in the jQuery category">jQuery</a>.</p>
		</div>
	</div>
</div>

<head>

<?php wp_head(); ?>

<?php wp_enqueue_script( 'cookie', get_bloginfo('stylesheet_directory').'/js/jquery.cookie.js', 'jquery', '1.0' ); ?>

<?php jQuery(function($) {

remember = $.cookie('rtHeader');

open = false;

$('#openclose').click(function () {

if(open == true) {

$('#header').stop().animate({ height: '213px'});

open = false;

} else {

$('#header').stop().animate({ height: '594px'});

open = true;

}

});

if(remember == null) {

$.cookie('rtHeader', 'true', { expires: 7, path: '/' });

setTimeout(function() {

$('#openclose').trigger('click');

}, 500);

}

});

</head>

<p class="large">Hello, my<br />name is Paul.</p>

</div>

and this to my functions.php:

function add_my_scripts() {
wp_register_script ('cookie', get_bloginfo('stylesheet_directory').'/js/jquery.cookie.js', 'jquery', '1.0');
wp_enqueue_script('cookie');
}
add_action('init','add_my_scripts');

function add_my_scripts() {

wp_register_script ('cookie', get_bloginfo('stylesheet_directory').'/js/jquery.cookie.js', 'jquery', '1.0');

wp_enqueue_script('cookie');

}

add_action('init','add_my_scripts');

I’m trying to implement them to a child theme on a WordPress MU installation. Perhaps that’s the problem, because earlier I did manage to add jQuery, including those from your tutorials, to parent themes on single WP installations.

I get this error:

Parse error: syntax error, unexpected T_FUNCTION, expecting ‘)’ in /wp-content/themes/xxx/header.php on line 14

Line 14 is

 jQuery(function($) {

1	jQuery(function($) {

I wonder if I haven’t put the jQuery related code in too many places?

author

Is the line your having trouble with:

<?php jQuery(function($) {

1	<?php jQuery(function($) {

If so you don’t need the entire jQuery block inside PHP tags. It’s the only thing I can think of that would cause an error like that.

Hi Paul,

This is great and so easy! My only question is whether there is a way to have the header appear at the end of a div rather than at an exact pixel height down.

My initial div on the site I am working on is using a jquery command to make it’s height based on the window height. I’d like it to appear at the end of that div.

check it out: http://www.agencydj.squarespace.com

Thanks & I hope you are feeling better.

I have Gerd and Gastritis and it’s a real doozey so I can relate.

author

Hi Kim,

I am feeling much better, thank you.

I’m not sure I understand. If you mean can you have the header slide down a distance determined by another element, then you can. You would use jQuery to get that elements position & have the header slide to that position.

I’m guessing I’ve totally missed what you are looking for though. :s

Older Comments

Newer Comments

Recreating Return True’s Sliding Header Using jQuery

jQuery Cookies

The jQuery Code

19 Comments

kathy

Paul Robinson

Dan

Paul Robinson

Dan

Dan

Paul Robinson

Dan

Paul Robinson

Dan

Paul Robinson

Waheed Akhtar

Paul Robinson

Waheed Akhtar

Paul Robinson

Sylwia

Paul Robinson

kim kirby

Paul Robinson

Leave a Reply Cancel reply

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.

jQuery Cookies

The jQuery Code

Follow Me

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.