Grabbing image height and setting it to its container jquery - javascript

I have a div for my posts which may contain images with different sizes and i need to set their container's width individually. How do i do that?
<div class="panel">
<img id="screeny" src="http://localhost/531q3n.jpg"/>
</div>
Here's my current try but something's wrong:
var img = document.getElementById('screeny');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
$('.panel').css("width",width+"px");

The image must be loaded before you have access to it's size, like so:
var img = $('#screeny');
img.load(function() {
var width = img.width();
var height = img.height();
$('.panel').css("width", width);
});
EDIT: for more than one image, if they are all in a div with the class 'panel':
$("img", ".panel").each(function() {
$(this).load(function() {
var width = $(this).width();
var height = $(this).height();
$(this).parent().css("width", width);
});
});

$('#screeny').load(function() {
$(this).parent().css('width', $(this).width());
});
Attach a handler that will execute when the image has finished loading. This will set the parent (container) to the width of the image.

Related

Change an element width in px when resizing the window

How can I change an element with a fixed width in px when i resize the window? I need to use an absolute unit, i can not use relative units like % or vw.Every time the window is resized with 1 px i need to decrease the element width by 0.2px.
I tried to use the window resize eventListener but i don't know what calculations needs to be done.
What you want can be achieved by using javascript. I've created a logic to do that :
<script>
function myFunction() {
var initialscreenwidth = window.innerWidth; //Set Initial Screen Width
setInterval(function() { //looping the script
var screenwidth = window.innerWidth;
var difference = initialscreenwidth - screenwidth; //Calculating the change in screen-size
if (difference != 0) { //Checking if there is a change in width
var element = document.getElementById('demo');
var style = window.getComputedStyle(element, null).getPropertyValue('font-size'); //Getting default font-size of the element
var initialfontsize = parseFloat(style);
var fontdifference = -(parseFloat(difference) / 5); //1px change in screen-size = 0.2px change in font-size
var newfontsize = initialfontsize + fontdifference;
var newfontsizepx = newfontsize + "px";
if (newfontsize > 1) {
document.getElementById("demo").style.fontSize = newfontsizepx;
}
}
initialscreenwidth = window.innerWidth;
}, 300); //reloads in every 300ms
}
myFunction();
</script>
Paste this at the end of your body section, somehow using this in the head section is not working.

DataTables vertical page fitting on window resize

Following the Vertical Page fitting blog on DataTables https://datatables.net/blog/2015-04-10, I'm trying to setup my table the same way but using the window resize event. Here's what i'm doing,
<script>
var prevHeight = 0; //for storing the previous height of the window
$(document).ready(function() {
prevHeight = $(window).height(); //get the current height of the window on load
});
$(window).on('resize', function(e){
var currentHeight = $(window).height(); //height of the window after resize
var wrapper = $('.resize_wrapper'); //div containing the table
var resizeStartHeight = wrapper.height(); //height of the wrapper
var height = resizeStartHeight + (currentHeight - prevHeight); //new height for the wrapper
if ( height < 180 ) { //setting a minimum height
height = 180;
}
wrapper.height( height ); //set the new height for the wrapper
prevHeight = $(window).height(); //store the new height of the window
});
</script>
The table container is resizing, my table page length is changing. So far this code works but I can't seem to figure out what i'm missing because there's still a huge blank area under my table. There's nothing else under there, my table/div is the last element on the page.

How to get the width and height attributes from the image tag?

I have the following image tag
<img class="someclass" src="somesrc" width="220" height="165" />
The browser is displaying the image with its original width and height which is 480x360
I want to get the image width and height attributes from the image tag which should return 220 and 165
I have tried the following
var img = document.getElementsByClassName('someclass');
console.log(img.clientWidth);
console.log($('.someclass').attr('width'));
But it returns me undefined.
The following code returns me the actual width and height of the image. which is 480
$('.someclass').width();
Is there any way that it should return the 220 and 165?
You need to get the width attribute of a single element not a nodeList as you were returning.
Try this...
var element = document.querySelector('.someclass');
console.log(element.getAttribute('width')); //220
console.log(element.getAttribute('height')); //165
Thanks to all for your help. But I have found the solution.
The following code works for me.
$('img.someclass).load(function(){
var width = $(this).attr('width');
var height = $(this).attr('height');
if(width != 'undefined') {
$(this).css('width', width);
}
if(height != 'undefined') {
$(this).css('height', height);
}
});
Try
var img = document.getElementsByClassName('someclass')[0];
var width = img.width;
var height = img.height
and in case you want to set new values just do:
img.width = yourvalue;
img.height = yourvalue;
it works fine, so plz don't downvote people for no reason

Changing div height according screen resolution javascript

Here is the problem. I have
<div id="main"></div>
I want to check user resolution and change his height according user resolution, using javascript?
Javascript:
window.onload = function() {
var height = screen.height
document.getElementById(main).style.height = height;
};
I even try this:
window.onload = function() {
var height = screen.height
var ele = document.getElementById(main);
if(ele.style.height == "auto")
{
ele.style.height = height;
}
else {
ele.style.height = height;
}
};
If you want set the Screen Height:
var mainNode = document.getElementById("main");
mainNode.style.height = screen.height + "px";
Screen Avail Height
Screen Height
DOMElement Client Height
Screen height is different from client height (document.documentElement.clientHeight).

How to set DIV dimensions as per the height and width of background-image

I have a DIV with background-image. But my requirement is how can I extend the DIV size according to the height and width of background-image. I have tried some code with the help of this link.
var src = $('#divID').css('background-image').
replace('url', '')
.replace('(', '')
.replace(')', '')
.replace('"', '')
.replace('"', '');
$('body').append('<img id="appendedImg" src="' + src + '" style="height:0px;width:0px"');
var img = document.getElementById('appendedImg');
var width = img.clientWidth;
var height = img.clientHeight;
$('#appendedImg').detach();
I am just looking for any elegant solution if possible.
You probably just need to look for width/height onload:
var img = document.getElementById('appendedImg');
img.onload = function() {
var width = img.width;
var height = img.height;
console.log(width,height);
};
Also, you don’t need to attach it, creating a new image should be enough. Here’s how I would do it:
var $div = $('#divID'),
src = $div.css('background-image').replace(/url\(\"([^\"]+).*/,'$1');
$(new Image).load(function() {
$div.width(this.width).height(this.height);
}).attr('src', src);
I would load the img first then get its height and width:
imgSrc = 'http://ajthomas.co.uk/wp-content/themes/ajthomascouk/library/images/logo.png'
// append the temp imag
$('body').append('<img src="'+imgSrc+'" alt="" style="display:none" id="dummyImage"/>');
// get the image width and height
imgWidth = $('#dummyImage').width()+'px';
imgHeight = $('#dummyImage').height()+'px';
// remove the image
$('#dummyImage').remove();
// set the css for the div
$('#imADiv').css({height: imgHeight, width: imgWidth, 'background-image': 'url('+imgSrc+')'});
Coded it up for you here - http://jsfiddle.net/LTdtM/

Categories