Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question can not taking position according to an element

    hi everyone,

    i have a design of a site: http://www.terranartworks.com/testsite/tsv1/index.html

    i'm trying to make:
    1- red point will slide and stop at the center position of every button,when i clicked at the button.
    2- grey point will slide and stop at the red points position when mouse is not at the buttons area


    i try to take an half of width of the link and assign red point to there but it will not working


    how can i do this?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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>
    	<link rel="stylesheet" type="text/css" href="http://www.terranartworks.com/testsite/tsv1/GeneralScripts.css"/>
        <link rel="stylesheet" type="text/css" href="http://www.terranartworks.com/testsite/tsv1/(applegallertslideshow)demo.css" />
        <link rel='stylesheet' href="http://www.terranartworks.com/testsite/tsv1/(magicline)style.css"/>
    </head>
    
    <body>
    	<div id="menu" style="position:relative;" >
       	   <ul id="example-two" class="group">
           	   <li class="menuItem" id="current_page_item_two" >
                	<a href="#"></a>
                </li>
                <li  id="bosluk">
                    	<img src="http://www.terranartworks.com/testsite/tsv1/imajlar/beyazDikdortgen197px.gif" alt="thumbnail" />
                </li>
            	<li class="menuItem">
                	<a >
                    	<img  src="http://www.terranartworks.com/testsite/tsv1/imajlar/1hakkimizda-icon.png" alt="thumbnail" class="thumbnail" />
                    </a>
                </li>
                <li  id="bosluk2">
                  	<img src="http://www.terranartworks.com/testsite/tsv1/imajlar/beyazDikdortgen150px.gif" alt="thumbnail"/>
                </li>
    
            	<li class="menuItem">
                	<a>
                    	<img  src="http://www.terranartworks.com/testsite/tsv1/imajlar/2isler-icon.png" alt="thumbnail" class="thumbnail" />
                    </a>
             	</li>
                <li  id="bosluk2">
                   	<img src="http://www.terranartworks.com/testsite/tsv1/imajlar/beyazDikdortgen150px.gif" alt="thumbnail"/>
              	</li>
            	<li class="menuItem">
                	<a >
                    	<img src="http://www.terranartworks.com/testsite/tsv1/imajlar/3iletisim-icon.png" alt="thumbnail" class="thumbnail"/>
                    </a>
             </li>
          </ul>
    <div id="red" style="position:absolute;left:-5px;top:-5px;width:4px;height:4px;background-Color:red;" ></div>
    <div id="grey" style="position:absolute;left:-5px;top:-5px;width:4px;height:4px;background-Color:grey;" ></div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcBullets={
    
     init:function(o){
      var id=o.ParentID,cls=o.ThumbNailClass,ms=o.Speed,p=document.getElementById(id),cobj=document.getElementById(o.ClickID),oobj=document.getElementById(o.MouseOutID);
      if (p&&cobj&&oobj){
       var imgs=p.getElementsByTagName('IMG'),ary,o={p:p},z0=0;
       for (;z0<imgs.length;z0++){
        if ((' '+imgs[z0].className+' ').match(' '+cls+' ')){
         ary=[imgs[z0],false];
         this.addevt(imgs[z0],'mouseup','click',o,ary);
         this.addevt(imgs[z0],'mouseout','out',o,ary);
         o.ary=ary;
        }
       }
       this['zxc'+id]=o;
       o.ms=typeof(ms)=='number'?ms:1000;
       o.i=Math.PI/(2*o.ms)
       o.cobj=[cobj,cobj.offsetWidth/2,cobj.offsetLeft];
       o.oobj=[oobj,oobj.offsetWidth/2,oobj.offsetLeft];
      }
     },
    
     click:function(o,a){
      o.ary[1]=false;
      a[1]=true;
      o.ary=a;
      this.animate(o,o.cobj,o.cobj[2],this.pos(a[0])[0]-this.pos(o.p)[0]+a[0].offsetWidth/2-o.cobj[1],new Date(),o.ms);
     },
    
      out:function(o,a){
      if (o.ary==a&&a[1]){
       this.animate(o,o.oobj,o.oobj[2],o.cobj[2]+o.cobj[1]-o.oobj[1],new Date(),o.ms);
      }
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[3]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)*Math.sin(o.i*ms)+f;
      if (isFinite(n)){
       a[2]=n;
       a[0].style.left=n+'px';
      }
      if (ms<mS){
       a[3]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[2]=t;
       a[0].style.left=t+'px';
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    
    }
    
    zxcBullets.init({
     ParentID:'menu',
     ThumbNailClass:'thumbnail',
     ClickID:'red',
     MouseOutID:'grey',
     Speed:1000
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •