I've an alert div, once it pops up I've to wait till it disappear completely before the next animation can occur. Is there any way to ignore/cancel the animation and let it be overwritten with new one? So it re-alert very time I hover the button.
$('.button').hover(function () {
$('#alert-me').show();
$("#alert-me").fadeOut(6000);
});
<div class="hidden-div" id="alert-me">
<b> hello! </b>
</div>
A simple option would be to .finish() the animation before you .show() it.
Working Example:
$('.button').hover(function () {
$('#alert-me').finish().show();
$("#alert-me").fadeOut(6000);
});
.hidden-div {
display: none;
}
.button {
border: 1px solid grey;
padding: 0.5em;
margin: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button">button</div>
<div class="hidden-div" id="alert-me">
<b> hello! </b>
</div>
inside the callback of show() method you can hide it.
$('.button').hover(function () {
$('#alert-me').show(function(){
$("#alert-me").fadeOut(6000);
});
});
Related
For example, if I have an element that is not wrapped within the same parent container as another div I am hovering, will it be possible to change this external element style?
<div class="externalElement"></div>
<container>
<div class="tohover"></div> </container>
How can I update
"externalElement" when I hover "tohover" div class? I've tried with jQuery but to no avail..
Here is a vanilla JavaScript answer.
Hover on the blue box to make the red box green.
onmouseover on MDN:
The onmouseover property of the GlobalEventHandlers mixin is an event handler that processes mouseover events.
The mouseover event fires when the user moves the mouse over a particular element.
onmouseout on MDN:
The onmouseout property of the GlobalEventHandlers mixin is an event handler that processes mouseout events.
The mouseout event fires when the mouse leaves an element. For example, when the mouse moves off of an image in the web page, the mouseout event is raised for that image element.
const $externalElement = document.querySelector('.externalElement')
const $tohover = document.querySelector('.tohover')
$tohover.onmouseover = () => {
$externalElement.style.backgroundColor = 'lightgreen'
}
$tohover.onmouseout = () => {
$externalElement.style.backgroundColor = 'indianred'
}
main {
display: flex;
}
.externalElement {
height: 100px;
width: 100px;
margin-left: 20px;
background: indianred;
border-radius: 5px;
transition: all 200ms;
}
.tohover {
cursor: pointer;
height: 100px;
width: 100px;
background: steelblue;
border-radius: 5px;
color: white;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
<main>
<container>
<div class="tohover">Hover me!</div>
</container>
<div class="externalElement"></div>
</main>
By using the mouseover and mouseout functionalities, you can achieve this as below;
$('.tohover').on('mouseover', function() {
$('.externalElement').addClass('hovered')
})
$('.tohover').on('mouseout', function() {
$('.externalElement').removeClass('hovered')
})
.tohover {
border: 1px solid #ddd;
padding: 10px;
}
.externalElement {
color: red;
transition: all 0.3s ease;
}
.externalElement.hovered {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="externalElement">Here</div>
<div>
<div class="tohover">Hover me!</div>
</div>
I used the mouseover and mouseout so that it will be easy to understand. Otherwise,it can be achieved using a single function.
So there are 2 different options the first is to use the sibling selector and just go pretty specific, what I wouldn't recommend because of selector sepcifity. The second option would be using jQuery as shown in the exmaple below.
The hover function accepts 2 parameters, one is what will happen on enter, the other is what happens on leave.
I also added a solution without jquery and plain js.
$('.hover').hover(
() => $('.far').addClass('hovered'),
() => $('.far').removeClass('hovered')
)
const target = document.querySelector('.far-nonjquery');
const hover = document.querySelector('.hover')
hover.addEventListener('mouseenter', e => target.classList.add('hovered'));
hover.addEventListener('mouseleave', e => target.classList.remove('hovered'));
.hover:hover + .next {
font-size: 2rem;
}
.hovered {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hover">Hover</div>
<div class="next">Next</div>
<div>
<div>
<p>
<span class="far">Far away</span>
</p>
</div>
</div>
<div>
<div>
<p>
<span class="far-nonjquery">Far away non jquery</span>
</p>
</div>
</div>
I have two <div> elements attached to each other, I mean there is no space between them.
<div id="box1">1</div>
<div id="box2">2</div>
And I have this jQuery code:
$('#box1 , #box2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
My problem is when I move the mouse between box1 and box2, I still get on console log "Not".
I want those divs to be considered as one element so when I move the mouse between them I don't get on console log "Not".
Thanks in advance!
I want those divs to be considered as one element
Well, quite simply, they aren't. And they can't be. That's not how HTML and CSS works.
The hover event is triggered one for each individual element bound to the event handler. And every time you leave one of those elements it will print the "not" output as per your instructions.
There is no "fix" for this in the exact way you described, but there are alternative approaches. An obvious solution is to wrap them both in an outer div and bind the hover event to that instead. Then the whole area will be considered as one element (because it literally is). Demo:
$('#boxcontainer').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
#boxcontainer {
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
friend check the code below. I think it will work for you. As you have dai you have an absolute position div you must need a parent div and the parent div position must be relative. For doing that you have to add just a simple CSS code position: relative;. You also need to do some changes to your jquery code. You can just hover on the parent div and it will do your work. Hope this code will help you.
//Box 1 Demo
$('#boxParrent1').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
//Box 2 Demo
$('#boxParrent2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
/*Main Code that are needed*/
#boxParrent1, #boxParrent2 {
position: relative;
}
/*Codes Just used to give you a demo*/
#boxParrent1, #boxParrent2{
display: flex;
margin-bottom: 50px;
border: 1px solid #000;
}
#boxParrent1{
width: 200px;
}
#boxParrent2{
width: 210px;
}
#box1, #box2, #box3, #box4{
background: tomato;
width: 100px;
height: 100px;
display: grid;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: 50px;
color: #fff;
cursor: pointer;
}
#box2, #box4{
position:absolute;
top: 0;
left:100px;
background: #02dce6;
}
#box4{
left:110px;
background: #02dce6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxParrent1">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
<div id="boxParrent2">
<div id="box3">3</div>
<div id="box4">4</div>
</div>
Try to place your 2 div's in one super div
<div id="super">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
$('#super').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
I have an HTML container message that fades in, lasts 30 seconds and fades out. I want to have a "close" feature on it, and would like the click event to fade out to hide the container. But it doesn't work with the prior fadeOut in place.
(function() {
$('.container')
.delay(1000).fadeIn(500)
.delay(30000).fadeOut(500);
$('button').click(function() {
$('.container').fadeOut(500);
});
}());
.container {
background-color: #ccc;
display: none;
padding: 1rem;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Hello world
</div>
<button>Close</button>
I could call hide(), but I want the smooth transition that fadeOut provides. I just can't figure out why this won't work. Any ideas? Thanks!
Use setTimeout to queue up the 30-second fadeOut instead:
const container = $('.container');
container
.delay(1000)
.fadeIn(500);
setTimeout(() => container.fadeOut(500), 31000);
$('button').click(function() {
container.fadeOut(500);
});
.container {
background-color: #ccc;
display: none;
padding: 1rem;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Hello world
</div>
<button>Close</button>
I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});
You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO
The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});
You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example
jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle
I am working on phone-gap application in dream-weaver
I have 2 divs .pics and .cover
<div class="pics">
<div class="cover"></div>
</div>
the main idea is to change the colour of the cover div and toggle a JS variable between true and false
var checked=false;
$('.pics').click(function(){
CheckToggle();
});
function CheckToggle(){
if(checked==false){
checked=true;
$('.cover').css({"background":"rgba(255,255,255,.5)"});
}
else
checked=false;
}
I click on .pics and nothing happens
I think there is an error in the jquery code
This is what I used after all
$(function(){
$( "#item1" ).bind( "tap", PicCheck );
var checked;
var choosen="#item1";
checked=$(choosen).attr('pcheck');
function PicCheck( event ){
if(checked=="false"){
$(choosen).toggleClass("selected");
checked="true";
}
else if(checked=="true"){
$(choosen).toggleClass("selected");
checked="false";
}
$(choosen).attr('pcheck',checked);
}
});
With some css you can implement a checkbox and radio buttons with pictures. Try this :
<div>
<input id="input-1" class="img-checkbox" type="radio" name="selectTipo">
<label for="input-1" class="">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/128px-HTML5_logo_and_wordmark.svg.png">
</label>
<input class="img-checkbox" type="radio" id="input-2" name="selectTipo">
<label for="input-2">
<img src="http://www.javatpoint.com/images/javascript/javascript_logo.png">
</label>
And in your css :
input.img-checkbox[type=radio], input.img-checkbox[type=checkbox] {
display: none;
}
img{
height:100px;
}
input.img-checkbox[type=radio]+label, input.img-checkbox[type=checkbox]+label {
border: 10px solid transparent;
display: inline-block;
border-radius: 10px;
}
input.img-checkbox[type=radio]:checked+label, input.img-checkbox[type=checkbox]:checked+label {
border: 10px solid #C6ECED;
display: inline-block;
}
See the result in the follow jsfiddle
I'd skip the Javascript and use a label element and the :checked selector.
#example {
visibility: hidden;
width: 0;
}
label {
color: purple;
}
#example:checked + label {
background-color: red;
color: white;
}
The HTML would be like this:
<input id="example" type="checkbox" name="example" value="true">
<label for="example">Example</label>
With this approach you wouldn't need to worry about tracking the checked variable and you can just figure it out normally.
Here's a demo: http://jsbin.com/cirali/1/edit?html,css,output
It is usually most convenient to use additional class for your purpose.
Here is a simple example:
var checked = false;
$('.pics').click(function() {
CheckToggle();
});
function CheckToggle() {
$('.cover').toggleClass('selected');
checked = $('.cover').hasClass('selected');
}
.cover {
background: red;
}
.cover.selected {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
<div class="cover">test</div>
</div>
Edit:
Since you are using jQuery mobie, you might want to try the vclick or tap events instead of the regular click event.
Depending on how you have the elements styled, it might be better to put the action on the .cover element... If the child element .cover is the exact same height and width of the parent element .pics you wont be able to click on .pics