I am in a situation that; need to calculate image's original width and heigth values when one of them defined 0 on css. I can't change CSS with jQuery, need to solve like this:
Here is example link.
CSS:
img { width:0px; }
jQuery:
var imgHeight = $('img').height();
alert(imgHeight);//which returning 0 ofcourse
I hope this is possible with less code, thanks,
Try this:
var img = $("img")[0];
alert( img.naturalWidth + "x" + img.naturalHeight );
http://jsfiddle.net/mjaA3/50/
You could clone the element to a new hidden DOM node (I assume you want to hide it here). Then remove the CSS, then measure the dimensions.
var img = $('img'),
imgHeight = img.css("width","auto").height();
img.css("width","0");
alert(imgHeight);
Here is a fiddle. All we do is temporarily set the height to it's automatic value (which is the image's 100% width), grab the height, and reset the image to width:0;.
EDIT: Since you can't manipulate CSS directly, you can change the class:
var img = $('img'),
imgHeight = img.addClass("auto").height();
img.removeClass("auto");
alert(imgHeight);
And the CSS:
img {width:0;}
img.auto {width:auto;}
Related
I have a DIV with width 400px and height 200px. Inside this div is another div with some text at position 50,50 and font-size 14px;
When the parent DIV resizes (for example to 600px x 300px), i want that the text-size inside the child DIV resizes too (to a larger font-size), equal to the resized parent DIV.
How can i do that with jQuery and HTML?
make the child div width and height 100%
childDiv {
display:block;
width: 100%;
height: 100%;
position:relative //so you dont lose the positioning of your text
}
when the parent dives size becomes (600 / 300) from (400 / 200) for example, you should apply a javascript function to the child div like so
function resizeFont(parentElementId, childElementId, newWidth) {
currWidthParentElement = parseFloat( $(parentElementId).width() ); // get current width
currChildFontSize = parseInt( $(childElementId).css('font-size') ); // get font size for child
percentaRaise = (newWidth - ceil(currWidthParentElement)) * (100/ceil(currWidthParentElement)); // calculate how much parent increase
// calculate and apply new font size
newFontSize = currChildFontSize * percentaRaise/100 + currChildFontSize;
$(childElementId).css(newFontSize);
}
is seems tricky but is simple algebra. I hope thihs will help you
http://codepen.io/rafaelcastrocouto/pen/EiFIL
var div = $('div');
$(window).on('resize', function(){
var u = div.width() / 200;
div.css('font-size', u +'em');
});
There is an extension for jquery that allows resize to be fired on elements like it would on the window itself.
The extension: Jquery Resize Plugin
So something like this will do the trick:
$("#parent").resize(function(){
var newFontSize = $("#parent").height() * 0.07
$("#child").css("font-size",newFontSize +"px");
});
Check out this JsFiddle for an example: http://jsfiddle.net/Mm3jr/1/
Here is my JavaScript code:
a.width = a.width ? a.width : 640;
a.height = a.height ? a.height : 360;
How can I make the 640px and 360px percentages instead? I want them both to be 70% of the windows size.
If the container of the element have sizing specified already, then you can simply use percentages in CSS. For instance:
.#my-el {
width: 70%;
height: 70%;
}
<div id="my-el"></div>
However, if you have to use JavaScript for some reason, you could do something like:
el.style.width = Math.round(document.documentElement.clientWidth * .70) + 'px';
You may have to use a more complex approach to determine the viewport size for cross-browser support however, but this question was already answered.
percentage is a relative value.
you need to have relative value like screenWidth (for suppose) 1240px so that you will get percentage of that value.
Example
var pixels = 100;
var screenWidth = window.screen.width;
var percentage = ( screenWidth - pixels ) / screenWidth ; // 0.92%
To set an element's width or height as a percentage, there are a couple of options available.
Firstly, you can set the element's dimensions as a percentage of its container like this:
element.width = "70%";
element.height = "70%";
Alternatively, you can set the dimensions as a percentage of the screen size instead like this:
element.width = "70vw";
element.height = "70vh";
These values stand for "viewport height" and "viewport width".
However, since both of these options use basic CSS values, it may be preferable to add a CSS class dynamically to the element instead of setting its style properties directly in JavaScript. For example:
element.classList.add("my-class");
Then, define the .my-class selector in a stylesheet like this:
.my-class {
width: 70%;
height: 70%;
}
In a JavaScript function, I want to get the height of an image. I do:
var image_height = $(image).height();
Turns out image_height is 0, but I'm sure my image doesn't have height 0. Is there a way to extract this height?
Calculate height after image load.
$(document).ready(function(){
$(image).load(function(){
var image_height = $(this).height();
} );
});
try outerHeight() as well
var image_height = $(image).outerHeight();
Make sure the dom has been rendered prior to retrieving the height.
$(document).ready(function(){
var image_height = $(image).height();
}):
You can also use regular JS:
var image_height = img.clientHeight
If I have a DOM structure with three DIVs A, B & C where C is a child of B; and B is a child of A - is there a way to set the width (or height) of C to be a percentage of the width (or height) of A?
PS: jQuery is available, and any jQuery functionality can be used.
Well, in that case, try $('#c').height( $('#c').parent().parent().height() * pct/100 )
If it has to be calculated once only (no resize problems), just fetch the height of A and set the height of C accordingly.
var heightA = $('#divA').height();
var heightC = heightA * 0.50; // 50%
$('#divC').height(heightC);
Try this
$(function(){
var height = $("#A").height();
var width = $("#A").width();
$("#c")
.width(width * 0.10);//10%, you can set whatever percent you need
.height(height * 0.10);//10%, you can set whatever percent you need
});
This would work:
var height_A = $('#div_A').height();
var width_A = $('#div_a').width();
$('#div_C').height(height_A*0.30); // for 30%
$('#div_C')width(width_A*0.30); // for 30%
Assuming A's parent has no width defined and A and B can't be width:100% for a much more lightweight and sensible CSS solution:
$('#divC').height( $('#divA').height() * (percentage/100) );
If this is for a real-world problem, it's a bad solution. Never solve layout problems with the JS-hammer.
The following would be ideal.
#parent_of_a { width:<anything>; }
#a, #b { width:100%; }
#c { width:<whatever>% };
CSS % width requires that an element's parent's width is defined.
Try this:
$(function(){
var aheight = $("#a").height();
var awidth = $("#a").width();
$("#c").width(awidth * 0.50).height(aheight * 0.50);
});
You shouldn't solve layout issues with JavaScipt, since JS can be disabled. That being said...
This code should work even if the window is resized.
function setDimension() {
var containerWidth = $('#divC').parent().parent().width();
$('#divC').width(containerWidth * 0.5);
}
$(setDimension); // do it on initial load
$(window).resize(setDimension); // do it when window is resized
HTML width supports percentages. I don't see how you'd need to do anything special to make it work.
Suppose I have the following html, and no CSS
<div>
here is some content in this div. it stretches it out
<br />and down too!
</div>
Now I want to get the actual pixel width and height that the browser has rendered this div as.
Can that be done with JS?
Thank you.
Try getting a reference to your div and reading the offsetWidth and offsetHeight properties:
var myDiv = document.getElementById('myDiv');
var width = myDiv.offsetWidth; // int
var height = myDiv.offsetHeight;
offsetWidth/Height cumulatively measures the element's borders, horizontal padding, vertical scrollbar (if present, if rendered) and CSS width. It's the pixel values of the entire space that the element uses in the document. I think it's what you want.
If that is not what you meant, and you'd rather only the element's width and height (i.e. excluding padding, margin, etc) try getComputedStyle:
var comStyle = window.getComputedStyle(myDiv, null);
var width = parseInt(comStyle.getPropertyValue("width"), 10);
var height = parseInt(comStyle.getPropertyValue("height"), 10);
The values above will be the final, computed pixel values for the width and height css style properties (including values set by a <style> element or an external stylesheet).
Like all helpful things, this won't work in IE.
You say you are using jQuery. Well it's trivial now, and works cross-browser:
var width = $('div').css('width');
var height = $('div').css('height');
With jQuery you don't need the first part of this answer, it's all taken care of for ya ;)
One of the benefits of using a framework, like Prototype, is that the framework authors have usually sorted out the portability issues. Even if you don't use the framework, it can still be instructive to read. In the case of Prototype, the code for reading the dimensions of an element accounts for a Safari issue and allows you to read the width of an element that is not presently dislayed.
getDimensions: function(element) {
element = $(element);
var display = $(element).getStyle('display');
if (display != 'none' && display != null) // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
// All *Width and *Height properties give 0 on elements with display none,
// so enable the element temporarily
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
},
For the jQuery framework, .height and .width do the job.