I just need small jquery help. So we would like to change the value of text on the left element .. So the number (1) should be changed to number (2) once user scroll to 2nd slide.
The body class changes to once you scroll:
fp-viewing-1
Here video of the website:
https://drive.google.com/file/d/10OcUoyvh1Xr3pWmxqzdR67wI8IlkPsNF/view?usp=sharing
Here is what I tried:
<script>
$(document).ready(function() {
if ($('body').attr("class") == "fp-viewing-1") {
$('#count').addClass('something');
}
});
</script>
Once the class is added I was thinking to change the html value with css..
content: "";
// you can use two Intervals to detect as there is no event for class change in Jquery
$(document).ready(function () {
startProcess();
});
function startProcess() {
var checkExist1 = setInterval(function () {
if ($('body').hasClass("fp-viewing-1")) {
clearInterval(checkExist1);
alert("1 detected")
var checkExist0 = setInterval(function () {
if ($('body').hasClass("fp-viewing-0")) {
clearInterval(checkExist0);
startProcess();
alert("0 detected")
}
}, 100);
}
}, 100);
}
Related
How can I wait for a click event ?
eg. I want that my <div> wait for 3 seconds after it's fade in, and if within 3 seconds the <div> is not clicked then it fade out.
I tried to give time 2 seconds in fadeOut but mouse click is not working it just fadeOut.
my .js file code:
$(document).ready(function () {
$(".arrow").hide()
$(".container").mouseenter(function () {
$(".arrow").fadeIn()
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000)
});
$(".arrow").click(function () {
$(".container").hide()
});
I'm not sure what you're trying to accomplish but your onClick handler isn't working because syntax is wrong.
Try this:
$(".arrow").on('click', function () {
$(".container").hide()
});
Also you seem to be missing the closing braces of the ready-function.
It should be like this:
$(document).ready(function () {
// Your code here
}); // Don't forget this line
Use a boolean to check if arrow has been clicked at the end of your time limit.
Example
$(document).ready(function () {
var clicked = false;
$(".arrow").click(function () {
clicked = true;
});
$(".container").hover(function () { // i put the two mouseenter, mouseleave functions into one hover(mousein, mouseout) function
$(".arrow").fadeIn();
setTimeout(function () {
if (clicked === false) {
$(".arrow").fadeOut(2000);
}
}, 3000);
}, function () {
$(".arrow").fadeOut(2000);
clicked = false; // i don't know if you want this or not. this resets everything on mouseout. if you want the .arrow thing to stay even after the mouse leaves .container, just get rid of this line
}); // .hover
}); // .ready
$(document).ready(function () {
var clicked = 0;
$(".container").mouseenter(function () {
$(".arrow").fadeIn();
setTimeout(function() {
if(clicked == 0) {
$(".arrow").fadeOut(2000);
}
},3000);
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000);
});
$(".container").click(function () {
clicked = 1;
});
I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!
You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)
try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});
This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle
You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....
I have an element in aspx page with class= "._aHide" it carrying a message, And it is shown repeatedly.
<div id="Message1" class="._aHide" runat="server" visible="true"><p>My Message</p></div>
aspx server side elements not created when page load if it's visible property = true.
I need to hide this div after 7 seconds of show it, unless mouse over.
I created this code
$(document).ready(function () {
var hide = false;
$("._aHide").hover(function () {
clearTimeout(hide);
});
$("._aHide").mouseout(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
$("._aHide").ready(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
});
But somthings wrong here
1- this code work for one time only, And I show this message many times.
2- All message boxes hides in one time, because I can't use $(this) in settimeout and I don't know why.
Thank you for your help, and I really appreciate it
Remove the point in the HTML code:
<div id="Message1" class="_aHide" runat="server" visible="true"><p>My Message</p></div>
See: http://api.jquery.com/class-selector/
tbraun89 is right, remove the "." in your html code.
Then, you can simplify your code like this :
JQuery hover have 2 functions using mouseenter and mouseleave
$(document).ready(function () {
var hide = false;
$("._aHide").hover(
function () {
//Cancel fadeout
clearTimeout(hide);
},
function(){
//re-set up fadeout
clearTimeout(hide);
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
//Set up fadeout
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
I am trying to fade each element in a div to fadeIn (in) succession. I know how to fade in the whole block but not each individual div.
http://jsfiddle.net/reggi/Km55n/
$('#button').click(function() {
setTimeout(function() {
$('#divWithDivs').fadeIn(500);
}, 300);
});
You need to fade the next div in the completion callback of the previous one.
For example:
function fadeAll(elems) {
elems.filter(':hidden:first').fadeIn(1000, function() { fadeAll(elems); });
}
fadeAll($('#parent div'));
Demo
Note that you'll need to hide the children, not the parent.
You could do something like this:
$('#button').click(function() {
var show_next = function(elem) {
if (elem.length) {
elem.fadeIn(300, function () {
show_next(elem.next());
});
}
};
show_next($('div#divWithDivs').children().first());
});
$('#divWithDivs').children().first().fadeIn(500, function() {
$(this).next().fadeIn(500, arguments.callee);
});
Here the demo based on your: http://jsfiddle.net/Km55n/2/
It possible to check if the cursor is hovering on an element.
Something like
$("#divId").is("hover");
NOTE: I just want to check not set event.
.is(':hover');
or
$('#divId:hover');
Updated answer!
$("#foo").hover(function() {
$(this).data("hovered", true);
}, function() {
$(this).data("hovered", false);
});
Testing if it is hovered...
if ( $("#foo").data("hovered") ) {
// it is hovered
} else {
// it's not hovered
}
You can use jQuery's hover(), mouseenter() or mouseover()
$("#divId").hover(function() { alert("hovering"; });
This will fire on mouseenter and mouseleave. You can add separate event handlers for each.
So if you want to do something like, if hovering over #divId increase x by one, and when you stop hovering decrease y by one:
$("#divId").hover(function() { ++x; },
function() { --y; });
If you really want an if hovering:
var hovering = 0;
$("#divId").hover(function() { hovering = 1; },
function() { hovering = 0; });
...
// Then inside somewhere useful. Maybe in a setInterval, or triggered by
// another action...
if (hovering) { ...
Try it out with this jsFiddle
For example:
$(function() {
var hovering = 0;
$("div").hover(function() { hovering = 1; },
function() { hovering = 0; });
$(document).keyup(function() {
if (hovering) alert("hovering!"); // This is the "if hovering"
else alert("not hovering.");
});
});
You can use .hover(). It's can be used like so:
$("selector").hover(
function (){
//mouse over
},
function (){
//mouse out
}
);
An example of it's use from the documentation is here:
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
Depending on what you are doing either mouseover() (http://api.jquery.com/mouseover/) or hover() (http://api.jquery.com/hover/) can be useful.