SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict hitmanuk2k's Avatar
    Join Date
    Apr 2003
    Location
    Leeds, England
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    BBC "Carousel" type set up?

    Hi there,

    I have no idea about javascripts and whatnot to be honest, but I really need something similar to what the BBC have on their homepage. Look at www.bbc.co.uk and look at the top news stories on the left, you will see 3 headlines, and every few seconds it'll move on to the next story and change the image and background colour of the cell containing text.

    How do they achieve this?

    Follow me on Twitter, or find me on LinkedIn. Latest project: loanpayday.org.uk.

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Showing/hiding document elements on a timer.

    Code:
    //hide
    document.getElementById('story1').style.display='none';
    //show
    document.getElementById('story1').style.display='block';
    Look at the JavaScript behind slideshow scripts for how to do timers and rotating through an array.

  3. #3
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this isn;t a useful message, but that BBC website is well sweet!

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    quick and dirty example.

    Code xhtml:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function switch_slide(n) {
                    var slides = document.getElementById('slides').childNodes;
                    for(var i = 0; i < slides.length; i++) {
                        slides[i].style.display = (slides[i].id != 'slide_' + n) ? 'none' : '';
                    }
                }
            </script>
        </head>
        <body>
     
            <table width="600px;" cellpadding="0" cellspacing="0">
                <tr>
                    <td rowspan="4" id="slides">
                        <div id="slide_1">Slide 1</div>
                        <div id="slide_2" style="display: none;">Slide 2</div>
                        <div id="slide_3" style="display: none;">Slide 3</div>
                        <div id="slide_4" style="display: none;">Slide 4</div>
                    </td>
                    <td><a href="javascript:void(0);" onclick="switch_slide(1);">Title</a></td>
                </tr>
                <tr>
                    <td><a href="javascript:void(0);" onclick="switch_slide(2);">Title1</a></td>
                </tr>
                <tr>
                    <td><a href="javascript:void(0);" onclick="switch_slide(3);">Title2</a></td>
                </tr>
                <tr>
                    <td><a href="javascript:void(0);" onclick="switch_slide(4);">Title3</a></td>
                </tr>
            </table>
     
        </body>
    </html>


  5. #5
    SitePoint Addict hitmanuk2k's Avatar
    Join Date
    Apr 2003
    Location
    Leeds, England
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Roberts, doesn't seem to work in Firefox though?

    If anyone can help me direct drop me a PM as I urgently need to get this up and running but I'm really struggling to find a developer.
    Follow me on Twitter, or find me on LinkedIn. Latest project: loanpayday.org.uk.

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Grossman View Post
    Showing/hiding document elements on a timer.

    Code:
    //hide
    document.getElementById('story1').style.display='none';
    //show
    document.getElementById('story1').style.display='block';
    Look at the JavaScript behind slideshow scripts for how to do timers and rotating through an array.
    Not all elements' default display value is block. Common mistake when making this type of functionality.

  7. #7
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That sample code only works when clicking on the links. The BBC website works with rollovers.

  8. #8
    SitePoint Addict hitmanuk2k's Avatar
    Join Date
    Apr 2003
    Location
    Leeds, England
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just actually realised the BBC site's headlines don't "change down" every few seconds like I described, but that's the goal I have for my carousel.
    Follow me on Twitter, or find me on LinkedIn. Latest project: loanpayday.org.uk.

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hitman, I tried working on something yesterday but was unfortunately dragged to the Gateshead flower show.

    I'll try and sort something out tonight, although it won't be exact... You have to learn how to do things your self

    Gav



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
  •