Combine onload, onresize and onclick - javascript

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');
});

Related

How to fire 2 events together for bootstrap modal?

I have below 2 events for bootstrap modal
https://getbootstrap.com/docs/4.0/components/modal/
$('.modal').on('show.bs.modal', function() {
});
$('.modal').on('hidden.bs.modal', function() {
});
I have same code in both events.
Can I call both together at one time only for code optimisation.

Yes, you can do:
$('.modal').on('show.bs.modal hidden.bs.modal', function() {
});

You can store your function in a variable.
var fnCallback = function() {
//my function
console.log('my function was triggered');
};
$('.modal').on('show.bs.modal', fnCallback);
$('.modal').on('hidden.bs.modal', fnCallback);

JQuery hashchange event - where to place?

I am using JQuery hashchange event.
$(window).on('hashchange', function () {
//do something
});
When my url contains a hash during first time load I understand that this needs to be triggered with $(window).hashchange();
Can I place it inside document ready instead?
$(document).ready(function () {
$(window).on('hashchange', function () {
//do something
});
});

You can trigger it manually like:
$(document).ready(function () {
$(window).on('hashchange', function () {
//do something
}).trigger('hashchange');
});
Or you can do it like:
$(document).ready(function () {
//attaching the event listener
$(window).on('hashchange', function () {
//do something
});
//manually tiggering it if we have hash part in URL
if (window.location.hash) {
$(window).trigger('hashchange')
}
});

run functions when : window.scroll & window.resize & document.ready

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.

Run Jquery function on window events: load, resize, and scroll?

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){

Unable to disable link on first click and re-enable when animation completes

I am trying to perform a simple animation on click of a link. I want that the link should get disabled after the 1st click and should be re-enabled only after the animation, that started as a result of the first call, completes.
HTML:
<a id="link" href="#">Click</a>
<div id="test" style="float:left;border:1px solid #000;width:100px;height:100px;">Test</div>
<div id="test2"></div>
​
jQuery:
$('#link').click(function(e){
$('#link').bind('click', disableLink);
ht = $('#test').height();
$('#test').animate({height:'+=50'},5000,function(){$('#link').unbind('click', disableLink);});
$('#test2').html(ht);
});
function disableLink(e) {
e.preventDefault();
return false;
}
Fiddle: http://jsfiddle.net/uHR7a/2/
​

You can use anonymous function where you declare a variable in_process and depends on it start new animation or not.
Demo: http://jsfiddle.net/dUarG/1/
(function () {
var in_process = false;
$('#link').click(function (e) {
e.preventDefault();
if (!in_process) {
in_process = true;
$('#test').animate({height: '+=50'}, 2000, function () {
in_process = false;
});
}
});
})();
​

use this code as you jquery:
$('#link').click(function(e){
$('#link').removeAttr('href');
ht = $('#test').height();
$('#test').animate({height:'+=50'},5000,function(){$('#link').attr('href', '#')});
$('#test2').html(ht);
});
function disableLink(e) {
e.preventDefault();
return false;
}

You can use on() and off() for this:
$('#link').on('click', anim); //bind click
function anim(e) {
$(e.target).off('click'); //unbind click when animating
ht = $('#test').height();
$('#test').animate({
height: '+=50'
}, 5000, function() {
$(e.target).on('click', anim); //rebind when done
});
$('#test2').html(ht);
}​
FIDDLE

Categories