The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Problem] JavaScript

View previous topic View next topic Go down

[Problem] JavaScript

Post by yuufa10182006 on August 2nd 2011, 3:43 am

Guys, I dunno if I did something wrong about to the new feature of forumotion. The 'Hosting your own JScript'. I already followed the instructions on how to add the new feature in my site. But dunno why I'm having a problem calling the JavaScript Code.

This is the code: (Whole Code)
Code:

<!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" xml:lang="en" lang="en">

   <head>

      <title></title>

      <style type="text/css">

      #tst {
         position:relative;left:100px;top:100px;width:800px;height:360px;border:solid red 1px;
      }

      .frames {
         position:absolute;left:0px;top:0px;width:600px;height:360px;
      }

      .frame {
         width:600px;height:360px;
      }

      .tabs {
         position:relative;z-Index:4;left:598px;top:0px;width:200px;
      }

      .tab {
         position:relative;left:0px;top:0px;width:200px;height:82px;background-color:#FFFFCC;border:solid red 1px;margin-Top:5px;
      }

      .tabactive {
         left:-5px;background-Color:#FFCC66;
      }

      </style>

      <script language="JavaScript" src="http://anime-tion.forumotion.com/10297.js" type="text/javascript">


      </script>

   </head>

   <body>

   <div id="tst" >

      <div class="frames" >

         <div class="frame" >
            <img src="http://i70.servimg.com/u/f70/14/50/13/09/aigoba11.jpg" />
         </div>

         <div class="frame" >
            <img src="http://i70.servimg.com/u/f70/14/50/13/09/u4r2a610.jpg" />
         </div>

         <div class="frame" >
            <img src="http://i70.servimg.com/u/f70/14/50/13/09/aigoba11.jpg" />
         </div>

         <div class="frame" >
            <img src="http://i70.servimg.com/u/f70/14/50/13/09/u4r2a610.jpg" />
         </div>

      </div>

      <div class="tabs" >

         <div class="tab" >
         </div>

         <div class="tab" >
         </div>

         <div class="tab" >
         </div>

         <div class="tab" >
         </div>

      </div>

   </div>

   <script type="text/javascript">

      function zxcTabSlideShow(o){
         var oop=this,obj=document.getElementById(o.ID),frames=this.bycls(o.FrameClassName,obj),fn=frames.length,cls=o.TabsClassName,tabs=this.bycls(cls,obj),z0=0,active=typeof(o.ActiveClassName)=='string'?o.ActiveClassName:'',auto=o.AutoRotateHold,atab=typeof(o.AnimateTabs)=='object'&&o.AnimateTabs.constructor==Array?o.AnimateTabs:false,lft,tmde,nu=typeof(o.StartPanel)=='number'&&o.StartPanel<fn?o.StartPanel:0,days=typeof(o.DaysPersistence)=='number'?o.DaysPersistence:false,m=typeof(o.Mode)=='string'?o.Mode.charAt(0).toUpperCase():'O',fmde=m=='O'?'opacity':m=='L'||m=='R'?'left':'top',mm=[0,m=='O'?100:frames[0]['offset'+(m=='L'||m=='R'?'Width':'Height')]*(m=='L'||m=='T'?1:-1),m=='O'?100:0];
            if (days&&this.cookie){
               this.nme=o.ID+'=';
               nu=this.cookie(this.nme)||nu;
            }
            if (m!='O'){
               frames[0].parentNode.style.overflow='hidden';
            }
         this.ary=[];
         for (var z0=0;z0<fn;z0++){
            frames[z0].style.position='absolute';
            frames[z0].style.top='0px';
            frames[z0].style.zIndex=z0!=nu?'0':'2';
            this.ary[z0]=[new zxcAnimate(fmde,frames[z0],z0!=nu?0:100),false,false];
               if (m=='O'){
                  zxcOpacity(frames[z0],z0!=nu?0:100);
               }
               else {
                  frames[z0].style[fmde]=(z0!=nu?-mm[1]:0)+'px';
                  this.ary[z0][0].data[0]=(z0!=nu?-mm[1]:0);
               }
            if (tabs[z0]){
               this.ary[z0][1]=[tabs[z0],cls,cls+' '+active];
                  if (atab&&typeof(atab[0])=='number'){
                     tmde=typeof(atab[2])=='string'&&atab[2].charAt(0).toLowerCase()=='t'?'top':'left';
                     lft=tabs[z0]['offset'+(tmde=='left'?'Left':'Top')];
                     this.ary[z0][2]=[atab?new zxcAnimate(tmde,tabs[z0],z0!=nu?lft:lft+atab):false,lft,lft+atab[0]];
                     tabs[z0].style[tmde]=lft+(z0!=nu?0:atab[0])+'px';
                  }
               tabs[z0].className=this.ary[z0][1][z0!=nu?1:2];
               this.addevt(tabs[z0],'mouseup','GoTo',z0);
            }
         }

         this.days=days;
         this.mde=fmde;
         this.lst=false;
         this.mm=mm;
         this.cnt=nu;
         this.to=null;
         this.ms=typeof(o.AnimationSpeed)=='number'?o.AnimationSpeed:1000;
            if (atab){
               this.sms=typeof(atab[1])=='number'?atab[1]:this.ms/4;
            }
            if (typeof(auto)=='number'){
               this.hold=auto+this.ms;
               this.addevt(obj,'mouseover','Pause');
               this.addevt(obj,'mouseout','Auto',true);
               this.to=setTimeout(function(){ oop.Auto(); },this.hold);
            }
      }

      zxcTabSlideShow.prototype={

         GoTo:function(nu){
            this.Pause();
            var ary=this.ary[this.cnt],z0=0;
               if (this.mde=='opacity'){
                  ary[0].animate(ary[0].data[0],0,this.ms,this.mm);
               }
               else if (this.lst){
                  this.lst[0].obj.style.zIndex='0';
                  this.lst[0].data[0]=-this.mm[1];
               }
            this.lst=ary
            ary[0].obj.style.zIndex='1';
               if (ary[1]){
                  ary[1][0].className=ary[1][1];
               }
               if (ary[2]){
                  ary[2][0].animate(ary[2][0].data[0],ary[2][1],this.sms);
               }
            this.cnt=nu;
            ary=this.ary[this.cnt];
            ary[0].animate(ary[0].data[0],this.mm[2],this.ms,this.mm);
            ary[0].obj.style.zIndex='2';
               if (ary[1]){
                  ary[1][0].className=ary[1][2];
               }
               if (ary[2]){
                  ary[2][0].animate(ary[2][0].data[0],ary[2][2],this.sms);
               }
               if (this.days&&this.cookie){
                  document·cookie=this.nme+nu+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
               }
      },

      Auto:function(srt){
         var oop=this;
         this.to=setTimeout(function(){ oop.auto(); },srt?this.hold:200);
      },

      Pause:function(){
         clearTimeout(this.to);
      },

      auto:function(){
         var oop=this;nu=this.cnt;
         nu=++nu%this.ary.length;
         this.GoTo(nu);
         this.to=setTimeout(function(){ oop.Auto(); },this.hold);
      },

      bycls:function(nme,el,tag){
         for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
            if(reg.test(els[z0].className)) ary.push(els[z0]);
         }
            return ary;
      },

      addevt:function(o,t,f,p){
         var oop=this;
         if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
         else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
      },

      cookie:function(nme){
         var re=new RegExp(nme+'[^;]+','i');
            if (document·cookie.match(re)){
               return document·cookie.match(re)[0].split("=")[1];
            }
         return null
      }

   }



   new zxcTabSlideShow({
      ID:'tst',                   
      FrameClassName:'frame',
      TabsClassName:'tab',
      Mode:'opacity',
      ActiveClassName:'tabactive',
      StartPanel:1,
      AnimationSpeed:1000,
      AnimateTabs:[-5,100,'left'],
      AutoRotateHold:2000,
      DaysPersistence:1
   });

   </script>

   </body>

</html>

My JavaScript Link: (Uploaded)
Code:

http://anime-tion.forumotion.com/10297.js

My JavaScript Code:
Code:

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.neg=srt<0||fin<0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime;
  this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
  this.apply();
  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
  if (this.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

I tried to put the whole JavaScript and it works, But when I use the Uploaded one.. It didn't work. >3<

Argh.. I really want to use the Uploaded JScript. To reduce some coding in my HTML Page.. >3<

Result: http://anime-tion.forumotion.com/h2-welcome-page-02

Hope someone can help~

Thanks in advance and more powers~

yuufa10182006
Forumember

Posts : 39
Reputation : 0
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum