Develop Reference

Javascript positioning not working in Chrome or Safari

I have a script going in Javascript, the purpose of which is to make an image stay centered in the window when the window is smaller than the image. It just moves the image to the left by half the difference between the image width and the window width so that the center of the image is always the center of the screen. When the window is not smaller than the image, this left offset is set to zero. And it works perfectly, if I'm in IE or Firefox. On the webkit browsers, it doesn't ever go to zero, creating an effect akin to float:right when the window is wider than the image. Here's the code:
setTimeout(slideImageWidth, 1);
function slideImageWidth() {
var slideWidth = window.getComputedStyle(document.getElementById("slide-image")).width,
windowWidth = window.innerWidth,
slide = document.getElementById("slide-image"),
slideWidth = window.getComputedStyle(slide).width;
if (windowWidth < (slideWidth.replace("px", "") + 1) && slide.style.display !== "none") {
slide.style.left = ((((-slideWidth.replace("px", "") + windowWidth)) / 2) + "px");
}
else {
slide.style.left = 0;
setTimeout(slideImageWidth, 1);
};
I tried putting slide.style.left = 0 before the if and just letting the loop take care of it in the next millisecond, but that didn't work either. I've also tried both placements with:
slide.style.left = "0px";
slide.style.left = 0 + "px";
slide.style.left = "0" + "px";
slide.style.left = 0px;
none of which worked in Chrome or Safari, but all but the last of which worked in Firefox and IE.
When I use alert(slide.style.left) when the window is wider than the image, a positive value is returned in Chrome and Safari, unlike the 0 from Firefox and IE, which tells me that the 0 value is never being written to slide.style.left. Yet, I know that I can modify slide.style.left because it still positions itself based on the equation.
Why does this code not work with the webkit browsers, and how can I fix it?

First, the things which I think are accidental typos:
1) Your code references something called "slide1Width", which is defined nowhere.
2) Your code references something called "slide1", which is defined nowhere.
3) You don't have the right number of close brackets, and the last bracket inexplicably has a semicolon after it.
Second, the most obvious error that isn't causing your specific problem:
(slideWidth.replace("px", "") + 1)
This expression is not what you want. If slideWidth is "440px", the replace() call gives you "440", and ("440" + 1) is the string "4441". I don't think that's what you mean to do here.
Third, and finally, what I believe is the cause of the actual bug you're asking about: timing. If you open up the dev tools and manually run slideImageWidth() on a wide window after it has loaded and failed to center itself, the image will in fact jump to the center, even on Chrome. Why doesn't it do it on page load? Here:
window.getComputedStyle(slide).width
That expression returns "0px" right when the page is first loaded. If you wait until the image is done loading, you'll be able to get an actual width for it, in which case you can do the calculations you want. (Or, presumably, you could set the width yourself via styling.) It seems that IE is getting the image loaded and flowed before running the script, whereas Chrome is not.

Is there a reason you want to use setTimeout instead of a resize event? What about something like this:
window.onresize = function(event) {
setSlidePosition();
};
function setSlidePosition() {
var slideLeft = (document.getElementById("slide-image").style.left.indexOf('px') != -1 ) ? document.getElementById("slide-image").style.left : '0px';
var numLeft = slideLeft.replace('px','');
console.log(numLeft);
var element = document.getElementById("slide-image")
if(element.width > window.innerWidth) {
var newLeft = (element.width - window.innerWidth) / 2 * -1 + "px";
document.getElementById("slide-image").style.left = newLeft;
} else {
document.getElementById("slide-image").style.left = "0px";
}
};
setSlidePosition();
http://jsfiddle.net/4qomq7tb/45/
Seems to behave the same in chrome and FF at least. This doesn't specifically answer the question relating relating to your code, though :/

Javascript not working on IE8

In my web page I've the following javascript function that is called onLoad in the body:
function changeDivWidth()
{
d = document.getElementById('background');
document.getElementById("backgroundImg").style.height = window.innerHeight+"px";
imgWidth = document.getElementById("backgroundImg").width;
marginLeft = ($(window).width() - imgWidth)/2;
d.style.width = imgWidth+"px";
d.style.left = marginLeft+"px";
document.getElementById("backgroundImg").style.visibility="visible";
document.getElementById("menu").style.visibility="visible";
}
This script basically takes the height of the browser page and set it as height of an Element.
This is working pretty fine in all browser except in IE7 and IE8, where the script is not loaded.
Can you suggest me a solution?
Thanks

window.innerHeight doesn't work in IE8 and below. Try out document.body.clientHeight
Edit: Wait a minute... are you using jQuery on line 6?:
marginLeft = ($(window).width() - imgWidth)/2;
If you are, then use $(window).height() to get the height instead.

offsettop & clientHeight in firefox

I'm updating a web page from being supported by I.E. to code that works in Firefox.
I have a section of code that positions some tables on the page in certain locations. It works in IE, but it seems that .clientHeight .offsetTop .style.posTop and .style.posLeft do not work in firefox. are there alternatives for the Firefox browser?
Here's the piece of code that I'm looking at:
var tableHeight = table1.clientHeight;
var yLocation = table2.offsetTop - tableHeight / 4;
table3.style.posTop = Math.max(table2.offsetTop + 2);
table3.style.posLeft = + table2.offsetLeft + 80;

