...

View Full Version : Code works on reload, but not on initial load.



Jirin
07-04-2011, 08:10 PM
Basically, what I'm trying to do is set the left margin of an image based on the width of the image, because I want the image to appear centered relative to the link table above. I've been using this code:



function insertImageMargin()
{
var marg = getImageMargin();
document.getElementById("comic").style.marginLeft = marg + "px";
}


function getImageMargin()
{
var com = document.getElementById("comic");
return 440 - com.width / 2;
}


What happens is, the first time com.width is 0, but if I hit reload, it is the width of the image, and the code works correctly. How do I get this to work the first time, or can you suggest an alternate approach?

Krupski
07-04-2011, 08:55 PM
Basically, what I'm trying to do is set the left margin of an image based on the width of the image, because I want the image to appear centered relative to the link table above. I've been using this code:



function insertImageMargin()
{
var marg = getImageMargin();
document.getElementById("comic").style.marginLeft = marg + "px";
}


function getImageMargin()
{
var com = document.getElementById("comic");
return 440 - com.width / 2;
}
What happens is, the first time com.width is 0, but if I hit reload, it is the width of the image, and the code works correctly. How do I get this to work the first time, or can you suggest an alternate approach?

If you simply look for the style of an element, it will return null unless it's externally set.

For example:
HTML: <span id="color">
CSS: span { color:#ff0000; }
alert(document.getElementById('color').style.color); <-- will return nothing

Now set it with code:
document.getElementById('color').style.color = '#ff0000';
alert(document.getElementById('color').style.color); <-- will return '#ff0000' or 'rgb(255,0,0)' depending on your browser.

To get the RUNTIME style setting of an element, use this nice little piece of code:



/***
* get live runtime value of an element's css style
* http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
* note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
***/
var getStyle = function (e, styleName) {
var styleValue = "";
if(document.defaultView && document.defaultView.getComputedStyle) {
styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
}
else if(e.currentStyle) {
styleName = styleName.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
styleValue = e.currentStyle[styleName];
}
return styleValue;
}

Hope this helps.....


How to use that code:

var e = document.getElementById('something');
var bgcolor = getStyle(e, 'background-color');

Jirin
07-04-2011, 09:37 PM
Edit: Nevermind, that is working, I just wasn't removing the 'px' from the end before trying to calculate with it. Thanks!

Jirin
07-04-2011, 10:09 PM
Edit: Nevermind, capitalization issue.

Sorry, I'm used to programming with Java where the compiler catches that kind of thing.

devnull69
07-04-2011, 10:17 PM
Most probably you changed it a little bit differently on the other pages :-)

It's marginLeft and not marginleft ... Javascript is case sensitive

Kor
07-05-2011, 12:06 PM
I wonder... couldn't you have used a simple CSS way to center that image? Can you post the HTML structure?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum