CODEWITHSUNDEEP
css
user34537
user34537

Reputation:

Conditional CSS?

Maybe not and I need to do this in HTML but is there a way to write

if($('.Name1 li').length>2) $('.main').css('k', 'v');

I did this in JS and if I am loading the page for the first time I see a noticeable pop happen. Its not 'bad' but I do 'notice' it.

Upvotes: 2

Views: 433

Answers (4)

hollsk
hollsk

Reputation: 3137

Unfortunately you're always going to get this flash of unstyled content whenever you do this kind of class setting with javascript since the JS is loaded after everything else on the page.

Without knowing what specifically you need to achieve, some suggestions would be to use some kind of placeholder CSS on the offending elements (setting a width / height / colour / whatever it is you need) to try to mitigate the effect. You can also try to mitigate it by making sure your page is optimised as much as you possibly can, so give it a run through with yslow and see if there are any speed improvements you can make.

The only other (and best) way would be to use klew's suggestion and insert the class server-side instead of waiting until the DOM has loaded for JS to do its stuff.

Upvotes: 1

klew
klew

Reputation: 14977

It would be better if you check this condition on server side (php, ruby, C#, python, whatever) and assign some class then.

Upvotes: 7

Carl Smotricz
Carl Smotricz

Reputation: 67820

Something similar is or will soon be possible using JESS, a framework combining CSS with JavaScript for, umm, "dynamic styling." I haven't looked at it in dept myself yet, but it may be worth a look for people interested in this sorta thing.

Upvotes: 1

You
You

Reputation: 23834

CSS is not a programming language, it is not designed to interact with HTML in this way.

Upvotes: 4

Related Questions