Hi there I'm new to the forum having disovered it whilst trying to fix a problem with our website at work, I'm sorry to say that my first post is a cry for help. I'm not an experienced web coder but have been tasked with designing our company website. I've built it using moo.fx and prototype to have a Horizontally moving accordion using a couple of web tutorials. It displays fine in Firefox, Chrome and Safari yet in Internet Explorer the accordion opens up erratically and doesn't behave the same when clicking each tab. I currently don't have the site uploaded to the web so hopefully someone can point me in the right direction from the code. Hopefully this is everything, the page also uses thickbox.js and jquery-1.3.2.js, The $ shortcut is actually p $ in all the code below to avoid it clashing with thickbox and jquery which also used $ shortcut. Thanks in advance for any help you guys can give me, even if it involves redoing the accordion effect with mootools rather than moofx.
Site HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <title>Welcome To The Giant Website</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> @import "Java/thickbox.css"; </style> <style type="text/css"> body{ text-align:center; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; background-color:#000; background-image:url(Images/Background.png); color: #FFF; font-size: 14px; overflow:hidden; font-family: helvetica; background-repeat: no-repeat; background-position: center top; } #header { height: 263px; width: 955px; } #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } p{ margin: 0; padding: 5px; line-height: 1.5em; } #wrapper{ width: 955px; margin: 0 auto; } .display{ float: left; width: 45px; margin: 0 0px 0 0; font-family: helvetica; font-size: 18px; } .HeadingText{ font-family: Tahoma, Geneva, sans-serif; font-size: 18px; text-shadow:#000 0px 0px 5px; margin-top: 10; margin-right: 0px; margin-bottom: 0; margin-left: 0; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 5px; } .ParagraphText{ font-family: Tahoma, Geneva, sans-serif; font-size: 12px; text-shadow:#000 0px 0px 5px; margin-top: 0; margin-right: 0px; margin-bottom: 0; margin-left: 0; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 0px; } #content { width:955px; overflow:hidden; margin: 0px; } .stretcher{ float: left; width: 730px; overflow:hidden; margin: 0px; } #footer { padding: 0; margin: 0px; bottom: 0px; height: 47px; width: inherit; position: fixed; } #footer p { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 0px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } a:link { color: #DA1983; } a:visited { color: #DA1983; } a:hover { color: #DA1983; } a:active { color: #DA1983; } </style> <script type="text/javascript" src="Java/jquery-1.3.2.js"></script> <script type="text/javascript" src="Java/thickbox.js"></script> <script type="text/javascript" src="Java/prototype.lite.js"></script> <script type="text/javascript" src="Java/moo.fx.js"></script> <script type="text/javascript" src="Java/moo.fx.pack.js"></script> <script type="text/javascript"> function init(){ var stretchers = document.getElementsByClassName('stretcher'); var toggles = document.getElementsByClassName('display'); var myAccordion = new fx.Accordion( toggles, stretchers, {opacity: true, height: true, width: true, duration: 500, transition: fx.sineInOut}); //hash functions var found = false; toggles.each(function(h3, i){ var div = Element.find(h3, 'nextSibling'); if (window.location.href.indexOf(h3.title) > 0) { myAccordion.showThisHideOpen(div); found = true; } }); if (!found) myAccordion.showThisHideOpen(stretchers[0]); } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+ +].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+ +) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onload="MM_preloadImages('RecentWork/ EpadThumbRoll.png','RecentWork/4MusicThumbRoll.png','RecentWork/ BritishConnectionThumbRoll.png','RecentWork/ CastrolPenaltyThumbRoll.png','RecentWork/ Film4WeekendsThumbRoll.png','RecentWork/ HereComeTheGirlsThumbRoll.png','RecentWork/ KitchenPharmacyThumbRoll.png','RecentWork/ MTVSummerThumbRoll.png','RecentWork/OxfamThumbRoll.png','RecentWork/ SonyAXNThumbRoll.png','RecentWork/TotalThumbRoll.png','RecentWork/ GeniusOfBritainThumbRoll.png')"> <div id="header">FTP SITE GOES HERE</div> <div id="wrapper"> <div id="content"> <table width="955" border="0" cellspacing="0" cellpadding="0"> <tr> <td></table> <h3 class="display" title="one"><img src="Images/Tab1Front.png" alt="Home" width="45" height="510" /></h3> <div class="stretcher"> <table width="730" border="0" cellspacing="0" cellpadding="0" summary="Table To Fit TabShadow On Left Hand Side"> <tr> <td width="25" align="left" valign="top"><img src="Images/ Tab1Side.png" width="25" height="510" alt="TabShadow" /></td> <td align="left" valign="top"><table width="705" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="705" height="25"><img src="Images/Tab1Top.png" alt="" width="705" height="25" /></td> </tr> <tr align="center"> <td width="705" height="485" valign="top"><table width="705" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top"><table width="705" border="0" cellpadding="0" cellspacing="0"> <tr align="center" valign="middle"> <td height="300" valign="top"><table width="406" border="0" cellpadding="0" cellspacing="0"> <tr valign="middle"> <td width="406" height="300" align="left" valign="top"><img src="Images/SpaceComp.png" alt="" width="400" height="300" border="0" usemap="#Map" /></td> </tr> </table></td> <td width="300" align="left" valign="top" class="HeadingText">Welcome To Giant Video Post Production<br /> <span class="ParagraphText">Giant is the Video arm of The Jungle Group (Jungle, Zoo and Marmalade) allowing you to do everything under one roof. <br /> At Giant we deliver the same level of excellence and expertise with picture as you would expect from Jungle, Zoo and Marmalade. Giant prides itself on delivering a highly creative and professional service at competitive rates. </span><br /> </p></td> </tr> </table></td> </tr> <tr> <td height="140" valign="bottom"><table width="705" border="0" align="center" cellpadding="0" cellspacing="0"> <tr align="center" valign="bottom"> <td width="10" height="10" align="right"><img src="Images/BoxTL.png" alt="" width="10" height="10" border="0" align="right" /></td> <td width="10" height="10"><img src="Images/ BoxTC.png" alt="" width="675" height="10" border="0" align="right" /></ td> <td width="10" height="10" align="left"><img src="Images/BoxTR.png" alt="" width="10" height="10" border="0" align="left" /></td> </tr> <tr> <td width="20" height="100" align="right" valign="middle"><img src="Images/BoxML.png" alt="" width="10" height="110" border="0" align="top" /></td> <td width="675" height="100" align="center" valign="middle"><table width="675" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="200" height="100" align="center" valign="middle"><a href="RecentWork/GeniusOfBritain.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/GeniusOfBritainThumb.png" alt="" width="160" height="90" border="0" /></a></td> <td width="191" height="100" align="center" valign="middle"><a href="RecentWork/GeniusOfBritain.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/GeniusOfBritainThumb.png" alt="" width="160" height="90" border="0" /></a></td> <td width="284" height="100" align="left" valign="middle" class="HeadingText">Latest Job<br /> <span class="ParagraphText">Lem recently completed the 'Genius Of Britain' spot with Brian Harrington at Channel 4</span></td> </tr> </table></td> <td width="20" height="10" align="left" valign="middle"><img src="Images/BoxMR.png" alt="" width="10" height="110" border="0" align="top" /></td> </tr> <tr> <td width="20" height="10" align="right" valign="top"><img src="Images/BoxBL.png" alt="" width="10" height="10" border="0" align="right" /></td> <td width="10" height="10" align="left" valign="top"><img src="Images/BoxBC.png" alt="" width="675" height="10" border="0" align="right" /></td> <td width="10" height="10" align="left" valign="top"><img src="Images/BoxBR.png" alt="" width="10" height="10" border="0" align="left" /></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> </div> <h3 class="display" title="two"><img src="Images/Tab2Front.png" alt="" width="45" height="510" /></h3> <div class="stretcher"> <table width="730" border="0" cellspacing="0" cellpadding="0" summary="KeepTabShadowLeft "> <tr> <td width="35" align="left" valign="top"><img src="Images/ Tab1Side.png" alt="" width="25" height="510" /></td> <td align="left" valign="top"><table width="705" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="Images/Tab1Top.png" alt="" width="705" height="25" /></td> </tr> <tr> <td align="center" valign="top"><table border="0" cellspacing="0" cellpadding="2"> <tr> <td align="center" valign="top"><p align="left"><span class="ParagraphText"><a href="RecentWork/Epad.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/EpadThumb.png" alt="Epad" width="160" height="90" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','RecentWork/EpadThumbRoll.png', 1)" onmouseout="MM_swapImgRestore()" /><br /> </a></span><span class="ParagraphText">Title: EPAD<br / > </span><span class="ParagraphText">Client: E4</span></ p></td> <td align="center" valign="top"><p align="left"><span class="ParagraphText"><a href="RecentWork/4Music.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/4MusicThumb.png" alt="4 Music" width="160" height="90" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','RecentWork/4MusicThumbRoll.png', 1)" onmouseout="MM_swapImgRestore()" /><br /> </a></span><span class="ParagraphText">Title: New Line Up<br /> </span><span class="ParagraphText">Client: 4 Music</ span></p></td> <td align="center" valign="top"><p align="left"><span class="ParagraphText"><a href="RecentWork/BritishConnection.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/BritishConnectionThumb.png" alt="British Connection" width="160" height="90" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','RecentWork/ BritishConnectionThumbRoll.png',1)" onmouseout="MM_swapImgRestore()" / ><br /> </a></span><span class="ParagraphText">Title: The British Connection</span><br /> <span class="ParagraphText">Client: Film 4</span></ p></td> <td align="center" valign="top"><p align="left"><span class="ParagraphText"><a href="RecentWork/CastrolPenalty.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/CastrolPenaltyThumb.png" alt="Castrol" width="160" height="90" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','RecentWork/ CastrolPenaltyThumbRoll.png',1)" onmouseout="MM_swapImgRestore()" / ><br /> </a></span><span class="ParagraphText">Title: Penalty</ span><br /> <span class="ParagraphText">Client: Bearkatt</span></ p></td> </tr> <tr valign="top"> <td align="center"><p align="left"><span class="ParagraphText"><a href="RecentWork/Film4Weekends.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/Film4WeekendsThumb.png" alt="Weekends At 1pm" width="160" height="90" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','RecentWork/ Film4WeekendsThumbRoll.png',1)" onmouseout="MM_swapImgRestore()" / ><br /> </a></span><span class="ParagraphText">Title: Weekends At 1pm<br /> </span><span class="ParagraphText">Client: Gary Headland</span></p></td> <td align="center"><p align="left"><span class="ParagraphText"><a href="RecentWork/HereComeTheGirls.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/HereComeTheGirlsThumb.png" alt="Here Come The Girls" width="160" height="90" border="0" id="Image6" onmouseover="MM_swapImage('Image6','','RecentWork/ HereComeTheGirlsThumbRoll.png',1)" onmouseout="MM_swapImgRestore()" / ><br /> </a></span><span class="ParagraphText">Title: Here Come The Girls<br /> </span><span class="ParagraphText">Client: Nickelodeon</span></p></td> <td align="center"><p align="left"><span class="ParagraphText"><a href="RecentWork/KitchenPharmacy.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/KitchenPharmacyThumb.png" alt="Kitchen Pharmacy" width="160" height="90" border="0" id="Image7" onmouseover="MM_swapImage('Image7','','RecentWork/ KitchenPharmacyThumbRoll.png',1)" onmouseout="MM_swapImgRestore()" / ><br /> </a></span><span class="ParagraphText">Title: Kitchen Pharmacy<br /> </span><span class="ParagraphText">Client: Bearkatt</ span></p></td> <td align="center"><p align="left"><span class="ParagraphText"><a href="RecentWork/MTVSummer.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/MTVSummerThumb.png" alt="MTV Summer" width="160" height="90" border="0" id="Image8" onmouseover="MM_swapImage('Image8','','RecentWork/ MTVSummerThumbRoll.png',1)" onmouseout="MM_swapImgRestore()" /><br /> </a></span><span class="ParagraphText">Title: MTV Summer<br /> </span><span class="ParagraphText">Client: MTV UK</ span></p></td> </tr> <tr valign="top"> <td align="center"><p align="left"><span class="ParagraphText"><a href="RecentWork/Oxfam.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/OxfamThumb.png" alt="Oxfam" width="160" height="90" border="0" id="Image9" onmouseover="MM_swapImage('Image9','','RecentWork/OxfamThumbRoll.png', 1)" onmouseout="MM_swapImgRestore()" /><br /> </a></span><span class="ParagraphText">Title: Oxfam<br / > </span><span class="ParagraphText">Client: RKCR/ Y&R</span></p></td> <td align="center"><p align="left"><span class="ParagraphText"><a href="RecentWork/SonyAXN.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/SonyAXNThumb.png" alt="Sony AXN" width="160" height="90" border="0" id="Image10" onmouseover="MM_swapImage('Image10','','RecentWork/ SonyAXNThumbRoll.png',1)" onmouseout="MM_swapImgRestore()" /><br /> </a></span><span class="ParagraphText">Title: Sony AXN The Chase<br /> </span><span class="ParagraphText">Client: Lambie Productions</span></p></td> <td align="center"><p align="left"><span class="ParagraphText"><a href="RecentWork/Total.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/TotalThumb.png" alt="Total FAGE Yogurt" width="160" height="90" border="0" id="Image11" onmouseover="MM_swapImage('Image11','','RecentWork/TotalThumbRoll.png', 1)" onmouseout="MM_swapImgRestore()" /><br /> </a></span><span class="ParagraphText">Title: Total/ FAGE<br /> </span><span class="ParagraphText">Client: Lambie Productions</span></p></td> <td align="center"><p align="left"><span class="ParagraphText"><a href="RecentWork/GeniusOfBritain.html? TB_iframe=true&height=500&width=650" class="thickbox"><img src="RecentWork/GeniusOfBritainThumb.png" alt="Genius Of Britain" width="160" height="90" border="0" id="Image12" onmouseover="MM_swapImage('Image12','','RecentWork/ GeniusOfBritainThumbRoll.png',1)" onmouseout="MM_swapImgRestore()" / ><br /> </a></span><span class="ParagraphText">Title: Genius Of Britain<br /> </span><span class="ParagraphText">Client: Channel 4</ span></p></td> </tr> </table></td> </tr> </table></td> </tr> </table> </div> <h3 class="display" title="three"><img src="Images/Tab3Front.png" alt="" width="45" height="510" /></h3> <div class="stretcher"> <table width="730" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="35"><img src="Images/Tab1Side.png" alt="" width="25" height="510" /></td> <td align="left" valign="top"><table width="705" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="Images/Tab1Top.png" alt="" width="705" height="25" /></td> </tr> <tr> <td width="705" height="485" align="center" valign="top"><table width="705" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="20" align="right" valign="bottom"><img src="Images/BoxTL.png" alt="" width="10" height="10" align="right" /></ td> <td width="650" height="20" valign="bottom"><img src="Images/BoxTC.png" alt="" width="650" height="10" align="right" / ></td> <td height="20" align="left" valign="bottom"><img src="Images/BoxTR.png" alt="" width="10" height="10" align="left" /></ td> </tr> <tr> <td height="380" align="right" valign="middle"><img src="Images/BoxML.png" alt="" width="10" height="380" align="top" /></ td> <td width="650" height="376" align="left" valign="middle"> </td> <td height="380" align="left" valign="middle"><img src="Images/BoxMR.png" alt="" width="10" height="380" align="top" /></ td> </tr> <tr> <td height="20" align="right" valign="top"><img src="Images/BoxBL.png" alt="" width="10" height="10" align="right" /></ td> <td width="650" height="20" valign="top"><img src="Images/BoxBC.png" alt="" width="650" height="10" align="left" /></ td> <td height="20" align="left" valign="top"><img src="Images/BoxBR.png" alt="" width="10" height="10" align="left" /></ td> </tr> </table></td> </tr> </table></td> </tr> </table> </div> <h3 class="display" title="four"><img src="Images/Tab4Front.png" alt="" width="45" height="510" /></h3> <div class="stretcher"> <table width="730" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="35"><img src="Images/Tab1Side.png" alt="" width="25" height="510" /></td> <td align="left" valign="top"><table width="705" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="Images/Tab1Top.png" alt="" width="705" height="25" /></td> </tr> <tr> <td align="center" valign="top"><p class="ParagraphText"> </p></td> </tr> </table></td> </tr> </table> </div> <h3 class="display" title="five"><img src="Images/Tab5Front.png" alt="" width="45" height="510" /></h3> <div class="stretcher"> <table width="730" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="35"><img src="Images/Tab1Side.png" alt="" width="25" height="510" /></td> <td align="left" valign="top"><table width="705" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="Images/Tab1Top.png" alt="" width="705" height="25" /></td> </tr> <tr> <td align="left" valign="top"><p class="ParagraphText"><strong>Giant</strong>, 143 Wardour Street. W1F 8WA<br /> t. 020 7534 5900 / f. 020 7534 5884 </p> <p class="ParagraphText">> <a href="http:// maps.google.co.uk/maps? f=q&hl=en&geocode=&time=&date=&ttype=&q=143+Wardour +Street+London+W1F +8WA&sll=54.162434,-3.647461&sspn=9.116965,20.566406&ie=UTF8&z=16&iwloc=cent&om=1">Google maps</a></p> <p class="ParagraphText">Bookings: <a href="mailto:[email protected]";>[email protected]</a></p> <p>Transfer: <a href="mailto:[email protected]";>[email protected]</a></p> <p>For rates please contact Laura Ricketts on the above number or email her at <a href="mailto:[email protected]";>[email protected]</a></p></ td> </tr> </table></td> </tr> </table></td> </tr> </div> </div> </div> <div id="footer"> <img src="Images/JungleGroupBottom.png" alt="Jungle Group Logo" width="955" height="47" border="0" align="bottom" /> <!-- end #footer --> </div> <map name="Map" id="Map"> <area shape="poly" coords="10,11,126,11,127,69,88,69,88,128,10,128" href="Space/GiantSpace1.html? TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSpace1" /> <area shape="poly" coords="171,2,171,69,201,69,208,78,219,78,219,59,248,59,248,2" href="Space/GiantSpace1.html? TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSpace2" /> <area shape="poly" coords="281,11,281,59,301,59,329,88,358,88,358,11" href="Space/ GiantSpace1.html?TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSPace3" /> <area shape="poly" coords="91,71,91,178,198,178,198,71" href="Space/ GiantSpace1.html?TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSpace4" /> <area shape="poly" coords="221,61,221,138,249,138,249,119,298,119,298,61" href="Space/ GiantSpace5.html?TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSpace5" /> <area shape="poly" coords="78,151,78,228,1,228,1,151" href="Space/ GiantSpace6.html?TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSpace6" /> <area shape="poly" coords="101,201,101,268,168,268,168,201" href="Space/GiantSpace7.html? TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSpace7" /> <area shape="rect" coords="181,191,239,249" href="Space/ GiantSpace8.html?TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSpace8" /> <area shape="rect" coords="251,121,369,239" href="Space/ GiantSpace9.html?TB_iframe=true&height=450&width=650" class="thickbox" alt="GiantSpace9" /> </map> <script type="text/javascript"> Element.cleanWhitespace('content'); init(); </script> </body> </html> Here is the prototype code /* Prototype JavaScript framework * (c) 2005 Sam Stephenson <[email protected]> * Prototype is freely distributable under the terms of an MIT-style license. * For details, see the Prototype web site: http://prototype.conio.net/ / *-------------------------------------------------------------------------- */ //note: modified & stripped down version of prototype, to be used with moo.fx by mad4milk (http://moofx.mad4milk.net). var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (property in source) destination[property] = source[property]; return destination; } Function.prototype.bind = function(object) { var __method = this; return function() { return __method.apply(object, arguments); } } Function.prototype.bindAsEventListener = function(object) { var __method = this; return function(event) { __method.call(object, event || window.event); } } function p$() { if (arguments.length == 1) return getp$(arguments[0]); var elements = []; p$c(arguments).each(function(el){ elements.push(getp$(el)); }); return elements; function getp$(el){ if (typeof el == 'string') el = document.getElementById(el); return el; } } if (!window.Element) var Element = new Object(); Object.extend(Element, { remove: function(element) { element = p$(element); element.parentNode.removeChild(element); }, hasClassName: function(element, className) { element = p$(element); if (!element) return; var hasClass = false; element.className.split(' ').each(function(cn){ if (cn == className) hasClass = true; }); return hasClass; }, addClassName: function(element, className) { element = p$(element); Element.removeClassName(element, className); element.className += ' ' + className; }, removeClassName: function(element, className) { element = p$(element); if (!element) return; var newClassName = ''; element.className.split(' ').each(function(cn, i){ if (cn != className){ if (i > 0) newClassName += ' '; newClassName += cn; } }); element.className = newClassName; }, cleanWhitespace: function(element) { element = p$(element); p$c(element.childNodes).each(function(node){ if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) Element.remove(node); }); }, find: function(element, what) { element = p$(element)[what]; while (element.nodeType != 1) element = element[what]; return element; } }); var Position = { cumulativeOffset: function(element) { var valueT = 0, valueL = 0; do { valueT += element.offsetTop || 0; valueL += element.offsetLeft || 0; element = element.offsetParent; } while (element); return [valueL, valueT]; } }; document.getElementsByClassName = function(className) { var children = document.getElementsByTagName('*') || document.all; var elements = []; p$c(children).each(function(child){ if (Element.hasClassName(child, className)) elements.push(child); }); return elements; } //useful array functions Array.prototype.each = function(func){ for(var i=0;ob=this[i];i++) func(ob, i); } function p$c(array){ var nArray = []; for (i=0;el=array[i];i++) nArray.push(el); return nArray; } Heres the moo.fx.js /* moo.fx, simple effects library built with prototype.js (http:// prototype.conio.net). by Valerio Proietti (http://mad4milk.net) MIT-style LICENSE. for more info (http://moofx.mad4milk.net). Friday, February 24, 2006 v 1.2.2 */ var fx = new Object(); //base fx.Base = function(){}; fx.Base.prototype = { setOptions: function(options) { this.options = { duration: 500, onComplete: '', transition: fx.sinoidal } Object.extend(this.options, options || {}); }, go: function() { this.startTime = (new Date).getTime(); this.timer = setInterval (this.step.bind(this), 13); }, step: function() { var time = (new Date).getTime(); if (time >= this.options.duration+this.startTime) { this.now = this.to; clearInterval (this.timer); this.timer = null; if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10); } else { var Tpos = (time - this.startTime) / (this.options.duration); this.now = this.options.transition(Tpos) * (this.to-this.from) + this.from; } this.increase(); }, custom: function(from, to) { if (this.timer != null) return; this.from = from; this.to = to; this.go(); }, hide: function() { this.now = 0; this.increase(); }, clearTimer: function() { clearInterval(this.timer); this.timer = null; } } //stretchers fx.Layout = Class.create(); fx.Layout.prototype = Object.extend(new fx.Base(), { initialize: function(el, options) { this.el = p$(el); this.el.style.overflow = "hidden"; this.el.iniWidth = this.el.offsetWidth; this.el.iniHeight = this.el.offsetHeight; this.setOptions(options); } }); fx.Height = Class.create(); Object.extend(Object.extend(fx.Height.prototype, fx.Layout.prototype), { increase: function() { this.el.style.height = this.now + "px"; }, toggle: function() { if (this.el.offsetHeight > 0) this.custom(this.el.offsetHeight, 0); else this.custom(0, this.el.scrollHeight); } }); fx.Width = Class.create(); Object.extend(Object.extend(fx.Width.prototype, fx.Layout.prototype), { increase: function() { this.el.style.width = this.now + "px"; }, toggle: function(){ if (this.el.offsetWidth > 0) this.custom(this.el.offsetWidth, 0); else this.custom(0, this.el.iniWidth); } }); //fader fx.Opacity = Class.create(); fx.Opacity.prototype = Object.extend(new fx.Base(), { initialize: function(el, options) { this.el = p$(el); this.now = 1; this.increase(); this.setOptions(options); }, increase: function() { if (this.now == 1 && (/Firefox/.test(navigator.userAgent))) this.now = 0.9999; this.setOpacity(this.now); }, setOpacity: function(opacity) { if (opacity == 0) this.el.style.visibility = "hidden"; else this.el.style.visibility = "visible"; if (window.ActiveXObject) this.el.style.filter = "alpha(opacity=" + opacity*100 + ")"; this.el.style.opacity = opacity; }, toggle: function() { if (this.now > 0) this.custom(1, 0); else this.custom(0, 1); } }); //transitions fx.sinoidal = function(pos){ return ((-Math.cos(pos*Math.PI)/2) + 0.5); //this transition is from script.aculo.us } fx.linear = function(pos){ return pos; } fx.cubic = function(pos){ return Math.pow(pos, 3); } fx.circ = function(pos){ return Math.sqrt(pos); } And Finally Heres Moo.fx.pack.js /* moo.fx pack, effects extensions for moo.fx. by Valerio Proietti (http://mad4milk.net) MIT-style LICENSE for more info visit (http://moofx.mad4milk.net). Friday, February 24, 2006 v 1.2.2 */ //smooth scroll fx.Scroll = Class.create(); fx.Scroll.prototype = Object.extend(new fx.Base(), { initialize: function(options) { this.setOptions(options); }, scrollTo: function(el){ var dest = Position.cumulativeOffset(p$(el))[1]; var client = window.innerHeight || document.documentElement.clientHeight; var full = document.documentElement.scrollHeight; var top = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; if (dest+client > full) this.custom(top, dest - client + (full- dest)); else this.custom(top, dest); }, increase: function(){ window.scrollTo(0, this.now); } }); //text size modify, now works with pixels too. fx.Text = Class.create(); fx.Text.prototype = Object.extend(new fx.Base(), { initialize: function(el, options) { this.el = p$(el); this.setOptions(options); if (!this.options.unit) this.options.unit = "em"; }, increase: function() { this.el.style.fontSize = this.now + this.options.unit; } }); //composition effect: widht/height/opacity fx.Combo = Class.create(); fx.Combo.prototype = { setOptions: function(options) { this.options = { opacity: true, height: true, width: true } Object.extend(this.options, options || {}); }, initialize: function(el, options) { this.el = p$(el); this.setOptions(options); if (this.options.opacity) { this.el.o = new fx.Opacity(el, options); options.onComplete = null; } if (this.options.height) { this.el.h = new fx.Height(el, options); options.onComplete = null; } if (this.options.width) this.el.w = new fx.Width(el, options); }, toggle: function() { this.checkExec('toggle'); }, hide: function(){ this.checkExec('hide'); }, clearTimer: function(){ this.checkExec('clearTimer'); }, checkExec: function(func){ if (this.el.o) this.el.o[func](); if (this.el.h) this.el.h[func](); if (this.el.w) this.el.w[func](); }, //only if width+height resizeTo: function(hto, wto) { if (this.el.h && this.el.w) { this.el.h.custom(this.el.offsetHeight, this.el.offsetHeight + hto); this.el.w.custom(this.el.offsetWidth, this.el.offsetWidth + wto); } }, customSize: function(hto, wto) { if (this.el.h && this.el.w) { this.el.h.custom(this.el.offsetHeight, hto); this.el.w.custom(this.el.offsetWidth, wto); } } } fx.Accordion = Class.create(); fx.Accordion.prototype = { setOptions: function(options) { this.options = { delay: 0, opacity: false, height: true, width: true } Object.extend(this.options, options || {}); }, initialize: function(togglers, elements, options) { this.elements = elements; this.setOptions(options); var options = options || ''; elements.each(function(el, i){ options.onComplete = function(){ if (el.offsetHeight > 0) el.style.height = '1%'; } el.fx = new fx.Combo(el, options); el.fx.hide(); }); togglers.each(function(tog, i){ tog.onclick = function(){ this.showThisHideOpen(elements[i]); }.bind(this); }.bind(this)); }, showThisHideOpen: function(toShow){ if (toShow.offsetHeight == 0) setTimeout(function() {this.clearAndToggle(toShow);}.bind(this), this.options.delay); this.elements.each(function(el, i){ if (el.offsetHeight > 0 && el != toShow) this.clearAndToggle(el); }.bind(this)); }, clearAndToggle: function(el){ el.fx.clearTimer(); el.fx.toggle(); } } var Remember = new Object(); Remember = function(){}; Remember.prototype = { initialize: function(el, options){ this.el = p$(el); this.days = 365; this.options = options; this.effect(); var cookie = this.readCookie(); if (cookie) { this.fx.now = cookie; this.fx.increase(); } }, //cookie functions based on code by Peter-Paul Koch setCookie: function(value) { var date = new Date(); date.setTime(date.getTime()+(this.days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); document.cookie = this.el+this.el.id+this.prefix+"="+value+expires +"; path=/"; }, readCookie: function() { var nameEQ = this.el+this.el.id+this.prefix + "="; var ca = document.cookie.split(';'); for(var i=0;c=ca[i];i++) { while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return false; }, custom: function(from, to){ if (this.fx.now != to) { this.setCookie(to); this.fx.custom(from, to); } } } fx.RememberHeight = Class.create(); fx.RememberHeight.prototype = Object.extend(new Remember(), { effect: function(){ this.fx = new fx.Height(this.el, this.options); this.prefix = 'height'; }, toggle: function(){ if (this.el.offsetHeight == 0) this.setCookie(this.el.scrollHeight); else this.setCookie(0); this.fx.toggle(); }, resize: function(to){ this.setCookie(this.el.offsetHeight+to); this.fx.custom(this.el.offsetHeight,this.el.offsetHeight+to); }, hide: function(){ if (!this.readCookie()) { this.fx.hide(); } } }); fx.RememberText = Class.create(); fx.RememberText.prototype = Object.extend(new Remember(), { effect: function(){ this.fx = new fx.Text(this.el, this.options); this.prefix = 'text'; } }); //useful for-replacement Array.prototype.each = function(func){ for(var i=0;ob=this[i];i++) func(ob, i); } //Easing Equations (c) 2003 Robert Penner, all rights reserved. //This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html. //expo fx.expoIn = function(pos){ return Math.pow(2, 10 * (pos - 1)); } fx.expoOut = function(pos){ return (-Math.pow(2, -10 * pos) + 1); } //quad fx.quadIn = function(pos){ return Math.pow(pos, 2); } fx.quadOut = function(pos){ return -(pos)*(pos-2); } //circ fx.circOut = function(pos){ return Math.sqrt(1 - Math.pow(pos-1,2)); } fx.circIn = function(pos){ return -(Math.sqrt(1 - Math.pow(pos, 2)) - 1); } //back fx.backIn = function(pos){ return (pos)*pos*((2.7)*pos - 1.7); } fx.backOut = function(pos){ return ((pos-1)*(pos-1)*((2.7)*(pos-1) + 1.7) + 1); } //sine fx.sineOut = function(pos){ return Math.sin(pos * (Math.PI/2)); } fx.sineIn = function(pos){ return -Math.cos(pos * (Math.PI/2)) + 1; } fx.sineInOut = function(pos){ return -(Math.cos(Math.PI*pos) - 1)/2; }
