locked
javascript not working with IE10 or 11 RRS feed

  • Question

  • I created a javascript for a page that brings in images when I open it. As long as I was working with IE9, the image would show as the proportional width according to the height value I specify.

    document.writeln('<a href=http://www.wncomic.com/archive.php>
    <img alt=White.Noise src=http://www.wncomic.com/istrip_files/
    strips/' + year + month + day + '.jpg height=' + When + ' border=0></a>')

    The values for "year", "month", and "day" are specified in a script

    var day = currentDate.getDate()
    if (day < 10) {day = "0" + day}
    var month = currentDate.getMonth() + 1
    if (month < 10) {month = "0" + month}
    var year = currentDate.getFullYear()

    and the value for When is specified in another script

    When =150

    And if there was not an image, IE9 would display a placeholder image with a red x that would be approximately square. But after finally upgrading to IE10, the javascript is acting weird. The placeholder images are now being shown as the height specified but the width of the image is now about 6 times the height, which really messes up the layout of the page. Normally it would all fit on a single screen, but now it forces the page to be about three to four times as long.

    The scripts are called in a html page and as it goes through and does that, it loads the images called, but since upgrading to IE10, it looks really bad. I can't tell if it was a change due to some setting in IE10 or what. I upgraded when IE10 and IE11 both came out and it did it then, so I rolled back to IE9. But I needed to upgrade to IE10 and was hoping it was something that might have been changed in the configuration since then, but it still has the same problem.

    Any help or suggestions would be welcome. If you need to see all the code (.htm and .js files) I can supply that as well.

    Thursday, July 16, 2015 6:18 PM

Answers

  • Hi,

    use the width attribute only for the img tag. eg. <img alt="required" src="picture.gif" width="100"/> (note width and height attributes do not require a units descriptor.. their values are assumed to be in px only.)

    eg.2

    document.writeln('<a href=http://www.wncomic.com/archive.php>
      <img alt=White.Noise src=http://www.wncomic.com/istrip_files/
         strips/' + year + month + day + '.jpg  width=' + When + ' border=0></a>')
    
    

    Web browsers will use the natural height and width of the image to calculate its aspect ratio, from which, given a width attribute value, it (the browser rendering engine) will calculate the correct height to render the image in the same aspect ratio...

    <img alt="" src="picture.gif" width=""/> will render as a 0px height and width image, regardless of its naturalHeight and naturalWidth properties (console.dir(document.getElementsByTagName('img')[0]);

    javascript strings (C strings) used in document write statements should be escaped. (some web browsers ignore document.write statements in xhtml documents... consider using another method (active server pages) instead to generated dynamic content.

    eg. document.write('Franklin said \"What is this nation doing? Being blown by the wind, or steering by the Stars\".');

    If possible include with your questions to the IE Web Development forum, a link to your website or a publicly accessible mashup. (eg. jsfiddle). To give a complete answer we need to inspect your servers response headers.

    You can debug your web pages using the IE Dev tools' Debug tab... Normally execution of page scripts is not interrupted unless the Dev tool and the Debug tab is visible.... so you have to have the dev tool open and the Debug tab selected before it will break on errors.

    f12>Debug tab, select the "Break on all errors" from the dropdown on the debug tab.

    You can also use the debug tab to place breakpoints in your script, so that you can examine the values and properties of local and global variables.

    Regards.


    Rob^_^

    Tuesday, July 21, 2015 8:14 AM

All replies

  • Hi,

    Please write compatibility mode tag in your script.

    For further help, please create new case on IE develop forum:

    https://social.msdn.microsoft.com/Forums/en-US/home?forum=iewebdevelopment

    The reason why we recommend posting appropriately is you will get the most qualified pool of respondents, and other partners who read the forums regularly can either share their knowledge or learn from your interaction with us.  Thank you for your understanding.


    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Monday, July 20, 2015 3:43 AM
  • Hi,

    use the width attribute only for the img tag. eg. <img alt="required" src="picture.gif" width="100"/> (note width and height attributes do not require a units descriptor.. their values are assumed to be in px only.)

    eg.2

    document.writeln('<a href=http://www.wncomic.com/archive.php>
      <img alt=White.Noise src=http://www.wncomic.com/istrip_files/
         strips/' + year + month + day + '.jpg  width=' + When + ' border=0></a>')
    
    

    Web browsers will use the natural height and width of the image to calculate its aspect ratio, from which, given a width attribute value, it (the browser rendering engine) will calculate the correct height to render the image in the same aspect ratio...

    <img alt="" src="picture.gif" width=""/> will render as a 0px height and width image, regardless of its naturalHeight and naturalWidth properties (console.dir(document.getElementsByTagName('img')[0]);

    javascript strings (C strings) used in document write statements should be escaped. (some web browsers ignore document.write statements in xhtml documents... consider using another method (active server pages) instead to generated dynamic content.

    eg. document.write('Franklin said \"What is this nation doing? Being blown by the wind, or steering by the Stars\".');

    If possible include with your questions to the IE Web Development forum, a link to your website or a publicly accessible mashup. (eg. jsfiddle). To give a complete answer we need to inspect your servers response headers.

    You can debug your web pages using the IE Dev tools' Debug tab... Normally execution of page scripts is not interrupted unless the Dev tool and the Debug tab is visible.... so you have to have the dev tool open and the Debug tab selected before it will break on errors.

    f12>Debug tab, select the "Break on all errors" from the dropdown on the debug tab.

    You can also use the debug tab to place breakpoints in your script, so that you can examine the values and properties of local and global variables.

    Regards.


    Rob^_^

    Tuesday, July 21, 2015 8:14 AM