How to properly hide a div on page load?

[shawng]

I’m working on a small project where I am moving the wp_admin_bar inside a div that is actually collapsed on page load with the following function. I have to place this function in the bottom of the footer.php file so that it loads after the wpadminbar built in js loads.

The problem I am having is that when the page first loads you are able to see the wpadminbar flash on the top of the screen prior to it being moved into the #sites div.

How do I change the following code so that the user cannot see the wpadminbar div loading into the sites div on page load?

I use the following code actually hide the #sites div itself:

function sitesDrawer() {



var closeWidget = jQuery("Close");

jQuery('#sites .wrap').append(closeWidget);





jQuery("#sites .close, .switch a").click(function(){



if (jQuery('.switch a').hasClass("open")) {

jQuery("#sites ").slideToggle("fast","swing");

jQuery('.switch a').removeClass('open');

} else {

jQuery("#sites ").slideDown("fast","swing");

jQuery('.switch a').addClass('open');

}

return false;

});

}

I trigger the div dropdown with the following link:

Quick Links

The html is simple enough. This is at the top of my page

thanks for any help

[shawng]

I have this in the header of my theme #wpadminbar { display:none; }

That should be loading before anything else. I think the problem is that wp is inserting the wpadminbar so timing the firing of display:none and holding that during the wpadminbar js load is where I think it is getting stuck

[shawng]

got it solved, by forcing it hidden then adding js to display block

[shawng]

No idea how to mark this as resolved…

[Author]

Posts