A jQuery slider on cookies
As you’ll probably have noticed, the homepage of my site featues a “recent project” box that can be closed with a little jQuery sliding effect. I allready planned that feature in the previous version, but found it extremely annoying becasue with every refresh, it would open again. A while back I found this article on ifohdesigns and decided to use it to implement the sliding box again in my site, though this time, it would stay closed.
However, the script started off from a hidden div that you want to show, instead of hiding a box that’s there. I started fiddling with it and before I knew it, I broke it. Nice going, Bram. Smooth.
The script was completely unobtrusive, which means there’s no javascript in your actual html. That part I really liked, but the script had some major downsides too: if you knew nothing about jQuery, you had to use the accompanying HTML else it wouldn’t work either. So I decided to rewrite the whole thing and make my own script! Still, credit to ifoh designs for coming up with the idea!
So what do you need to get it working in the first place?
Let’s start off with some basic HTML. What we need is a box to hide and a link to hide it! I’m just pasting something here, but you can offcourse whip up something yourself!
(I’m not gonna post the html in here, just visit the links and view the source)
When you click the hide link now, you can see nothing happens. You’re simply taken to the same page with a # behind it. We’re gonna fix that now! Let’s add some jQuery love, like you would before you read this.
As you can see, our script now works! Yes! When you click the link, the #box div closes. Click it again, and there it is again! Merely toggling away.
How does it work, you might ask?
As simple as that. But you knew that offcourse.
However, there are some downsides to the current version.
- Close it and then hit refresh. It’s open again.
- Once you click it, you end up with # at the end of your url. Not the pretiest thing.
- Close it. See how our link stays exactly the same?
- Imagine we want to start off with our box hidden. Changing the CSS to display:none is easy now, but imagine you gotta start digging through 100 of lines of CSS.
But, no worries because all those things are covered with this script!
All our previous downsides are now fixed. Our box stays closed, there’s no # at the of the url, no matter how many times you click the link. The text of the link even changes and a class is added if you want to add different styling. Even the fourth downside is covered in the script!
So how does it look?
Paste that lot in your <script> tags (you could offcourse put it in a separate .js file), change the configuration at the top to your needs and you’re good to go!
Move on to the next page if you want to know how the whole thing works.
Pages: 1 2
Sir Ali
Sep 6th 2008
2:57 pm
Reply
That’s pretty useful man!
I was wondering if there’s a trick to it vice versa?
Like if you have a long list of names and you want to view the rest of it by clicking “more…”.
Bram
Sep 6th 2008
3:04 pm
Reply
Sure, just put the “more…” in a div, set up the slider but change initialState into collapsed!
Sir Ali
Sep 6th 2008
3:09 pm
Reply
Cheers man. I will keep that in mind as I will need it in an upcoming site I’m working on.
Matt
Sep 6th 2008
11:42 pm
Reply
Thanks for the credit, and hey, if this works better for you, more power to you. I am just concerned though about the link for “hide” if JS is disabled it does not function? Maybe if you created the link with jQuery as well, and added it in, then it would be more accessible.
Bramme.net » Addition to jQuery slider
Sep 10th 2008
9:01 am
Reply
[...] few days ago I posted a script that allowed you to create a jQuery slideToggle that would remember it’s last state throughout page reloads. The original idea came from Matt [...]
Dennis Smolek
Sep 12th 2008
10:32 am
Reply
Im a bit of a newb to JQuery but I think a different approach would also work for Sir Ali.
The main drawback that I see is separating your content with multiple DIVs for the “more” content. Perhaps if your name container height was static and your list was not very long and of course not dynamically loaded.
I can see a real hassle in loading a table of information in PHP and then writing another table in a second div. As a PHP coder more so I would look for a solution there.
What I would suggest doing is create a div with a preset height and simply use the Animate method with a expanded height and overflow:hidden the rest. The height could be dynamic as well you could place a inner wrapper DIV and pull its height attribute from the DOM.(NOTE: I think simply using 100% would also work)
Then put another DIV below with your anchor that activates the code, use the same switching method used here and blam!
The first div would be set at whatever height you want, with the content inside that goes beyond that(its overflow) hidden. Once you click the anchor, the height is “animated”. JQuery treats animate the same and would revert to the other height within the same command just like toggle.
Just my .02
tom
Sep 30th 2008
9:46 pm
Reply
Great Work!! it s a pretty cool script.
I noticed that it runs well on FF, but doesnt seem to run on IE6?
Do you what need to be changed or modified to make it run on IE6?
Thanks
Ben
Oct 29th 2008
11:06 am
Reply
This is great work! Works great in FF and IE7.
Im also having some issues in IE6. Will you be releasing a fix for it?
Thanks
James
Jan 2nd 2009
2:26 pm
Reply
I think the IE6 problem could be related to jquery cookies, I’ve been trying to get around it this morning but no luck yet!
God damn you IE6.
http://www.porcelaindev.co.uk