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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make image draggable horizontally only?

    Here is my goal:

    To display two images on top of each other to make an interactive slide chart.
    The top image would be stationary and the bottom would be slid left to right to interact with the slide graph. Here is an example of the slide chart: http://www.johnstonesupply.com/store...tCalculator.ep

    My question:

    What would some sample code look like and would this be saved in a separate file and linked in the <Head>? Also, how would I define the position of the images on the page?

    I have just begun my endeavors into the world of programming languages and I am really enjoying what I have learned so far. I appreciate any help you guys have to offer!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    I suppose you’re looking for a jQuery solution since that’s what you’re already using, so I’m moving your thread to the JS frameworks forum.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 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[*/
    .parent {
      position:relative;left:200px;height:150px;width:200px;border:solid red 1px;
    }
    
    .example {
      position:absolute;overflow:hidden;left:0px;top:0px;height:150px;width:200px;
    }
    
    #tst {
      position:absolute;left:0px;top:100px;height:50px;width:600px;
    }
    
    .but {
      position:absolute;left:-10px;top:65px;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcSlider(id,ud){
     var obj=document.getElementById(id);
     if (obj){
      clearTimeout(zxcSlider[id]);
      if (typeof(ud)=='number'&&ud!=0){
       obj.style.left=Math.max(Math.min(obj.offsetLeft+ud,0),-obj.width+obj.parentNode.offsetWidth)+'px';
       zxcSlider[id]=setTimeout(function(){ zxcSlider(id,ud); },100);
      }
     }
    }
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    
     <div class="parent" >
    
      <div class="example" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
      </div>
    
      <img class="but" src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" onmousedown="zxcSlider('tst',-1);"  onmouseup="zxcSlider('tst');" alt="img" />
      <img class="but" src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" onmousedown="zxcSlider('tst',1);" onmouseup="zxcSlider('tst');" alt="img" style="left:190px;" />
    
     </div>
    </body>
    
    </html>
    or

    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[*/
    .parent {
      position:relative;left:200px;height:150px;width:200px;border:solid red 1px;
    }
    
    .example {
      position:absolute;overflow:hidden;left:0px;top:0px;height:150px;width:200px;
    }
    
    #tst {
      position:absolute;left:0px;top:100px;height:50px;width:600px;
    }
    
    .but {
      position:absolute;left:-10px;top:65px;
    }
    
    .bar {
      position:absolute;overflow:hidden;left:0px;top:155px;height:20px;width:200px;background-Color:#FFCC66;border:solid red 1px;
    }
    
    #slide {
      position:absolute;left:0px;top:0px;height:20px;width:30px;background-Color:#FFFFCC;cursor:move;
    }
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Slider. (09-December-2012)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcImageSlider={
    
     init:function(o){
      var id=o.ImageID,slide=document.getElementById(o.SlideID),img=document.getElementById(id),mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height',1]:['left','width',0];
      if (img&&slide){
       o=zxcImageSlider['zxc'+id]={
        mde:mde,
        img:img,
        slide:slide,
        imm:this.s(img.parentNode,mde[1])-this.s(img,mde[1]),
        smm:this.s(slide.parentNode,mde[1])-this.s(slide,mde[1]),
        drag:false
       }
       this.addevt(slide,'mousedown','down',o);
       this.addevt(document,'mousemove','move',o);
       this.addevt(document,'mouseup','up',o);
      }
     },
    
     down:function(e,o){
      document.onselectstart=function(event){ window.event.returnValue=false; }
      o.lst=[e.clientX,e.clientY][o.mde[2]];
      o.drag=o.slide;
      this.rtn(e);
     },
    
     move:function(e,o){
      if (o.drag){
       var mse=[e.clientX,e.clientY][o.mde[2]];
       o.drag.style[o.mde[0]]=Math.min(Math.max(this.s(o.drag,o.mde[0])+mse-o.lst,0),o.smm)+'px';
       o.img.style[o.mde[0]]=this.s(o.drag,o.mde[0])/o.smm*o.imm+'px';
       o.lst=mse;
       this.rtn(e);
      }
     },
    
      up:function(e,o){
      if (o.drag){
       o.drag=false;
       this.rtn(e);
      }
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     s:function(obj,p){
      if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
      return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
     },
    
     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); });
      }
     }
    
    
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
     zxcImageSlider.init({
      ImageID:'tst',    // the unique ID name of the imade to slide.                    (string)
      SlideID:'slide',  // the unique ID name of the slider DIV.                        (string)
      Mode:'Horizontal' //(optional) the mode of execution, 'Horizontal' or 'Vertical'. (string, delault = 'Horizontal')
     });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
     <div class="parent" >
    
      <div class="example" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
      </div>
    
      <div class="bar" ><div id="slide" ></div></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/

  • #4
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    A simple example...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor| www.pspad.com">
    <title></title>
    <style type="text/css">
    div {width:80%;margin:30px auto;padding:7px;}
    #bckgrd {position:relative;height:200px;border:1px solid red;cursor:pointer;}
    #frnt {position:relative;width:100px;height:100px;top:-230px;border:30px solid yellow;}
    p	{margin:3px;}
    </style>
    </head>
    <body>
    	<div id="pge">
    	<div id="bckgrd" class="drag">
    		<p>Lorem ipsum dolor sit amet consectetuer Curabitur turpis urna Nunc orci. Rutrum id risus Cum parturient In tempus mus quis porttitor mauris. Enim nec fames id ligula Nunc Pellentesque tellus convallis nibh Nam. </p>
    		<p>Aliquam Curabitur auctor auctor eu Pellentesque eleifend mattis augue cursus risus. Eu est fringilla at quis lorem vel nec vitae felis non. Orci euismod Quisque ligula risus feugiat justo tincidunt Vivamus nibh Fusce. At Suspendisse quis.</p>
    		<p>Urna semper sem Phasellus Curabitur Morbi ligula nulla dolor elit nulla. In morbi id wisi auctor vel elit semper et Maecenas tellus. Integer et fermentum convallis tellus nunc Sed et malesuada Quisque quis. Pellentesque accumsan.</p>
    		<p>Dis commodo eget ut nec felis Curabitur feugiat ac ut id. Vestibulum Cras et Phasellus ut rutrum dui interdum quis fames justo. Nulla nunc Lorem libero feugiat pellentesque fringilla eleifend Suspendisse commodo feugiat. Pretium augue ridiculus lorem.</p>
    	</div>
    	<div id='frnt'></div>
    	</div>
    	
    <script type="text/javascript">
    var dragobject={
    	x:0,y:0,offsetx:null,offsety:null,targetobj:null,dragapproved:0,
    	initialize:function(){
    		document.onmousedown=this.drag;
    		document.onmouseup=function(){this.dragapproved=0}}
    	,drag:function(e){
    		var evtobj=window.event? window.event:e;
    		this.targetobj=window.event? event.srcElement:e.target;
    		while (this.targetobj.nodeName!='DIV') this.targetobj=this.targetobj.parentNode;
    		if (this.targetobj.className=="drag"){
    			this.dragapproved=1;
    			if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
    			if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
    			this.offsetx=parseInt(this.targetobj.style.left)
    			this.offsety=parseInt(this.targetobj.style.top)
    			this.x=evtobj.clientX;
    			this.y=evtobj.clientY;
    			if (evtobj.preventDefault) evtobj.preventDefault();
    			document.onmousemove=dragobject.moveit}}
    	,moveit:function(e){
    		var evtobj=window.event? window.event:e;
    		if (this.dragapproved==1){
    			this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px";
    		//	this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px";
    		return false}}
    }
    dragobject.initialize();
    </script>
    </body>
    </html>

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    If you are using jQuery/jQuery UI draggable, then you can restrict the draggability (if that's a word) to the x or y axis via the axis option.


  •  

    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
    •