iTunes Music Store "New Releases" Javascript

Discussion in 'Javascript' started by mstearne@gmail.com, Feb 24, 2006.

  1. Guest

    Has anyone seen any Javascript that mimics the effect that allows you
    to browse through the New Releases, Just Added sections of the iTunes
    Music Store? Where you click the arrow icon and the next 4 albums are
    shown.

    Example: http://imac2.taxrecords.com/mstearne/misc/Picture3.png

    Thanks,
    Michael
     
    , Feb 24, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > Has anyone seen any Javascript that mimics the effect that allows you
    > to browse through the New Releases, Just Added sections of the iTunes
    > Music Store? Where you click the arrow icon and the next 4 albums are
    > shown.
    >
    > Example: http://imac2.taxrecords.com/mstearne/misc/Picture3.png


    Here's a simple example I wrote some time ago - needs feature detection
    added. If you want to scroll more than one at a time, call it from a loop.

    It could be far more sophisticated, or use an array of images and fixed
    set of thumb frames - how many ways can you skin a cat. I like this one
    'cos it's simple.

    If scriptless fallback is required:

    - have #thumbBox height and width unset by default, set
    using script as page loads (modify the style rule is best)

    - hide the left/right buttons by default and show using script, it
    can be done at the same time the #thumbBox rule properties
    are modified.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Scrolling thumbs example</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1">

    <style type="text/css">
    #thumbBox {
    border: 3px solid #FF9900;
    width: 6em;
    height: 2em;
    overflow: hidden;
    position: relative;
    }
    .thumb {
    float: left;
    width: 2em;
    height: 2em;
    font-weight: bold;
    text-align: center;
    line-height: 2em;
    }
    .c0 {background-color: #f00;}
    .c1 {background-color: #00f;}
    .c2 {background-color: #0f0;}
    .c3 {background-color: #ff0;}
    .c4 {background-color: #0ff;}
    .c5 {background-color: #f0f;}
    .c6 {background-color: #f9f;}
    </style>

    </head>
    <body>

    <h1>Demonstration of scrolling thumbnails</h1>

    <script type="text/javascript">
    function move(id, way)
    {
    var box = document.getElementById(id);
    var thumbs = box.getElementsByTagName('div');
    if ('left' == way) {
    box.insertBefore(thumbs[thumbs.length-1],thumbs[0]);
    } else {
    box.appendChild(thumbs[0]);
    }
    }
    </script>

    <div>
    <input type="button" value="&lt;&lt;Left"
    onclick="move('thumbBox','left');">
    <input type="button" value="Right&gt;&gt;"
    onclick="move('thumbBox','right');">
    </div>

    <div id="thumbBox">
    <div class="thumb c0">1</div>
    <div class="thumb c1">2</div>
    <div class="thumb c2">3</div>
    <div class="thumb c3">4</div>
    <div class="thumb c4">5</div>
    <div class="thumb c5">6</div>
    <div class="thumb c6">7</div>
    </div>

    </body>
    </html>



    --
    Rob
     
    RobG, Feb 24, 2006
    #2
    1. Advertising

  3. Guest

    Thanks!
     
    , Feb 24, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    355
    John Salerno
    Oct 2, 2006
  2. Morlence
    Replies:
    0
    Views:
    1,272
    Morlence
    Nov 2, 2009
  3. Tom Copeland

    New releases on RubyForge

    Tom Copeland, Aug 9, 2007, in forum: Ruby
    Replies:
    0
    Views:
    99
    Tom Copeland
    Aug 9, 2007
  4. Urabe Shyouhei
    Replies:
    82
    Views:
    670
    Mike Berrow
    Jul 18, 2008
  5. Luis.Silva!

    MSmac Software NEW Releases

    Luis.Silva!, Jun 11, 2012, in forum: Java
    Replies:
    0
    Views:
    338
    Luis.Silva!
    Jun 11, 2012
Loading...

Share This Page