SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Location
    London
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool rolling div's with javascript

    Hi, i need some help i'm looking for some javascript rotator to show an image and heading inside a div. i nedd a script to rotate them after some time. i'm quite new to javascript so i don't know how to do it.

    i've found some image rotator's, but i want to be able to rotate the hole div.

    it can be some plug in for a library, say jquery, anything actually.

    Thanks in advance for the help!

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about this? You may want to put the script in an external file and start it onload.
    Code:
    <body>
    
    <div id="rotator">
    <h3 id="rotatorHeading"></h3>
    <img id="rotatorImage" src="" alt="" />
    </div>
    
    <script type="text/javascript">
    (function(){
    
    var data = [
    {heading:"First Heading", src:"image1.jpg"},
    {heading:"Second Heading", src:"image2.jpg"},
    {heading:"Third Heading", src:"image3.jpg"}];
    
    var currentData = 0;
    var timePerSlide = 4000;
    
    var heading = document.getElementById("rotatorHeading");
    var image = document.getElementById("rotatorImage");
    
    function loop(){
      heading.innerHTML = data[currentData].heading;
      image.src = data[currentData].src;
      image.alt = data[currentData].heading;
      currentData = ++currentData &#37; data.length;
      
      setTimeout(function(){loop();}, timePerSlide);
    }
    
    loop();
    
    })();
    </script>
    
    </body>

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Location
    London
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's really nice. thanks.

    just one question: is it better to have the headings in the html due to SEO?

    an ways the script does exctacly what im looking for, thak you very much for the help.

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put everything, divs, headings and images, in the html and then have JavaScript harvest them to build the data array. It can then hide all the divs and show them one by one. If the user doesn't have js they still see all the content. If they do have js then they get the divs one at a time. Accessible to all, including spiderbotcrawlerites

  5. #5
    SitePoint Member
    Join Date
    Jul 2008
    Location
    London
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    brilliant thank tou very much


Tags for this Thread

Bookmarks

Posting Permissions

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