We Keep Coding

How to get the height of a div after its content is loaded?

im trying to get the size of an <img> in the <window> by checking width and height of its container.
i used .load() to wait until the <img> is loaded.
On pageload the size is still 0.
I only get the correct height on resize.
What is wrong here?
EDIT: to get the correct size i added .contents()
$(document).ready(function(){
$('img').load(function(){
function size(){
var height = $('#size').contents()height();
var width = $('#size').contents().width();
$('#size').find('p.size').remove();
$('#size').append('<p class="size">' + height + '-' + width + '</p>');
};
$(window).load(size);
$(window).resize(size);
});
});

you define a function, but you don't invoke it
place size(); after $(window).resize(size);
EDIT: whole code with some improvements
$(document).ready(function(){
function size(){
var height = $('#size').height();
var width = $('#size').width();
$('#size').find('p.size').remove();
$('#size').append('<p class="size">' + height + '-' + width + '</p>');
}
$(window).load(size);
$(window).resize(size);
$('img').load(size);
});

CSS3/JS get position of element during animation

I need to get position of element like (with jQuery)
$(".mydiv").position().left;
However I need to do it during css3 translate animation. This animation translate of div position is included in position() data.
Is it possible to get position of element during animation, but position without any translations (just like there would be no animation)?

Edit
"I'm not using .animate for simple animations since css3. – Kluska000"
Should still be able to utilize jquery's animate() start, step, progress callback functions - even though actual animation done at css. e.g., could utilize .animate() at target element - without actually animating the element - only to utilize start, step, progress callback functions; with duration synced to css animations duration . Also, appear that jquery .animate() does not actually require that a target be a DOM element; could be 2 js objects.
See also window.requestAnimationFrame()
https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
Try (see console at jsfiddle, linked below)
$(function() {
$(".mydiv").animate({
left :"0px"
}, {
duration : 1234,
start : function (promise) {
console.log($(".mydiv").position().left);
},
step : function (now, tween) {
console.log($(".mydiv").position().left);
},
progress : function (promise) {
console.log($(".mydiv").position().left);
},
complete : function () {
$(this).animate({left:"0px"}, 1234)
}
});
});
jsfiddle http://jsfiddle.net/guest271314/xwL7v/
See http://api.jquery.com/animate/ at start , step , progress

well, regardless of how you create your animation, i think the best way would be to create an animation class and attach it as soon as dom loads, but only after recording the position for later use.
basically it would give you the same effect as if you set the animation right away, but you will have a record of all the details for later use:
Live Demo: Fiddle
ps: i made the demo for chrome, just change/remove the -webkit- for other browsers as needed:
-webkit-: chrome, safari
-moz-: firefox
-ms- : internet explorer
-o-: opera
without prefix: default
html:
<div id="status_div"> </div>
<div id="slider"></div>
css:
* {
margin:0;
padding:0;
}
#slider {
width:100px;
height:100px;
display:block;
background:red;
}
.SliderAnim {
-webkit-animation:some_animation 2000ms linear forwards;
}
#status_div {
position:relative;
left:0;
top:0;
width:100%;
height:auto;
border:2px solid navy;
color:black;
}
#-webkit-keyframes some_animation {
from {
-webkit-transform:translateX(-100px);
}
to {
-webkit-transform:translateX(100px);
}
}
js:
$(function () {
// those are the position and offset before animation was attached
var pX = $("#slider").position().left;
var pY = $("#slider").position().top;
var oX = $("#slider").offset().left;
var oY = $("#slider").offset().top;
// those are declarations for vars which will store the position and offset
// of the element right after attaching the animation, and will result in the values
// of the first fram of the animation
var npX = 0;
var npY = 0;
var noX = 0;
var noY = 0;
// this is a timer function to write the details on the status bar
setInterval(function () {
// those are the position and offset of the element during the animation
var apX = $("#slider").position().left;
var apY = $("#slider").position().top;
var aoX = $("#slider").offset().left;
var aoY = $("#slider").offset().top;
//print status bar info
$("#status_div").html("BEFORE ATTACHING ANIMATION position: " + pX + "," + pY + " offset: " + oX + "," + oY + " <br/> AFTER ATTACHING ANIMATION position: " + npX + "," + npY + " offset: " + noX + "," + noY + "<br/> DURING ANIMATION position: " + apX + "," + apY + " offset: " + aoX + "," + aoY);
}, 100);
//attach the animation class to the slider div
$("#slider").addClass("SliderAnim");
//record the changed (will result in the first animation frame)
npX = $("#slider").position().left;
npY = $("#slider").position().top;
noX = $("#slider").offset().left;
noY = $("#slider").offset().top;
});

