On fly change the text, image src not supported by IE?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Nick
    #1

    On fly change the text, image src not supported by IE?

    I have the following code, and it works well on Mozilla 1.6. (However,
    the image src property cannot be set on Mozilla 1.2.1).

    Unfortunately, all the code:
    document.images .itemImage.src = itemInfo.imageU rl;
    //document.getEle mentById("itemI mage").src = itemInfo.imageU rl;
    document.getEle mentById("descr ").innerHTM L = itemInfo.descr;
    document.getEle mentById("price ").innerHTM L = itemInfo.price;
    doesn't work on IE. What's the proper way to set them in IE?


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1">
    <title>popup</title>
    <script src="items.js" language="JavaS cript"></script>
    <script language="javas cript">
    <!---
    function show_details(ID ) {
    var itemInfo = items.getARecor d(ID);
    document.images .itemImage.src = itemInfo.imageU rl;
    //document.getEle mentById("itemI mage").src = itemInfo.imageU rl;
    document.getEle mentById("descr ").innerHTM L = itemInfo.descr;
    document.getEle mentById("price ").innerHTM L = itemInfo.price;
    }
    //--->
    </script>
    </head>
    <body onload="javascr ipt:show_detail s(opener.itemID );">

    <table cellpadding="2" cellspacing="2" border="1"
    style="text-align: left; width: 100%;">
    <tbody>
    <tr align="center">
    <td style="vertical-align: top;"><img src="na.jpg" title=""
    alt="Picture" ID="itemImage"/><br>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><div ID="descr"></div><br>
    </td>
    </tr>
    <tr align="right">
    <td style="vertical-align: top;"><div ID="price"></div>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top;"><br>
    </td>
    </tr>
    </tbody>
    </table>
    <br>
    </body>
    </html>
    Tags: None
    • Ivo
      #2
      Re: On fly change the text, image src not supported by IE?

      "Nick" <nbdy9.nospam@h otmail.com> wrote in message
      news:c1mhqh$c35 $1@news3.bu.edu ...[color=blue]
      > I have the following code, and it works well on Mozilla 1.6. (However,
      > the image src property cannot be set on Mozilla 1.2.1).
      >
      > Unfortunately, all the code
      > doesn't work on IE. What's the proper way to set them in IE?[/color]

      With the code below, if there is an element with id "price" and an an
      innerHTML property and an object itemInfo with a property price, then IE
      will display it. Microsoft singlehandedly invented innerHTML so it would be
      kinda strange if they suddenly stopped supporting it. Now I do see a nice
      accessible div with id="price" below, so I guess the problem lies with the
      itemInfo variables. Do you get the expected response if you write
      alert(itemInfo. price) in the function?

      <snip>[color=blue]
      > <script language="javas cript">
      > <!---
      > function show_details(ID ) {
      > var itemInfo = items.getARecor d(ID);
      > document.images .itemImage.src = itemInfo.imageU rl;
      > //document.getEle mentById("itemI mage").src = itemInfo.imageU rl;
      > document.getEle mentById("descr ").innerHTM L = itemInfo.descr;
      > document.getEle mentById("price ").innerHTM L = itemInfo.price;
      > }
      > //--->
      > </script>
      > </head>
      > <body onload="javascr ipt:show_detail s(opener.itemID );">[/color]

      You may drop the bit "javascript :". Unless you have specified a different
      default content-type for scripts with a meta tag in the head, anything
      inside the onload="..." will automatically be interpreted as javascript.

      <snip>[color=blue]
      > <td style="vertical-align: top;"><div ID="descr"></div><br>
      > </td>
      > </tr>
      > <tr align="right">
      > <td style="vertical-align: top;"><div ID="price"></div>[/color]
      <snip>

      HTH
      Ivo


        Comment

        • Nick
          #3
          Re: On fly change the text, image src not supported by IE?

          Ivo wrote:[color=blue]
          > "Nick" <nbdy9.nospam@h otmail.com> wrote in message
          > news:c1mhqh$c35 $1@news3.bu.edu ...
          >[color=green]
          >>I have the following code, and it works well on Mozilla 1.6. (However,
          >>the image src property cannot be set on Mozilla 1.2.1).
          >>
          >>Unfortunately , all the code
          >>doesn't work on IE. What's the proper way to set them in IE?[/color]
          >
          >
          > With the code below, if there is an element with id "price" and an an
          > innerHTML property and an object itemInfo with a property price, then IE
          > will display it. Microsoft singlehandedly invented innerHTML so it would be
          > kinda strange if they suddenly stopped supporting it. Now I do see a nice
          > accessible div with id="price" below, so I guess the problem lies with the
          > itemInfo variables. Do you get the expected response if you write
          > alert(itemInfo. price) in the function?
          >[/color]
          Thanks, it turn out be the scope problem because I wrote:

          <script src="items.js" language="JavaS cript"></script>
          <script language="javas cript">
          <!---
          var imageSrc;
          function show_details(ID ) {
          var itemInfo = items.getARecor d(ID);
          document.images .itemImage.src = itemInfo.imageU rl;
          ...
          document.getEle mentById("price ").innerHTM L = itemInfo.price;
          }
          //--->
          </script>

          The items.js in the first <script> tag defined the object variable
          items, which is global visibla in Mozilla, but the second <script> in IE
          cannot see the variable. That's cause the problem.

          I don't want to combine it into one because items.js will be a large
          object variable definition. And the second <script> tag is for
          "presentati on layer" so it had better go with the html code. Any
          solution to make a javascript variable definition global in the whole html?

          Btw, looks mozilla 1.2.1 doesn't support

          document.images .itemImage.src = itemInfo.imageU rl;

          But Mozilla 1.6 can run the above line without problem.
          [color=blue]
          > <snip>
          >[color=green]
          >> <script language="javas cript">
          >> <!---
          >> function show_details(ID ) {
          >>var itemInfo = items.getARecor d(ID);
          >>document.imag es.itemImage.sr c = itemInfo.imageU rl;
          >>//document.getEle mentById("itemI mage").src = itemInfo.imageU rl;
          >>document.getE lementById("des cr").innerHTM L = itemInfo.descr;
          >>document.getE lementById("pri ce").innerHTM L = itemInfo.price;
          >> }
          >> //--->
          >></script>
          >></head>
          >><body onload="javascr ipt:show_detail s(opener.itemID );">[/color]
          >
          >
          > You may drop the bit "javascript :". Unless you have specified a different
          > default content-type for scripts with a meta tag in the head, anything
          > inside the onload="..." will automatically be interpreted as javascript.
          >
          > <snip>
          >[color=green]
          >> <td style="vertical-align: top;"><div ID="descr"></div><br>
          >> </td>
          >> </tr>
          >> <tr align="right">
          >> <td style="vertical-align: top;"><div ID="price"></div>[/color]
          >
          > <snip>
          >
          > HTH
          > Ivo
          >
          >[/color]

            Comment

            • Ivo
              #4
              Re: On fly change the text, image src not supported by IE?

              "Nick" <nbdy9.nospam@h otmail.com> wrote in message
              news:c1mpam$eo2 $1@news3.bu.edu ...[color=blue]
              > Ivo wrote:[color=green]
              > > "Nick" <nbdy9.nospam@h otmail.com> wrote in message
              > > news:c1mhqh$c35 $1@news3.bu.edu ...
              > > itemInfo variables. Do you get the expected response if you write
              > > alert(itemInfo. price) in the function?
              > >[/color]
              > Thanks, it turn out be the scope problem because I wrote:
              >
              > <script src="items.js" language="JavaS cript"></script>
              > <script language="javas cript">
              > <!---
              > var imageSrc;
              > function show_details(ID ) {
              > var itemInfo = items.getARecor d(ID);
              > document.images .itemImage.src = itemInfo.imageU rl;
              > ...
              > document.getEle mentById("price ").innerHTM L = itemInfo.price;
              > }
              > //--->
              > </script>
              >
              > The items.js in the first <script> tag defined the object variable
              > items, which is global visibla in Mozilla, but the second <script> in IE
              > cannot see the variable. That's cause the problem.
              >
              > I don't want to combine it into one because items.js will be a large
              > object variable definition. And the second <script> tag is for
              > "presentati on layer" so it had better go with the html code. Any
              > solution to make a javascript variable definition global in the whole[/color]
              html?

              Once a scriptfile is read, it becomes part of the page source. Any global
              variables that you create in script.js are as global as the functions are
              other things that may be in the file. I can't say without having seen
              script.js why IE is not picking up the "items" variable while Mozila is. You
              pass one variable to the show_details function, "opener.itemID" , why not the
              "items" variable as well?
              Ivo


                Comment

                • Nick
                  #5
                  Re: On fly change the text, image src not supported by IE?

                  Ivo wrote:[color=blue]
                  > "Nick" <nbdy9.nospam@h otmail.com> wrote in message
                  > news:c1mpam$eo2 $1@news3.bu.edu ...
                  >[color=green]
                  >>Ivo wrote:
                  >>[color=darkred]
                  >>>"Nick" <nbdy9.nospam@h otmail.com> wrote in message
                  >>>news:c1mhqh$ c35$1@news3.bu. edu...
                  >>>itemInfo variables. Do you get the expected response if you write
                  >>>alert(itemIn fo.price) in the function?
                  >>>[/color]
                  >>
                  >>Thanks, it turn out be the scope problem because I wrote:
                  >>
                  >><script src="items.js" language="JavaS cript"></script>
                  >><script language="javas cript">
                  >> <!---
                  >> var imageSrc;
                  >> function show_details(ID ) {
                  >>var itemInfo = items.getARecor d(ID);
                  >>document.imag es.itemImage.sr c = itemInfo.imageU rl;
                  >>...
                  >>document.getE lementById("pri ce").innerHTM L = itemInfo.price;
                  >> }
                  >> //--->
                  >></script>
                  >>
                  >>The items.js in the first <script> tag defined the object variable
                  >>items, which is global visibla in Mozilla, but the second <script> in IE
                  >>cannot see the variable. That's cause the problem.
                  >>
                  >>I don't want to combine it into one because items.js will be a large
                  >>object variable definition. And the second <script> tag is for
                  >>"presentati on layer" so it had better go with the html code. Any
                  >>solution to make a javascript variable definition global in the whole[/color]
                  >
                  > html?
                  >
                  > Once a scriptfile is read, it becomes part of the page source. Any global
                  > variables that you create in script.js are as global as the functions are
                  > other things that may be in the file. I can't say without having seen
                  > script.js why IE is not picking up the "items" variable while Mozila is. You
                  > pass one variable to the show_details function, "opener.itemID" , why not the
                  > "items" variable as well?
                  > Ivo
                  >
                  >[/color]

                  Now I put everything in the html file (File is shown below), Mozilla 1.6
                  always works fine. But IE 6 always error. When using VS.Net debug, it
                  said that the fill_details is not defined and stop at the <body
                  onload="javascr ipt:fill_detail s(opener.itemID )...>.

                  It's so strange...

                  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                  <html>
                  <head>
                  <meta http-equiv="content-type"
                  content="text/html; charset=ISO-8859-1">
                  <title>popup</title>
                  <!--script src="items.js" language="JavaS cript"></script-->
                  <script language="javas cript">
                  <!---
                  var items = {
                  Default : {descr:'n/a', price:'n/a', color:'n/a', imageDir:'', top:0,
                  left:0, width:350, height:350},
                  ring1 : {descr:'Ring 1 description.', price:120, color:'gold',
                  imageDir:'', top:100, left:100, width:300, height:350},
                  };

                  // Member methods
                  function getImageUrl(ID) {
                  return this[ID].imageDir + ID + '.jpg';
                  }

                  // Assign member methods
                  items.imageUrl = getImageUrl;

                  // Member method
                  function getARecord(ID) {
                  var result = {descr:this[ID].descr, price:this[ID].price,
                  color:this[ID].color, imageUrl:this.i mageUrl(ID),
                  left:this[ID].left, top:this[ID].top, width:this[ID].width,
                  height:this[ID].height};
                  return result;
                  }

                  items.getARecor d = getARecord;

                  function fill_details(ID ) {
                  var itemInfo = items.getARecor d(ID);
                  document.images .itemImage.src = itemInfo.imageU rl;
                  //document.getEle mentById("itemI mage").src = itemInfo.imageU rl;
                  document.getEle mentById("descr ").innerHTM L = itemInfo.descr;
                  document.getEle mentById("price ").innerHTM L = 'Price: ' + itemInfo.price;
                  if (itemInfo.width != 0 && itemInfo.height != 0)
                  window.resizeTo (itemInfo.width , itemInfo.height );
                  if (itemInfo.top != 0 && itemInfo.left != 0)
                  window.moveTo(i temInfo.left, itemInfo.top);
                  }
                  //--->
                  </script>
                  </head>
                  <body onload="javascr ipt:fill_detail s(opener.itemID );">

                  <table cellpadding="2" cellspacing="2" border="1"
                  style="text-align: left; width: 100%;">
                  <tbody>
                  <tr align="center">
                  <td style="vertical-align: top;"><img src="na.jpg" title=""
                  alt="Picture" ID="itemImage"/><br>
                  </td>
                  </tr>
                  <tr>
                  <td style="vertical-align: top;"><div ID="descr"></div><br>
                  </td>
                  </tr>
                  <tr align="right">
                  <td style="vertical-align: top;"><div ID="price"></div>
                  </td>
                  </tr>
                  <tr>
                  <td style="vertical-align: top;"><br>
                  </td>
                  </tr>
                  </tbody>
                  </table>
                  <br>
                  </body>
                  </html>

                    Comment

                    • Nick
                      #6
                      Re: On fly change the text, image src not supported by IE?

                      Nick wrote:[color=blue]
                      > Ivo wrote:
                      >[color=green]
                      >> "Nick" <nbdy9.nospam@h otmail.com> wrote in message
                      >> news:c1mpam$eo2 $1@news3.bu.edu ...
                      >>[color=darkred]
                      >>> Ivo wrote:
                      >>>
                      >>>> "Nick" <nbdy9.nospam@h otmail.com> wrote in message
                      >>>> news:c1mhqh$c35 $1@news3.bu.edu ...
                      >>>> itemInfo variables. Do you get the expected response if you write
                      >>>> alert(itemInfo. price) in the function?
                      >>>>
                      >>>
                      >>> Thanks, it turn out be the scope problem because I wrote:
                      >>>
                      >>> <script src="items.js" language="JavaS cript"></script>
                      >>> <script language="javas cript">
                      >>> <!---
                      >>> var imageSrc;
                      >>> function show_details(ID ) {
                      >>> var itemInfo = items.getARecor d(ID);
                      >>> document.images .itemImage.src = itemInfo.imageU rl;
                      >>> ...
                      >>> document.getEle mentById("price ").innerHTM L = itemInfo.price;
                      >>> }
                      >>> //--->
                      >>> </script>
                      >>>
                      >>> The items.js in the first <script> tag defined the object variable
                      >>> items, which is global visibla in Mozilla, but the second <script> in IE
                      >>> cannot see the variable. That's cause the problem.
                      >>>
                      >>> I don't want to combine it into one because items.js will be a large
                      >>> object variable definition. And the second <script> tag is for
                      >>> "presentati on layer" so it had better go with the html code. Any
                      >>> solution to make a javascript variable definition global in the whole[/color]
                      >>
                      >>
                      >> html?
                      >>
                      >> Once a scriptfile is read, it becomes part of the page source. Any global
                      >> variables that you create in script.js are as global as the functions are
                      >> other things that may be in the file. I can't say without having seen
                      >> script.js why IE is not picking up the "items" variable while Mozila
                      >> is. You
                      >> pass one variable to the show_details function, "opener.itemID" , why
                      >> not the
                      >> "items" variable as well?
                      >> Ivo
                      >>
                      >>[/color]
                      >
                      > Now I put everything in the html file (File is shown below), Mozilla 1.6
                      > always works fine. But IE 6 always error. When using VS.Net debug, it
                      > said that the fill_details is not defined and stop at the <body
                      > onload="javascr ipt:fill_detail s(opener.itemID )...>.
                      >
                      > It's so strange...
                      >
                      > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                      > <html>
                      > <head>
                      > <meta http-equiv="content-type"
                      > content="text/html; charset=ISO-8859-1">
                      > <title>popup</title>
                      > <!--script src="items.js" language="JavaS cript"></script-->
                      > <script language="javas cript">
                      > <!---
                      > var items = {
                      > Default : {descr:'n/a', price:'n/a', color:'n/a', imageDir:'',
                      > top:0, left:0, width:350, height:350},
                      > ring1 : {descr:'Ring 1 description.', price:120, color:'gold',
                      > imageDir:'', top:100, left:100, width:300, height:350},
                      > };
                      >
                      > // Member methods
                      > function getImageUrl(ID) {
                      > return this[ID].imageDir + ID + '.jpg';
                      > }
                      >
                      > // Assign member methods
                      > items.imageUrl = getImageUrl;
                      >
                      > // Member method
                      > function getARecord(ID) {
                      > var result = {descr:this[ID].descr, price:this[ID].price,
                      > color:this[ID].color, imageUrl:this.i mageUrl(ID),
                      > left:this[ID].left, top:this[ID].top, width:this[ID].width,
                      > height:this[ID].height};
                      > return result;
                      > }
                      >
                      > items.getARecor d = getARecord;
                      >
                      > function fill_details(ID ) {
                      > var itemInfo = items.getARecor d(ID);
                      > document.images .itemImage.src = itemInfo.imageU rl;
                      > //document.getEle mentById("itemI mage").src = itemInfo.imageU rl;
                      > document.getEle mentById("descr ").innerHTM L = itemInfo.descr;
                      > document.getEle mentById("price ").innerHTM L = 'Price: ' +
                      > itemInfo.price;
                      > if (itemInfo.width != 0 && itemInfo.height != 0)
                      > window.resizeTo (itemInfo.width , itemInfo.height );
                      > if (itemInfo.top != 0 && itemInfo.left != 0)
                      > window.moveTo(i temInfo.left, itemInfo.top);
                      > }
                      > //--->
                      > </script>
                      > </head>
                      > <body onload="javascr ipt:fill_detail s(opener.itemID );">
                      >
                      > <table cellpadding="2" cellspacing="2" border="1"
                      > style="text-align: left; width: 100%;">
                      > <tbody>
                      > <tr align="center">
                      > <td style="vertical-align: top;"><img src="na.jpg" title=""
                      > alt="Picture" ID="itemImage"/><br>
                      > </td>
                      > </tr>
                      > <tr>
                      > <td style="vertical-align: top;"><div ID="descr"></div><br>
                      > </td>
                      > </tr>
                      > <tr align="right">
                      > <td style="vertical-align: top;"><div ID="price"></div>
                      > </td>
                      > </tr>
                      > <tr>
                      > <td style="vertical-align: top;"><br>
                      > </td>
                      > </tr>
                      > </tbody>
                      > </table>
                      > <br>
                      > </body>
                      > </html>[/color]
                      never mind my previous message. The error is caused by a extra comma
                      when initialize the object items....

                        Comment

                        • Ivo
                          #7
                          Re: On fly change the text, image src not supported by IE?


                          "Nick" <nbdy9.nospam@h otmail.com> wrote in message
                          news:c1mteu$br1 $1@news3.bu.edu ...[color=blue]
                          > Nick wrote:[color=green]
                          > > Ivo wrote:[color=darkred]
                          > >> "Nick" <nbdy9.nospam@h otmail.com> wrote
                          > >>> Ivo wrote:
                          > >>>> "Nick" <nbdy9.nospam@h otmail.com> wrote[/color][/color][/color]
                          <snip>[color=blue]
                          > never mind my previous message. The error is caused by a extra comma
                          > when initialize the object items....[/color]

                          It usually is.
                          Good luck, Ivo


                            Comment

                            • Nick
                              #8
                              Re: On fly change the text, image src not supported by IE?

                              Ivo wrote:[color=blue]
                              > "Nick" <nbdy9.nospam@h otmail.com> wrote in message
                              > news:c1mteu$br1 $1@news3.bu.edu ...
                              >[color=green]
                              >>Nick wrote:
                              >>[color=darkred]
                              >>>Ivo wrote:
                              >>>
                              >>>>"Nick" <nbdy9.nospam@h otmail.com> wrote
                              >>>>
                              >>>>>Ivo wrote:
                              >>>>>
                              >>>>>>"Nick" <nbdy9.nospam@h otmail.com> wrote[/color][/color]
                              >
                              > <snip>
                              >[color=green]
                              >>never mind my previous message. The error is caused by a extra comma
                              >>when initialize the object items....[/color]
                              >
                              >
                              > It usually is.
                              > Good luck, Ivo
                              >
                              >[/color]
                              Thanks, but Mozilla doesn't have problem with the extra ",". And I even
                              thought use this feature because I will use spreadsheet/database to
                              generate the initialize javascript code and I wounldn't worry about the
                              last ",".

                              Anyway, this example also shows how difficult to debug javascript, even
                              with MS VS.Net....

                                Comment

                                • Thomas 'PointedEars' Lahn
                                  #9
                                  Re: On fly change the text, image src not supported by IE?

                                  Ivo wrote:
                                  [color=blue]
                                  > "Nick" [...] wrote [...]:[/color]

                                  Please do not write so-called attribution novels. Most of the
                                  information in your attribution is superfluous as it is already
                                  contained in the headers of the posting you reply to, while it
                                  makes your posting and threads where your postings are quoted,
                                  not as easy legible.
                                  [color=blue][color=green]
                                  >> <body onload="javascr ipt:show_detail s(opener.itemID );">[/color]
                                  >
                                  > You may drop the bit "javascript :". Unless you have specified a different
                                  > default content-type for scripts with a meta tag in the head, anything
                                  > inside the onload="..." will automatically be interpreted as javascript.[/color]

                                  No, only with UAs that use JavaScript as the default scripting language.
                                  Thus standards-compliant HTML calls for explicitely specifying the
                                  default scripting language to be used in values of intrinsic event
                                  handler attributes:

                                  <head>
                                  ...
                                  <meta http-equiv="Content-Script-Type" content="text/javascript">
                                  ...
                                  </head>

                                  See <http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.2>.


                                  PointedEars

                                    Comment

                                    • Dr John Stockton
                                      #10
                                      Re: On fly change the text, image src not supported by IE?

                                      JRS: In article <40717BF7.30700 07@PointedEars. de>, seen in
                                      news:comp.lang. javascript, Thomas 'PointedEars' Lahn
                                      <PointedEars@we b.de> posted at Mon, 5 Apr 2004 17:32:07 :[color=blue]
                                      >Ivo wrote:
                                      >[color=green]
                                      >> "Nick" [...] wrote [...]:[/color]
                                      >
                                      >Please do not write so-called attribution novels. Most of the
                                      >information in your attribution is superfluous as it is already
                                      >contained in the headers of the posting you reply to, while it
                                      >makes your posting and threads where your postings are quoted,
                                      >not as easy legible.[/color]

                                      Ignore such remarks; he has yet to grow up. Evidently there is plenty
                                      of time for that; but alas no progress.

                                      The correct, agreed situation is described in the RFCs and allied
                                      documents; they are authoritative, unlike pointy-head.

                                      --
                                      © John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
                                      <URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang. javascript
                                      <URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
                                      <URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

                                        Comment

                                        Previous template Next
                                        Working...