By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,397 Members | 2,552 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,397 IT Pros & Developers. It's quick & easy.

iTunes Music Store "New Releases" Javascript

P: n/a
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 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
ms******@gmail.com 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
Feb 24 '06 #2

P: n/a
Thanks!

Feb 24 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.