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 3 of 3

Thread: slider function

  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    slider function

    I would like to change the variable of an object with a slider. For example, I have an object with variable zoom, how would I add a slider function to the script to change this variable? I am a little confused about event handling. Any help would be much appreciated.

    I am posting the code (which actually was done by one of this forum's members) in case it may make understanding/explanation simpler.

    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">
    /*<![CDATA[*/
    
    .tstparent {
      position:relative;overflow:hidden;left:50px;top:50px;width:800px;height:500px;border:solid red 1px;
    }
    
    #tst {
      position:relative;left:0px;top:0px;width:700px;height:500px;
    }
    
    .window {
      width:200px;height:150px;border:solid white 2px;
    }
    
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Zoom Image (28-August-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    function zxcZoomImage(o){
    	var img = document.getElementById(o.ID);
    	var obj = img.parentNode;
    	var window = document.createElement('DIV');
    	var zimg = document.createElement('IMG');
    	var src = o.ZoomSRC;
    	var zoom = o.Zoom;
    	zoom = typeof(zoom)=='number'?zoom:2;
    	var os=o.ZoomWindowOffset;
    
    	window.style.position = 'absolute';
    	window.style.overflow = 'hidden';
    	window.style.visibility = 'hidden';
    	window.style.zIndex= '2' ;
    	window.className = o.WindowClassName;
    	zimg.style.position = 'absolute';
    	zimg.style.width = img.width*zoom+'px';
    	zimg.style.height = img.height*zoom+'px';
    	zimg.src = typeof(src)=='string'?src:img.src;
    	window.appendChild(zimg);
    	obj.appendChild(window);
    	this.window = window;
    	this.zimg = zimg;
    	this.wh = [obj.offsetWidth,obj.offsetHeight];
    	this.zoom = zoom;
    	this.os = typeof(os)=='object'&& os.constructor==Array && typeof(os[0])=='number'&& typeof(os[1])=='number'?os:[-window.offsetWidth/2,-window.offsetHeight/2];
    	this.wos = [-(zoom-1)*window.offsetWidth/2,-(zoom-1)*window.offsetHeight/2];			// to center the zoom on the pointer
    	this.addevt(document,'mousemove','imgzoom',obj);
    }
    
    zxcZoomImage.prototype={
    
       imgzoom:function(e,obj){
    	var mse=this.mse(e);
    	var pos=this.pos(obj);
    	var x=mse[0]-pos[0];
    	var y=mse[1]-pos[1];
    	var wh=this.wh;
    	var os=this.os;
    	var wos=this.wos;
    	var window=this.window;
    	var zimg=this.zimg;
    	var zoom=this.zoom;
    	if (x>0&&x<wh[0]&&y>0&&y<wh[1]){
    	   x+=os[0];
       	   y+=os[1];
       	   window.style.left=x+'px';
    	   window.style.top=y+'px';
    	   zimg.style.left=-x*zoom+wos[0]+'px';
    	   zimg.style.top=-y*zoom+wos[1]+'px';
    	   window.style.visibility='visible';
    	}
      	else {
    	   window.style.visibility='hidden';
      	}
       },
    
       mse:function(e){
      	if (window.event){
    	   var docs=[document.body.scrollLeft,document.body.scrollTop];
    	   if (!document.body.scrollTop){
    	      docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       	   }
    	   return [e.clientX+docs[0],e.clientY+docs[1]];
      	}
      	return [e.pageX,e.pageY];
       },
    
       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){
      	var oop=this;
      	if (o.addEventListener) 
      	   o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      	else if 
      	   (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
       }
    
    }	// end of prototype declarations
    
    
    /*]]>*/
    </script>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
       new zxcZoomImage({
    	ID:'tst',                                                         // the unique ID name of the image to zoom.                           (string)
    	WindowClassName:'window',                                         // the class name of the zoom window DIV element.                     (string)
    	Zoom:4,                                                           //(optional) the zoom factor.  (number, default = 2)
    	ZoomSRC:'scia_no2_trop_2009.gif', 				  //(optional) the file path and name of the zoom image.  
    									  //... (string, default = the src of the image to zoom)
    	ZoomWindowOffset:[-100,-75]                                       //(optional) the zoom window x and y offsets from the mouse position. 
    									  //... (array, default = centered on the mouse position)
       });
    }
    
    if (window.addEventListener){
    	window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
    	window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
     <noscript>
      <!-- <meta http-equiv="refresh" content="0;url=index2.htm;" /> --> 
      <b>Your browser does not support JavaScript or it is disabled. <br>
      Please enable JavaScript to be able to zoom the map. </b>
     </noscript>
    
    
     <div class="tstparent" >
      <img id="tst" src="scia_no2_trop_2009.gif" alt="img" />
     </div>
    
    
    </body>
    
    
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 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>
    
    <style type="text/css">
    /*<![CDATA[*/
    
    .tstparent {
      position:relative;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
    }
    
    #tst {
      position:relative;left:0px;top:0px;width:400px;height:300px;
    }
    
    .window {
      width:100px;height:75px;border:solid red 1px;
    }
    
    .slider {
      position:relative;overflow:hidden;left:100px;top:110px;width:400px;height:30px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    #slide {
      position:absolute;overflow:hidden;left:0px;top:0px;width:40px;height:30px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Zoom Image (12-September-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    function zxcZoomImage(o){
     var img=document.getElementById(o.ID),obj=img.parentNode,window=document.createElement('DIV'),zimg=document.createElement('IMG'),src=o.ZoomSRC,zoom=o.Zoom,zoom=typeof(zoom)=='number'?zoom:2,os=o.ZoomWindowOffset,opac=o.Opacity,ms=o.OpacityDuration,slide=document.getElementById(o.SlideID),p,mz=o.MaxZoom;
     window.style.position='absolute';
     window.style.overflow='hidden';
     window.style.visibility='hidden';
     window.style.zIndex='2';
     window.className=o.WindowClassName;
     zimg.style.position='absolute';
     zimg.style.width=img.width*zoom+'px';
     zimg.style.height=img.height*zoom+'px';
     zimg.src=typeof(src)=='string'?src:img.src;
     window.appendChild(zimg);
     obj.appendChild(window);
     this.window=window;
     this.zimg=zimg;
     this.img=img;
     this.wh=[obj.offsetWidth,obj.offsetHeight];
     this.zoom=zoom;
     this.opac=typeof(opac)=='number'?opac:100;
     this.now=100;
     this.ms=typeof(ms)=='number'?ms:1000;
     this.wos=[-window.offsetWidth/2,-window.offsetHeight/2];
     this.os=typeof(os)=='object'&&os.constructor==Array&&typeof(os[0])=='number'&&typeof(os[1])=='number'?os:this.wos;
     this.addevt(document,'mousemove','imgzoom',img);
     var slide=document.getElementById(o.SlideID),p;
     if (slide&&typeof(mz)=='number'&&mz>zoom){
      p=slide.parentNode;
      this.slide=slide;
      this.slidemax=p.offsetWidth-slide.offsetWidth;
      this.slide.style.left=this.slidemax/(mz/zoom)+'px';
      this.maxzoom=mz-1;
      this.drag=false;
      this.addevt(slide,'mousedown','msedown');
      this.addevt(p,'mousemove','msedrag');
      this.addevt(document,'mouseup','mseup');
     }
    }
    
    zxcZoomImage.prototype={
    
     imgzoom:function(e,img){
      var mse=this.mse(e),pos=this.pos(img),x=mse[0]-pos[0],y=mse[1]-pos[1],wh=this.wh,os=this.os,wos=this.wos,window=this.window,zimg=this.zimg,zoom=this.zoom,ud=x>0&&x<wh[0]&&y>0&&y<wh[1];
      if (ud){
       window.style.left=(x+=os[0])+'px';
       window.style.top=(y+=os[1])+'px';
       zimg.style.left=-(x-wos[0])*zoom-wos[0]+'px';
       zimg.style.top=-(y-wos[1])*zoom-wos[1]+'px';
      }
      window.style.visibility=ud?'visible':'hidden';
      this.opacity(img,ud?this.opac:100);
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     opacity:function(img,to){
      clearTimeout(this.dly);
      this.animate(img,this.now,to,new Date(),this.ms*Math.abs((to-this.now)/(100-this.opac)));
     },
    
     animate:function(img,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       img.style.filter='alpha(opacity='+now+')';
       img.style.opacity=img.style.MozOpacity=img.style.WebkitOpacity=img.style.KhtmlOpacity=now/100-.001;
       this.now=Math.floor(now);
      }
      if (ms<mS){
       this.dly=setTimeout(function(){ oop.animate(img,f,t,srt,mS); },10);
      }
      else {
       this.now=t;
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     },
    
     msedown:function(e){
      this.msex=this.mse(e)[0];
      this.slidex=this.slide.offsetLeft
      this.drag=true;
     },
    
     msedrag:function(e){
      if (this.drag){
       var msex=this.mse(e)[0],slidex=this.slidex+=msex-this.msex,max=this.slidemax,img=this.img,zimg=this.zimg;
       slidex=Math.min(Math.max(slidex,0),max);
       this.slide.style.left=slidex+'px';
       this.zoom=(slidex/max)*this.maxzoom+1;
       zimg.style.width=img.width*this.zoom+'px';
       zimg.style.height=img.height*this.zoom+'px';
       this.slidex=slidex;
       this.msex=msex;
      }
     },
    
     mseup:function(e){
      this.drag=false;
     }
    
    }
    
    /*]]>*/
    </script>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    new zxcZoomImage({
     ID:'tst',                                                         // the unique ID name of the image to zoom.                           (string)
     WindowClassName:'window',                                         // the class name of the zoom window DIV element.                     (string)
     Zoom:1.5,                                                         //(optional) the zoom factor.                                         (number, default = 2)
     ZoomSRC:'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', //(optional) the file path and name of the zoom image.                (string, defaule = the src of the image to zoom)
     ZoomWindowOffset:[0,-75],                                         //(optional) the zoom window x and y offsets from the mouse position. (array, default = centered on the mouse position)
     Opacity:70,                                                       //(optional) the mouseover opacity of the image to zoom.              (number, default = 100)
     OpacityDuration:550,                                              //(optional) the fade transition in milli seconds.                    (number, default = 1)
     SlideID:'slide',                                                  //(optional) the unique ID name of the slide element.                 (string, default = no slide zoom)
     MaxZoom:4                                                         //(optional) the maximum slide zoom factor.                           (number, default = no slide zoom)
    });
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body>
    
     <div class="tstparent" >
      <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
     </div>
     <div class="slider" >
      <div id="slide" ></div>
     </div>
    
    </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/

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for everything again! Works like a charm!


  •  

    Tags for this Thread

    Posting Permissions

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