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
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help IE Bug getNamedItem("width")

    Hi,
    I'm working on a bit of JavaScript that will read the source and other information from an img tag for some CSS manipulation.

    So basically I'm using getElementById with a workaround for the IE failings with that method.
    var myImage = document.getElementById("myLogo");

    Then I grab the attributes by name with:
    var imageattributes=myImage.attributes;
    var imgURL = imageattributes.getNamedItem("src").value;
    var imgHeight = imageattributes.getNamedItem("height");
    var imgWidth = imageattributes.getNamedItem("width");
    var imgAlt = imageattributes.getNamedItem("alt");

    It all works great in IE8 and FireFox.

    The alt and src work great in everything.

    However IE 6 and 7 (and compatibility view IE8) always return "0" as the value for height and width even when another value is set. They return "0" when the tags aren't included at all.

    I did a google search but I couldn't find anything about this specific IE bug, assuming it's a bug and not something I'm overlooking.

    Anyone have any tips or similar experiences?

    Thanks,
    Heather

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    var imgHeight = imageattributes.getNamedItem("height").value;
    var imgWidth = imageattributes.getNamedItem("width").value;
    var imgAlt = imageattributes.getNamedItem("alt").value;

    Fine in IE6/7 but does not work in Firefox. So you will need a bit of browser detection and alternative code.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 10-03-2009 at 09:57 AM.

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. Sorry, that was a typo in my posting. I'm using .value in all instances.

    The odd thing is that the alt value and src value work just fine in IE6 and 7, it's just the width and height that are read as "0" no matter what.

    So to reiterate, this is my code:

    var imageattributes=myImage.attributes;
    var imgURL = imageattributes.getNamedItem("src").value;
    var imgHeight = imageattributes.getNamedItem("height").value;
    var imgWidth = imageattributes.getNamedItem("width").value;
    var imgAlt = imageattributes.getNamedItem("alt").value;

    imgURL and imgAlt work great in all browsers.

    imgHeight and imgWidth always return "0" in IE 6 and IE 7, but return the true value in IE 8, FireFox, Chrome....

    Why does "width" behave differently than "src" in IE? Is there a workaround?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by hroyale View Post
    The odd thing is that the alt value and src value work just fine in IE6 and 7, it's just the width and height that are read as "0" no matter what.

    imgHeight and imgWidth always return "0" in IE 6 and IE 7, but return the true value in IE 8, FireFox, Chrome....

    Why does "width" behave differently than "src" in IE? Is there a workaround?
    This returns the correct width and height (200 and 100 in my test image) in IE6/7:

    Code:
    <img src = "one.jpg" id = "myLogo" alt="The Logo">
    
    <script type = "text/javascript">
    
    var myImage = document.getElementById("myLogo");
    
    var imageattributes=myImage.attributes;
    var imgURL = imageattributes.getNamedItem("src").value;
    alert ("URL = " + imgURL);
    
    var imgHeight = imageattributes.getNamedItem("height").value;
    alert ("Height " + imgHeight);
    
    var imgWidth = imageattributes.getNamedItem("width").value;
    alert ("Width " + imgWidth);
    
    var imgAlt = imageattributes.getNamedItem("alt").value;
    alert ("Alt = " + imgAlt);
    
    </script>

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    This returns the correct width and height (200 and 100 in my test image) in IE6/7:
    only if the image has loaded(this may be the problem)
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vwphillips View Post
    only if the image has loaded(this may be the problem)
    Yes, but then the src and the alt would not show.


  •  

    Tags for this Thread

    Posting Permissions

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