SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Difficulty with the .Hover / .Mouseover commands functioning. [Code Review]

    Hello!

    I am having trouble figuring out how to get my Hover command to function properly. I might not have it in the correct area, or the code may not be correct. either way here is the code: The section that I am having trouble with is the "$('#dyo " section. Thanks!


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>The Cake Kiosk</title>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script> $(document).ready(function(){
      alert('Welcome to Cake Kiosks! Thank you for choosing your local Kiosk.  I will be your Virtual Decorator today! Please choose Create Your Own, or Current Designs on the following page and we can get started!');
    });</script>
    
    <script> 
    $(document).ready(function(){
      $('#dyo tbody tr').addClass('zebra');
      $('#dyo tbody tr').hover(function(){
        $(this).addClass('zebraHover');
      }, function(){
        $(this).removeClass('zebraHover');
      });
    });
    </script>
    
    
    </head>
    
    <body>
    
    <table class="cakes" id="choices" width="100%" border="2" cellspacing="2" cellpadding="2" bgcolor="#0066FF">
      <tr>
        <td colspan="2" align="center">The Cake Kiosk</td>
       
      </tr>
      <tr>
        <td align="center" id="dyo"> Design Your Own</td>
        <td align="center" id="cd">Current Designs</td>
      </tr>
      <tr>
        <td align="center">Java Script Code Left</td>
        <td align="center">Java Script Code Right</td>
      </tr>
      <tr>
      	<td align="center" colspan="2"> Witbeck's Family Foods: 1026 N. McEwan Clare, MI 48617</td>  </tr>
       <tr>
        <td align="center" colspan="2">Developed by Kiosks for Cakes</td>
       
      </tr>
    </table>
    
    </body>
    </html>
    Last edited by Stevie D; Aug 22, 2012 at 13:12. Reason: [HTML] code tags added

  2. #2
    Non-Member
    Join Date
    Aug 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its working fine:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script> $(document).ready(function(){
      alert('Welcome to Cake Kiosks! Thank you for choosing your local Kiosk.  I will be your Virtual Decorator today! Please choose Create Your Own, or Current Designs on the following page and we can get started!');
    });</script>
    <style type="text/css">
    .zebra { background:red;}
    .zebraHover { background:yellow}
    </style>
    <script> 
    $(document).ready(function(){
      $('#dyo').addClass('zebra');
      $('#dyo').hover(function(){
        $(this).addClass('zebraHover');
      }, function(){
        $(this).removeClass('zebraHover');
      });
    });
    </script>
    
    
    </head>
    
    <body>
    
    <table class="cakes" id="choices" width="100%" border="2" cellspacing="2" cellpadding="2" bgcolor="#0066FF">
      <tr>
        <td colspan="2" align="center">The Cake Kiosk</td>
       
      </tr>
      <tr>
        <td align="center" id="dyo"> Design Your Own</td>
        <td align="center" id="cd">Current Designs</td>
      </tr>
      <tr>
        <td align="center">Java Script Code Left</td>
        <td align="center">Java Script Code Right</td>
      </tr>
      <tr>
      	<td align="center" colspan="2"> Witbeck's Family Foods: 1026 N. McEwan Clare, MI 48617</td>  </tr>
       <tr>
        <td align="center" colspan="2">Developed by Kiosks for Cakes</td>
       
      </tr>
    </table>
    
    </body>
    </html>
    when you have id="dyo" then you dont need $('#dyo tbody tr').addClass('zebra');
    #dyo is a td and child of tbody and tr. Easiest solution is to select the element direct with id.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,195
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your code isn't going to work because you don't have a nested tbody and tr within your #dyo element, all you need to target is the #dyo element itself and it will work fine.

    Code JavaScript:
    $(function() {
        $('#dyo').addClass('zebra').hover(function() {
            $(this).addClass('zebraHover');
        }, function() {
            $(this).removeClass('zebraHover');
        });
    });

  4. #4
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And the Code that you posted in your post is what I will need to insert into the <script> tags in order for this to work? the difference being that I already have an item to target and the code that I am using is attempting to create a target?
    Because I already have a target, the code does not need to create one, therefore I can leave that aspect out of the code?


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
  •