A big ask I know

**asjames** · 05-24-2012 04:54 AM

I have built my website up to exactly where I want it to be. I am only mising one thing. Basically i would like what the people on this website have http://stylepilot.com/home/dnasetting I am not sure how to go about building that. Can anyone guide me or help.

thanks in advance

**xelawho** · 05-24-2012 08:33 AM

what do you mean "what they have"? which part of the page are you trying to replicate?

**asjames** · 05-25-2012 02:55 AM

sorry i should of been more specific

the sliders and buttons that can then be submitted

**asjames** · 05-25-2012 09:55 AM

So this is the slider that I have currently

<div id="apDiv1">
<div id="jQueryUISlider1" class="ui-slider">
<div class="ui-slider-handle"></div>
</div>
<script type="text/javascript">
// BeginWebWidget jQuery_UI_Slider: jQueryUISlider1
jQuery("#jQueryUISlider1").slider();

// EndWebWidget jQuery_UI_Slider: jQueryUISlider1
</script>
</div>

I do not know how to display the current value the slider is on for example the minimum value for the slider might be 4"5 and currently the slider is halfway through the select how would i show the user the slider is currently positioned on say 5"5?

cheers for the help guys

**vwphillips** · 05-25-2012 11:13 AM

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[*/
.slide {
  position:absolute;left:100px;top:100px;width:280px;height:70px;background-Color:#FFFFCC;border:solid red 1px;
}

.slidebar {
  position:absolute;left:40px;top:40px;width:200px;height:20px;background-Color:#FFCC66;
}

.slidecursor {
  position:absolute;left:0px;top:30px;width:20px;height:30px;background-Color:red;
}

.mess {
 position:absolute;left:0px;top:0px;width:50px;height:30px;background-Color:#FFFF99;text-Align:center;
}

.slideV {
  position:absolute;left:100px;top:200px;width:60px;height:260px;background-Color:#FFFFCC;border:solid red 1px;
}

.slidebarV {
  position:absolute;left:10px;top:20px;width:20px;height:220px;background-Color:#FFCC66;
}

.slidecursorV {
  position:absolute;left:10px;top:10px;width:30px;height:20px;background-Color:red;
}

.swabparent {
  position:absolute;left:400px;top:100px;width:280px;height:70px;background-Color:#FFFFCC;border:solid red 1px;
}

.swabbar {
  position:absolute;left:40px;top:40px;width:200px;height:20px;background-Color:#FFCC66;
}

.swabcursor {
  position:absolute;z-Index:2;left:0px;top:30px;width:20px;height:30px;background-Color:red;
}

.swab {
  position:relative;left:0px;top:0px;width:50px;height:40px;background-Color:yellow;float:left;margin-Left:5px;
}

/*]]>*/
</style>
</head>

<body>

 <div id="s1" class="slide" >
  <div class="slidebar" ></div>
  <div class="slidecursor" ></div>
  <div class="mess" >100</div>
 </div>
<input id="ip1" /><span id="txt1" ></span>

<br /><br />
<input id="ip1V" /><span id="txt1V" ></span>

 <div id="sw1" class="swabparent" >
  <div class="swabcursor" ></div>
  <div class="swab" ></div>
  <div class="swab" style="background-Color:green;" ></div>
  <div class="swab" style="background-Color:blue;" ></div>
  <div class="swab" style="background-Color:#CC66FF;" ></div>
  <div class="swab" style="background-Color:#99FFFF;" ></div>
 </div>

<input id="ipsw1" /><span id="txtsw1" ></span>


<script type="text/javascript">
/*<![CDATA[*/
// Min Max Swab (25-May-2012) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcMinMaxSwab={

 minmax:function(o){
  var mde=this.mode(o.Mode),p=document.getElementById(o.SlideID),ds=p.getElementsByTagName('DIV'),b=ds[0],c=ds[1],m=ds[2],bw=this.int(b,mde[1]),cw=this.int(c,mde[1])/2,os=this.int(b,mde[0]),ms=o.AnimateDuration,obj;
  c.style[mde[0]]=os-cw+'px';
  if (m){
   m.style[mde[0]]=os-this.int(m,mde[1])/2+'px';
  }
  obj={
   mde:mde,
   c:c,
   cw:cw,
   b:b,
   bw:bw,
   mm:o.MinMax,
   os:os,
   ms:typeof(ms)=='number'?ms:1000,
   m:m,
   mos:m?(cw*2-this.int(m,mde[1]))/2:0,
   ip:document.getElementById(o.InputID),
   txt:document.getElementById(o.TextID)
  }
  this.addevt(p,'mouseup','down',obj);
 },

 swab:function(o){
  var mde=this.mode(o.Mode),p=document.getElementById(o.SwabID),ds=p.getElementsByTagName('DIV'),c=ds[0],cw=this.int(c,mde[1])/2,s=this.bycls(o.SwabClass,p),ms=o.AnimateDuration,obj,ary=[],z0=0;
  c.style[mde[0]]=s[0][mde[3]]+(this.int(s[0],mde[1])-cw*2)/2+'px';
  obj={
   mde:mde,
   c:c,
   cw:cw,
   pw:this.int(p,mde[1]),
   s:s,
   ms:typeof(ms)=='number'?ms:1000,
   m:false,
   ip:document.getElementById(o.InputID),
   txt:document.getElementById(o.TextID),
   col:document.getElementById(o.ColorID)
  }
  for (;z0<s.length;z0++){
   this.addevt(s[z0],'mouseup','swabdown',obj,z0);
  }
 },

 mode:function(mde){
  return typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','height',1,'offsetTop']:['left','width',0,'offsetLeft'];
 },

 down:function(e,o){
  var mse=this.mse(e)[o.mde[2]],p=this.pos(o.b)[o.mde[2]],p=Math.min(Math.max(mse-p,0),o.bw),v=Math.round(o.mm[0]+(o.mm[1]-o.mm[0])*p/o.bw),f=this.int(o.c,o.mde[0]),t=p-o.cw+o.os,ms=o.ms*Math.abs((t-f)/o.bw);
  this.animate(o.mde[0],o,f,t,new Date(),ms,v);
 },

 swabdown:function(e,o,nu){
  var f=this.int(o.c,o.mde[0]),t=o.s[nu][o.mde[3]]+(this.int(o.s[nu],o.mde[1])-o.cw*2)/2;
  o.c.style.left=t+'px';
  this.animate(o.mde[0],o,f,t,new Date(),o.ms*Math.abs((t-f)/o.pw),this.style(o.s[nu],'background-Color'));
 },

 animate:function(mde,o,f,t,srt,mS,v){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.c.style[mde]=now+'px';
   if (o.m){
    o.m.style[mde]=now+o.mos+'px';

   }
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){ oop.animate(mde,o,f,t,srt,mS,v); },10);
  }
  else {
   o.c.style[mde]=t+'px';
   if (o.m){
    o.m.style[mde]=t+o.mos+'px';
    o.m.innerHTML=v;
   }
   if (o.ip){
    o.ip.value=v;
   }
   if (o.txt){
    o.txt.innerHTML=v;
   }
   if (o.col){
    o.col.style.backgroundColor=v;
   }
  }
 },

 pos:function(o){
  var rtn=[0,0];
  while(o){
   rtn[0]+=o.offsetLeft;
   rtn[1]+=o.offsetTop;
   o=o.offsetParent;
  }
  return rtn;
 },

 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];
 },

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

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

 int:function(obj,par){
  return parseInt(this.style(obj,par));
 },

 style:function(obj,par){
  if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
  return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
 }

}

