Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having problems with mouseover/mouseout script

    Hi there

    I'm customizing a template in wordpress, and the author has written a bit of javascript which changes a box colour on mouseover.

    Problem is that when I try to change the mouseover/mouseout colours - it reverts back to the template default.

    I have checked every single php file which the bit of script appears in and have changed that to the colours I want - yet it still reverts to the default.

    I am a complete noob when it comes to JS so can someone show me where I am going wrong?

    This is the bit of code:

    echo '<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("div#fbox_35").mouseover(function(){
    $(this).css("background-color","#274068;");
    });
    $("div#col1.box").mouseout(function(){
    $(this).css("background-color","#274068");
    });
    });
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("div#fbox_34").mouseover(function(){
    $(this).css("background-color","#91a833");
    });
    $("div#fbox_34").mouseout(function(){
    $(this).css("background-color","#91a833");
    });
    });
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("div#fbox_33").mouseover(function(){
    $(this).css("background-color","#27b1ce");
    });
    $("div#fbox_33").mouseout(function(){
    $(this).css("background-color","#23c2e3");
    });
    });
    </script>' . "/n";
    }

    The colours are the colours I want them changed to - but it seems to still be calling the script from an earlier version..

    Any advice I would very much appreciate!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    First off I did not use the php echo. Just grabbed the jquery and then made three div to test them on.

    Put the jq into a single script with a single $(document).ready(function() Next why the mouseout(function() s when your not changing anything? In first mouseover remove the ';' in the color selector.
    Code:
    <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("div#fbox_35").mouseover(function(){
    		$(this).css("background-color","#274068");
    	});
    	$("div#col1.box").mouseout(function(){
    		$(this).css("background-color","#274068");
    	});
    	$("div#fbox_34").mouseover(function(){
    		$(this).css("background-color","#91a833");
    	});
    	$("div#fbox_34").mouseout(function(){
    		$(this).css("background-color","#91a833");
    	});
    	$("div#fbox_33").mouseover(function(){
    		$(this).css("background-color","#27b1ce");
    	});
    	$("div#fbox_33").mouseout(function(){
    		$(this).css("background-color","#23c2e3");
    	});
    });
    </script>
    The divs
    Code:
    <div id="fbox_35" style="background-color:red;color:white;">This is the one</div>
    <div id="fbox_34" style="background-color:red;color:white;">This is the second one</div>
    <div id="fbox_33" style="background-color:red;color:white;">This is the last one</div>
    <div id="col1" class="box" style="background-color:red;color:white;">This is the cute one</div>
    I think you have other problems in you code.


  •  

    Posting Permissions

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