i have some functions ,
I need this functions run , when
window.scroll
window.resize
document.ready
for example
<script>
function myFunction1(data){ /*code*/ }
function myFunction2(data){ /*code*/ }
$(document).ready(function() {
myFunction1(data);
myFunction2(data);
});
$(window).resize(function() {
myFunction1(data);
myFunction2(data);
});
$(window).scroll(function() {
myFunction1(data);
myFunction2(data);
});
<script>
so what would u guy suggest me to do ?
The following can be used.
function myFunction1(data){ /*code*/ }
function myFunction2(data){ /*code*/ }
function multipleHandle(data){
myFunction1(data);
myFunction2(data);
}
$(document).ready(function() {
multipleHandle(data)
});
$(window).on('resize scroll',function() {
multipleHandle(data)
});
As an alternative, if data is a global variable,
function myFunction1(data){ /*code*/ }
function myFunction2(data){ /*code*/ }
function multipleHandle(){
myFunction1(data);
myFunction2(data);
}
$(document).ready(multipleHandle);
$(window).on('resize scroll',multipleHandle);
You can try this:
$(window).on("orientationchange load resize scroll", function () {
myFunction1(data);
myFunction2(data);
});
This will take care of orientation change as well.
Related
Why following code written in jquery works great, but when I try to use it with vanilla js then it’s not working.
Here is WP Heartbeat API code - https://github.com/WordPress/WordPress/blob/master/wp-includes/js/heartbeat.js
jQuery(document).ready( function($) {
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
});
jQuery(document).ready( function($) {
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
});
jQuery(document).ready( function($) {
var event = new Event('heartbeat-tick');
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
window.dispatchEvent(event);
});
Your document event is not firing because you are dispatching the event on the window. Call document.dispatchEvent to dispatch it to the document.
jQuery(document).ready(function($) {
var event = new Event('heartbeat-tick');
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from document');
});
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from window');
});
console.log('window');
window.dispatchEvent(event);
console.log('document');
document.dispatchEvent(event);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The function below runs on document load and document resize:
$(window).on("resize", function () {
// code
}).resize();
How can I also trigger the function when the user clicks on <div id="my_div"></div> ?
You can explicitly create the callback function, like..
function callbackFn() {
var $caller = $(this);
// do something...
}
$(window).on('resize', callbackFn);
$('#my_div').on('click', callbackFn);
Move your function to some named function and call it on event:
function myFunction () {
alert('Working');
}
$(window).on("resize", function () {
myFunction();
}).resize();
$('#my_div').click(function () {
myFunction();
});
One way to achive that is by triggering the resize event inside the click event handler:
$('#my_div').on('click', function() {
$(window).trigger('resize');
});
I have this code here,
$(document).ready(function(){
$(window).load(function() {
window.addEventListener("hashchange", function() { scrollBy(0, -50);});
var shiftWindow = function() { scrollBy(0, -50);};
if (location.hash) shiftWindow();
window.addEventListner("hashchange", shiftWindow);
});
});
works great but I'm getting an error on my home page stating "error window.addEventListener isn't not a function. Can you tell me what I'm doing wrong. did I not close this loop right or something?
use jQuery!
$(window).on("hashchange", function() { scrollBy(0, -50);});
this is my jquery code.this code contain three functions.this three function repeatedly execute for looping.but this code not run properly.how to make recursive call with three functions.the pid1,pid2,pid3 is paragraph tag id's.this code used to make text animation.
$(document).ready(function(){
function animate()
{
$('#pid1').fadeOut(3000, function()
{
$(this).text('string1').fadeIn(3000);
});
animate1();
}
function animate1()
{
$('#pid2').fadeOut(3000, function()
{
$(this).text('string2').fadeIn(3000);
});
animate2();
}
function animate2()
{
$('#pid3').fadeOut(3000, function()
{
$(this).text('string3').fadeIn(3000);
});
animate();
}
});
try like this :
$(document).ready(function(){
function animate() {
$.when($('#pid1').fadeOut(3000, function() {
$(this).text('string1').fadeIn(3000);
})).then(function() {
animate1();
});
}
function animate1() {
$.when($('#pid2').fadeOut(3000, function() {
$(this).text('string2').fadeIn(3000);
})).then(function() {
animate2();
});
}
function animate2() {
$.when($('#pid3').fadeOut(3000, function() {
$(this).text('string3').fadeIn(3000);
})).then(function() {
animate();
});
}
animate();
});
Here a jsFiddle : http://jsfiddle.net/Pascalz/CNRSd/
You must call the function again after making sure that element has fadeout. You should use fadeout callback functions
change you function like this:
function animate()
{
$('#pid1').fadeOut(3000, function()
{
$(this).text('string1').fadeIn(3000, function(){animate(); });
});
}
Here is the link of jsbin by using callback functions
animate by using callback
How do I run a jquery function on window events: load, resize, and scroll?
Here is my code
I'm trying to detect if a div is viewable and then if it is run some ajax code...
<script>
function topInViewport(element) {
return $(element).offset().top >= $(window).scrollTop() && $(element).offset().top <= $(window).scrollTop() + $(window).height();
}
</script>
<script>
topInViewport($("#mydivname"))
{
// ajax code goes here
}
You can use the following. They all wrap the window object into a jQuery object.
Load:
$(window).load(function () {
topInViewport($("#mydivname"))
});
Resize:
$(window).resize(function () {
topInViewport($("#mydivname"))
});
Scroll
$(window).scroll(function () {
topInViewport($("#mydivname"))
});
Or bind to them all using on:
$(window).on("load resize scroll",function(e){
topInViewport($("#mydivname"))
});
You can bind listeners to one common functions -
$(window).bind("load resize scroll",function(e){
// do stuff
});
Or another way -
$(window).bind({
load:function(){
},
resize:function(){
},
scroll:function(){
}
});
Alternatively, instead of using .bind() you can use .on() as bind directly maps to on().
And maybe .bind() won't be there in future jquery versions.
$(window).on({
load:function(){
},
resize:function(){
},
scroll:function(){
}
});
just call your function inside the events.
load:
$(document).ready(function(){ // or $(window).load(function(){
topInViewport($(mydivname));
});
resize:
$(window).resize(function () {
topInViewport($(mydivname));
});
scroll:
$(window).scroll(function () {
topInViewport($(mydivname));
});
or bind all event in one function
$(window).on("load scroll resize",function(e){