Make image draggable horizontally only?

Jfarruggio · 12-10-2012, 12:56 AM

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!

VIPStephan · 12-10-2012, 01:46 AM

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.

vwphillips · 12-10-2012, 02:14 PM

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>

007julien · 12-10-2012, 02:28 PM

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>

SB65 · 12-11-2012, 08:20 AM

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.