Comments on: Enhance your Blog Design with jQuery II

By: Sarah

Sarah — Mon, 27 Oct 2008 15:29:00 +0000

Hey Doug. The reason why you see the content initially is because the JavaScript doesn't activate until the page is loaded as it's browser side not client side. You can prevent it from showing by using CSS to not display the (eventually) hidden content on page load, however non JS users will not get to see the content at all which of course isn't a great idea.

It's unlikely you'll find any accessible JS solution that will have everything hidden on page load.

As for the Cookie, it's not too hard to use. If you look in my header.js file on my own site you'll see how I've used it. Feel free to grab the code and have a play I didn't go into that here as I just felt it a bit too advanced.

By: Doug

Doug — Mon, 27 Oct 2008 14:46:48 +0000

Hi Sarah–

Thanks for the tutorial. I'm trying to add expandable sidebar sections to my wordpress blog, and have been comparing the various jquery + mootools techniques.

I've noticed that some techniques –like the one in use on stuffbysarah.net (same as this tutorial, yes?)– display the hidden content while the page is loading and then snap it shut … it's as if the js instructions to hide the content aren't loaded until the end. I'm wondering if this glitch concerns you and if you have any solutions.

I'm looking for a technique that 1) doesn't have this glitch; i.e. hides hidden content from the very beginning of page load, 2) is lightweight, 3) works with nested lists, 4) is not true accordion (i.e. open a section doesn't close another open section; user must close section). ideally i'd add persistent states to the list but i'm not sure how to use the jquery cookie plugin.

–D

By: Sarah

Sarah — Mon, 13 Oct 2008 14:04:19 +0000

Si, I didn't actually do each individual one on my site if you check my source, but considering the post is designed for newbies to jQuery I wouldn't want to go into complex stuff like the stuff you wrote, considering I don't get it I was also aiming to not change the markup, just to show how jQuery can be used without interfering with the original markup.

But the additional code is always good for those who want to take it further

By: Si Philp

Si Philp — Mon, 13 Oct 2008 09:33:28 +0000

doh! and add the onclick="Showthis(object)" to the h3 element or just the [+]

By: Si Philp

Si Philp — Mon, 13 Oct 2008 03:03:00 +0000

Rather than adding each onclick event why not just create a function like:


 
function Showthis(object)
 
{
 
var inputObject = document.getElementById(object);
 
var undefined;
 
if(inputObject != undefined)
 
{
 
$(inputObject).slideToggle('slow');
 
}
 
}

Then something like

          
 
             Recent Posts [+]
 
             
 
             Post 1
 
             Post 2

By: TechZoomIn

TechZoomIn — Sun, 12 Oct 2008 11:07:18 +0000

Hey Sarah,

Good to see all these….

I have to plan my time to experiment on this.

Ofcourse i saw ur personal site .Good looking dude