We Keep Coding

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

Enable javascript on a window being resized

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.

Load jquery only for smaller screens - on resize and page load

I want to use some jquery but only on smaller screens, like mobile, and also when user resizes the browser. If I use resize function the code works only on resize, if I use code on its own, it work only on page load, how to combine the two? (I am using css class rather than checking the window size in my condition as I found it works better)
$(window).resize(function(){
if ($(".sampleClass").css("float") == "none" ){
$('#nav').slideToggle();
}
});
Also there is small problem that when the toggle is in this conditional, then it animates constantly and doesn't want to stop. If I just place it without the condition and resize function, it works like a charm. What am I missing here?
if ($(".sampleClass").css("float") == "none" ){
$('#nav').slideToggle();
}

i would call the function twice:
- when the DOM is fully loaded
- inside a resize function
concerning your animation problem:
just call a new function after the resize event has finished, e.g. 500 ms later.
$(function(){
if ($(".sampleClass").css("float") == "none" ){
$('#nav').slideToggle();
}
var myVar;
function myNewFunction(){
if ($(".sampleClass").css("float") == "none" ){
$('#nav').slideToggle();
}
}
window.onresize = function() {
clearTimeout(myVar);
myVar = setTimeout(function() {
myNewFunction();
}, 500);
};
});

As guest271314 suggests in their comment, you can attach an event handler to multiple events by specifying a space-separated list of event names in your call to on. http://api.jquery.com/on/
As far as the repeated animation goes, it's possible that your animation is actually resizing the document view (since it's sliding content into and out of view), which triggers another resize event, which triggers another animation, and so on.
If that's the case, either adjust your layout and animation so that the slideToggle() call doesn't resize your content, or consider another solution.

Javascript "Show/Hide", very simple, and Multiplatform/Browser

I need a script show/very simple and you can use css transition, was using the jquery below but it has a certain delay in mobile devices, and I can't use transitions with him, I'll use the script many times on my site, so I wanted something simple to keep the site and that works both in browser mobiles, and desktops.
Very Delay in Safari/ IE10 Mobile
$(document).ready(function(){
// show and hide menu top
$(".dropmenu").hide();
$(".dropbtn").show();
$('.dropbtn').click(function(){
$(".dropmenu").slideToggle(0);
});
});

For the "click" event to fire you need mousedown and mouseup an element, which on mobile browsers results in an 300ms delay.
If you go directly for touchstart it'll fire in no time :)
$(function(){
// show and hide menu top
$(".dropmenu").hide();
$(".dropbtn").show();
$('.dropbtn').on('touchstart click',function( e ){
if(e.type=='touchstart') $(this).off('click');
$(".dropmenu").slideToggle(0); // or use just .toggle();
});
});
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events

Div Resize Event not working

I have a tree that expands and collapses, whenever the container div changes sizes i want to do some other stuff, however the .resize() doesn't seem to be working as i wish.
I have the code posted on jsfiddle below:
http://jsfiddle.net/2nXtu/
Thanks

resize() is an event for the resizing of the browser window.
Just put the status updater inside the duplication click event:
$('.dup').live('click', function(){
var clone = $(this).clone();
$(this).parent().append( clone );
$('.height').html( $('.content-body').height() );
$('.status').html('Resizing');
});
Here it is in action.

One way I did this is using a dirty-checking technique.
Basically you check the size of the div you want to monitor the first time, then register a function that runs on a specified interval (say 500ms) and checks for the div size again. If the size has changed from the one you had before you trig some event or run some function and store the new size. It works well if you create efficient closures around your variables.