من این کد اکوردین را میخواهم چندین بار در یک صفحه بکار ببرم ولی نمی شود و نمیدانم چگونه باید اصلاحش کنم که بشود(یا تبدیل به class اش کنم):
کد یا فایل slidemenu.js:
فایل css.css
و کد در صفحه :
کد یا فایل slidemenu.js:
کد:
var slideMenu=function(){
var sp,st,t,m,sa,l,w,gw,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; gw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=gw+'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.htimer);clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}
s.onmouseout=function(){clearInterval(m.timer);clearInterval(m.htimer);m.htimer=setInterval(function(){slideMenu.slide(s,true)},t)}
},
slide:function(s,c){
var cw=parseInt(s.style.width);
if((cw<st && !c) || (cw>gw && c)){
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);
if(ow<gw && c){oi=Math.floor((gw-ow)/sp); oi=(oi>0)?oi:1; o.style.width=(ow+oi)+'px';
}else if(ow>ot && !c){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
if(c){owt=owt+(ow+oi)}else{owt=owt+(ow-oi)}}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer);clearInterval(m.htimer)}
}
};
}();فایل css.css
کد:
* html div#fixme {position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop : document.body.scrollTop);}
.ha {list-style:none; width:360px; height:150px; display:block; overflow:hidden;}
.ha li {float:left; display:inline; overflow:hidden;}
.ha li img {padding:0; margin-right:5px;}
.ha li.left {background:#c0c000; }
.ha li.middle {background:#d3d2d0; }
.ha li.right {background:#ff0000; }
.ha p.left {
font:normal 11px verdana; color:#202000;
line-height: 14px; background:#c0c000;
margin:0 10px 0 0; width:350px;
height:88px; display:block;
}
.ha p.middle {
font:normal 11px verdana; color:#333;
line-height: 14px; background:#d3d2d0;
margin:0 10px 0 0; width:350px;
height:88px; display:block;
}
.ha p.right {
font:normal 11px verdana; color:#fff;
line-height: 14px; background:#ff0000;
margin:0 10px 0 0; width:350px;
height:88px; display:block;
}
.ha a.right {
color: #fff;
text-decoration: underline;
}
.ha a.right:hover {
color: #fff;
text-decoration: none;
}و کد در صفحه :
کد:
<html><head>
<title>Horizontal Accordion With MooTools</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="slidemenu.js"></script>
<script type="text/javascript" src="http://mootools.net/download/get/mootools-core-1.3.2-full-compat-yc.js"></script>
</head>
<body onload="slideMenu.build('ha',360,10,10)">
<ul id="ha" class="ha">
<li>
<img align=left src="twitter-logo.png" title="" />
<p class=left>
<b><u>Twitter</u></b><br /><br />
Among the most popular social media tools, Twitter has recently broken into top-50 most visited sites in the US.
</p>
</li>
<li>
<img align=left src="facebook-logo.png" title="" />
<p class=middle>
<b><u>Facebook</u></b><br /><br />Facebook is the third most popular web destination in India, coming after Orkut and YouTube.
</p>
</li>
<li>
<img align=left src="2wv-logo.png" title="" />
<p class=right>
<b><u>2WebVideo</u></b><br /><br />2WebVideo video making course is highly popular.<br /><br />Click <a class=right href="http://www.2webvideo.com">here</a> to check out now.
</p>
</li>
</ul>
</body>
</html>
آخرین ویرایش:
