Forums

matthewb

i want to animate a div(id=showdiv) when mouse x-postion is less than 50px. It should look as when we got near to that inner div it appears and comes out. Below is the code i have worked on jquery functions

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>mouse move event</title>
<style type="text/css">
	#getw {
		width:500px;
		height:700px;
		background:#222;
		float:left;
	}
	#showdiv {
		background:#666;
		height:200px;
		width:0px;
		float:left;
	}
	#cords {
		float:left;
		border:1px solid #000;
		width:200px;
		color:#F00;
	}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script&gt;
</head>
<body>
    <div id="getw">
      <div id="showdiv"></div>
    </div>
	<div id="cords">&nbsp;</div>
<script type="text/javascript">
	$(document).ready(function() {
	  showWidth("window", $(window).width()); 
	});
	function showWidth(ele, w) {
	  $("#cords").text("The width for the " + ele + " is " + w + "px.");
	}
	$("#getw").mousemove(function(e){
      var pageCoords = e.pageX;
      $("#cords").text(pageCoords);
     });
	 if ($(pageCoords).val() < 50) {
		$("#showdiv").css("width", "150px");
	}
</script>
</body>
</html>

knittingfrenzy18

Could you stick this in a jsfiddle?

matthewb

http://jsfiddle.net/matthew_b/r7MgY/12605/

karlpcrowley

right code but in the wrong order :)
http://jsfiddle.net/r7MgY/12606/

matthewb

hey Karl thanx a lot :)

treehouse : what would you like to learn today?

Forums

[Solved] show hide div on mouse movement