How do I manage that if the user scrolls down the mouse wheel or clicks on $('#next') it will execute the function below?
var wd = event.originalEvent.wheelDelta;
if (wd < 0 || $("#next").click(function() {}) {
if (status == 1 && $('body').scrollTop() == $("#b1").offset().top) {
$('body').animate({
scrollTop: $("#b2").offset().top
}, 900);
prev.style.display = "block";
b1Slide_b('b1');
b1Slide('b2');
status = 2;
}
Include the code you want executed in a function, and then initiate both event to point to that function:
function stuffToDo(){
// the stuff you want to do here
}
$("#next").click(function() {
stuffToDo();
}
$("#next").scroll(function() {
stuffToDo();
}
This is not the cleanest way but it will allow you to give custom parameters to your function depending on the event, if you need.
Hope it helps
try something like this with your code.
made and example : jsfiddle
function myFunc() {
$(".content").css({"background":"red"})
};
$(window).scroll(function(){
if($(window).scrollTop()>0) {
myFunc();
};
});
$(".trigger").click(function(){
myFunc();
});
you need to do 2 separate functions in which you callback your function .
in myFunc() you insert everything you want to happen on scroll or on click
in this case changing the background color
Related
I have a simple jquery-ui slider which I am continuously automatically looping through values. I successfully have a button which starts the movement, but I forget how I can pause/stop the movement when another button is pressed? I know this is something really simple, but am having an absolute mind blank and google is not giving me what I want. (probably because i'm searching for the wrong wording). What can do I put in the pauseSlider function to ... pause the slider!
function scrollSlider() {
var slideValue;
slideValue = $("#slider").slider("value");
if (slideValue >= 0) {
if (slideValue == 2013) {
slideValue = -1;
}
$("#slider").slider("value", slideValue + 1);
console.log($("#slider").slider("value"));
setTimeout(scrollSlider, 1000);
}
}
$('#startSlider').click(function() {
scrollSlider();
});
$('#pauseSlider').click(function() {
//What do I put in here?
});
setTimeout returns a random number which you'll have to store in a variable and then use it to clear the setTimeout in $('#pauseSlider')'s click handler.
var id;
function scrollSlider() {
// (...) code
id = setTimeout(scrollSlider, 1000);
// (...) more code
}
$('#pauseSlider').click(function() {
clearTimeout(id);
});
I'm a newbie in qooxdoo and I'm trying to create an automatic progress bar to use in a "Search" function.
It's seems to stop before the "setTimeout" function so it doesn't change its value
The code I'm using (popup is popup with a VBox layout):
var bar=new hello.automaticProgressBar();
bar.delayedLoop();
popup.add(bar);
My automaticProgressBar.js:
qx.Class.define("hello.automaticProgressBar",
{
extend : qx.ui.indicator.ProgressBar,
construct : function()
{
this.base(arguments);
//var i = 1;
},
members:{
i:1,
delayedLoop : function()
{
setTimeout(function ()
{
this.setValue(10*this.i);
this.i++;
if (this.i < 11)
{
alert(this.i);
this.delayedLoop();
}
}, 300)
}
}
});
Any guess?
You need to change the context of the function argument for setTimeout to the current instance:
setTimeout(function () {
this.setValue(10*this.i);
this.i++;
if (this.i < 11) {
alert(this.i);
this.delayedLoop();
}
}.bind(this), 300);
I think the main culprit is the setTimeout built-in which loses the connection to the local this. I replaced it with qx.event.Timer.once and it works like a charm. See the code in this Playground sample. Press the "Log" button of the Playground to see the log messages.
I was wondering if there is a function to be run after an element (e.g. div class="myiv") is hovered and check every X milliseconds if it's still hovered, and if it is, run another function.
EDIT: This did the trick for me:
http://jsfiddle.net/z8yaB/
For most purposes in simple interfaces, you may use jquery's hover function and simply store in a boolean somewhere if the mouse is hover. And then you may use a simple setInterval loop to check every ms this state. You yet could see in the first comment this answer in the linked duplicate (edit : and now in the other answers here).
But there are cases, especially when you have objects moving "between" the mouse and your object when hover generate false alarms.
For those cases, I made this function that checks if an event is really hover an element when jquery calls my handler :
var bubbling = {};
bubbling.eventIsOver = function(event, o) {
if ((!o) || o==null) return false;
var pos = o.offset();
var ex = event.pageX;
var ey = event.pageY;
if (
ex>=pos.left
&& ex<=pos.left+o.width()
&& ey>=pos.top
&& ey<=pos.top+o.height()
) {
return true;
}
return false;
};
I use this function to check that the mouse really leaved when I received the mouseout event :
$('body').delegate(' myselector ', 'mouseenter', function(event) {
bubbling.bubbleTarget = $(this);
// store somewhere that the mouse is in the object
}).live('mouseout', function(event) {
if (bubbling.eventIsOver(event, bubbling.bubbleTarget)) return;
// store somewhere that the mouse leaved the object
});
You can use variablename = setInterval(...) to initiate a function repeatedly on mouseover, and clearInterval(variablename) to stop it on mouseout.
http://jsfiddle.net/XE8sK/
var marker;
$('#test').on('mouseover', function() {
marker = setInterval(function() {
$('#siren').show().fadeOut('slow');
}, 500);
}).on('mouseout', function() {
clearInterval(marker);
});
jQuery has the hover() method which gives you this functionality out of the box:
$('.myiv').hover(
function () {
// the element is hovered over... do stuff
},
function () {
// the element is no longer hovered... do stuff
}
);
To check every x milliseconds if the element is still hovered and respond adjust to the following:
var x = 10; // number of milliseconds
var intervalId;
$('.myiv').hover(
function () {
// the element is hovered over... do stuff
intervalId = window.setInterval(someFunction, x);
},
function () {
// the element is no longer hovered... do stuff
window.clearInterval(intervalId);
}
);
DEMO - http://jsfiddle.net/z8yaB/
var interval = 0;
$('.myiv').hover(
function () {
interval = setInterval(function(){
console.log('still hovering');
},1000);
},
function () {
clearInterval(interval);
}
);
I have a div that appears when the user's mouse leaves the document with a survey about my site.
I don't want to ask them to do the survey if they move their mouse out in the first couple of minutes while browsing around, so I was wondering if I can set a timeout/sleep on when this mouseleave function would activate.
Here is my code without the timeout:
$(document).mouseleave(function () {
document.getElementById("Overlay1").style.display = "";
});
Thanks a lot!
You can use window.setTimeout to enable the function after a certain time.
Example:
window.setTimeout(function(){
$(document).mouseleave(function () {
console.log('mouse leave');
document.getElementById("Overlay1").style.display = "";
});
console.log('initiated');
},5000);
you could call the same function encapsulated in asetTimeout function call :
$(document).mouseleave(function() {
var seconds = 3;
//execute the function in 3 seconds
setTimeout(function(){
document.getElementById("Overlay1").style.display = "";
},seconds*1000);
});
Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>
A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;
Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.
...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.
Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);