Recreating Return True’s Sliding Header Using jQuery

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:

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

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.

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.

written by

WordPress wizard, coding ninja and all round cool guy. Loves Sci-Fi, geeky stuff, and of course Firefly. Currently a self confessed addict of Korean & Japanese Pop.

Advertisement

19 Comments

Author’s gravatar

Another awesome tut Paul. Thanks so much!

Reply
Author’s gravatar

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. :P

Author’s gravatar

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.

Reply
Author’s gravatar

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:

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

Author’s gravatar

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

Reply
Author’s gravatar

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:

Author’s gravatar

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.

Author’s gravatar

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’s gravatar

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:

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.

Author’s gravatar

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’s gravatar

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.

Author’s gravatar

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

Reply
Author’s gravatar

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).

Author’s gravatar

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’s gravatar

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. :)

Author’s gravatar

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:

and this to my functions.php:

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

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

Reply
Author’s gravatar

Is the line your having trouble with:

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.

Author’s gravatar

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.

Reply
Author’s gravatar

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">