I need to trigger the mouseover event of two DIVs positioned one on top of other.
http://jsfiddle.net/hvh8k/
For the DIV in front, if I have given pointer-events:none; I will get the mouseover event of the DIV underneath. But this stops triggering the mouseover event of the DIV in front.
Javascript
$(function () {
var stopAnimation = false;
var loop1 = setInterval(function () {
if(stopAnimation)return;
var L = parseInt($("#back").css("left"), 10) + 10;
if(L > $(window).width())L=-300;
$("#back").css("left", L);
}, 100);
$("#back").mouseover(function () {
stopAnimation = true;
});
$("#back").mouseout(function () {
stopAnimation = false;
});
$("#front").mouseover(function () {
$("#front").animate({width:200}, 100);
});
$("#front").mouseout(function () {
$("#front").animate({width:100}, 100);
});
});
CSS
#back {
width: 300px;
height: 200px;
background-color: #aaa;
position: absolute;
left:0;
cursor: pointer;
}
#front {
width: 100px;
height: 100px;
background-color: #caa;
position: absolute;
left:0;
top:100px;
border-radius:50%;
overflow:hidden;
}
body {
margin:0;
}
HTML
<div id="main">
<div id="back"></div>
<div id="front"></div>
</div>
Don't know if this would be suited for what you are trying to achieve, but what about toggling the z-index as you click the divs?
First div.front will show. When div.front is clicked, it calls your function AND move div.front to the back, and div.back to the front, which would allow you to click and trigger the div.back function and toggle the divs again.
So to be clear... front visible > click > back visible > click > front visible etc.
Related
I have an Overlay that I display on a webpage while some SQL is performed in the background, this SQL can take a good few seconds, so I set this Overlay to be on the screen for 10 seconds using JavaScript. What I want to do, is prevent the user from clicking, and scrolling altogether while this Overlay is visible.
I have the pointer events set to 'none' which doesn't seem to work, even with a high z-index, and displaying as 'block'. For some reason, when the Overlay is displayed, the user can still scroll, click, and highlight text just like the overlay is not even there.
This is my Overlay in CSS:
#overlay {
position:fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(120, 120, 120, 0.9);
pointer-events: none;
z-index:100000;
}
My JavaScript:
//The function to start displaying the overlay
function start()
{
document.getElementById("overlay").style.display = "block";
}
//The function to stop displaying the overlay
function end()
{
alert("Finished!");
document.getElementById("overlay").style.display = "none";
}
setTimeout(function() { start(); }, 1); //starting the Overlay
setTimeout(function() { end(); }, 10000); //ending the Overlay after 10 seconds
You should disable scrolling by add overflow: hidden to body
function start()
{
document.getElementById("overlay").style.display = "block";
document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
//The function to stop displaying the overlay
function end()
{
alert("Finished!");
document.getElementById("overlay").style.display = "none";
document.getElementsByTagName("body")[0].style.overflow = null;
}
Remove pointer-events: none to allow the user to click on the overlay, and add user-select:none; instead.
This way, the user can not select anything on the overlay. The user will only be able to resume selection on the other parts of the page once the overlay is hidden.
function start() {
document.getElementById("overlay").style.display = "block";
}
//The function to stop displaying the overlay
function end() {
document.getElementById("overlay").style.display = "none";
console.log('Finished');
}
setTimeout(function() {
start();
}, 1); //starting the Overlay
setTimeout(function() {
end();
}, 10000); //ending the Overlay after 10 seconds
#overlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(120, 120, 120, 0.9);
z-index: 100000;
user-select: none;
overflow: hidden;
/* not really needed, but this prevents scroll bars from appearing */
}
#main {
background-color: #bada55;
display: inline-block;
padding: 5em;
margin: auto;
}
<div id="overlay">
<p>
This is part of the overlay inner HTML
</p>
</div>
<div id="main">
This is something not inside the overlay
</div>
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>
I'm trying to change the background image of an element after a certain position has been scrolled past. Here's a snippet of my code:
<body>
<script>
window.onscroll = function() {scrollBG()};
function scrollBG() {
if (document.body.scrollTop > document.getElementById("one").getBoundingClientRect().top ||
document.documentElement.scrollTop > document.getElementById("one").getBoundingClientRect().top) {
document.getElementById("outer").style.backgroundImage = "url('imgs/pic1.jng')";
} else {
document.getElementById("outer").style.backgroundImage = "url('imgs/pic2.jpg')";
}
}
</script>
<table id="outer">
I'm using a similar coding style to show/hide a "back to top" button after a certain scroll position that functions just fine. I don't think there's a conflict between the two (though inline scripting isn't my preferred style) because even when I remove everything related to the "back to top" button, my code still fails to function.
Is this a stupid syntactical error, or is there a more fundamental error to my approach?
I've tweaked your code a little and it's working:
jsFiddle 1
var divOuter = document.getElementById("outer"),
divOne = document.getElementById("one");
window.onscroll = function() {scrollBG()};
function scrollBG() {
var oneTop = divOne.getBoundingClientRect().top;
if(document.body.scrollTop > oneTop ||
document.documentElement.scrollTop > oneTop){
divOuter.style.backgroundImage = "url('//www.planwallpaper.com/static/images/518071-background-hd_xO1TwRc.jpg')";
} else {
divOuter.style.backgroundImage = "url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg')";
}
}
body { margin: 0; padding: 0; height: 1500px; }
#outer {
position: fixed;
background: url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg') no-repeat;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#one {
width: 100%;
height: 150px;
background-color: orange;
color: white;
position: relative;
top: 400px;
}
<div id="outer"></div>
<div id="one"><h1>This is One</h1></div>
However, following the above method will be inefficient as IMHO it makes an extra HTTP request for the images every time the scroll goes up and down the threshold and thus you'll see flickering every time the background images get changed.
So it'd be better if we make use of an external CSS class, i.e #outer.bg2, and just add/remove it depending on the position of the scroll and this will fetch a cached version of the image which makes it smooth [except for the first time when the image is being requested for the first time]. Like below:
jsFiddle 2
var divOuter = document.getElementById("outer"),
divOne = document.getElementById("one");
window.onscroll = function() { scrollBG() };
function scrollBG() {
var oneTop = divOne.offsetTop;
if (document.body.scrollTop > oneTop ||
document.documentElement.scrollTop > oneTop) {
divOuter.classList.add('bg2');
} else {
divOuter.classList.remove('bg2');
}
}
body{ margin:0; padding:0; height: 1500px; }
#outer{
position:fixed;
background: url('//www.planwallpaper.com/static/images/maxresdefault_YodSsVN.jpg') no-repeat;
top:0;
left:0;
right:0;
bottom:0;
}
#outer.bg2{
background: url('//www.planwallpaper.com/static/images/518071-background-hd_xO1TwRc.jpg');
}
#one{
width:100%;
height:150px;
background-color:orange;
color:white;
position:relative;
top:400px;
}
<div id="outer"></div>
<div id="one"><h1>This is One</h1></div>
In the above code the triggering will happen when the scroll meets the bottom of the element #one, if you want the triggering to happen according to the top edge then replace this:
var oneTop = divOne.offsetTop;
With this:
var oneTop = divOne.offsetTop - divOne.offsetHeight;
jsFiddle 3
I want to make a description box appear over an element when the mouse hovers over it, and disappear when it leaves. However, simply doing
$("element").mouseenter(function() {
// make box appear
}).mouseleave(function() {
// make box disappear
});
Will make the box disappear if the mouse is hovering over the box itself. How do I keep it on the screen as long as the mouse is either on the target element or on the box that appears beside it?
You don't even need javascript for this!
#square {
height: 200px;
width: 200px;
line-height: 50px;
vertical-align: middle;
text-align: center;
background-color: green;
opacity: 0.0;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
#parent {
height 200px;
width: 400px;
background-color: blue;
}
#parent:hover #square {
opacity: 1;
}
<div id="parent">
<div id="square">:-)</div>
</div>
^^^^^^Hover Above^^^^^^
$("#element").on({
mouseenter: function () {
$("#box").fadeIn();
},
mouseleave: function () {
var $target = $("#box");
var timer = setTimeout(function () {
$target.stop(true, true).fadeOut();
}, 200);
$target.data('hoverTimer', timer);
}
});
Try this.
This should do it,
stay= false
$(element).hover(function(){
console.log('mouseover');
$(box).show();
$(box).hover(function(){
stay=true;
},
function(){
exitHover();
console.log('mouseout if box');
});
},
function(){
exitHover();
console.log('mouseout');
});
function exitHover(){
if(stay) return;
//hide box
}
Ohh boy, completely missed your other part of the question, updated.
i have this side tab panel where i when i click on it, it will activate a external div, during that time, i want the underlying div to have all their events like hover over dropdown menu deactivated and stuff, basically they can't click on the underlying div to change page while the popup div activated.
This is my fiddle: http://jsfiddle.net/10xr2uah/ , for now i only changed the opacity, but user still can hover over the dropdown and change page while popup panel is on, i tried stuff like
$(".container").attr('disabled', 'disabled'); but it doesn't work
Also i have
$(function() {
$("#toggle").click(function() {
$(".log").html("panel sliding out");
$("#toggle_content").animate({width:'toggle'},350);
$(".container").css("opacity", 0.3);
$(".container").click(function() {
$(this).unbind("click");
$(".log").html("panel hide success");
$("#toggle_content").hide();
$(".container").css("opacity", 1);
});
});
});
how can i edit the code so that when i click on the tab, it will open, and when i click on it again, it will close with opacity returning to normal?
In case you are confused, basically i am trying to solve:
1) how to disable background div(disable dropdown expanding on hover) while popup div is activated
2) how to click on the tab again to return everything to normal.
You can use container's pseudo element :before to make a visual overlay. This way you don't have to add new elements to HTML:
.container.overlay-disable:before {
content: '';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(220, 220, 220, .6);
}
JS:
$("#toggle").click(function () {
$(".log").html("panel sliding out");
$("#toggle_content").animate({
width: 'toggle'
}, 350);
$(".container").addClass("overlay-disable");
$(".container").click(function () {
$(".log").html("panel hide success");
$("#toggle_content").hide();
$(".container").removeClass("overlay-disable");
});
});
Demo: http://jsfiddle.net/10xr2uah/3/
when i have s similar situation i created a simple overlay that covers the tab panel and stops triggering events over the tab
HTML
<div class="container">
<div class="overlay"></div> // create a overlay
<div class="log_container sixteen columns">
<p class="two column">Log:</p>
JS
$(function () {
$("#toggle").click(function () {
$(".log").html("panel sliding out");
$("#toggle_content").animate({
width: 'toggle'
}, 350);
$('.overlay').show();
});
});
CSS
.overlay {
position: absolute;
top: 0px;
left: 0px;
width: 960px;
height: 65px;
z-index: 100;
display: none;
opacity: 0.7;
background-color: white;
}
UPDATED FIDDLE
Try this:
http://jsfiddle.net/10xr2uah/2/
HTML
<div class="mask"></div>
CSS changes
.mask{
background:rgba(255,255,255,0.3);
position:absolute;
left:0;
right:0;
top:0;
display:none;
}
And changes for JS are as follows
$(function() {
$('.mask').height(parseInt($('.log_container').height()+$('#navigation').height()));
$("#toggle").click(function() {
$(".log").html("panel sliding out");
$("#toggle_content").animate({width:'toggle'},350);
$('.mask').show();
$(".container").click(function() {
$(this).unbind("click");
$(".log").html("panel hide success");
$("#toggle_content").hide();
$('.mask').hide();
});
});
});
for (let x of temp0.querySelectorAll('*')) {
x.disabled = true;
}
where temp0 is your div.