Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Question about Apple's iTunes countdown (and other things)

A

AreYouAMac

macrumors regular
Original poster
Jan 5, 2008
110
0
So I was wondering how is Apple able to make the countdown look "automatic" without using flash? I don't know if it is Javascript or not.

Also, when you go to Apple.com/mac ~ How do they make the scrollbar on top of the page displaying the different macs that they have when you scroll through it? Everything looks so smooth without the use of Flash.

I believe Apple intentionally do not use Flash because of there are a lot of errors on the mac platform and Apple will prefer HTML 5 (even though its not out yet)

Is it Javascript?

Thanks.
 
Looking at the source, it seems like they use CSS and Java.

droppedImage_5.jpg




Extract from http://www.apple.com/mac/

Code: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-US">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.apple.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.apple.com" r (n 0 s 0 v 0 l 0))' />
	<meta name="Author" content="Apple Inc." />
	<meta name="viewport" content="width=1024" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

	<title>Apple - Mac</title>
	<meta name="omni_page" content="Mac - Index" />
	<meta name="Category" content="products,macs" />
	<meta name="Description" content="Discover the world of Mac. Check out MacBook, iMac, iLife, and more. Download QuickTime, Safari, and widgets for free." />
	<script type="text/javascript">
		var gomez = {
			gs: new Date().getTime(),
			acctId:'C2C738',
			pgId:'Mac Tab Page',
			grpId:''
		};
	</script>
	<script src="http://images.apple.com/global/scripts/lib/prototype.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/global/scripts/lib/scriptaculous.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/global/scripts/browserdetect.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/global/scripts/apple_core.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/global/scripts/search_decorator.js" type="text/javascript" charset="utf-8"></script>

	<script src="http://images.apple.com/global/scripts/lib/event_mixins.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/global/scripts/ac_media.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/global/scripts/product_browser.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/global/scripts/swap_view.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/global/scripts/view_master_tracker.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/mac/home/scripts/quicktimegallery.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://images.apple.com/mac/home/scripts/promomanager.js" type="text/javascript"></script>
	<script type="text/javascript">
		 Event.observe(window, 'load', function() {
		 	if ($('productbrowser')) {
		 		$('productbrowser').style.overflow = 'hidden'; //Overflow auto fix for IE8
		 	}
		 	AC.ProductBrowser.init({
		 		categories: [
		 			{ id: 'pb-cat1', offset: 0 },
		 			{ id: 'pb-cat2', offset: 0.288 },
		 			{ id: 'pb-cat3', offset: 0.630 },
		 			{ id: 'pb-cat4', offset: 1.000 }
		 		],
		 		imageOverlap: 0,
		 		sliderCentering: 218,
		 		initialCategory: 1,
		 		arrowScrollAmount: 0.38,
		 		iPhoneCategories: [
		 			{ id: 'pb-cat1', offset: 0.0 },
		 			{ id: 'pb-cat2', offset: 0.28 },
		 			{ id: 'pb-cat3', offset: 0.56 },
		 			{ id: 'pb-cat4', offset: 1 }
		 		],
		 		iPhoneScrollAmount: 0.278,
		 		iPhoneContainerWidth: 804
		 	});
		 }, false);

		Event.onDOMReady(function() {
			// promo manager
			var promosets = [];
			var promos = $$('#content ul.promos')[0].select('a[id^="promo"]');
			for (var i=promos.length-1; i>=0; i--) {
				var indices = promos[i].id.match(/promo(\d)\-set(\d)/);
				var setI = parseInt(indices[2])-1;
				var promoI = parseInt(indices[1])-1;
				if (typeof(promosets[promoI]) == 'undefined') promosets[promoI] = [];
				 promosets[promoI][setI] = promos[i];
			}

			for (var i=promosets.length-1; i>=0; i--) {
				promoManager.setItems(promosets[i]);
				promoManager.setCookiePrefix('DCPromo_');

				var currentPromo = promoManager.currentItem();
				$(currentPromo).style.display = 'block';
			}

		});
	</script>
	<link rel="stylesheet" href="http://images.apple.com/global/styles/base.css" type="text/css" />
	<link rel="stylesheet" href="http://images.apple.com/global/styles/ac_media.css" type="text/css" />
	<link rel="stylesheet" href="http://images.apple.com/mac/home/styles/mac.css" type="text/css" />
	<link rel="stylesheet" href="http://images.apple.com/mac/home/styles/productbrowser.css" type="text/css" />
	<script type="text/javascript">
		document.write('<style type="text/css" media="screen">#promo1-set1, #promo2-set1, #promo3-set1, #promo4-set1, #promo1-set2, #promo2-set2, #promo3-set2, #promo4-set2 { display: none; } #pb-productbrowsercontainer { overflow: hidden; }<\/style>');
	</script>
</head>
<body>
	<script src="http://images.apple.com/global/nav/scripts/shortcuts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	var searchSection = 'mac';
	var searchCountry = 'us';
</script>
<div id="globalheader" class="mac">
	<!--googleoff: all-->
	<ul id="globalnav">
		<li id="gn-apple"><a href="/">Apple</a></li>
		<li id="gn-store"><a href="http://store.apple.com">Store</a></li>
		<li id="gn-mac"><a href="/mac/">Mac</a></li>
		<li id="gn-ipoditunes"><a href="/itunes/">iPod + iTunes</a></li>
		<li id="gn-iphone"><a href="/iphone/">iPhone</a></li>
		<li id="gn-downloads"><a href="/downloads/">Downloads</a></li>
		<li id="gn-support"><a href="/support/">Support</a></li>
	</ul>
	<!--googleon: all-->
	<div id="globalsearch">
		<form action="http://searchcgi.apple.com/cgi-bin/sp/nph-searchpre11.pl" method="post" class="search" id="g-search">
			<div>
				<input type="hidden" value="utf-8" name="oe" id="search-oe">
				<input type="hidden" value="p" name="access" id="search-access">
				<input type="hidden" value="us_only" name="site" id="search-site">
				<input type="hidden" value="lang_en" name="lr" id="search-lr">
				<label for="sp-searchtext"><span class="prettyplaceholder">Search</span><input type="search" name="q" id="sp-searchtext" class="g-prettysearch applesearch" accesskey="s"></label>
			</div>
		</form>
		<div id="sp-results"><div class="inside"></div></div>
	</div>
</div>

	<div id="top">
<!-- SiteCatalyst code version: H.8. Copyright 1997-2006 Omniture, Inc. -->
<script type="text/javascript">
/* RSID: */
var s_account="appleglobal,appleusmac"
</script>


<script type="text/javascript" src="http://images.apple.com/global/metrics/js/s_code_h.js"></script>

<script type="text/javascript">
s.pageName=AC.Tracking.pageName()+" (US)";
s.server=""
s.channel="www.us.mac"
s.pageType=""
s.prop1=""
s.prop2="www.us.mac.index"
s.prop3=""
s.prop4=document.URL;
s.prop5=""
s.prop18=""
s.prop19=""

/* E-commerce Variables */
s.campaign=""
s.state=""
s.zip=""
s.events=""
s.products=""
s.purchaseID=""
s.eVar1=""
s.eVar2=""
s.eVar3=""
s.eVar4=""
s.eVar5=""


/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=s.t();if(s_code)document.write(s_code)</script>
<!-- End SiteCatalyst code version: H.8. -->
</div>

	<div id="main">
		<div id="productbrowser">
	<div id="pb-productbrowsercontainer">
		<ul id="pb-productslider">
			<li class="pb-productimage" id="pb-airportexpress"><a href="/airportexpress/">AirPort Express</a></li>
			<li class="pb-productimage" id="pb-airportextreme"><a href="/airportextreme/">AirPort Extreme</a></li>
			<li class="pb-productimage" id="pb-timecapsule"><a href="/timecapsule/">Time Capsule</a></li>
			<li class="pb-productimage" id="pb-keyboards"><a href="/keyboard/">Keyboard</a></li>
			<li class="pb-productimage" id="pb-magicmouse"><a href="/magicmouse/">Magic Mouse</a></li>
			<li class="pb-productimage" id="pb-displays"><a href="/displays/">LED Cinema Display</a></li>
			<li class="pb-productimage" id="pb-macbook"><a href="/macbook/">MacBook</a></li>
			<li class="pb-productimage" id="pb-macbookpro"><a href="/macbookpro/">MacBook Pro</a></li>
			<li class="pb-productimage" id="pb-macbookair"><a href="/macbookair/">MacBook Air</a></li>
			<li class="pb-productimage" id="pb-imac"><a href="/imac/">iMac</a></li>
			<li class="pb-productimage" id="pb-macmini"><a href="/macmini/">Mac mini</a></li>
			<li class="pb-productimage" id="pb-macpro"><a href="/macpro/">Mac Pro</a></li>
			<li class="pb-productimage" id="pb-macosx"><a href="/macosx/">Mac OS X</a></li>
			<li class="pb-productimage" id="pb-ilife"><a href="/ilife/">iLife</a></li>
			<li class="pb-productimage" id="pb-iwork"><a href="/iwork/">iWork</a></li>
			<li class="pb-productimage" id="pb-mobileme"><a href="/mobileme/">MobileMe</a></li>
			<li class="pb-productimage" id="pb-safari"><a href="/safari/">Safari</a></li>
			<li class="pb-productimage" id="pb-quicktime"><a href="/quicktime/">QuickTime</a></li>
			<li class="pb-productimage" id="pb-aperture"><a href="/aperture/">Aperture</a></li>
			<li class="pb-productimage" id="pb-finalcut"><a href="/finalcutstudio/">Final Cut Studio</a></li>
			<li class="pb-productimage" id="pb-finalcutserver"><a href="/finalcutserver/">Final Cut Server</a></li>
			<li class="pb-productimage" id="pb-finalcutexpress"><a href="/finalcutexpress/">Final Cut Express</a></li>
			<li class="pb-productimage" id="pb-logicstudio"><a href="/logicstudio/">Logic Studio</a></li>
			<li class="pb-productimage" id="pb-logicexpress"><a href="/logicexpress/">Logic Express</a></li>
			<li class="pb-productimage" id="pb-ard"><a href="/remotedesktop/">Apple Remote Desktop</a></li>
			<li class="pb-productimage" id="pb-macosxserver"><a href="/server/macosx/">Mac OS X Server</a></li>
			<li class="pb-productimage" id="pb-xserve"><a href="/xserve/">Xserve</a></li>
			<li class="pb-productimage" id="pb-xsan"><a href="/xsan/">Xsan</a></li>
		</ul>
		<div id="pb-productslidertrack">
			<div id="pb-productsliderhandle"></div>
			<div id="pb-productsliderhandleimage"></div>
			<span id="pb-cat1">Accessories</span>
			<span id="pb-cat2">Macs</span>
			<span id="pb-cat3">Applications</span>
			<span id="pb-cat4">Servers</span>
		</div>
		<div id="pb-leftarrow"></div>
		<div id="pb-rightarrow"></div>
	</div>
</div><!--/productbrowser-->

		<div id="content">
			<div class="grid3cola upper">
				<div class="column first sidebar">
					<div class="box getamac">
	<div class="cap top"></div>
	<h2><a href="/getamac/">Get a Mac</a></h2>
	<ul>
		<li>
			<a href="/getamac/whichmac/">
				<img class="flush" src="http://images.apple.com/mac/home/images/getamac_love_20091020.jpg" width="182" height="77" alt="MacBooks" />
				<h3>Compare Mac models</h3>
			</a>
		</li>
		<li>
			<a href="/getamac/whymac/">
				<h3>Why you’ll love a Mac</h3>
				<p>It’s a computer unlike any other. Easy to use, powerful, compatible, and secure.</p>
			</a>
		</li>
		<li class="faq">
			<a href="/getamac/faq/">
				<h3>Mac FAQs</h3>
				<p>Get the answers you need to the most common questions about using a Mac.</p>
			</a>
		</li>
		<li class="ads">
			<a href="/getamac/ads/">
				<strong>Watch the new TV ads</strong>
				<img src="http://images.apple.com/mac/home/images/watch_the_ads_20091022.jpg" width="162" height="84" alt="Watch the ads" />
			</a>
		</li>
	</ul>
	<div class="cap bottom"></div>
</div><!--/getamac-->

				</div><!--/sidebar-->

				<div class="column grid3col">
	<ul class="promos">
		<li class="lead">
			<a href="/aperture/"><img src="http://images.apple.com/mac/home/images/promo_lead_aperture_20100209.jpg" width="600" height="304" alt="Aperture" /></a>
		</li>
		<li class="column first">
			<a id="promo1-set1" href="/macosx/"><img src="http://images.apple.com/mac/home/images/promo_snowleopard_20091110.jpg" width="196" height="120" alt="Mac OS X Snow Leopard. The world's most advanced OS." /></a>
			<a id="promo1-set2" href="/imac/"><img src="http://images.apple.com/mac/home/images/promo_imac_20100209.jpg" width="196" height="120" alt="The new iMac. The ultimate all-in-one. Now with the ultimate display." /></a>
		</li>
		<li class="column">
			<a id="promo2-set1" href="/macbook/"><img src="http://images.apple.com/mac/home/images/promo_macbook_20091020.jpg" width="196" height="120" alt="The new MacBook. Reengineered from cover to cover." /></a>
			<a id="promo2-set2" href="/macmini/"><img src="http://images.apple.com/mac/home/images/promo_macmini_20091020.jpg" width="196" height="120" alt="The new, mightier mini. Faster processor. Twice the memory." /></a>
		</li>
		<li class="column last">
			<a id="promo3-set1" href="/magicmouse/"><img src="http://images.apple.com/mac/home/images/promo_magicmouse_20091020.jpg" width="196" height="120" alt="Magic Mouse. The world's first Multi-Touch mouse." /></a>
			<a id="promo3-set2" href="/macbookpro/"><img src="http://images.apple.com/mac/home/images/promo_macbookpro_20100209.jpg" width="196" height="120" alt="Mac OS X Snow Leopard Now Shipping." /></a> 
		</li>
		
	</ul>
</div><!--/showcase-->


				<div class="column last sidebar">
					<div class="box macsinaction">
	<div class="cap top"></div>
	<h2>Macs in Action</h2>
	<a href="/education/"><img src="http://images.apple.com/mac/home/images/mac_education_20090828.jpg" width="161" height="83" alt="Macs in Action" /></a>
	<h3><a href="/education/">Education</a></h3>
	<p>See why more people are choosing the Mac for school. <a href="/education/" class="more">Learn more</a></p>
	<ul>
		<li><a href="/pro/">Creative Pro</a></li>
		<li><a href="/business/">Business</a></li>
		<li><a href="/science/">Science</a></li>
	</ul>
	<div class="cap bottom"></div>
