I suggest you to use the toggleClass and your code should look like
this
$('#tn-loading').toggleClass('hide');
$(document).ready(function() {
$('#tn-loading').toggleClass('hide');
});
.hide{ dispaly:none;}
so let me explain it this way , we first apply the .hide to the tn-
loading, and when the page is loaded we toggle it so the display will
be block.
try to use efficient you don't have to have multiple classes
On Jan 17, 9:01 am, jQuery Lover <ilovejqu...@gmail.com> wrote:
> Saif, do you have a point or is this spam?
>
> MorningZ, I am sure you did not have time to go into much details just
> like me with my first post :)
>
> Christine, MorningZ suggested (IMO) the best way to do it. Just keep
> in mind those users that do not have js enabled. Add some id or class
> to your <body> tag USING JAVASCRIPT. For example a "js" id and in your
> CSS add rules that make your blocks display none.
>
> #js .tn-hide{
> display:none;
>
> }
>
> This will make sure those users with js disabled will ALSO see your
> hidden blocks.
>
> PS. It's surprising how many company system administrators disable js
> in browser for security sake.
>
> ----
> Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
>
> On Sat, Jan 17, 2009 at 8:16 PM, Saif ullah <saifullahha...@gmail.com> wrote:
> >http://tinyurl.com/8rwmkr
>
> > On Sat, Jan 17, 2009 at 8:13 PM, MorningZ <morni...@gmail.com> wrote:
>
> >> Why not do it with CSS? where css class "tn-loading" has "display:
> >> none" declared
>
> >> <div class="tn-hide tn-loading">
> >> Content you are hiding until document "ready"
> >> </div>
>
> >> then
>
> >> $(document).ready(function() {
> >> //Do some stuff here
>
> >> //Done doing stuff, show the content
> >> $('tn-hide').removeClass('tn-loading);
> >> });
>
> >> On Jan 16, 11:53 pm, "Christine Masters" <cmast...@townnews.com>
> >> wrote:
> >> > Hi everyone!
>
> >> > I'm a jQuery newbie, so I apologize if this is an easy question!
>
> >> > I'm building a template for newspaper sites, and by nature of having
> >> > many
> >> > ads and modules and so forth, the content loads before the jQuery that
> >> > styles it, leading to a flash of unstyled content.
>
> >> > So, on several of my modules that use a lot of jQuery, I'd like to hide
> >> > them
> >> > until they are loaded.
>
> >> > Right now, I'm trying to do this:
>
> >> > $('tn-hide').css('display', 'none').addClass('tn-loading');
>
> >> > $(document).ready(function() {
> >> > $('tn-hide').css('display', 'block').removeClass('tn-loading);
>
> >> > });
>
> >> > I'd like to be able to simply apply the 'tn-hide' class to any module
> >> > I'd
> >> > like to hide until loaded on the page.
>
> >> > It is my (limited) understanding that the first line will go into effect
> >> > when the DOM is ready and the second when the document is ready.
>
> >> > Anyway, right now it isn't working. I'd appreciate it if you could give
> >> > me
> >> > any insight on this or let me know if I'm heading in the right
> >> > direction.
>
> >> > If it helps, here is my page:http://blueprints.townnews-cms.com/
>
> >> > ---------------------------------------------------------------------------
> >> > -
> >> > Christine Masters, Product Manager, TownNews.com
> >> > cmast...@townnews.com | 1-800-293-9576 x1022
> >> > Twitter: c_masters
>
> >> > ---------------------------------------------------------------------------
> >> > -
