If I have something like this
<div id='one'>xyz
<span id='two'>abc</span>
</div>
I want to be able to hover element one, then element two then one again
but jquery can't recognize the when i'm leaving two, im actually re-entering one
I need/expect to be able to fire an event when i'm re-entering one
Is it possible to achieve this without modifying the html markup of the page (I can't touch it!)
I think below code is helpful to you
#one{
width:100px;
height:100px;
position:relative
}
#one:hover{
width:150px;
height:160px;
background-color:red;
}
#two{
width:100%;
position:absolute;
height:100px;
}
#two:hover{
width:100px;
background-color:green;
height:100px;
}
<div id='one'>xyz
<span id='two'>abc</span>
</div>
You can try something like the following:
$('div#two').bind(('mouseenter, mouseleave'), function(event) {
event.stopPropagation();
});
$('body').on('mouseenter', '#one', function(e){
console.log('You entered: ', $(this).attr('id'));
}).on('mouseleave', '#one', function(){
console.log('You left: ', $(this).attr('id'));
});
$('body').on('mouseenter', '#two', function(){
console.log('You entered: ', $(this).attr('id'));
}).on('mouseleave', '#two', function(){
console.log('You left: ', $(this).attr('id'));
});
#one{
background-color: red;
}
#two{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='one'>xyz
<span id='two'>abc</span>
</div>
When you enter two you actually never leave one, because two is inside one only. So, mouseenter event of one will never get triggered when you enter its' descendants.
You can probably distinguish it, by attaching mouseenter event on all the descendants of one, to track mouseleave from one, alongwith mouseleave event on one
$("#one").mouseenter(function(){
//Entering one
});
$("#one").children().mouseleave(function(){
//Entering one again
});
when mouse is in #two or #one ,it has just mouseenter event,because mouse don't leave #one.
Try this:
$(document).ready(function(){
$('#two').hover(function(){
$('#one').toggleClass('newCss');
},function(){
$('#one').toggleClass('newCss');
})
$('#one').hover(function(){
$(this).toggleClass('newCss');
})
})
$(document).ready(function(){
$('#two').hover(function(){
$('#one').toggleClass('newCss');
},function(){
$('#one').toggleClass('newCss');
})
$('#one').hover(function(){
$(this).toggleClass('newCss');
})
})
#one {
width: 200px;
height: 200px;
padding: 30px;
background-color: red;
}
#two {
width: 100px;
height: 100px;
background-color: blue;
padding: 30px;
}
#two:hover {
background-color: orange;
}
.newCss {
background-color: green!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='one'>xyz
<span id='two'>abc</span>
</div>
Related
I cannot show any pen, I can just describe the bug. This is my javascript:
$(".vetrina-deluxe-info-container-front").hover(function() {
$(this).closest('.js-in-viewport-hook').addClass("in-viewport");
}, function() {
$(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});
On the first .hover() on any of these elements, the class is added and immediately removed. From the second time I hover everything works fine.
I've also tried this code:
$(".vetrina-deluxe-info-container-front").mouseover(function() {
$(this).closest('.js-in-viewport-hook').addClass("in-viewport");
});
$(".vetrina-deluxe-info-container-front").mouseleave(function() {
$(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});
It has the exact same behavior. I have also tried to change the .hover() div to see if anything changes but no. Any ideas or workaround?
I've tried in diferents elements.
$('.test').mouseover(function(e){
console.log('ON');
$(this).removeClass('blue');
$(this).addClass('red');
}).mouseout(function(e){
$(this).removeClass('red');
console.log('OUT');
$(this).addClass('blue');
});
$('#test').mouseenter(function(e){
console.log('IN');
$(this).removeClass('red');
$(this).addClass('yellow');
}).mouseleave(function(e){
$(this).removeClass('yellow');
$(this).removeClass('yellow');
console.log('OUT');
$(this).addClass('red');
});
.test{
width: 60%;
height: 60%;
margin: 10px auto;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="test yellow">
<p>TEST</p>
</div>
</html>
Your code will be like:
$(".vetrina-deluxe-info-container-front").mouseenter(function() {
$(this).closest('.js-in-viewport-hook').addClass("in-viewport");
}).mouseleave(function() {
$(this).closest('.js-in-viewport-hook').removeClass("in-viewport");
});
Did you try this code:
$(".vetrina-deluxe-info-container-front").hover(function() {
$(this).closest('.js-in-viewport-hook').toggleClass("in-viewport");
});
please check this i have added class on hover then i remove the class name when not hovered
<p>hover me.</p>
<script>
$("p").hover(function(){
$(this).css({"color":"blue"}).addClass('color-blue');
}, function(){
$("p").css({"color":"red"}).removeClass('color-blue');
});
</script>
https://jsfiddle.net/gapqc5wb/
I've been having problems with creating a colored block which is hidden, and then appears after a mouse press (no where specific, anywhere on the page), then stays there for 2 seconds and then disappears again... until another mouse press happens, and the whole thing happens again. Have been experimenting with '.click(function' and other things but haven't been able to make it work.
At the moment I have a DIV layer like this...
HTML:
<div class="overlay"></div>
CSS:
.overlay {
position: absolute;
z-index: 1000;
right: 240px;
top: 500px;
width: 1000px;
height: 100px;
background: rgba(255, 255, 200, 100);
}
I'm quite new to javascript so any advice will be very helpful.
You can do it using setTimeout in jQuery
$( "#target" ).on( "click", function() {
$("#messageBox").hide().slideDown();
setTimeout(function(){
$("#messageBox").hide();
}, 2000);
});
#messageBox {
display:inline-block;
float:right;
border:1px solid #060;
background:#FFC;
padding:10px 20px;
box-shadow:2px 2px 4px #666;
color:#060;
font-weight:bold;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="messageBox">
Hi there.
</div>
<input type="button" id ="target" value="click"/>
The jQuery(document) does the trick as it will consider click for the whole document and not to a specific place on page.
jQuery(document).click(function(event) {
var $div = $(".overlay");
if ($div.is(":visible")) { return; }
$div.show();
setTimeout(function() {
$div.hide();
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Doing this you do need a target div or element to fire an event on click. This will allow you to fire the event on the whole document.
I am trying to build a simple dropdown plugin for small project of mine. I do not want to use ready plugins, I want to learn by making one on my own.
html:
<div>
<span class="dropdown_triger">press</span>
<div class="content dropdown-closed">
</div>
</div>
css:
span{
display:inline-block;
background: green;
padding: 5px;
}
.content{
position: absolute;
top: 40px;
border: solid 1px black;
width: 200px;
height: 100px;
}
.dropdown-closed { display: none; }
.dropdown-open { display: block; }
and JS:
$(document).ready(function(){
$('body').on('click', '.dropdown_triger', function(e){
var $wrapper = $(this).parent();
var $content = $(this).next();
var $triger = $(this);
if($triger.hasClass('selected')){
$(document).off('mouseup.dropdownDocClick');
console.log('hasClass');
}
$triger.toggleClass('selected');
$content.toggleClass('dropdown-closed dropdown-open');
$(document).on('mouseup.dropdownDocClick',function (e){
console.log('fire');
if (!$wrapper.is(e.target) && $wrapper.has(e.target).length === 0){
if($content.hasClass('dropdown-open')){
$content.toggleClass('dropdown-closed dropdown-open');
$(document).off('mouseup.dropdownDocClick');
}
}
});
});
});
Everything works except for this place:
if($triger.hasClass('selected')){
$(document).off('mouseup.dropdownDocClick');
console.log('hasClass');
}
I expect that mouseup event would not fire anymore but it does. Here is a fiddle, just try it. If I open dropdown, mouseup event is attached to document and keeps firing until I have clicked outside container thus closed dropdown.
But if I close dropdown by clicking again on triger button(span in my example) event is not removed and I can not understand why?
I have several divs which are generating dynamically which share same class names, If I hover on parent(myDiv) need to trigger an event and on hover need to add a class to myDiv(child button) and once I clicked on parent div(myDiv) need to unbind hover action?
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
<div class="myDiv">
<div class="myBtn"></div>
</div>
Tried in the below way
$(document).on('click', '.myDiv', function() {
//some task will goes here
$(this).unbind('hover');
}).hover(function() {
$(this).find('.myBtn').css('background','#666666');
});
I believe what you are looking for is the .off() function.
Here is the jsFiddle link.
JavaScript:
$(document).on('click', '.myDiv', function() {
//some task will goes here
$(this).off();
});
$('.myDiv').hover(function() {
$(this).find('.myBtn').toggleClass('active');
});
CSS:
.myDiv {
display: block;
height: 100px;
width: 100px;
background-color: red;
}
.myBtn {
display: block;
height: 50px;
width: 100px;
background-color: white;
}
.active {
background-color: gray;
}
I hope this helps.
I'm tying to make text fadeIn and stay visible while the mouse pointer is in the container and only when the mouse pointer leaves the designated area, only then must the text fadeOut but for some reason its not working, the text will fadeOut even when the mouse is inside the container.
I'm using Jquery lib 1.10.1 as well as Jquery ui 1.11.0
Here is the code:
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
<div class="conti">
<div class="arrow-right"></div>
</div>
<div class="text-fade"></div>
</div>
CSS
.hold{
width: 142px;
background: yellow;
overflow: hidden;
padding:10px;
}
.conti{
width: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.text-fade{
display: none;
float: right;
margin-top:-30px;
margin-left: 10px;
margin-right:10px;
}
JS
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
$('.text-fade').fadeOut(1000);
});
This is the link to my fiddle example
mouseout is triggered by children, use mouseleave instead
$('.hold').mouseenter(function () {
// var d = $('.arrow-right');
// d.effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
JS fiddle updated
Put the text directly into ".text-fade" and give some transition to the ".text-fader" class. Then change the text color via JS.
Here's the code for changing from #FFFFFF to #000000 and back again:
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
$('.text-fade').css('color', '#FFFFFF');
});
You are using the wrong functions, its mouseenter() and mouseleave()
working fiddle here
your javascript
$('.hold').mouseenter(function () {
$('.text-fade').text("this is a test text");
$('.text-fade').fadeIn(1000);
$('.text-fade').show();
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
also that bounce function you had seems to cause some problems that I could not find out why so I removed it