I'm totaly confused with this piece of code. When I just load the page imgWidth1 and imgHeight1 are both equal to "0" But when I resize my window, the code works and imgWidth1 and imgHeight1 have the same value as the image dimension.
All help is welcome, thanks.
var imgWidth1 = $("#image-hover-0").outerWidth();
var imgHeight1 = $("#image-hover-0").outerHeight();
$("#hover-img-0").css("width", imgWidth1 + "px");
$("#hover-img-0").css("height", imgHeight1 + "px");
$("#hover-img-0").css("line-height", imgHeight1 + "px");
$(window).resize(function() {
var imgWidth = $("#image-hover-0").outerWidth();
var imgHeight = $("#image-hover-0").outerHeight();
$("#hover-img-0").css("width", imgWidth + "px");
$("#hover-img-0").css("height", imgHeight + "px");
$("#hover-img-0").css("line-height", imgHeight + "px");
});
This is most likely due to the fact that your code is not nested inside a $(window).load() function call. Modify your code to the following:
$(window).load(function(){
var imgWidth1 = $("#image-hover-0").outerWidth();
var imgHeight1 = $("#image-hover-0").outerHeight();
$("#hover-img-0").css("width", imgWidth1 + "px");
$("#hover-img-0").css("height", imgHeight1 + "px");
$("#hover-img-0").css("line-height", imgHeight1 + "px");
$(window).resize(function() {
var imgWidth = $("#image-hover-0").outerWidth();
var imgHeight = $("#image-hover-0").outerHeight();
$("#hover-img-0").css("width", imgWidth + "px");
$("#hover-img-0").css("height", imgHeight + "px");
$("#hover-img-0").css("line-height", imgHeight + "px");
});
});
I faced this problem before. But still the question is, do you want the real size? or the size showed on the screen ?
For the first, you should wait the image to be loaded after you can get the real size :
yourImage.addEventListener('onload',
function() {
console.log("pic's width : ", this.naturalWidth);
console.log("pic's height : ", this.naturalHeight);
});
For the second, you must encupsle it within a div and get its size.
I hope that my answer may helps you.
Related
I am trying to get the height and width of the browser window and display it on the body as well as changing the height to match.
Here's my current code:
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
The above code displays the width and height on the body ok, now time to add it to a css variable:
var header = document.querySelector('.header')
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
header.style.setProperty('--height', height);
header.style.setProperty('--width', width);
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
I know the code is not correct but I can't find any sample to compare with, here's a fiddle just in case the code is not enough.
https://jsfiddle.net/rbtwsxd8/6/
You have a number of different issues here:
(at least in the fiddle) you were trying to document.queryselect the header element before it existed
your debug code overwrote the header element by setting document.body
You omitted the units when setting the height and width (This used to work in "quirks mode" but will not work in modern doctypes.)
You added extra double hyphens when trying to set the height and width
Here's a working version which corrects these problems:
window.onresize = window.onload = function() {
var header = document.querySelector('.header');
// your original code used 'this.innerWidth' etc, which does work
// (because the function is being run on the window object) but can
// be confusing; may be better to refer to the window object
// explicitly:
var width = window.innerWidth;
var height = window.innerHeight;
header.style.width = width + "px"; // need 'px' units
header.style.height = height + "px";
// the above is equivalent shorthand for
// header.style.setProperty('height', window.innerHeight + 'px');
// header.style.setProperty('width', window.innerWidth + 'px');
// setting this inside the header, so we don't remove it in the process:
header.innerHTML = width + "x" + height;
}
https://jsfiddle.net/pm7rgx4q/1/
window.onresize = window.onload = function() {
var header = document.querySelector('.header')
width = this.innerWidth;
height = this.innerHeight;
header.innerHTML = width + 'x' + height; // For demo purposes
header.style.setProperty('height', height + 'px')
header.style.setProperty('width', width + 'px');
//header.style.height = height + 'px';
//header.style.width =width + 'px';
}
fiddle
The problem is therein, that element.style.width returns a string, and not a number.
I want to do increase the width like so:
element.style.width += 100;
, but it remains the same. My solution is to take one of the long ways:
element.style.width = element.offsetWidth + 100;
element.style.width = parseInt(element.style.width) + 100;
(Thankfully, it doesn't require + 'px')
Is there a better way to do this?
You can do so:
var computedStyles = window.getComputedStyle(element, null);
var width = window.parseInt(computedStyles.width, 10);
element.style.width = (width + 100) + 'px';
or with jQuery you can do like this:
$(element).css("width", "+=200");
See more about it http://api.jquery.com/css/
You could also try this, though it is not particularly apposite or compact;
element.setAttribute("style","width:" + (element.offsetWidth + 100) + "px");
A fiddle example
I'm looking for an effect very similar to this:
http://jsfiddle.net/G5Xrz/
function rnd(max) { return Math.floor(Math.random()*(max+1)) }
function showImage(container, maxwidth, maxheight, imgsrc, imgwidth, imgheight) {
var id = "newimage" + rnd(1000000);
$(container).append(
"<img id='" + id + "' src='" + imgsrc +
"' style='display:block; float:left; position:absolute;" +
"left:" + rnd(maxwidth - imgwidth) + "px;" +
"top:" + rnd(maxheight - imgheight) + "px'>");
$('#' + id).fadeIn();
return id;
}
setInterval(
function() {
showImage("#container", 400, 600,
"http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)),
100, 100);
}, 700);
But i'd prefer a flexible layout, ie images not bound by a div with predefined height and width, instead responding to the dimensions of the browser.
The following piece of code seems to have a more appropriate way of generating the random positions:
http://jsfiddle.net/Xw29r/15/
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
However I'm very much a beginner with javascript and I don't know how to combine the two.
Can anyone help?
Thanks
Take this part from the second code:
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
and use those variables h and w with the browser height and width (minus 50) as the appropriate parameters in this part of the first code:
setInterval(
function() {
showImage("#container", 400, 600,
"http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)),
100, 100);
}, 700);
Also, the first code has this HTML:
<div id="container" style="width:400px; height:600px; background: green; position:relative"></div>
That hard-codes the height and width at pixel values. You can use a CSS percentage value to make the width respond to the parent container's size. However, you will need JS to set the height properly; a percentage for the height does nothing
Putting that all together (and removing the "minus 50" part), you get this:
jsFiddle demo
<div id="container" style="width:100%; height:100px; background: green; position:relative"></div>
function adjustContainerHeight(height) {
$('#container').height(height);
}
adjustContainerHeight($(window).height());
setInterval(
function() {
var h = $(window).height();
var w = $(window).width();
adjustContainerHeight(h);
showImage("#container", w, h,
"http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)),
100, 100);
}, 700);
This updates the height of the container when the page is first loaded, and once again whenever the random image is placed. More robust code would have a separate height-adjusting event handler that updates the height whenever the page size changes.
I am trying to give my container element height and width via jQuery .css() but my code is setting it as window height and width. Can anyone please tell me why is the code not working?
Below is the code:
$(document).ready(function () {
var H = $(window).height();
var W = $(window).width();
var h = W / 1.625;
var w = H * 1.625;
if (w > W) {
$("#container").css("height", h + 'px').css("maxWidth", W + 'px;');
else {
$('#container').css("maxHeight", H + 'px').css("width", w + 'px;');
}
});
Your if statement is missing a }, so won't work in the first place. Change:
if(w>W)
{
$("#container").css("height", h+'px').css("maxWidth", W+'px;');
else
...
To:
if(w>W)
{
$("#container").css("height", h+'px').css("maxWidth", W+'px;');
}
else
...
Also as you're setting multiple CSS properties, you can combine these into one CSS method by passing the properties in as an object:
if (w>W)
{
$("#container").css({height:h, maxWidth:w});
}
...
jQuery sorts out the px for you in most cases. See jQuery's css() documentation for more info. :)
You're missing a closing brace } on the if, so your code should look like,
if (w > W) {
$("#container").css("height", h + 'px').css("maxWidth", W + 'px;');
}
else {
$('#container').css("maxHeight", H + 'px').css("width", w + 'px;');
}
You could improve your code readability by, passing your css properties as a part of an object, as opposed to chaining, as adding many properties is rather helpful when you pass them as an object.
if (w > W) {
$("#container").css({
"height": h + 'px',
"max-width": W + 'px'
});
}
else {
$("#container").css({
"max-height": H + 'px',
"width": w + 'px'
});
}
On this site:
http://houston.aiga.org/
Although the slider is full width / variable on browser window size, the Title of each slider item is always indented to line up with the content.
I've tried setting this up:
http://jsfiddle.net/topiman/xS7vn/
$(window).resize(function() {
$('#item').css("padding-left",$(window).width()/2);
});
The function is working but the calculation pushes the item too far in on decreasing window size and too far out on increase.
The line in the working slider example is:
$('.layout-feature .box-section-image-gallery-controls-title, .layout-feature .box-section-image-gallery-title').css('paddingLeft', 60 + extraSpace/2);
where extraSpace is the $(window).width()
Any help gratefully received - thanks in advance
It seems you forgot about the width after all: http://jsfiddle.net/topiman/xS7vn/5/
This is what I came up with. Stupid thing is the console.log kept giving back a +8 difference which I had to hardcode remove. Is this what you were looking for?
$(window).resize(function() {
var ItemWidth = $(".wrapper").width();
$('#item').width( ItemWidth );
var WindowWidth = $(window).width();
// cannot resize because window is smaller than the wrapper
if( ItemWidth > WindowWidth ) {
var PadWidth = 0;
} else {
var PadWidth = (WindowWidth - ItemWidth)/2 - 8;
}
console.log( ItemWidth + " - " + WindowWidth + " - " + PadWidth );
$('#item').css("margin-left",PadWidth + "px");
});
Update; also check http://jsfiddle.net/xS7vn/8/ for the latest update including resizing on page load.