How to toggle between two divs? - javascript

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

Related

Refer to self with CSS selector when binding dynamic elements with jQuery?

This code is used to bind events to dynamic elements with jQuery.
The #selfID element has body as its parent.
However, body has multiple children besides #selfID.
The goal is to narrow the binding and only bind to mousedown events of #selfID and any of its children with childClass1 and childClass2 as classes. (Siblings of #selfID may also have childClass1 and childClass2 children.)
#selfID is static and not created dynamically.
Thus, the code works for dynamically created childClass1 and childClass2 elements, but it doesn't work for mousedown events on #selfID itself.
Can #selfID refer to itself in the selector statement? Otherwise, it seems like the only other option is to create a separate binding statement just for #selfID?
$("#selfID").on("mousedown", ".childClass1, .childClass2, #selfID", function(event) {
// Do stuff
});
As written in the documentation:
A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
Since #selfID is static, you can try to use a parent element like below:
$("#selfID").parent().on("mousedown", "#selfID .childClass1,#selfID .childClass2, #selfID", function(event) {
// Do stuff
});
So you do the logic on an upper element where you can add the needed element.
$("#selfID").parent().on("mousedown", "#selfID .someclass, #selfID", function(event) {
$(this).toggleClass('target');
event.stopPropagation()
});
#selfID {
background:red;
width:100px;
height:100px;
}
.someclass {
width:50px;
height:50px;
background:blue;
}
.target {
border:5px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selfID">
<div class="someclass"></div>
</div>
<div class="someclass"></div>
We can optimize it by adding a condition inside the function to be able to reduce the selector:
$("#selfID").parent().on("mousedown", ".someclass1,.someclass2, #selfID", function(event) {
if($(this).closest('#selfID').length) {
$(this).toggleClass('target');
event.stopPropagation()
}
});
#selfID {
background:red;
width:120px;
height:120px;
}
.someclass1 {
width:50px;
height:50px;
background:blue;
}
.someclass2 {
width:50px;
height:50px;
background:green;
}
.target {
border:5px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selfID">
<div class="someclass1"></div>
<div class="someclass2"></div>
</div>
<div class="someclass1"></div>
<div class="someclass2"></div>

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.

jQuery - Mouseenter / Mouseleave Parent / Child Issue

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();

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();
});

how to change focus of (this) from .box > .overlay (child)

<div class="box" id="box1">
<div class="overlay" id="ovlay1">
</div>
</div>
<style>
.box{
height:200px; width:200px;
}
.overlay{
height:50px; width:200px; position:absolite; top:-50px;
}
</style>
<script>
$(".box").mouseover(function(){
// $(".overlay").animate({
// $(this).animate({
top: "+=50px",
});
});
</script>
assuming i have about 5 of the .box divs, each with ascending id from box1 -> box5 etc.
the overlay should slide in on mouseover, but just on the hovered box.. i can't figure out the jquery function for this. runing animate on (".overlay") shows the overlay on every box, using (this) does not work because its obviously referring to (".box")...
how can i focus (this) on the overlay?
You can use the find method of jQuery:
$(".box").mouseover(function(){
$(this).find(".overlay").animate({
top: "+=50px",
});
});
Target the .overlay inside the currently hovered .box
$(".box").on('mouseover', function(){
$(".overlay", this).animate({
top: "+=50px",
});
});
This jQuery will select the overlay that is the child of $(this):
$(this).children('.overlay').animate({
top:"+=50px"
});
So the final piece looks like this:
$(".box").mouseover(function(){
$(this).children('.overlay').animate({
top:"+=50px"
});
});

Categories