Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post

    Add class to body to randomize background via CSS

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    ajhauser (01-18-2013)

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    ajhauser (01-18-2013)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    ajhauser (01-18-2013)

  • #5
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    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)..
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    ajhauser (01-18-2013)

  • #7
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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.

  • #8
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •