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 3 of 3
  1. #1
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts

    Internet Explorer News Ticker not working in IE

    I've got this a news ticker I made custom edited what ever you want to call it right. It works fine in Firefox but fails to work in Internt Explorer. Any help is appreciation and thanks will be given.
    Code:
    <script type="text/javascript">
    function rotator()
    {
      var urls = new Array()
      urls[0] = "#";
      urls[1] = "#";
      urls[2] = "#";
    
      var images = new Array()
      images[0] = "image_1";
      images[1] = "image_2";
      images[2] = "image_3";
    
      var contents = new Array()
      contents[0] = "Text 1";
      contents[1] = "Text 2";
      contents[2] = "Text 3";
    
      this.pointer = 1;
      this.images = images;
      this.id = "rotator";
    
      var instance = this;
    
      setTimeout(function(){instance.refresh()}, 1000)
    
      rotator.prototype.refresh = function()
      {
        this.element = document.getElementById(this.id);
        this.rotate();
      }
    
      rotator.prototype.rotate = function()
      {
        this.element.childNodes[5].href = urls[this.pointer];
        this.element.childNodes[3].innerHTML = contents[this.pointer];
        this.element.childNodes[1].src = "./images/promo/"+this.images[this.pointer]+".gif"
    
        this.pointer = (this.pointer < this.images.length - 1)? this.pointer + 1 : 0  
        setTimeout(function(){instance.rotate()}, 1000)
      }
    }
    
    new rotator()
    </script>
    HTML
    Code:
        <div id="rotator">
          <img src="./images/promo/image_1.gif" alt="Promo" />
          <p>
            Text 1
          </p>
          <a href="#">&#187; Check it out!</a><br />
        </div>
    Last edited by Iszak; 05-07-2008 at 01:04 PM.

  • #2
    New Coder
    Join Date
    May 2008
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts
    The error I get in IE is "'this.element.childNodes.5' is null or not an object".

    I imagine this is due to the problem outlined here: http://p2p.wrox.com/topic.asp?TOPIC_ID=31377 that IE and Firefox handle whitespace differently, so while firefox creates two text nodes in between your elements, making the link the 5th child node, IE doesn't do so, so presumably your link, under IE, would be the 3rd child node.

    The best practice solution would be to give each child element a class and then locate it using that class, using either a getElementsByClassName function, or using a library like jQuery.

    I did it using jQuery:

    Code:
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.2.3.pack.js"></script>
    <script type="text/javascript">
    function rotator()
    {
      var urls = new Array()
      urls[0] = "#";
      urls[1] = "#";
      urls[2] = "#";
    
      var images = new Array()
      images[0] = "image_1";
      images[1] = "image_2";
      images[2] = "image_3";
    
      var contents = new Array()
      contents[0] = "Text 1";
      contents[1] = "Text 2";
      contents[2] = "Text 3";
    
      this.pointer = 1;
      this.images = images;
      this.id = "rotator";
    
      var instance = this;
    
      setTimeout(function(){instance.refresh()}, 1000)
    
      rotator.prototype.refresh = function() {
        this.element = document.getElementById(this.id);
        this.rotate();
      }
    
      rotator.prototype.rotate = function() {
        jQuery('.rotatorLink',this.element)[0].href = urls[this.pointer];
        jQuery('.rotatorText',this.element)[0].innerHTML = contents[this.pointer];
        jQuery('.rotatorImg',this.element)[0].src = "./images/promo/"+this.images[this.pointer]+".gif"
    
        this.pointer = (this.pointer < this.images.length - 1)? this.pointer + 1 : 0  
        setTimeout(function(){instance.rotate()}, 1000)
      }
    }
    
    new rotator()
    </script>
    </head>
    <body>
      <div id="rotator">
        <img src="./images/promo/image_1.gif" alt="Promo" class="rotatorImg" />
        <p class="rotatorText">
          Text 1
        </p>
        <a href="#" class="rotatorLink">&#187; Check it out!</a><br />
      </div>
    </body>
    </html>

  • Users who have thanked nottRobin for this post:

    Iszak (05-07-2008)

  • #3
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    Thanks it helped but jquery isn't exactly small and I want to keep the site fast loading for people with low internet speeds is there an alternative method? or like jquery with just the stuff I need for this task?


  •  

    Posting Permissions

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