jquery addclass to body tag

A

4

6

The following script is within a div, does this matter? As it doesn't work. Is the syntax right? Do I need to tell jquery to go up a level in the DOM first? how would I do this?

        $(document).ready(function() {
          $('body').addClass('diary');
        });

Thanks guys.

Here is the relevant section in the HTML:

<body>

  <header>
    <div class="logo">
      <a href=""></a>
    </div>  
    <nav class="main-nav">
      <a class="first" href="http://www.adrianwaddingham.com">HOME</a>
      <a class="second" href="/sheriff">SHERIFF</a>
      <a class="third" href="/biography">BIOGRAPHY</a>
      <a class="fourth" href="/contact">CONTACT</a>     
      <a class="fifth" href="/diary">DIARY</a>     

    </nav>

  </header>

<script>
        $(document).ready(function() {
          $('body').addClass('diary');
        });    
</script>


<section class="copy-main">
  <article>

Arose answered 12/11, 2012 at 12:47 Comment(0)

W

3

I understand that you are viewing the html source to check body class you added. DOM manipulation with javascript is not visible in source code, but you can check it with Developer Tools in your browser(Chrome, Firefox and IE have one).

Walkway answered 12/11, 2012 at 12:54 Comment(1)

Sorry for wasting all your time... didn't know about class not showing in view source. Once I'd verified, I soon found the issue - recently started using SASS and the compiled version of my stylesheet doesn;t automatically upload to the site. thanks to you all. – Arose 12/11, 2012 at 13:17

Y

1

Your code is perfectly correct since $('body') will search the whole DOM

Yancy answered 12/11, 2012 at 12:48 Comment(2)

thanks, although when I view source on the page, the body remains without a class. – Arose 12/11, 2012 at 12:51

There must be another problem. Any errors in the console? Can you show us more code? – Yancy 12/11, 2012 at 12:52

E

1

No problem with script. Diary class will apply to body. Can you share you diary class and please check that jQuery is loaded correctly, use any development tool like firebug.

Add jQuery file in your page like following where Scripts is folder and jQuery.js is jQuery file. If you already included this in your page then check with any developer tool that it is loading correctly.

<script src="Scripts/jQuery.js" type="text/javascript"></script>

Or add from CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Exclosure answered 12/11, 2012 at 12:51 Comment(1)

body.diary a{ border-bottom: 3px solid white; } – Arose 12/11, 2012 at 12:53

L

1

Your code looks fine. Check here, http://jsfiddle.net/muthkum/P5uS2/. Use FireBug or Chrome Inspector to check the <body> tag.

Make sure you included jquery file.

Lowdown answered 12/11, 2012 at 12:53 Comment(2)

Is there an easy way to check jquery is being loaded? I have the link in there. – Arose 12/11, 2012 at 13:3

Check page source or view source on your browser. Look for jquery.js or jquery.min.js – Lowdown 12/11, 2012 at 13:4

Recommended topics

Hot tags