</div>
<a href="/mobileme/"><img src="http://images.apple.com/mac/home/images/promo_mobileme_20091020.jpg" width="187" height="119" alt="Mobile Me. Push e-mail, push contacts, push calendar. Free 60-day trial. Learn more." /></a>

				</div><!--/sidebar-->
			</div><!--/grid3cola-->

			<div class="grid3col lower">
				<div class="box full">
	<div class="cap top"></div>
	<h2><a href="/findouthow/mac/">How to get more out of your Mac</a></h2>
	<div class="column first featuredtutorials">
		<ul class="qtvertnav">
			<li class="title"><p>Watch featured tutorials:</p></li>
			<li>
				<a class="qtlink" href="http://movies.apple.com/media/us/findouthow/macosx/2009/apple-findouthow-macosx-anatomy_of_a_mac-us-20091002_r560-10cie.mov?width=560&height=352">
					<strong>Anatomy of a Mac</strong>
					<span>3:18</span>
					<img src="http://images.apple.com/mac/home/images/vthumb_anatomyofmac20090914.jpg" width="80" height="52" alt="" />
				</a>
				<div class="qtcontent" id="anatomy">
					<a class="posterLink" href="http://images.apple.com/mac/home/images/qt_endframe_anatomy20090106.jpg"></a>
					<div class="endState">
						<img src="http://images.apple.com/mac/home/images/qt_endframe_anatomy20090106.jpg" alt="Anatomy of a Mac" width="560" height="352" />
						<ul>
							<li><a class="pillbutton replay" href="#replay"><span>Watch Again</span><b>></b></a></li>
							<li><a class="pillbutton" href="/findouthow/mac/"><span>View all Mac Basics tutorials</span><b>></b></a></li>
						</ul>
					</div>
				</div><!--/qtcontent-->
			</li>
			<li>
				<a class="qtlink" href="http://movies.apple.com/media/us/findouthow/macosx/2009/apple-findouthow-macosx-mail_basics-us-20090828_r560-10cie.mov?width=560&height=352">
					<strong>Mail Basics</strong>
					<span>3:04</span>
					<img src="http://images.apple.com/mac/home/images/vthumb_mailbasics20091208.jpg" width="80" height="52" alt="" />
				</a>
				<div class="qtcontent" id="mailbasic">
					<a class="posterLink" href="http://images.apple.com/mac/home/images/qt_endframe_mailbasics20091208.jpg"></a>
					<div class="endState">
						<img src="http://images.apple.com/mac/home/images/qt_endframe_mailbasics20091208.jpg" alt="Mail Basics" width="560" height="352" />
						<ul>
							<li><a class="pillbutton replay" href="#replay"><span>Watch Again</span><b>></b></a></li>
							<li><a class="pillbutton" href="/findouthow/mac/"><span>View all Mac Basics tutorials</span><b>></b></a></li>
						</ul>
					</div>
				</div><!--/qtcontent-->
			</li>
			<li>
				<a class="qtlink" href="http://movies.apple.com/media/us/findouthow/macosx/2009/apple-findouthow-macosx-pc_to_mac_basics-us-20090828_r560-10cie.mov?width=560&height=352">
					<strong>PC to Mac:<br>The Basics</strong> 
					<span>5:40</span>
					<img src="http://images.apple.com/mac/home/images/vthumb_pctomac20090608.jpg" width="80" height="52" alt="" />
				</a>
				<div class="qtcontent" id="switcher">
					<a class="posterLink" href="http://images.apple.com/mac/home/images/qt_endframe_switcher20090106.jpg"></a>
					<div class="endState">
						<img src="http://images.apple.com/mac/home/images/qt_endframe_switcher20090106.jpg" alt="PC to Mac: The Basics" width="560" height="352" />
						<ul>
							<li><a class="pillbutton replay" href="#replay"><span>Watch Again</span><b>></b></a></li>
							<li><a class="pillbutton" href="/findouthow/mac/"><span>View all Mac Basics tutorials</span><b>></b></a></li>
						</ul>
					</div>
				</div><!--/qtcontent-->
			</li>
			<li>



....
 
People have been asking this since at least 2003. And also in 2004. Back then they were using Quicktime though. A couple years (or so) they switched to a giant 31x3600 image file that they simply adjust the CSS on to show the countdown. It's essentially a filmstrip effect. Then JavaScript adjusts the CSS for progress the filmstrip. It kind of takes away the majic once you figured it out.
 
Hmm, like angelwatt said...it is a "image" frame strip effect.

On the right side column, where you see "background": That is the window on the right side of the screen where you see the numbers.

Screenshot2010-02-16at90812PM.png
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back