CODEWITHSUNDEEP
javascriptjquery
parseb
parseb

Reputation: 138

How can one append a div exactly in the position where the mouse is over? jQuery

I want to leave a colored div trail without generating divs when the page loads. I want them to be appended when the mouse is over the parent div and position them where the mouse is within it.

EDIT: I think I need to be more precise so I posted the code that I want to rewrite. I want it to do the same thing without generating the divs that become colored on mouseover when the page loads but to create a colored div when the mouse is over $(".container") at the current position of the mouse.

THANKS!

Mention: the script generates lots of divs - it might take a while for the page to load.

	$(document).ready( function() {

		var csize = $(".container").width() * $(".container").height();
		var space = $(window).width() * $(window).height();


		while ( csize * $(".container").length < space) {
			$("#space").append("<div class='container'></div>");
		};

		$(document).on("mousemove", function() { 
			window.color = Math.floor(Math.random()*16777215).toString(16);
		}); 
		
		$(".container").on("mouseover", function() {
			$(this).css("background-color", "#" + window.color);
		
		});		

		



		
});
#space{
	width: auto;
	height: auto;

}

.container {
	width:	15px;
	height: 15px;
	display: inline-block;
	float: left;
	border: none;

}
<!DOCTYPE html>

<html>

<head> 
	<title> JqPractice</title>
	<link rel="stylesheet" type="text/css" href="reset.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="jq.js" type="text/javascript"></script>
	<script src="sv2.js" type="text/javascript"></script>
</head>

<body>

<div id="space">	
	<div class="container">

	</div>
</div>
</body>


<footer>


</footer>

</html>

Upvotes: 2

Views: 328

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

$("#parent").on({
    mousemove: function (e) {
        var wrapper = $(this);
        var parentOffset = wrapper.offset();
        var relX = e.pageX - parentOffset.left + wrapper.scrollLeft();
        var relY = e.pageY - parentOffset.top + wrapper.scrollTop();

        wrapper.find('.randomTrail:visible').remove();
        wrapper.append($('<div class="randomTrail"/>').css({
            left: relX,
            top: relY
        }));
    },
    mouseleave: function () {
        $('.randomTrail:visible').remove();
    }
});

DEMO

Ref:

  1. .offset()
  2. .scrollLeft()
  3. .scrollTop()
  4. .remove()
  5. e.pageX and e.pageY
  6. .on()
  7. mousemove
  8. mouseleave
  9. Events
  10. find()

Upvotes: 2

Saqueib
Saqueib

Reputation: 3520

You will need to use mousemoves() to get the event data and coordinate like below

$( "#target" ).mousemove(function( event ) {
    var msg = "Handler for .mousemove() called at ";
    msg += event.pageX + ", " + event.pageY;
    console.log(msg);
});

and you will need a div with css {position:absolute; width:10px; height:10px; background-color:yellow; left: event.pageX; top:event.pageY} something like this will do

For more info checkout official doc from jQuery

Upvotes: 2

Related Questions