Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Code works on reload, but not on initial load.

    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:

    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?
    Last edited by Jirin; 07-04-2011 at 09:22 PM.

  • #2
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Jirin View Post
    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:

    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:

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

    Edit:
    How to use that code:

    var e = document.getElementById('something');
    var bgcolor = getStyle(e, 'background-color');
    Last edited by Krupski; 07-04-2011 at 09:57 PM. Reason: added example
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • Users who have thanked Krupski for this post:

    Jirin (07-04-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Edit: Nevermind, that is working, I just wasn't removing the 'px' from the end before trying to calculate with it. Thanks!

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Edit: Nevermind, capitalization issue.

    Sorry, I'm used to programming with Java where the compiler catches that kind of thing.
    Last edited by Jirin; 07-04-2011 at 11:16 PM.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Most probably you changed it a little bit differently on the other pages :-)

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

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I wonder... couldn't you have used a simple CSS way to center that image? Can you post the HTML structure?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •