cmotion in an accordion [Archive] - Dynamic Drive Forums

widget

04-08-2009, 11:22 PM

think i posted this in the wrong area. i have a problem with the cmotion script. by dynamic drive. i am trying to add it to an accordion menu. can someone help me please please

here are the files:

this is the index html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cannon Signage</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="slidemenu.js"></script>
<style type="text/css">

</style>

<link rel="stylesheet" type="text/css" href="gallerystyle.css" />





<script type="text/javascript" src="motiongallery.js">

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/

</script>
</head>

<body onload="slideMenu.build('sm',700,25,10,1)">
<div id="wrapper">
<div id="header">

<div id="topmenu">
<a href="#">HOME</a> //
<a href="#">ABOUT US</a> //
<a href="#">FIND US</a> //
<a href="#">CONTACT US</a> //
<a href="#">LINKS</a>
</div>
<a href="/"><img src="images/logo.gif" border="0" /></a>
</div>
<ul class="sm style1" id="sm">
<li style="background-color: #fff;">
<img src="images/1.gif" alt="" class="accordian_tab" />
<div class="accordian_content"></br>
<p class="style8">WELCOME TO</p>
<p class="style8">CANNON SIGNAGE CONCEPTS</p></br>
<br />
<p class="style2">Here at Cannon Signage Concepts, we’re not just a sign company. We stand out from the competition and we’ll make you stand out too.</p>
<span class="style2"><br />
</span>
<p class="style2">Our design services cover every aspect of your image-making requirements from sign and graphic design through to production and installation.</p>
<span class="style2"><br />
</span>
<p class="style2">Our services include design, corporate signage, fleet vehicle livery, one-off vehicle graphics, illuminated signage, outdoor durable large format printing, point of sale signage, window graphics, banners, exhibition displays and much, much more.</p>
<p class="style2">Our skilled, in-house sign makers and fabricators are capable of turning these imaginative design ideas into a reality.</p>
<span class="style2"><br />
</span>
<p class="style2">If you're looking for something more from your sign maker, whether you want us to work our magic from scratch, or simply require reproductions of existing jobs,
Call us now!</p>
</div>
</li>
<li style="background-color: #dcddde;"><img src="images/2.gif" alt="" class="accordian_tab" />
<div class="accordian_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dolor lorem, varius id, dapibus et, mattis at, risus. Integer eget dolor at nibh mollis bibendum. Aliquam erat volutpat. In consequat erat nec lacus. Praesent euismod, mauris non venenatis iaculis, est eros convallis diam, nec suscipit velit est eu augue. Sed pulvinar sollicitudin magna. Cras non massa in eros dictum laoreet. Integer porta. In consequat felis nec dui. Sed suscipit porta dui. Maecenas sollicitudin varius ipsum.</p>
<p>Suspendisse potenti. Vestibulum non enim vel turpis hendrerit congue. Fusce ante lacus, feugiat a, dignissim eget, rutrum vulputate, quam. Sed hendrerit vehicula mi. In fermentum massa ut sem. Donec id est. Phasellus consequat dictum nunc. Praesent leo turpis, mattis at, gravida id, fringilla vitae, diam. Donec diam mi, rutrum sed, blandit nec, fermentum nec, neque. Mauris nunc magna, pharetra ut, dictum non, hendrerit sit amet, nisi.</p>
<p>Cras nisl. Nam auctor nunc sed neque. Sed ut libero a turpis vehicula accumsan. Curabitur eros. Morbi id eros. Duis cursus enim sed purus. Integer iaculis nibh at nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et ligula a turpis tempus varius. Nulla pharetra justo sit amet nisi. Suspendisse ornare massa nec felis. </p>
</div>
</li>
<li style="background-color: #bcbdc0;"><img src="images/3.gif" alt="" class="accordian_tab" />
<div class="accordian_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dolor lorem, varius id, dapibus et, mattis at, risus. Integer eget dolor at nibh mollis bibendum. Aliquam erat volutpat. In consequat erat nec lacus. Praesent euismod, mauris non venenatis iaculis, est eros convallis diam, nec suscipit velit est eu augue. Sed pulvinar sollicitudin magna. Cras non massa in eros dictum laoreet. Integer porta. In consequat felis nec dui. Sed suscipit porta dui. Maecenas sollicitudin varius ipsum.</p>
<p>Suspendisse potenti. Vestibulum non enim vel turpis hendrerit congue. Fusce ante lacus, feugiat a, dignissim eget, rutrum vulputate, quam. Sed hendrerit vehicula mi. In fermentum massa ut sem. Donec id est. Phasellus consequat dictum nunc. Praesent leo turpis, mattis at, gravida id, fringilla vitae, diam. Donec diam mi, rutrum sed, blandit nec, fermentum nec, neque. Mauris nunc magna, pharetra ut, dictum non, hendrerit sit amet, nisi.</p>
<p>Cras nisl. Nam auctor nunc sed neque. Sed ut libero a turpis vehicula accumsan. Curabitur eros. Morbi id eros. Duis cursus enim sed purus. Integer iaculis nibh at nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et ligula a turpis tempus varius. Nulla pharetra justo sit amet nisi. Suspendisse ornare massa nec felis. </p>
</div>
</li>
<li style="background-color: #9d9fa2;"><img src="images/4.gif" alt="" class="accordian_tab" />
<div class="accordian_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dolor lorem, varius id, dapibus et, mattis at, risus. Integer eget dolor at nibh mollis bibendum. Aliquam erat volutpat. In consequat erat nec lacus. Praesent euismod, mauris non venenatis iaculis, est eros convallis diam, nec suscipit velit est eu augue. Sed pulvinar sollicitudin magna. Cras non massa in eros dictum laoreet. Integer porta. In consequat felis nec dui. Sed suscipit porta dui. Maecenas sollicitudin varius ipsum.</p>
<p>Suspendisse potenti. Vestibulum non enim vel turpis hendrerit congue. Fusce ante lacus, feugiat a, dignissim eget, rutrum vulputate, quam. Sed hendrerit vehicula mi. In fermentum massa ut sem. Donec id est. Phasellus consequat dictum nunc. Praesent leo turpis, mattis at, gravida id, fringilla vitae, diam. Donec diam mi, rutrum sed, blandit nec, fermentum nec, neque. Mauris nunc magna, pharetra ut, dictum non, hendrerit sit amet, nisi.</p>
<p>Cras nisl. Nam auctor nunc sed neque. Sed ut libero a turpis vehicula accumsan. Curabitur eros. Morbi id eros. Duis cursus enim sed purus. Integer iaculis nibh at nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et ligula a turpis tempus varius. Nulla pharetra justo sit amet nisi. Suspendisse ornare massa nec felis. </p>
</div>
</li>
<li style="background-color: #787878;"><img src="images/5.gif" alt="" class="accordian_tab" />
<div class="accordian_content">
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
<img src="images/1pic.jpg" border="1"></a>
<img src="images/2pic.jpg" border="1"></a>
<img src="images/3pic.jpg" border="1"></a>
<img src="images/4pic.jpg" border="1"></a>
<img src="images/5pic.jpg" border="1"></a>
<img src="images/6pic.jpg" border="1"></a>
<img src="images/7pic.jpg" border="1"></a>
<img src="images/8pic.jpg" border="1"></a>
<img src="images/9pic.jpg" border="1"></a>
<img src="images/10pic.jpg" border="1"></a>
<img src="images/11pic.jpg" border="1"></a>
<img src="images/12pic.jpg" border="1"></a>
<img src="images/13pic.jpg" border="1"></a>
<img src="images/14pic.jpg" border="1"></a>
<img src="images/15pic.jpg" border="1"></a></nobr>
</div>
</div>
</div>
</li>
<li style="background-color: #58585a;"><img src="images/6.gif" alt="" class="accordian_tab" />
<div class="accordian_content">
<img src="images/identitiesgallery.jpg" /></div>
</li>
</ul>
<div id="footer">
<img src="images/slogan.gif" /></div>
</div>
</body>
</html>

