Enable javascript on a window being resized - javascript

I want javascript/Jquery to execute a piece of code once the window is being resized. Is there any way to do this? I believe I read something like $(window).change (I could have written that so wrong but I'm learning) Though it misses any indicator that tells it when the window size changes.
Thanks in advance!!

Your can use .resize() function.
Bind an event handler to the "resize" JavaScript event, or trigger
that event on an element.
Use it like this:
$(document).ready(function(){
$( window ).resize(function() {
console.log("Fired!");
});
})

You can listen for the window.resize() function :
$(function(){
$(window).resize(function(){
// Your window was resized, do something here
});
});
It's worth noting that this will be fired for any minor change, so if you are expecting it to occur frequently, you may want to employ an approach similar to this related discussion that uses a delay to detect when the resize has completed and then it will fire the event.

Related

How to wait for the browser to finishing reflow in javascript?

In javascript I have this window resize event defined
$(window).resize(function() {
})
but inside, I need to get width of elements. The problem is, the dimensions I am getting are for the state of how it looked before the reflow, when I need to get the dimensions after the reflow.
I tried putting a timeout of 1ms, but it doesn't seem to work. If I do 100ms, then it does. But I don't link this method, is there a better way?
EDIT: The function gets called once but its just that it needs to wait until after the redraw.
Thanks
You should use document.ready like this:
$(document).ready(function(){
$(window).resize(function() {
///Your code
});
});

callback for jquery mobile textarea resize

I am looking to hook a callback AFTER a textarea changes size using jquery mobile. As an example, I have the following:
$('#test-textarea').val(BigTextVar).css('height', 'auto').trigger('change');
When this is hit, I want to run a function to resize div's above and below to accommodate the new height.
I tried adding a function to .trigger('change') but it happens BEFORE resize and not after. The same for .on('resize').
What if you trigger the resize event and then handle it:
$(document).on("pagecreate","#page1", function(){
$('#test-textarea').on("resize", function(e){
alert("height = " + $(this).outerHeight());
});
$('#test-textarea').val(BigTextVar).css('height', 'auto').textinput( "refresh" ).resize();
});
DEMO
If you have timing issues, you could use a setTimeout to delay the resize trigger.

Why does my JavaScript onresize fire twice?

I have a fiddle here:
http://jsfiddle.net/fJMe9/
window.onresize = function (e) {
console.log("Page resized");
};
And every time I resize the window I get two logs to the console
It's a well known bug (perhaps relating to event bubbling? I say well known, but that's other people who know it, not me :P ). Use a setTimeout to check the last time the window was resized to avoid this.
Try:
window.onresize = function (e) {
console.log(e);
};
you'll see the event fires every time you drag the browser window
Depends on implementation: maybe 2 times, the first for tell you the window is being resized and the second for windows finished resizing.

JavaScript firing on page load instead of event (Bug)

I'm having the strangest issue when I'm calling in functions on an event. I'm trying to get a function to run when the window is resized using $(window).resize() but it seems to fire the function as soon as the DOM loads then never again.
I'm probably missing something really simple here but I've been looking at it all day and I need a bit of outside help.
I've created a watered down version on JSfiddle that does the same thing but using $('a').click() instead of $(window).resize() so it's a bit easier to test. As the same issue is cropping up I have a feeling there's something wrong with my function but I just can't see it.
Link is here http://jsfiddle.net/sambeckhamdesign/APLZ2/1/
Try:
$('a').click(function(){
alert('hello');
}, imageResizer());​
You are running the function and sending it's output into the jQuery thingy as a parameter:
$('a').click(alert('hello'), imageResizer());
instead, try this:
$('a').click(function() {alert('hello'); imageResizer(); });
This provides an anonyomous function, which will be run when the item is clicked, calling imageResizer(), whereas the way you had it, it ran the imageResizer() function and put it's return value into the onclick handler. The reason it didn't work later on was because it would have been treating whatever the return value of the imageResizer() function was as code that it was trying to run.
You are triggering the event instead of assigning an handler to it
$('a').click(alert('hello'), imageResizer());​
Should be
$('a').click(function(event) {
event.preventDefault(); // I suppose you will want that ... it will avoid your window jumping to the top when you click due to the href="#"
alert('hello');
imageResizer();
});​

$(window).load OR $(window).scroll in the same function?

I have implemented stickyfloat (http://plugins.jquery.com/files/stickyfloat_0.htm) on a site. It works great with one gotcha. The function triggers on $(window).scroll and not on $(window).load. I want it to trigger on either because I am linking to anchor points in the page (http://tre-stage.wdogsystems.com:8000/faq/#does-the-sale-of-my-receivables-have-a-negative-effect-on-my-credit-report) and I would like the side menu to appear when the page loads and not just when I initiate a scroll.
If you look at the page above, it's working just as I want it to. However, this is only because I've repeated the same function with a $(window).load. This seems highly inefficient to me. So, is there a way to chain the two together?
For example:
$(window).scroll || $(window).load (function () ...
jQuery's .bind()help method allows multiple events bound at once.
$(window).bind('scroll load', function() {
// code here triggers for both, scroll & load events
});
just chain in the bind, like:
$(window).bind("scroll load", ...)
however it is very bad idea to attach to scroll event
a very good explanation why and a great solution: http://ejohn.org/blog/learning-from-twitter/
Like this:
$(document).bind('ready load scroll', function() { ... });
Why don't you just trigger a window scroll event on load? You could namespace your scroll event too to isolate it and have better access to it later...
$(window)
.on('scroll.myscroll', function () {
// do something on scroll event
})
.trigger('scroll.myscroll'); // trigger scroll event on pageload
But if you were actually wanting to run it on window load (ensuring the DOM is fully loaded incl. images etc) then the other examples mentioned are fine. But use the .on() method, rather than .bind().
$(window).on('scroll.myscroll load.myload', function () {
// do something on scroll and load events
});

Categories