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
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.
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.
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
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).
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/