widget

04-08-2009, 11:23 PM

these are the accordion .js and .css

slidemenu.js

var slideMenu=function(){
var sp,st,t,m,sa,l,w,sw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName('li');
l=sa.length; w=m.offsetWidth; sw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}},
slide:function(s){
var cw=parseInt(s.style.width,'10');
if(cw<st){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
owt=owt+(ow-oi)}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer)}
}
};
}();

styles.css

* {margin:0; padding:0}
body {
background-color: Black;
background-image: url(images/splatter.gif);
background-repeat: no-repeat;

}

#wrapper {
width: 900px;
margin: auto;
}

#header {
height: 125px;
padding-top: 50px;
padding-left: 50px;
}

#topmenu {
float: right;
width: 400px;
font-size: 10pt;
color: Red;
margin-top: 50px;
}

#topmenu a {
color: Red;
text-decoration: none;
}

.sm {list-style:none; width:900px; height:378px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden;}

.accordian_tab {
float: right;
}

.accordian_content {
padding-left: 80px;
padding-top: 40px;
padding-right: 100px;
padding-bottom: 40px;
}

#footer img {
float: right;
margin-top: 20px;
}

dynamic drive motiongallery.js

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* This copyright notice must stay intact for legal use
* Modified for autowidth and optional starting positions in
* http://www.dynamicdrive.com/forums/showthread.php?t=11839 by jschuer1 8/5/06
***********************************************/

//1) Set width of the "neutral" area in the center of the gallery.
var restarea=6;
//2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=7;
//3) Set to maximum width for gallery - must be less than the actual length of the image train.
var maxwidth=1000;
//4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=0;
//5) Set message to show at end of gallery. Enter "" to disable message.
var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}

function positiondiv(){
var mainobjoffset=getposOffset(crossmain, "left"),
menuheight=parseInt(crossmain.offsetHeight),
mainobjoffsetH=getposOffset(crossmain, "top");
statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";
statusdiv.style.top=menuheight+mainobjoffsetH+"px";
}

function showhidediv(what){
if (endofgallerymsg!="") {
positiondiv();
statusdiv.style.visibility=what;
}
}

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function moveleft(){
if (loadedyes){
movestate="left";
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
lefttime=setTimeout("moveleft()",10);
}

function moveright(){
if (loadedyes){
movestate="right";
if (iedom&&parseInt(cross_scroll.style.left)<0){
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
righttime=setTimeout("moveright()",10);
}

function motionengine(e){
var mainobjoffset=getposOffset(crossmain, "left"),
dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
curposy=window.event? event.clientX : e.clientX? e.clientX: "";
curposy-=mainobjoffset-dsocx;
var leftbound=(menuwidth-restarea)/2;
var rightbound=(menuwidth+restarea)/2;
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(righttime);
if (movestate!="left") moveleft();
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(lefttime);
if (movestate!="right") moveright();
}
else
scrollspeed=0;
}

function contains_ns6(a, b) {
if (b!==null)
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if (!window.opera||(window.opera&&e.relatedTarget!==null))
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
clearTimeout(lefttime);
clearTimeout(righttime);
movestate="";
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}

crossmain.onmouseout=function(e){
stopmotion(e);
showhidediv("hidden");
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv();
positiondiv();
}
if (document.body.filters)
onresize()
}
window.onload=fillup;

onresize=function(){
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
}

dynamicdrive gallerystyle.css

//* Gallery Styles *//

#motioncontainer {
/*margin:0 auto; Uncomment this line if you wish to center the gallery on page */
width: 100%; /* Set to gallery width, in px or percentage */
height: 400px; /* Set to gallery height */
}

#motioncontainer a img {
border: 1px solid #cccccc; /* Set image border color */
}

#motioncontainer a:hover img {
border: 1px solid navy; /* Set image border hover color */
}

#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}
/* End Gallery Styles */