Add class to body to randomize background via CSS

ajhauser · 01-17-2013, 09:58 PM

Hey all, I was hoping to get some help with this one. How would I add a class (which will be randomized) to my body tag if the initial class is either "templateCollection" or "templateProduct"?

So for example, IF my body tag looks like this:

Code:

<body class="templateProduct">

Add a class to it:

Code:

<body class="templateProduct randomizeBackground">

I'm open to suggestions on this one...

I tried using the following type of JS, but I can't seem to get anywhere with it:

Code:

<script type="text/javascript">document.getElementsByTagName('body')[0].className+=' randomizeBackground'</script>

Thanks!

Old Pedant · 01-17-2013, 10:25 PM

Your script should have worked. Well, except it would do it to all pages, no matter what the initial class name.

But only if you put it *AFTER* the </body> tag in your page.

Try this:

Code:

</body>
<script type="text/javascript">
var cn = document.body.className;
if ( cn.indexOf("templateCollection") >= 0 || cn.indexOf("templateProduct") >= 0 )
{
    document.body.className+=' randomizeBackground';
}
</script>
</html>

felgall · 01-18-2013, 01:20 AM

Only head and body tags are allowed directly inside the html tag. The script tag should actually come immediately before the </body? tag not after it. You can reference the body tag from there even though the </body> tag hasn't been read yet at the time the script starts loading - as it definitely will have been read by the time the script starts running.

Old Pedant · 01-18-2013, 01:29 AM

Interesting. I recall *YEARS* ago having trouble with MSIE (probably MSIE 4, but maybe 5) when I tried to alter the <body> before the </body> tag. Whereas putting the script after the </body> worked.

But I'll readily believe that was a "once upon a time" MSIE quirk.

ajhauser · 01-18-2013, 04:07 AM

Ok that would explain why FFox was highlighting the script tag bright red in my source code - I'll move it and try again at work tomorrow. Right now it is outputting the right value when I set that variable to be displayed in an alert ("templateCollection"), so that's a step in the right direction.

But my new class is still not getting added in.

Baby steps - this is further than I got earlier today so I'm happy. Any further suggestions would be appreciated. Thank you both.

felgall · 01-18-2013, 07:32 AM

Quote:

Originally Posted by Old Pedant

Interesting. I recall *YEARS* ago having trouble with MSIE (probably MSIE 4, but maybe 5) when I tried to alter the <body> before the </body> tag. Whereas putting the script after the </body> worked.

It was after that was fixed that scripts could be moved from the head to the bottom of the body with the onload event handler becoming almost obsolete. It certainly isn't a problem in IE6 or any browser more recent than that (and I don't remember it being a problem in IE5 either but may be mistaken)..

ajhauser · 01-18-2013, 04:04 PM

Ok, so the script does run and output the class name in text correctly - so that's good. However, I can't get an additional class tag added for some reason.

Earlier today someone in the Shopify Forums suggest I try a jQuery snippet as follows:

Code:

<script type="text/javascript">
var classes = ['foo', 'bar'];
$("body.templateIndex").addClass(classes[Math.floor(Math.random() * classes.length)]);
</script>

But still... no dice. If it helps, the page i'm working on is located here:

http://lmktechnologies.myshopify.com/

Pass: "rofrur"

Any ideas would really be appreciated.
Thank you.

ajhauser · 01-18-2013, 04:37 PM

It has to be some bonehead move on my part, like a " instead of a ' or something... here are 2 very minimal html docs, with the suggested jQuery and JS options, and I can't seem to get either of them to work and add a class to the body tag.

Javascript EX:
http://www.lmktechnologies.com/TEST/...ipt-test1.html

JQUERY EX:
http://www.lmktechnologies.com/TEST/jquery-test1.html

Hopefully this helps us narrow it down... my brain is broken...