I have read a lot of the questions on here but can't find one that fixes this. I have programmed a div to follow my cursor. I only want it to appear when the cursor is over #backgroundiv. I have got it working but it sometimes randomly flickers on chrome and disappears entirely on firefox. Even more randomly is it sometimes appears to work and then starts flickering. I have tried a variety of things from hover to mouseenter/mouseover but nothing seems to work.
What I want is for #newdot to appear when the cursor is over #backgroundiv and then follow the cursor around the div. Any help would be much appreciated.
//hide dot when leaves the page
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
//tried below too but it doesn't work
/*$(document).ready(function(){
$("#backgroundiv").mouseenter(function(){
$("#newdot").removeClass("hide");
});
$("#backgroundiv").mouseout(function(){
$("#newdot").addClass("hide");
});
}); */
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot"></div>
<div id="backgroundiv"></div>
There is not issue but a logical behavior, when you hover on the blue div you trigger mouseenter so you remove the class and you see the red one BUT when you hover the red one you trigger mouseleave from the blue div thus you add the class and you hide the red one. Now the red is hidden you trigger again the mouseenter on the blue div and you remove the class again and the red div is shown, and so on ... this is the flicker.
To avoid this you can consider the hover on the red box to make the red box appear on its hover when you lose the hover from the blue one.
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
/* Added this code */
#newdot:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot">
</div>
<div id="backgroundiv">
</div>
Related
I have a simple Page with 3 Div elements, and I want when you hover over them for a box with specific text to show up.
First issue is, when it starts to change color the box dissapears and shows again.
Second issue is, when you have multiple divs, it works for only the first one.
var trigger = document.getElementById("trigger");
var popup = document.getElementById("popup");
var text = document.getElementById("popup-text");
text.innerHTML = "This is the pop-up text.";
trigger.addEventListener("mouseover", function () {
popup.style.display = "block";
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
});
trigger.addEventListener("mouseout", function () {
popup.style.display = "none";
});
#popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
color: black;
border: 1px solid black;
padding: 20px;
width: 200px;
}
#trigger {
height: 100px;
width: 100px;
background-color: blue;
}
#trigger:hover {
background-color: green;
transition: 0.6s;
}
<div id="trigger"></div>
<div id="trigger" style="background-color: aqua;"></div>
<div id="trigger" style="background-color: brown;"></div>
<div id="popup"><p id="popup-text"></p></div>
From what I can see is that you are generating a blue box in your css,
#trigger {
height: 100px;
width: 100px;
background-color: blue;
}
and you are applying the popup text to only occur on the blue box.
To get the popup to apply to both aqua and brown boxes, end your "trigger" div after the "popup" div.
I'm not sure what you wanted to be blue though>
You are going to come across more issues due to naming conventions with multiple divs with the same IDs (those should be unique to individual divs, class names can be used multiple times), but this answer is to only solve your popup issue.
I suggest looking a little more into trying to accomplish this with CSS only, and then moving onto how to do it with JS.
Good luck!
I have created a very simple example of my problem.
Fiddle Link
In the fiddle, I have created a div named parent containing 2 imgs (i take divs in the example for simplicity but in my project, these are images) and a controller div. I place the images on the top of each other by positioning 2nd image as absolute.
I want to clip the 2nd image using clip-path property whenever, I click and then drag the controller" over the parent div.
But the controller div is causing issue with parent mousemove event whenever cursor goes on controller div, mouseout event is fired on parent div causing glitch in animation.
Adding pointer-events: none property to controller div fix the glitch but it also takes away every kind of mouse interaction from the element and I want click and drag effect.
I want to create similar effect used in this website.
The problem seems to be that the positioning of the controller sometimes (not always) 'interferes' with the reading of offsetX on the parent. And the offset goes down (to 0 or up to about 10 in the given fiddle). Hence you get the flickering as the controller moves back and then up along again.
I cannot at the moment totally explain this, particularly since the controller is an absolutely positioned element.
However, one solution is to move the controller out of the parent.
UPDATE It is though possible to leave the controller in the parent if one ignores any mousemove within the controller (so we don't get readings of 0 to 10 for the offset when the mousemove is within the controller - ignore them and we'll get the event bubbling through to the parent and can then take a reading of offset).
_
<head>
<style>
* {
margin: 0;
padding: 0;
}
#parent {
width: 100%;
position: relative;
}
#img1, #img2 {
display: block;
width: 100%;
height: 200px;
pointer-events: none;
}
#img1 {
background: red;
}
#img2 {
background: green;
position: absolute;
top: 0;
left: 0;
}
#controller {
position: absolute;
top: 0;
left: 10px;
width: 10px;
height: 100%;
height: 200px;
background: black;
z-index: 1;
cursor: ew-resize;
/* pointer-events: none; */
}
</style>
</head>
<body>
<div id="parent">
<div id="img1"></div>
<div id="img2"></div>
<div id="controller"></div>
</div>
<h4>
Click and Drag the controller to clip the front image
</h4>
<!-- img1, img2 are images in my case so i named them as imgs -->
<script>
const parent = document.getElementById('parent'),
img2 = document.getElementById('img2'),
controller = document.getElementById('controller');
let pressed = false;
console.log(pressed)
parent.addEventListener('mousemove', (e) => {
if(!pressed) return;
if (e.target != parent) return;
img2.style.clipPath = `inset(0px 0px 0px ${e.offsetX}px)`;
controller.style.left = `${e.offsetX}px`;
});
// for testing purpose
/* parent.addEventListener('mouseout', (e) => {
console.log('mouse out is called');
}); */
controller.addEventListener('mousedown', (e) => {
pressed = true;
});
controller.addEventListener('mouseup', (e) => {
pressed = false;
});
</script>
</body>
const parent = document.getElementById('parent'),
img2 = document.getElementById('img2'),
controller = document.getElementById('controller');
let pressed = false;
parent.addEventListener('mousemove', (e) => {
if (pressed) {
img2.style.clipPath = `inset(0px 0px 0px ${e.clientX - parent.offsetLeft}px)`;
controller.style.left = `${e.clientX - parent.offsetLeft}px`;
}
});
controller.addEventListener('mousedown', (e) => {
pressed = true;
});
controller.addEventListener('mouseup', (e) => {
pressed = false;
});
#parent {
width: 100%;
position: relative;
}
#img1,
#img2 {
display: block;
width: 100%;
height: 200px;
pointer-events: none;
}
#img1 {
background: red;
}
#img2 {
background: green;
position: absolute;
top: 0;
left: 0;
}
#controller {
position: absolute;
top: 0;
left: 10px;
width: 10px;
height: 100%;
background: black;
z-index: 1;
cursor: ew-resize;
/* pointer-events: none; */
}
<div id="parent">
<div id="img1"></div>
<div id="img2"></div>
<div id="controller"></div>
</div>
<h4>
Click and Drag the controller to clip the front image
</h4>
The problem is, you used offsetX which defines the distance between the top left edge of your controller element. This means the distance is about 5px, your controller jumps to 5px from left, the distance is bigger now, the controller jumps back and so on.
The offsetX read-only property of the MouseEvent interface provides
the offset in the X coordinate of the mouse pointer between that event
and the padding edge of the target node.
So therefore you can use the difference between the mouse x-position and the x-position of parent for positioning your controller:
Instead use clientX which gets the mouse position relative to the window.
img2.style.clipPath = `inset(0px 0px 0px ${e.clientX - parent.offsetLeft}px)`;
controller.style.left = `${e.clientX - parent.offsetLeft}px`;
Top expression has following meaning:
<mouse x-position> - <distance between left screen edge and parent>
Heres basically what the code looks like, it should run if pasted in sublime, what i'm trying to do is get the div to show when the page is loaded and then hide on scroll but when the button is clicked it should show wherever you are on the page. The codes a bit rough but its just a test page
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
$(function(){
$(".box").click(function(){
$(this).find(".fade").fadeIn();
}
,function(){
$(this).find(".fade").fadeOut();
}
);
});
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.box{color: red;}
#left{
float: left;
width: 20%;
height: 200px;
background: yellow;
position: fixed;
top: 0;
left: 150px;
}
<div class="box">
<div class="fade" id="left">
show div / hide on click (NOT HOVER)
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style=" position: fixed;
/* margin-right: -40% !important; */
margin-top: 0%;
background-color: red;
color: #fff;
padding: 10px 10px;
display: block;
width: 54%;
float: right;
top: 0;">show div again</button></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>
This could work. If box is clicked, check if .fade element is already visible. If it is, then hide it, if not, show it.
$(".box").click(function(){
if($(".fade", this).is(":visible"))
{
$(".fade", this).fadeOut();
}
else
{
$(".fade", this).fadeIn();
}
});
You can use toggle since you need to alternate fadeIn and fadeOut on click
Replace hover
$(function(){
$(".box").hover(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
With toggle
$(function(){
$(".box").toggle(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
a quick look at the doc would have saved you headaches: http://api.jquery.com/click
It`s not working for reason - you create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
Your code will be something like this.
$(document).on('click', '.box', function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
});
I wanted to make the navbar to stay displaying, not until i left my pointer hovered to that portion. What happens is that if I hover my pointer to the navbar, the display keeps getting toggled (displaying in then hiding.. it's on loop?) I just want it to stay. Then hide again when my pointer left
<script>
$(document).ready(function(){
$(".menu-trigger").hover(function(){
$("li").slideToggle(400, function(){
jQuery(this).toggleClass("nav-expanded").css('show','');
});
});
});
</script>
img {
padding: 0px;
max-width: 100%;
max-height: auto;
}
.menu-trigger {
pointer: cursor;
display: block;
position: fixed;
font-family: Sans-serif;
font-size: 15px;
background-color: #664c7d;
height: 35px;
width: 100%;
}
li{
display: none;
}
li.navbar ul {
}
}
div.nav-expanded {
display: block;
}
Your code has a few errors and it is not entirely clear what you are trying to accomplish (.css('show', '')?).
I assume that what you need is an element that will toggle its class when hovered and will change back to its original state when it is not hovered anymore.
What you need to do, is toggle the class of your navigation bar every time your mouse goes over the element and out of it.
Assuming $nav is your navigation bar, you can use:
$nav.on('mouseover mouseout', function(){
$nav.toggleClass('show');
});
Alternatively (and arguably safer):
$nav.on('mouseover', function(){
$nav.addClass('show');
}).on('mouseout', function(){
$nav.removeClass('show');
});
You can see usage in this JSFiddle.
I don't know why suddenly the sidebar moves unintentionally. I'm creating a fixed sidebar that show only when hovered.
When I slowly point the mouse on the parent div #containter element it works fine, but when I move the mouse several times on the parent div element #containter the div shows and hide like insane. And also there an area where the parent div shows even you didn't actually hovered on the parent div.
I'm using this code.
HTML
<div id="containter"><!-- parent div -->
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
</div>
CSS
#containter {
width: 140px;
height: 282px;
position: fixed;
margin-top: 30px;
left: -104px;
border: 1px solid red;
}
.wrapdownload {
width: 100px;
height: 90px;
border: 2px solid black;
}
JAVASCRIPT
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").animate({
left: "-104px"
});
});
});
When you hover on the parent div for six times the div show 6 times also. I just want it to show when the mouse is pointed on div element and if i move the mouse outside the parent div, it must hide.
Here is the sample on jsfiddle https://jsfiddle.net/py0622ms/6/
Use stop() method:
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").stop().animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").stop().animate({
left: "-104px"
});
});
});
Working fiddle:
https://jsfiddle.net/py0622ms/7/