jQuery - Mouseenter / Mouseleave Parent / Child Issue - javascript

I've got a parent div with multiple child divs. The parent div has a hover event on mouseover where it reveals some text on the dom. The child div's also have the same functionality.
I've tried mouseover/mouseout and mouseleave ect but they are not quite right for my usage.
When you hover over the parent the message "foo" reveals in the dom
When you hover over the child the message "bar" reveals in the dom
When you hover back to the parent without leaving the parent no message is shown. At this point I'd like it to be reset to have the same functionality as it did originally.
What is the best way to achieve this please? As I don't want to have to rearrange the dom as it'd be very time consuming
Thanks

It's a guess but this (or something similar) might do as you describe.
$(function(){
var disabled = false;
var theMessage = $("#theMessage");
$("#theParent").on("mouseover",function(e){
if(e.target.id == "theChild"){
theMessage.text("bar");
disabled=true;
} else if(!disabled) {
theMessage.text("foo");
}
}).on("mouseout",function(e){
if(e.target.id == "theParent"){
disabled=false;;
}
theMessage.text("...")
});
});
#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent">
<div id="theChild"></div>
</div>
v2:
$(function(){
var disabled = false;
var theMessage = $("#theMessage");
$("#theParent").on("mouseover",function(e){
if(e.target.id == "theChild"){
theMessage.text("bar");
} else {
theMessage.text("foo");
}
}).on("mouseout",function(e){
if(e.target.id == "theParent"){
disabled=false;
theMessage.text("...");
}
});
});
#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent">
<div id="theChild"></div>
</div>
v3: Use the data-attribute to store the hover text:
$(function(){
var theMessage = $("#theMessage");
var defaultTxt = theMessage.text();
$("#theParent, #theChild").on("mouseover",function(e){
e.stopPropagation();
theMessage.text($(this).data("txt"));
});
$("#theParent").on("mouseout",function(){
theMessage.text(defaultTxt);
});
});
#theParent {width:200px; height:200px; background:red; position:relative;}
#theChild {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:100px; height:100px; background:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theMessage">...</div>
<div id="theParent" data-txt="foo">
<div id="theChild" data-txt="bar"></div>
</div>

http://jsfiddle.net/vnzunp5w/16/
e.preventDefault();
e.stopPropagation();
seems to be the winner!

I had to do this in order to have the arrows hide initially, and than show them on hover only.
Using this slider http://www.idangero.us/swiper/#.Vk4so7erTRY
(best one I have found so far)
$('.swiper-button-next, .swiper-button-prev').addClass('hide');
var hoverArrows = function(){
console.log("hoverArrows")
$('.swiper-wrapper, .swiper-button-next, .swiper-button-prev').mouseenter(function () {
console.log("hovered")
$('.swiper-button-next, .swiper-button-prev').removeClass('hide');
}).mouseleave(function () {
$('.swiper-button-next, .swiper-button-prev').addClass('hide');
});
}
hoverArrows();

Related

Make everything unclickable but one element [duplicate]

This question already has an answer here:
Click only inside div
(1 answer)
Closed 7 years ago.
I'm making popup. And when it appears I want everything be unclickable but this very popup.
Here's some lousy code example:
<div class="content-unclickable">
<div class="popup-clickable">some info and buttons</div>
</div>
$('content-unclickable *').on('mousedown', function(e){
e.preventDefault();
e.stopPropagation();
return false;
});
You can return false and use to e.preventDefault(); prevent Default behavior and e.stopPropagation(); all items will stop propagation
I suppose you want to display an overlay over the page that contains some elements.
Check the following example:
First, if you click on 'page element' an alert pops up.
Click on 'open popup' and you want be able to click 'page element':
$('#open-popup').on('click', function() {
$('#popup').show();
});
$('#page').on('click', function() {
alert('you clicked on page!');
});
$('#popupElem').on('click', function() {
alert('you clicked onside popup!');
});
#popup {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:100;
display:none;
}
.popup-inner {
position:fixed;
width:200px;
height:150px;
top:50%;;
left:50%;
margin-top:-75px;
margin-left:-100px;
background-color:#ececec;
z-index:110;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="page">page element (click on me!)</span><br />
<span id="open-popup">open popup!</span>
<div id="popup">
<div class="popup-inner">some info and buttons <b id="popupElem">click</b></div>
</div>

How to toggle between two divs?

I'm trying to toggle between div .cam1 and div .cam2, but nothing is working, heres the code;
HTML:
<div class="cam1"></div>
<div class="cam2"></div>
CSS:
.cam1 {
position:absolute;
height:100%;
width:100%;
background-color:red;
}
.cam2 {
position:absolute;
height:100%
width:100%
background-color:blue;
}
JS:
$('.cam2').hide();
$('.cam1, .cam2').on('click',
function()
{
$('.cam1, .cam2').toggle()
}
);
$(document).read(main)
Your dom elements are not loaded when you are trying to hide and bind the event to them. You need to wrap the code in DOM ready event:
$(function(){
$('.cam2').hide();
$('.cam1, .cam2').on('click',function(){
$('.cam1, .cam2').toggle();
});
});
Demo

How to detect mouse events on adjacent elements in HTML that are covered

Is it possible to detect mouse events on an object that is adjacent (not a child for) but under another element in my HTML?
For example:
<style>
#test, test2 {
width: 100%;
height: 100%
}
</style>
<html>
<section class="full" id="test">
Full Screen
</section>
<section class="anotherFull" id="test2">
Full Screen As well
</section>
<script>
var elem = document.querySelector('#test2');
elem.addEventListener('hover', function(){
alert('you are hovering');
}, false);
</script>
<html>
If I however over the page, regardless if I use mouseenter mouseover or hover, and no matter how far down I look in the e (from document.addEventListener('hover', function(e){}, false); (like e.target etc. I can't detect a hover on the second (adjacent) element.
jsFiddle Demo
One way to address this would be to simply chain the events. You can do this with a combination of addEventListener and dispatchEvent. It is outlined in an MDN article named Creating and triggering events
var
outer = document.getElementById("outer"),
inner = document.getElementById("inner")
;
inner.addEventListener('mouseenter',function(e){
alert('hovering inner');
},false);
outer.addEventListener('mouseenter',function(ev){
alert('hovering outer');
this.style.display = "none";
var tar = document.elementFromPoint(ev.clientX, ev.clientY);
this.style.display = "block";
tar.dispatchEvent(new Event('mouseenter'));
},false);
#screen{
position:relative;
width:50px;
height:50px;
}
#outer{
position:absolute;
top:0;
left:0;
z-index:2;
width:50px;
height:50px;
background-color:blue;
}
#inner{
position:absolute;
top:0;
left:0;
z-index:1;
width:50px;
height:50px;
background-color:red;
}
<fieldset>
<legend>Screen Mockup</legend>
<div id="screen">
<div id="outer"></div>
<div id="inner"></div>
</div>
</fieldset>
Your post is unclear so I'll give a couple sugesstions.
If you're just trying to find out how to bind a hover event to the sibling of some known selector...
JavaScript
var el = document.getElementById('test').nextElementSibling;
el.addEventListener('mouseover', function(e){...});
CSS
#test+section:hover {
...
}
NOTE: HTML id attributes must be unique. So your markup shouldn't contain two elements with the same id.

Animation doesn't work correctly while scrolling the website

I have a problem with animation, when I scroll the page. You can see it above.
Click "show notice" button and wait about 2 seconds, then the notice will start to hide. Scroll up and down and you will see the notification is jumping up and down. What do I need to do to have notice always in the bottom of website window, even during scrolling?
JSFIDDLE
HTML
<input type="button" value="show notice">
<div id="notice"><p>Notice</p></div>
CSS
body {
height:3000px;
}
#notice {
display:none;
position:absolute;
top:0;
left:0;
width:100px;
height:40px;
background:green;
text-align:center;
font:12px Verdana; color:white;
}
#notice p {
}
JS
function shownotice(){
if(typeof(ntimeout)!='undefined')
clearTimeout(ntimeout);
$('#notice').css({'height':'0px', 'top':h+$(window).scrollTop()+'px'}).show().animate({'height':'+=40px', 'top':'-=40px'}, {duration:300});
ntimeout=setTimeout(function(){hidenotice();}, 2000);
}
function hidenotice(){
$('#notice').animate({'height':'-=40px', 'top':'+=40px'}, {duration:10600, complete:function(){$(this).hide();}});
}
$(function(){
h=window.innerHeight||document.body.clientHeight;
$('#notice').css({'top':h-$('#notice').height()+'px'});
$('input').on('click', function(){shownotice();});
$(window).scroll(function(){$('#notice').css({'top':h-$('#notice').height()+$(window).scrollTop()+'px'})});
});
http://jsfiddle.net/sn1xfwxm/11/
changes to your original fiddle:
#notice {
position:fixed;
removed the display: none, also!
the resulting js is much more simple:
$("#notice").hide(); //hide the notice on document load
$("#show").click(function () {
$("#notice").stop(true, true).slideDown();
});
$("#hide").click(function () {
$("#notice").stop(true, true).slideUp();
});

javascript code and zindex

I am having problems with getting the z-index to change using javascript can any one help me on where I am going wrong,
what I am trying to do is have a box appear on top on another box once a button is clicked but it does not seem to work.
function toggleupload(){
var but = document.getElementById('picbutton').innerHTML;
if (but == "Change Picture"){
document.getElementById('picbutton').innerHTML = "Hide upload box";
document.getElementById('uploadbox').style.zIndex = 2;
document.getElementById('profilebasic').style.zIndex = 1;
}
if (but == "Hide upload box"){
document.getElementById('picbutton').innerHTML = "Change Picture";
document.getElementById('uploadbox').style.zIndex = 1;
document.getElementById('profilebasic').style.zIndex = 2;
}
}
#profilebasic{
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
}
#uploadbox {
position:absolute;
top:0px;
left:0px;
width:300px;
height:300px;
z-index:1;
background-color:#F00;
}
#uploadbo{
text-align:center;
width:300px;
height:300px;
z-index:3;
}
<div id="uploadbo">
<div id="profilebasic">
</div>
<div id="uploadbox">
</div>
<button onclick="toggleupload();" id="picbutton">Change Picture</button>
</div>
The z-index property only works on positioned elements, so you need to explicitly set the position on profilebasic like:
#profilebasic {
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
position:absolute;
}
jsFiddle example
(note that I also had to set some CSS on your button otherwise it would have ended up under your positioned divs.)
Since uploadbox already starts out in front I assume you want to swap these.
Based on z-index rules, an absolutely positioned div will still appear in front of a non-absolutely positioned div unless its z-index value is negative.
That is, use a negative z-index for the box you want to be behind.
http://jsfiddle.net/X54gr/

Categories