Custom large mouse cursor with javascript - javascript

I want to create custom cursor image, but it is limited to 32x32, while I need about 300x300 image. So it seems that I need to hide cursor cursor: none and create custom large div or image, that will be moving with invisible mouse.
The simplest implementation could be:
$(document).on('mousemove', function(e){
$('#custom-cursor').css({
left: e.pageX,
top: e.pageY
});
});
but I have some problems:
Performance (how should I implement moving div not with left-top properties)
Text selection jsfiddle cannot select text properly
Can anyone help me with this?

On modern browsers, you need to use pointer-event CSS property set to none:
--DEMO--
$(document).on('mousemove', function (e) {
$('#custom-cursor').css({
left: e.pageX,
top: e.pageY,
pointerEvents: 'none'
});
});

If Cursor and Text are in the same Color, add z-index: -1 to the cursor. So the cursor is behind the text and lets you select it.
But if the color is not equal the user will see, that the cursor is behind the text.

Related

Mouse Follow Script, Cant Animate on Hover

I'm trying to implement script to have a div block follow my mouse, then animate it when hovering over certain links. The problem is when transforming it on hover of any objects, it starts to flash and become finicky.
Codepen: https://codepen.io/grayghostvisuals/pen/kepDb/
var $circle = $('.circle');
function moveCircle(e) {
TweenLite.to($circle, 0.7, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveCircle);
Any ideas?
It seems to be a z-index issue. Hover will try to check if your mouse is above your element, but it will be hovering the circle following your mouse. This pen shows how it works if you use a negative z-index for the circle, too.
You can however make your browser ignore the pointer events for the circle, removing the problem all together. I changed your pen to add the solution.
.element {
pointer-events: none;
}

Image zoom JS (with background image, not img)

I'm wanting to write my own image zoom JS code (similar to http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom) but the issue with this and all the other plugins is that it's relying on img tags whereas I want to use background images to give the same effect.
I have created a jsFiddle of where I am up to but I'm having issues trying to re-create the mouse movement. I thought, when you hover, it could scale the background image (or replace the url src via JS with a larger image) but I can't work out how to follow the edges of the image/container rather than the image follow the pointer.
https://jsfiddle.net/x69tk48s/
$('.inner').mousemove(function(e) {
$('.each-image .bg').offset({
left: e.pageX,
top: e.pageY
});
});
$('.inner').on('mouseleave', function() {
$('.each-image .bg').css({
left: 0,
top: 0
});
});
Any thoughts?
The math isn't quite right (yet) but here is a rough idea of how you can accomplish it: https://jsfiddle.net/3cebzudv/2/ (start by mousing-in in the top left corner to get the rough idea).
Basically, just scale the background image up on mouseenter and then reposition it with the backgroundPosition property on mousemove.

jQuery hover detection through another element?

I am trying to make a custom jQuery drag and drop function for a project of mine.
The problem I'm having is that when dragging on element it is put between the mouse and the drop region and I can't find a decent way of detecting the hover over the drop region through the dragging element without it being offset slightly.
$(window).mousemove(function (event) {
$('.element').css({
'left' : event.pageX-30 + 'px',
'top' : event.pageY-30 + 'px'
});
});
The above code moves a simple <span> to match the mouse position.
$('.dropregion').hover(function () {
console.log('hover');
}, function () {
console.log('unhover');
});
This is the simple hover detection that I am used to with jQuery.
You could try disabling mouse events on the span using css which should render it transparent to the mouse and allow hover to activate under the span
CSS:
.element {pointer-events:none}
Reference:
https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Creating multiple transitional buttons from 1 image

I have a very simple looking image of different coloured bars which 'fan' left to right, a bit like the choc bars here:
http://www.lifeafterbagels.com/blog/wp-content/uploads/2012/05/Fanned-Bars.jpg
I want to turn into each bar into individual buttons with tooltip 'pop-ups' and colour changes when the cursor hovers over them. Very much like this image map:
http://winstonwolf.pl/clickable-maps/europe.html
I have looked at the map source code and it doesn't really help me, but from searching on this forum it looks like I need to use x and y coordinates to determine the area that would be 'clickable'. Is this correct?
I found some code which allowed me to create a transition between 2 images, which is great, but when the image is not a simple square inside a square div I run into trouble. This is the code for the simple transition:
jQuery(document).ready(function(){
jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});
});
and the CSS:
![div.fadehover {
position:relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}][2]
Any help to point me in the right direction would be much appreciated!
Thanks
J
To elaborate on the comment, this JS fiddle may be how you could rotate your images and set click/hover events for them.
http://jsfiddle.net/pSPX6/
Doing it this way will mean that you don't need to get into mouse coordinates yourself, just let jQuery/JavaScript sort them out for you! :)
As for the tooltip, you could always position it based on the parameters given to you in the hover event, the parameters passed to this events should contain the x and y coordinates of the mouse which you can then use to position the tooltip. For more info on the hover event I've used, see the jQuery documentation: http://api.jquery.com/hover/
Hope this helps!
Let me know if you want more clarification!

HTML5 Drag and Drop

I've been having trouble coming up with a way of making a drag and drop area on a web page. I have multiple resizable <div>s, and I want to be able to drag these anywhere. Think of it like dragging desktop icons around the desktop and placing them anywhere. It would be nice if I could add buttons to these <div>s to change their z-indexes and have them overlap. Would this require use of <canvas>? I am currently using <section> for the drag area.
Thanks!
If you want to do the drag-n-drop yourself, you may want to have one div enclosing the draggable div, so you can use the top of the larger div as the draggable area.
So, you have
<div id='draggablediv' style='backgroundcolor: blue;'>
<div class='draggable' style='position: relative; top: 5em; left: 0em;'>...
</div></div>
This code is purely for example, won't work, btw.
So, on the draggablediv you would put an onclick event handler, and this would start an onmousemove handler and onmouseup handler. The last one is to drop, but you may also want to have onblur in case the mouse moves outside of the browser.
Then, as the mouse moves, just reposition the div, so these divs would need to be absolute positioned, or relative positioned (absolute would be easier).
It is important to remove the event handlers by setting them to null when the mouse button is released.
If not in a droppable area then make certain to put the div back where it started, so you will want a closure so you can remember the original top/left coordinates of the div.
You will want to get familiar with this functionality:
(function g(someval) {
var a = someval;
return h() {
}
})(origval);
For an example search for getImgInPositionedDivHtml in http://jibbering.com/faq/notes/closures/
In order to change the z-index you may want to have a +/- in the div and when that is clicked on the z-index is changed.
Here is a page that talks about changing the z-index.
http://msdn.microsoft.com/en-us/library/ms533005(v=vs.85).aspx
I don't think you can do that with HTML-Only, however this is some example of how you could do it with javascript:
<html>
<head>
<style>
.draggable {
position: absolute;
cursor: default;
background-color: purple;
top: 0px;
left: 0px;
}
</style>
</body>
<body onmouseup="stopMovement()">
<div id="draggable" class="draggable" onmousedown="startMovement(event)">
Drag me around :D
</div>
<script>
var drg = document.getElementById("draggable");
var xDisplacement = 0;
var yDisplacement = 0;
function startMovement(e) {
xDisplacement = e.pageX - getComputedStyle(drg).left.substring(0, getComputedStyle(drg).left.length - 2);
yDisplacement = e.pageY - getComputedStyle(drg).top.substring(0, getComputedStyle(drg).top.length - 2);
document.body.onmousemove = moveDraggable;
}
function stopMovement() {
document.body.onmousemove = null;
}
function moveDraggable(e) {
drg.style.top = e.pageY - yDisplacement;
drg.style.left = e.pageX - xDisplacement;
}
</script>
</body>
</html>

Categories