www.webdeveloper.com
Results 1 to 15 of 15

Thread: A big ask I know

  1. #1
    Join Date
    May 2012
    Posts
    10

    A big ask I know

    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

  2. #2
    Join Date
    Nov 2010
    Posts
    978
    what do you mean "what they have"? which part of the page are you trying to replicate?

  3. #3
    Join Date
    May 2012
    Posts
    10
    sorry i should of been more specific

    the sliders and buttons that can then be submitted

  4. #4
    Join Date
    May 2012
    Posts
    10
    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

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,645
    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>
    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/

  6. #6
    Join Date
    May 2012
    Posts
    10
    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

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,645
    use the css to change the appearance with background images etc
    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/

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,645
    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/

  9. #9
    Join Date
    May 2012
    Posts
    10
    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

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,645
    the sliders can output a value to a form element

    submit the form and process the form element values to do what you require
    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/

  11. #11
    Join Date
    May 2012
    Posts
    10
    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

  12. #12
    Join Date
    May 2012
    Posts
    10
    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">

  13. #13
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,645
    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
    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/

  14. #14
    Join Date
    May 2012
    Posts
    10
    so is the code i wrote completely wrong?

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

  15. #15
    Join Date
    May 2012
    Posts
    10
    has anyone got any ideas on this or can point me in the right direction.

    thanks for all the help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles