ansaurus

Question

How Can I Add a Class to the Body Tag using jQuery?

Answer 1

A:

Regular javascript:

jQuery(document).ready(function(){
    var urlPath = window.location.pathname;
    document.body.className = urlPath.match(/\/(.*?)(\+|$)/)[1].toLowerCase();

});

slebetman 2010-01-07 03:29:27

So, I would include this before the </head> tag or before the </body> tag within the template file, and then copy your code above and insert it like this...<script type="text/javascript">document.body.className = window.location.pathname.match(/\/(.*?)(\+|$)/)[1];</script>Is that correct? Sorry, don't know too much about javascript. Know LOTS about CSS...

Spencer B. 2010-01-07 03:32:31

Yes, use in in the `<head>` tag inside a `<script>` tag wrapped in the jQuery ready function. Added the jQuery wrapper in the example for clarity.

slebetman 2010-01-07 03:34:59

Answer 2

A:

Not sure what your restrictions are in placing code. I would just put this in the <head> of your document and apply the class to the html element instead of body so you don't get a FOUS or "Flash of Unstyled Content". The class is "present" on the element almost immediately after the page loads, but before it displays if you do it this way:

<script type="text/javascript">
    var loc = window.location.pathname.match(/^\/?(\w+)\b/);
    // document.documentElement is the html element, this adds the class
    if(loc) document.documentElement.className += " " + loc[1].toLowerCase();
</script>

If you really want to use jQuery:

<script type="text/javascript">
    // jQuery is passed to the ready function as a parameter, so we alias it with $
    // This will work for you even with wikispaces
    jQuery(function($){
        var loc = window.location.pathname.match(/^\/?(\w+)\b/);
        if(loc) $(document.body).addClass(loc[1].toLowerCase());
    });
</script>

Doug Neiner 2010-01-07 03:36:15

Thanks, Doug. I tried your code above by inserting it into the <head>. I clicked on a different page within my wikispace and Viewed Source to see if a class had been attached to the <body> tag, and there was none. I also checked to see if the your code was in the <head> tag and it wasn't. So, I'm guessing they might have a restriction on using javascript within template files.They also have an Embed Widget where they say you can place jQuery or any other HTML or Javascript, and it's not working in there either. The Embed Widget is a tool that applies whatever you put in there...

Spencer B. 2010-01-07 03:50:00

... into the main content area. I've used jQuery within there before for a dropdown, sliding accordion, and it worked. Not sure why this piece of code wouldn't be working. I'm wondering if I do need to convert all $ signs to the word jQuery, like they say in their documentation.

Spencer B. 2010-01-07 03:52:09

Hey @Spencer, anything changed via javascript (in this case adding a class) will never show up when you "view source" since the source is what was sent from the server. When you use the Embed Widget, can you at least see the script block in the HTML? If so, it should be working. Download FireBug for Firefox (http://getfirebug.com) and use its "HTML" view to see the dynamically added classes to verify its working.

Doug Neiner 2010-01-07 03:54:27

Yes, I can actually see the javascript using the Embed Widget tool. So, I guess it is working then, huh? Even though I can't see the class being applied to the <body> tag. I do have Firebug, and use it everyday for CSS work. I'll try using the Inspect button to see if the class is being applied...

Spencer B. 2010-01-07 03:57:16

@Spencer B. - you won't see it in View Source, try instead inspecting the live DOM via Firebug

K Prime 2010-01-07 03:57:35

Oh sorry, I forgot that your code adds the class to the <html> tag. YES! It's there! However, it reads like this...<html class=" field">... with a space before the class name. Will that be a problem within the CSS? Or will simply typing in .field within the CSS work even though it has a space before the name after the first quotation mark?

Spencer B. 2010-01-07 03:59:42

Yes, it will work as expected. The space was there in case there was an existing class present. You wouldn't want to end up with `"existingnew_page"` If you know there will never be a class on the HTML element to begin with, then change my code to remove the `" " +` and just have it read `document.documentElement.className = loc[1].toLowerCase()`

Doug Neiner 2010-01-07 04:01:25

You rock! Are you available for some other small jQuery jobs? :)

Spencer B. 2010-01-07 04:09:25

@Spencer Glad to help! My SO profile links to my website with my info. I never mind small questions and such! Good luck with your project!

Doug Neiner 2010-01-07 04:12:48

ansaurus

tags:

views:

answers:

How Can I Add a Class to the Body Tag using jQuery?

related questions