Getting height and width of body or window of web page

Depending on which mode of IE8 i'm in (quirks or standard) i get different values for the height and width. I've tried standard javascript and jquery but both return different results.
In Quirks
$('body').width = 1239
$('body').height = 184
document.body.clientWidth = 1231
document.body.clientHeight = 176
In standards
$('body').width = 1260
$('body').height = 182
document.body.clientWidth = 1254
document.body.clientHeight = 176
Any ideas how to get a value unchanged by the mode of IE8.
Thanks in adv.

Perhaps the issue is due to the scrollbars being included in the width and height regardless of whether or not they are there. I don't have IE (on a mac) so can't verify.
However, I can tell you what does work as in my project jQuery Lightbox I have no such issue. We use the following code in it:
// Make the overlay the size of the body
var $body = $(this.ie6 ? document.body : document); // using document in ie6 causes a crash
$('#lightbox-overlay').css({
width: $body.width(),
height: $body.height()
});
// ... some code ...
// Get the window dimensions
var $window = $(window);
var wWidth = $window.width();
var wHeight = $window.height();
And the overlay displays correctly. I would trust jQuery's result of the width and height compared to that of the native result, as jQuery should naturally be taking into account any quirks with the browser.
It is important to note that the lightbox script above tends to prefer $(document) over $(document.body) for some reason - I can't remember sorry :O - so perhaps this solves the issue as well?

Just a quickshot. Try to give your body #page:
function getPageHeight() {
var pageHeight = document.getElementById('page').offsetHeight;
var pageWidth = document.getElementById('page').offsetWidth;
alert(pageHeight);
alert(pageWidth);
}

Try this:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
var width = viewport.width;
var height = viewport.height;

jQuery: JavaScript does not do what I tell it to

I know that the title is very subtle but I have absolutely no idea how I should title this issue nor what the hell is happening with this function.
function update_background(source, isSystem){
if (!isSystem) {
source.replace(/\/tn_/, '');
jQuery('div#drag_container img[alt="background"]').attr('src', source); //*1
jQuery('div#drag_container img[alt="background"]').attr('style', '');
var height = jQuery('div#drag_container img[alt="background"]').height();
var width = jQuery('div#drag_container img[alt="background"]').width();
var ratio = Storyboard['format'];
//Don't touch the paddings, they are correct!
if (height * ratio > width) {
var padding = (Storyboard['display'] - (width * (Storyboard['height'] / height))) / 2;
jQuery('div#drag_container img[alt="background"]').css({
'height': Storyboard['height'],
'padding-left': padding
});
} else {
var padding = (Storyboard['height'] - (height * (Storyboard['display'] / width))) / 2;
jQuery('div#drag_container img[alt="background"]').css({
'width': Storyboard['display'],
'padding-top': padding,
'padding-bottom': padding
});
}
} else {
jQuery('div#drag_container img[alt="background"]').attr('src', source).attr('style', '');
jQuery('div#drag_container img[alt="background"]').css({
'width': Storyboard['display'],
'height': Storyboard['height']
});
}
}
What this function is supposed to do, is take a picture, get the size of it, compare it to the the size of the container it will be shown in, resize it so that it is as big as possible without sticking out of the container and then finally, apply padding where needed to center the image. It does not matter if the picture is landscape or portrait, the function knows exactly what to do. The picture is cached so that we don't get wrong values (I already had a bug like that). In case it is a System Background, we don't care for correct size and padding. Worked flawless for 3 months.
Lately, it is behaving rather odd. At the line with the comment *1, it does not only reset the src attribute of the img-tag, but it also sets a height and a padding, as if it already were in the padding calculations. They are removed again on the next line (which wasn't actually inserted for that purpose but was inserted to get the original dimensions of a picture) and it still works.
Unless, of course, you let the function run at regular speed, where it does not reset the style. I am quite irritated by this Bug as I have no idea where to start searching.
The function is only called once. It only runs once through the function. It is not included in an event and this function is called in 2 totally different places.
Any ideas?
Edit 1
I have found out that the Bug does not occur in every Browser.
Mac OS X Snow Leopard
Firefox: behavior as described
Opera: does it all wrong, but is not supported by our company
Safari: Still works flawless
Windows XP
Chrome: Works same as Safari
Firefox: Behavior as described
IE8: Same Behavior
IE7: Actually Works!
Linux
Firefox: Behavior as described
Konqueror: does not even work with my JavaScript

You might be having problems getting the size of the image because it isn't guaranteed that it has been loaded by the time you're checking its dimensions.
var $img = jQuery('div#drag_container img[alt="background"]');
$img.bind('load', function(){
// do all of your stuff with the width and the height of the image in here...
var width = $(this).width();
var height = $(this).height();
});
$img.attr('src', source); /* kicks off the loading of the image, the bound function
* above will get called when it's done.
*/