SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question JQuery function not working please help!

    Hello,
    I was trying to develop something where on hover of a paragraph the background colour of a div tag that contained all the content changed correspondingly.

    So the html is something like this:

    Code HTML4Strict:
    <div id="container">
    <p>Change the colour</p>
    </div>

    I did something simple first where the text colour of the paragraph changed on hover of that paragraph. Now that works completely fine.

    Here is the code:
    Code HTML4Strict:
    <!DOCTYPE html>
    <html>
    <head>
      <style>
      p { color:blue; width:200px; font-size:14px; }
      </style>
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
     
      <p>Hovering on me changes the text colour of the paragraph</p>
     
      <p>Same with this one</p>
     
    <script>
      $("p").hover(
    		function () {
    			$(this).css("color","red");
      },
    		function () {
    			$(this).css("color","blue");
      });
    </script>
    </body>
    </html>


    So I edited a code a bit to do what I mentioned above the changing the background-colour on the container on hover of a paragraph:

    Code HTML4Strict:
    <!DOCTYPE html>
    <html>
    <head>
      <style>
      p { color:white; width:200px; font-size:14px; }
      </style>
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
    	<div id="container" style="background:blue;">
      <p>Hovering on me should change the container's background colour</p>
     
      <p>Or hover on me.</p>
      </div>
    <script>
      $("p").hover(
    		function () {
    			$("container").css("background","red");
      },
    		function () {
    			$("container").css("background","blue");
      });
    </script>
    </body>
    </html>


    but it does not work

    Could someone help me get the latter code working so that the background of the container will change on hover of a paragraph?

    Thanks in advance and Regards,
    Team 1504.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You have to reference the ID of container (#container), so instead of this:


    Code JavaScript:
      $("p").hover(
            function () {
                $("container").css("background","red");
      },
            function () {
                $("container").css("background","blue");
      });

    Do this:

    Code JavaScript:
      $("p").hover(
            function () {
                $("#container").css("background","red");
      },
            function () {
                $("#container").css("background","blue");
      });
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question

    kohoutek,
    When I changed the reference of the container to the ID of the container as you wrote below that example worked.

    However, When I applied that same concept and basically the same code in another instance it doesnt seem to work

    Here is the second application of the idea:

    Code HTML4Strict:
    <html>
    <head>
    <style>
    	#container{
    	position:relative;
      	background:url(iceberg.png);
    	margin:auto;
    	height:1098px;
    	width:1400px;
     
    }
     
    #container ul.hotlink {
        margin:0;
        padding:0;
        list-style:none;
        position:absolute;
        top:0;
        left:0;
        z-index:2;
    }
    #container ul.hotlink li {
        position:absolute;
        text-indent:-999em;
    }
    #container ul.hotlink li a {
        display:block;
        width:100%;
        height:100%;
        outline:0;
    }
    #container ul.hotlink li a:hover {
        z-index:99;
    }
    ul.hotlink li.lifesaver {
        top:463px;
        left:60px;
        width:163px;
        height:157px;
    	color:#000;
    }
     
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(".lifesaver").hover(
            function () {
                $("#container").css("background","red");
      },
            function () {
                $("#container").css("background","url(iceberg.png)");
      });
    </script>
    </head>
    <body>
    <div id="container">
    <ul class="hotlink">
            <li class="lifesaver"><a title="Click on me to go to sitepoint.com" href="http://www.sitepoint.com">Sitepoint</a>Hover on the box above to change the container's background!</li>
    </ul>
    </div>
    </body>
    </html>

    I dont think I am doing anything stupid and I apologise if i am.

    Hear from you soon and Regards,
    Team 1504

  4. #4
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    In the code id put in my post below I referred to an image of the name iceberg.png

    Here is said image, i hope it can help you help me change the container's background on hover of the lifesaver

    Thanks in advance,
    Team 1504
    Attached Images Attached Images

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    At the time that the script runs while the page is loading, the lifesaver part of the HTML does not yet exist.

    Wait until the page has loaded before applying the script, by placing the script inside a jQuery callback.

    Code javascript:
    $(function () {
        ...
    });

    for example:

    Code javascript:
    $(function () {
        $(".lifesaver").hover(
            function () {
                $("#container").css("background","red");
        },
            function () {
                $("#container").css("background","url(iceberg.png)");
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank you! Reorganising things so that the HTML loads first worked.



    Thanks and Regards,
    Team 1504


Tags for this Thread

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
  •