Please see https://jsfiddle.net/cot33dxa/
setInterval(function() {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
}, 0);
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
#one {
width: 200px;
height: 200px;
background-color: yellow;
}
#two {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
Why is it that for div one, the hover check works just fine, whereas it doesn't in div two?
I have the same issue when using if ($('#element:hover').length != 0) (taken from ivo's solution).
JS fiddle for that: https://jsfiddle.net/q8dfLc6s/
In a more general sense, I am looking for the simplest, most reliable way to know if the mouse is over a div in JQuery 1.11.0. As it stands, I can't even get the boolean check to work at all aside from this SetInterval oddity.
The problem with your fiddle is that your second check is outside of your interval function. Try this:
setInterval(function(){
if($("#one").is(":hover")) {
$("#one").css("background-color","red");
}
else {
$("#one").css("background-color","");
}
if($("#two").is(":hover")) {
$("#two").css("background-color","blue");
}
else {
$("#two").css("background-color","");
}
},0);
The scond one doesn't work because it's not inside the interval timer and that code only runs on page load therefore
Change to
setInterval(function () {
if ($("#one").is(":hover")) {
$("#one").css("background-color", "red");
} else {
$("#one").css("background-color", "");
}
if ($("#two").is(":hover")) {
$("#two").css("background-color", "blue");
} else {
$("#two").css("background-color", "");
}
}, 0);
I have no idea why you need this and don't just use hover events or hover css
DEMO
Good question! By putting your code in a setInterval you are essentially mirroring what the browser is doing in the background in the event loop.
This behavior should generally be avoided and instead replaced by an actual event.
in jQuery this would look like:
$('#element').on( 'hover', function (this, event) {
$element = this;
/*handle event*/
});
More here: https://api.jquery.com/on/
Edit: The code you are running would be best done in CSS using the :hover selector as such:
#element {
background-color: blue
}
#element:hover {
background-color: red
}
Instead of moving your code inside setInterval:
the reason why your second example 'doesnt work', is the fact that it will execute only once the page has loaded. setInterval on the other hand, executes every ~0s which 'works'.
However to achieve what you're trying to do, consider to use .hover() as it is listening for the actual event of moving the cursor in or out of the selector and will not execute your else block all of the time:
$(function() {
$("#two").hover(function() {
$("#two").css("background-color","blue");
}, function() {
$("#two").css("background-color","");
});
});
jsfiddle
Related
I looked at other threads, and their mistakes had to do with typos, I'm not sure where I'm going wrong.
I don't see the scroll button at all. It works when I call the function showScroll() from the body of my html using <body onscroll="showScrol()"> but that doesn't work in IE so I'm trying to use this function but it's not working:
// SCROLL TO TOP
$(document).ready(function() {
$(window).scroll(showScroll());
function showScroll() {
if ($(window).scrollTop() > 50) {
$("#top-btn").show();
} else {
$("#top-btn").hide();
}
}
function scrollToTop() {
$(window).scrollTop(0);
}
});
$(window).scroll(showScroll()); means you're executing the function instantly and the return value is being passed into the scroll event.
Instead make it $(window).scroll(showScroll); so it's the function that is passed in.
I created an example for you to illustrate. I guessed the html a bit but you get the point. Start scrolling the below example and see the div appear and disappear.
// SCROLL TO TOP
$(document).ready(function() {
$(window).scroll(showScroll); // <-- this was changed
function showScroll() {
if ($(window).scrollTop() > 50) {
$("#top-btn").show();
} else {
$("#top-btn").hide();
}
}
function scrollToTop() {
$(window).scrollTop(0);
}
const button = document.querySelector('button'); // <-- added this for completeness
button.addEventListener('click', scrollToTop);
});
main {
height: 600px;
}
#top-btn {
position: fixed;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<button id="top-btn">Show me</button>
</main>
Hi I'm new to jquery and just trying to put a simple script together to show/hide my mobile menu on click. It works fine however, it only works once until you refresh your browser.
Jquery:
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("hidenav").addClass("slidenav");
$(".menutrigger").click(function () {
$(".nav").removeClass("slidenav").addClass("hidenav");
});
});
});
CSS:
#media (max-width: 767px) {
.slidenav {
display: block;
}
.hidenav {
display: none;
}
}
It is because you are defining multiple click events
This should work
$(document).ready(function()
{
//your code here
$(".nav").addClass("hidenav");
var flag = 0;
$(".menutrigger").click(function()
{
if(flag == 0)
{
flag = 1;
$(".nav").removeClass("hidenav").addClass("slidenav");
}
else
{
flag = 0;
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
declaring multiple onClick events won't work and will be overridden by last one. you can do all those things in on onclick callback by checking whether your class is there or not
$(document).ready(function () {
//your code here
$(".nav").addClass("hidenav");
$(".menutrigger").click(function () {
if ($(".nav").hasClass("hidenav")){
$(".nav").removeClass("hidenav").addClass("slidenav");
} else if ($(".nav").hasClass("slidenav")){
$(".nav").removeClass("slidenav").addClass("hidenav");
}
});
});
Have you tried toggleClass ?
$('.menutrigger').click(function (e) {
$('.demo').toggleClass("hidenav");
});
it will compress your code to just 1 line.
have a look at this fiddle
To know more about .toggleClass(). see the jQuery API doc
The following jsFiddle changes text of #more depending on the visibility of #extra:
<style>
#extra{
display: none;
}
</style>
More about us
<div id="extra">Some Text</div>
<script>
$('#more').click(function() {
if ($('#extra').is(':visible')) {
$(this).text('Less about us');
} else {
$(this).text('More about us');
}
$('#extra').slideToggle('fast');
});
</script>
This works fine. However, it does not work anymore if I put the slideToggle() above the if-statement like this (see this jsFiddle):
$('#more').click(function() {
$('#extra').slideToggle('fast');
if ($('#extra').is(':visible')) {
$(this).text('More about us');
} else {
$(this).text('Less about us');
}
});
In this example, the text will remain "More about us" no matter if #extra is hidden or not. Why?
the code get's executed one line at a time, so by the time you enter the if, the slideToggle isn't finished so the element is visible.
You should put the if statement inside the slideToggle's complete callback http://api.jquery.com/slidetoggle/
$('#more').click(function() {
var _this = this;
$('#extra').slideToggle('fast', function() {
if($(this).is(':visible')) {
$(_this).text('Less about us');
}
else {
$(_this).text('More about us');
}
});
});
jsFiddle
This happens because the animation isn't done before you check the visibility. A cleaner solution would be this:
var visible = false;
$('#more').click(function() {
visible = !visible;
if (visible) $('#extra').slideDown();
else $('#extra').slideUp();
$(this).text(visible ? 'Less about us' : 'More about us');
});
Fiddle
This way you don't have to check the actual visibility of the element. You could use a callback to execute the code after the animation has completed, but that could cause an unwanted delay.
Im trying to make the divs change class from "normal" to "thin" ONLY if they have the class "normal". But somehow they just change back and forth, the IF statement seems to be written completely wrong :)
Here is the code
<div class="normal">1</div>
<div class="normal">2</div>
<div class="normal">3</div>
<div class="normal">4</div>
<div class="normal">5</div>
<div class="normal">6</div>
CSS:
.normal{
float:left;
height:200px;
width:100px;
border:1px dotted gray;
}
.thin{
float:left;
width:50px;
height:200px;
border:1px dotted gray;
background-color:#5a5a5a;
}
jQuery
$(document.body).click(function () {
$("div").each(function () {
if ($(this).hasClass("normal")) {
$(this).toggleClass("thin", 300); //Problem here?
} else {
this.style.color = "red";
}
});
});
#Egis as per your requirement the code should like below :
$(document.body).toggle(
function () {
$("div.normal").animate({
width: "50px",
}, "slow", function(){ $(this).addClass("thin"); });
},
function(){
$("div.normal").animate({
width: "100px",
}, "slow", function(){ $(this).removeClass("thin"); });
}
);
DEMO
I hope this is what you are looking for, Good Luck !!
ToggleClass (http://api.jquery.com/toggleClass/) will both add and remove the class. So instead, you want to remove the class "normal" and add the class "thin":
$(this).removeClass("normal").addClass("thin");
Regarding the animation, it looks like you are using the jQueryUI project (sorry I missed the tag, the first time around): http://jqueryui.com/toggleClass/ which allows you to specify an animation duration. With that in mind, you can include the durations:
$(this).removeClass("normal", 300).addClass("thin", 300);
You didn't remove the 'normal' class after you have first reached the code block of your if and your div will always have the 'normal' class, so your condition in your if will always be true.
Use removeClass for that purpose.
Also, if you want to change the class from 'normal' to 'thin', use the addClass for adding thin instead of toggle.
EDIT:
Maybe this is what you want:
$(document.body).click(function () {
$("div").each(function () {
if ($(this).hasClass("normal")) {
$(this).removeClass("normal");
$(this).addClass("thin");
}
else if ($(this).hasClass("thin")) {
$(this).removeClass("thin");
$(this).addClass("normal");
} else {
this.style.color = "red";
}
});
});
I've created DIV.cb-toggle, when the user hovers over this div, it animates to Orange, when they hover off of this div, it animates back to gray, when the user clicks this div, it animates to blue, telling the user that it's been selected. So when it's NOT selected, it has mouseenter mouseleave animations, but when it's selected i want to unbind these events, I DO NOT want the hover event to work when it's been selected, only when it's not selected. What's the best way to do what i'm trying to accomplish? I came up with the code below but i'm pretty sure this is a horrible way to do it and i don't know what to do. thank you so much for any help.
my code:
$('.cb-toggle').toggle(function() {
$(this).animate({"background":"blue", "color":"#fff;"});
$(".cb-toggle").unbind("click.myfadee");
}, function() {
$(this).animate({"background":"gray", "color":"#fff;"});
$('.cb-toggle').trigger('mouseenter');
});
});
and I'm calling this bind:
$(".cb-toggle").bind("click.myfadee", function(){
$(".cb-toggle").mouseenter(function() {
$(this).animate({"background":"orange", "color":"#fff;"});
}).mouseleave(function() {
$(this).animate({"background":"gray", "color":"#fff;"});
});
});
I need to keep the background color animation, it needs to fade.
I would use CSS for the styling to simplify your whole setup without un/re-binding, like this:
.cb-toggle { background: blue; color: #fff; }
.cb-toggle.active { background: gray; }
.cb-toggle.active:hover { background: orange; }
Then you can do just this:
$('.cb-toggle').click(function() {
$(this).toggleClass("active");
});
This approach also lets you offload all styling, colors, etc to the CSS, meaning no JavaScript changes are needed when you decide to tweak the colors or any other styling :)
Or, if you need to support IE6, add a .live() handler for the hover that triggers on only the ones with the .active class, like this:
$(".cb-toggle.active").live('mouseenter', function() {
$(this).addClass('hover');
}).live('mouseleave', function() {
$(this).removeClass('hover');
});
With matching CSS:
.cb-toggle.active.hover { background: orange; }
You should probably just use a selected class. Also I'd recommend against using any of the .css() calls you have here. Just use classes.
$(".cb-toggle").bind("click.myfadee", function(){
$(this).toggleClass('selected');
});
$('.cb-toggle').toggle(function() {
var $this = $(this);
if ( $this.is('.selected') ) {
$this.css({"background":"blue", "color":"#fff;"});
}
}, function() {
var $this = $(this);
if ( $this.is('.selected') ) {
$this.css({"background":"gray", "color":"#fff;"});
}
});