getting css properties from classes with jquery

I have a set of div's generated by php, and they all have the same class. when I click one, it calls a jQuery function that gets its id (defined by MySQL database) and increases its size (height and width) by 110%. The problem i think I'm having, is when I retrieve its css properties by class, it gets the size of the first thing it sees with that class.
theres not much code to show, but its:
var height = parseInt($(".divClass").css("height"));
var width = parseInt($(".divClass").css("width"));
$(".divClass").css({"height":height + "px","width":width + "px"});
$("#" + id).css({"height":height * 1.1 + "px","width":width * 1.1 + "px"});
id is created when the function is called, and is the id of each individual div.
A: Am i even correct about my assumptions? B: How would i go about getting the css properties for the majority of elements with the same property instead of the first one. What is happening is when i click the first element, it, and the rest grow. Any help would be greatly appreciated.

My suggestion would be to do:
var height, width;
$('.divClass').click(function() {
height = $(this).height();
width = $(this).width();
$(this).css({ 'height': ( height * 1.1 ) + 'px', 'width': ( width * 1.1 ) + 'px' });
});
I haven't tested my code by the way so let me know how it works for you and I'll tweak as necessary.

Determining the Width and Height of an element: True and normal

I would like to know what the best method is to calculate the width and height of an element with Jquery/Javascript (or any other method that might be more accurate). Currently, I am using this Jquery method:
Jquery: See my example: http://jsfiddle.net/AwkF5/1/
var w = $("#wrapper"); //The element dimensions to calculate
$("#displayW").text( "outerWidth:" + w.outerWidth()+ " , outerWidth(true):" + w.outerWidth(true) ); // Displaying the width in the #displayW div
$("#displayH").text( "outerHeight:" + w.outerHeight()+ " , outerHeight(true):" + w.outerHeight(true) ); // Displaying the height in the #displayH div
Now is this the most accurate way to calculate the width/height(including content, padding and border) and TRUE width/height ((including content, padding, border and margin) of an element?
What would be the plain javascript method?
I'm asking because I want to make a background image for the div and I want to know what size it should be...Note that the width and height varies between different browsers...obviously
Thank You
​

This should work for you:
var realWidth = $("#yourBlockId").outerWidth();
realWidth += parseInt($("#yourBlockId").css("margin-left"), 10);
realWidth += parseInt($("#yourBlockId").css("margin-right"), 10);
The same approach for height.

Adjust top position according to height of div with javascript

function jsiBoxAdjustTop()
{
var top
if ( jsiBox.preloadImg.height <= 699){
top = 216;
}
else{
top = 17;
}
jsiBox.boxNode.style.top = (top) + 'px';
}
I'm using that function to adjust a div's top position depending on the image that is in it's height. It's on a light box sort of script so every time I click the next button, a new image which could either be taller or smaller appears. It's working alright and it adjusts its position when the image is taller but my problem is it just jumps to that position. I'm really new to javascript so can anyone help me out to make this as if it's travelling/animating to it's position? I tried using setTimeOut but I think I was doing it wrong. I'd really love to know what I'm doing wrong.
Here's the full script if that helps. Link

you can use jQuery or YUI to do animate, such as
jQuery(jsiBox.boxNode).animate({'top': top}, 3000);
or you can write some simple code with setTimeout just for this case;
following code assume the begin top is 0.
var boxStyle = jsiBox.boxNode.style;
function animateTop(to) {
boxStyle.top = parseInt(boxStyle.top, 10) + 1 + 'px';
if (parseInt(boxStyle.top, 10) != to) {
setTimeout(function() {
animate(to);
}, 50);
}
}
animateTop(top);