Is there a way to use a callback function after the screen is done resizing an element?
For example:
element.css('height', 'auto', function() {
element.css('height', element.height() - 6);
});
In words: when the element is reset to it's default height. The DOM needs to re-evaluate the height of the element. That takes a bit of time, but that time varies from client to client. So I don't want to use a setTimeOut function and slow down the script much more then needed.
So how can I execute some JavaScript just after the element's height is reset?
PS: I already tried the jQuery animate function. But still that callback function doesn't seem to wait long enough for the element to actually obtain it's original height.
Even tough the comments weren't helpful at all. I found something that actually seems to work. It waits for the height change to process and instantly process the next rule afterwords.
element.css('height', 'auto').delay(1).css('height', element.height() - 6);
Related
First of all pardon me if this is a duplicate , but I have been trying solutions from other posts but none of them seems to work for me.
This is what I am trying to achieve:
I want to set the min-height and min-width of a div with the current width and height of the document. The Event should trigger on every resize of the document window.
This is what I have tried so far:
$(document).ready(function() {
function reset_demensions() {
doc_height = $(document).height();
doc_width = $(document).width();
$(".flicker-div").css("min-width", doc_width + "px");
$(".flicker-div").css("min-height", doc_height + "px");
alert("From - Function" + doc_width + "x" + doc_height);
}
reset_demensions();
$(window).resize(function() {
reset_demensions();
});
});
The problem I am facing:
First time when the window loads it shows me the correct width and height. But when I try to resize the window manually two problems are being noticed:
1> The function is called twice i.e. alert box
2> The captured height of the document doesn't change.
3> The captured width of the document keeps increasing rapidly , and the values are not garbage as it's static for every run.
Test Run OUTPUT:
On Load:
1349x626
On Resize:
1369x3130
1389x15650
I am sure I missed something here , might be something very silly. Kindly help me figure this out.
I think your mistake is that you are capturing the height of the DOCUMENT .. instead of the window.
You are changing the window size and expecting the document size to change.
change your code to check for $(window).height() and $(window).width()
First you don't need the + 'px';
When you reload your browser after refreshing. it should be working or?
A few days ago i had the same issue and recognized its because of the document.width/document.height.
Is it possible to calculate the same with window.width/window.height?
the function is called every step you resize your window but you can add a timeout, so it will be only once executed. --> timeout plugin http://benalman.com/projects/jquery-dotimeout-plugin/
Not sure if this will make a difference, but you don't need to have your function definitions nested in the onready function. It may be having some effect on the scope of the function/garbage collection etc? You can safely define the functions before the onready, as it won't be called until the document is ready. Also take out the alert from where it is. Doing that has caused me many a browser crash because of the speed that the event fires and it tries to fire an alert when you resize the window!
You might want to try $(window).width() too as that might explain your cumulative results as your document is getting bigger as you resize your div, especially if there is padding/margins involved somewhere.
I'm using iCanHaz.js to swap screens, but I need a function to fire once the new content has completed loading fully. I have been able to do this before by using a setTimeout of 0 to make the call asynchronous, but on pages with lots of images, this doesn't seem to be hitting soon enough.
function show_page(){
document.getElementById('container').innerHTML = ich.artworks({
variables : variables
});
window.setTimeout(function(){
var midWidth = (document.body.offsetWidth/2) - window.innerWidth / 2;
var midHeight = (document.body.offsetHeight/2) - window.innerHeight / 2;
scrollTo( midWidth, midHeight);
}, 0);
}
How can I delay this function until the height is known? Even if I do know the height, I cannot scroll to a point that is below the current height of the page, so I have to wait until the images are loaded if I do not know their height already.
You'd have to modify your template-based approach slightly, but if you create the images using new Image() you can use the onload events to determine when all the images have loaded and then set your dimensions.
There is a similar case in question:
How can I tell when changes to jquery html() have finished?
The proposed solution is to add a timeout of 1 (not 0) for the code to be executed after HTML rendering, as timed out code executes after JavaScript sole thread is done with its rendering stuff.
Hope that works for your case.
See the following fiddle:
[edit: updated fiddle => http://jsfiddle.net/NYZf8/5/ ]
http://jsfiddle.net/NYZf8/1/ (view in different screen sizes, so that ideally the image fits inside the %-width layouted div)
The image should start the animation from the position where it correctly appears after the animation is done.
I don't understand why the first call to setMargin() sets a negative margin even though the logged height for container div and img are the very same ones, that after the jqueryui show() call set the image where I would want it (from the start on). My guess is that somehow the image height is 0/undefined after all, even though it logs fine :?
js:
console.log('img: ' + $('img').height());
console.log('div: ' + $('div').height());
$('img').show('blind', 1500, setMargin);
function setMargin() {
var marginTop =
( $('img').closest('div').height() - $('img').height() ) / 2;
console.log('marginTop: ' + marginTop);
$('img').css('marginTop', marginTop + 'px');
}
setMargin();
Interesting problem...after playing around with your code for a while (latest update), I saw that the blind animation was not actually firing in my browser (I'm testing on Chrome, and maybe it was firing but I wasn't seeing it as the image was never hidden in the first place), so I tried moving it inside the binded load function:
$('img').bind('load', function() {
...
$(this).show('blind', 500);
});
Now that it was animating, it seemed to 'snap' or 'jump' after the animation was complete, and also seemed to appear with an incorrect margin. This smacks of jQuery not being able to correctly calculate the dimensions of something that hadn't been displayed on the screen yet. On top of that, blind seems to need more explicit dimensions to operate correctly. So therein lies the problem: how to calculate elements' rendered dimensions before they've actually appeared on the screen?
One way to do this is to fade in the element whose dimensions you're trying to calculate very slightly - not enough to see yet - do some calculations, then hide it again and prep it for the appearance animation. You can achieve this with jQuery using the fadeTo function:
$('img').bind('load', function() {
$(this).fadeTo(0, 0.01, function() {
// do calculations...
}
}
You would need to work out dimensions, apply them with the css() function, blind the image in and then reset the image styles back to their original states, all thanks to a blind animation that needs these dimensions explicitly. I would also recommend using classes in the css to help you manage things a little better. Here's a detailed working example: jsfiddle working example
Not the most elegant way of doing things, but it's a start. There are a lot more easier ways to achieve seemingly better results, and I guess I just want to know why you're looking to do image blinds and explicit alignment this way? It's just a lot more challenging achieving it with the code you used...anyways, hope this helps! :)
I have 2 divs. 1st div should automatically change own height if 2nd div height was changed.
var height = jQuery('#leftcol').height();
height += 20;
jQuery('.rightcol-botbg').height(height);
There is no ability to change HTML markup :(
I have many DHTML layout changes, so I can't run prev. code anytime.
I want to run it dynamically. I need to do something like event/trigger.
I tried to use jQuery('#leftcol').resize(function(){}) or jQuery('#leftcol').change(function(){}). but it doesn't work. (resize triggers when window size changes.)
When does your 1st div change ? Whatever triggers that should get the new div height, add 20 to it and set the height of the other div. Can you post some code samples ? If the size changes happen really frequently, a timer/interval that repeatedly checks one size and set's the other should also work, but this is less efficient.
I would monitor the other div using an interval then update accordingly
setInterval(function(){
var height = $('#leftcol').height();
if(height != $('#leftcol').data('oldHeight'))
{
$('.rightcol-botbg').height(height+20);
$('#leftcol').data('oldHeight',height);
}
},500)
(untested)
The above code checks for changes in height every 0.5 seconds, then updates .rightcol-botbg;
I don't understand JQuery, but seeming as this question is tagged Javascript I'll give you a Javascript solution
document.getElementById("yourDivID").style.height = "300px";
Edit - You want to know when the height of the div has changed?
I don't know if there is a better way for that, but I would approach it with a function:
function changeBlockHeight(divID, newHeight)
{
document.getElementById(divID).style.height = newHeight + "px";
blockHeightChanged(divID);
}
function blockHeightChanged(divID)
{
alert("Div " + divID + " has been changed in height!");
}
Somewhere in your code:
<div id="testBlock"></div>
<button onlcick="changeBlockHeight('testBlock')">Test</button>
Every time you change the blocks height, blockHeightChanged() is called.
well there is not any generic triggers for an element resize.
what is the cause of div's size change at your case? you can check your heights righta after or in that cause.
only alternative that i can think of is setting up a timer with setInterval and check both div sizes every once in a while.
var myInterval = self.setInterval("myCheckFunction()",1000);
function myCheckFunction() {
jQuery('.rightcol-botbg').height(jQuery('#leftcol').height());
}
Using an interval is not very browser friendly.
If you have a setup like this:
<div id="content">
<div id="tree">should be full height</div>
<div id="data">this one is half the height</div>
</div>
You could easily do this with css. I'm not sure if this is the case...
Otherwhise the solution proposed by Tom Gullen is the best one.
Use .bind() to create a custom event type, and then trigger that event using .trigger().
Here is a fiddle with an example (a bit contrived, but I think you will get the idea)
I have two divs (say, divs with ids: div1 and div2) whose height I need to expand using Fx.Tween
And I want the animations to be simultaneous.
'#div1' 's style.height is to be changed from auto to 0.
'#div2' 's style.height is to be changed for current height to a new height calculated by a function called calculateHeight()
how do I do that?
Mootools animations aren't blocking (animations in JS very rarely are!) so simply executing the two tweens sequentially will have the desired affect (as close as a human can perceive)
function go()
{
$('div1').tween('height', 0);
$('div2').tween('height', calculateHeight());
}
function calculateHeight()
{
return 0; //or whatever
}
I think this has to do with the wait:false option.
I'm not a programmer and mootools is easy but not as much to be so good at it but I remember reading some docs where it says you can control wether the second animation works as soon as the first one ends or simultaneously.
Chain Method: wait
Injects pauses between chained events.
Syntax
myClass.wait(duration);
Arguments
1. duration - (integer) The duration (in milliseconds) to pause the chain stack; defaults to 500.
I think you should CHAIN the morphing and make it wait(0). But I'm not sure. Hope this helps.