SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    426
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Using JQuery with Wordpress CMS to change background color of table cells

    I'm not sure whether this post should go in this forum, or in the jquery one. Everytime I try to use jquery in
    one of my Wordpress sites, and google for answers, I get a multitude of different opinions on what to do.
    I want to use the jquery that comes with Wordpress.

    I am converting a client's site into a Wordpress CMS and on one page there is a schedule in table form where
    different table cells are color-coded depending on which session the date is in.

    I used the plugin tinyMCE Advanced to allow the client to build various tables on the site. With this plugin, I can
    change the background color of the text in the table cell (the editor wraps it in a <span> tag), but not the background-color of the table cell itself.

    Here is an image of what I want ... and an image of what the editor will allow me to do.
    static-table.jpgwordpress-table.jpg

    This is the code I put in the head of my site. It doesn't work, but I have no idea what to do to fix it. Can anyone help me?

    HTML Code:
    <?php wp_enqueue_script('jquery'); ?>
    
       <script type="javascript">
    
         $(document).ready(function() {
              $('#schedule_9week span').each(function(){
                 $(this).parent().css('background-color', $(this).css('background-color'));
              });
          });
    
       </script>
    
    	<?php wp_head(); ?>
    </head>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    There could be a bunch of reasons that this isn't working.
    Could you post a link to a page where I can see the error?

  3. #3
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    426
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I can't post a link unfortunately. I am developing this locally using a barebones theme that I am coding just for this site. The rest of the site works fine, but I can't get this jquery to function. Would it help if I uploaded the site somewhere? But then you wouldn't be able to access all of the code to see exactly what's going on.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by WebMachine View Post
    Would it help if I uploaded the site somewhere? But then you wouldn't be able to access all of the code to see exactly what's going on.
    Yeah, that would help a great deal.
    At first, it doesn't really matter what PHP is behind the HTML being output, we just need to get a rough idea of where to start looking.

  5. #5
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    426
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have uploaded the site now. The page in question is here and the table I am trying to change with jquery is the third one down. Can you see what I did wrong with my jquery (see above post)? I have never had much luck getting javascript to cooperate with Wordpress. Please refer to the two images in my first post to get an idea of what I am trying to do. Thank you.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    You were almost there, but there are a couple of little things you have to change.

    First off, you have this in line 24:

    HTML Code:
    <script type="javascript">
    change it to:

    HTML Code:
    <script type="text/javascript">
    Then you need to move the entire JavaScript block to the end of the document, just before the closing </body> tag.
    As it is you are calling your script before jQuery has loaded and thus are getting an error.

    The third thing you need to change is this:

    Code JavaScript:
    $(document).ready(function() {

    into this:

    Code JavaScript:
    jQuery(document).ready(function ($) {

    The reason for this is that the jQuery library included with WordPress loads in "no conflict" mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can load.
    In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used. By including the $ in parenthesis after the function call you can then use this shortcut within the code block.
    You can read more about this here: http://stackoverflow.com/questions/1...is-not-a-funct

    Your code will then look like this:

    HTML Code:
            ...
          </div><!-- end of container div -->
        </div><!-- end of wrapper div -->
      
        <script type='text/javascript' src='http://jaybeeweb.com/Markham_Gym/wp-content/plugins/ultimate-tables/js/jquery.dataTables.js?ver=1.0'></script>
        <!-- Don't forget analytics -->
        
        <script type="text/javascript">
          jQuery(document).ready(function ($) {
            $('#schedule_9week span').each(function(){
              $(this).parent().css('background-color', $(this).css('background-color'));
            });
          });
        </script>
      </body>
    </html>
    And everything will be good.
    Hope that helps

  7. #7
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    426
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wow, it worked like a charm. Thank you so much. That first mistake ... well I have no excuse for that. I should have know better. I learned from the other two changes. Your explanation makes a lot of sense and helped clarify all the discussion out there around jQuery and Wordpress.


Bookmarks

Posting Permissions

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