zxcMinMaxSwab.minmax({
 SlideID:'s1',
 InputID:'ip1',
 TextID:'txt1',
 AnimateDuration:1000,
 MinMax:[100,300]
});


zxcMinMaxSwab.swab({
 SwabID:'sw1',
 SwabClass:'swab',
 InputID:'ip1V',
 TextID:'txt1V',
 ColorID:'txt1V',
 AnimateDuration:500
});

/*]]>*/
</script>

</body>

</html>

**asjames** · 05-26-2012 04:11 AM

Ahhh thats amazing!!!!
thanks so much for that

How would i change the design of it though?

As it is very basic and block colours so how would i modify that?

I had a look on your website but couldnt see the script you input.

Thanks again

**vwphillips** · 05-27-2012 03:21 AM

use the css to change the appearance with background images etc

**vwphillips** · 05-27-2012 11:43 AM

http://www.vicsjavascripts.org.uk/Sl...MinMaxSwab.htm

**asjames** · 05-30-2012 06:46 AM

ahhhh thank you so much you have been a huge help and your website is very good!

I have another question related to the sliders.

I want about 4 of them on my website and once the user has selected the correct value on these sliders i would like them to be able to click a submit button which takes them to another pager where the results dependant on what they have selected will be displayed. So my question is how do i get these sliders to submit to a form basically.

Thanks again for all the help

**vwphillips** · 05-30-2012 07:14 AM

the sliders can output a value to a form element

submit the form and process the form element values to do what you require

**asjames** · 05-31-2012 01:53 PM

I am still not sure on how to get my sliders to act as part of a submit able element with different results depending on options selected

**asjames** · 05-31-2012 02:08 PM

Is it something like this?

<div class="demo">
<form id="myform" action="next.php" method="post">
<p>
<label class="Height">What is your Height?</label>
<input type="Slider" name="first_question"/>
</p>
<div class="swabparent" id="sw1"></div>
<br/>
<p>
<br/>
<input type="submit" value="Submit" />
</form>
</div>

<div id="s1" class="slide" >
<div class="slidebar" ></div>
<div class="slidecursor" ></div>
</div><span id="txt1" ></span>

<br /><br />
<div id="sw1" class="swabparent" >
<div class="swabcursor" ></div>
<div class="swab" ></div>
<div class="swab" style="background-Color:green;" ></div>
<div class="swab" style="background-Color:blue;" ></div>
<div class="swab" style="background-Color:#CC66FF;" ></div>
<div class="swab" style="background-Color:#99FFFF;" ></div>
</div><span id="txtsw1" ></span>

<script type="text/javascript">

**vwphillips** · 06-01-2012 03:53 AM

in the examples on my page the swap output is displayed in a text input element

this text input element is given an ID attribute and should also be given a name attribute and be in your form so that the value can be submitted

**asjames** · 06-01-2012 10:33 AM

so is the code i wrote completely wrong?

I am lost as to write the code for a form and change all these values

**asjames** · 06-03-2012 05:19 AM

has anyone got any ideas on this or can point me in the right direction.

thanks for all the help

Thread: A big ask I know

Thread Tools

Display

A big ask I know

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions