1) Any chance you can use just MooTools 1.2 ? (no need for prototype and moo.fx together) Moo.fx is a little old.
2) Using tools like jsfiddle.net where you can demonstrate the issue you're having gets you lots of help, posting your all of your page's code in an email doesn't usually get you any, unfortunately :( While we are totally happy to provide help, none of use really have the time to look at ALL of your code and find a problem. 3) You've got prototype, moofx and jquery all in one page? Why not ditch prototype and moo.fx and just use jquery? Or ... see item 1. On Jul 1, 2010, at 10:24 AM, JamieLovesDumbCats wrote: > 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; > }
