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
    Regular Coder
    Join Date
    Aug 2006
    Location
    Richmond, CA
    Posts
    202
    Thanks
    3
    Thanked 10 Times in 9 Posts

    Looking for UI idea... Slider?

    I hope this is the right place... I'm trying to be a good contributor and not cross post, but I couldn't figure out the best place for this, so I'm taking a guess...

    I'm working on a web application that will be used for recognition training. The user sees the image for X amount of time, then is quizzed on it. Everything is working fine, but the client now wants to use some sort of control to limit what that X (the amount of time in seconds) actually is. They also want it more graphically apparent, rather than just entering the number (change with mouse).

    They got 2 ranges. One is sub second (SHORT), the other is up to 10 seconds (LONG). (There are 10 choices in each range) They want to user to actually know the time they've selected (1/2 second, 1/16th second, 5 seconds, etc...) and the range they've selected from (SHORT vs LONG). My first implementation was a Slider (ala scriptaculous (which is why I posted here in Javascript Forum). The problem is that if the Slider is to scale, the entire slider has a range of 10 seconds, and the SHORT range has a range of 1 second, so all the short values are crammed into 10% of the space, with the LONG values taking 90%. I resolved this by just giving a range of 1 to 20, which evenly distributed the points and indexing that to an array with the values (displaying the RANGE and TIME when the user moves the slider).

    I'm wondering if there's an easier way to do this? I figured someone here might have a good idea. Even a kick in the right direction is helpful.

    Thanks much!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,084
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to consider ...

    Have you considered making two slider controls? One SHORT and one LONG.
    Perhaps use a radio button element to control which slider is active for your experiment.

    OR

    One slider control but the time duration scale is chosen by a radio button or a checkbox element.


  • #3
    Regular Coder
    Join Date
    Aug 2006
    Location
    Richmond, CA
    Posts
    202
    Thanks
    3
    Thanked 10 Times in 9 Posts
    That's a pretty good idea... some variation on a radio button... Will have to check that out.

    Thanks!

  • #4
    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 HTML 4.01//EN">
    
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    #tst {
     overflow:hidden;width:200px;height:20px;border:solid black 1px;
    }
    #tst DIV {
     width:0px;height:20px;background-Color:#ff0000;
    }
    
    -->
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (29-December-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    // parameter 5 = (optional) to scale the effect time on a secified minimum/maximum.                        (array, see Note 5)
    //                 field 0 the minimum. (digits)
    //                 field 1 the maximum. (digits)
    // parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
    //                'sin' progression starts fast and ends slow.
    //                'cos' progression starts slow and ends fast.
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //  Note 5: parameter 5 is of particular use when re-calling the effect
    //          in mid travel to retain an constant rate of progression.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/\W/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2.06K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
     if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
     if (!obj||(!srt&&!fin)) return;
     var oop=obj[mde.replace(/\W/g,'')+'oop'];
     if (oop){
      clearTimeout(oop.to);
      if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
      else oop.update([srt,fin],ms);
     }
     else obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
    }
    
    function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
     this.srtfin=[srt,fin];
     this.to=null;
     this.obj=obj;
     this.mde=mde.replace(/\W/g,'');
     this.update([srt,fin],ms,scale,curve);
    }
    
    zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
     this.time=ms||this.time||2000;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.ms=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
     this.inc=Math.PI/(2*this.ms);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.ms*ms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  zxcOpacity(this.obj,this.data[0]);
     if (ms<this.ms) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Bar(id,sec){
     var bar=document.getElementById(id);
     var slide=bar.getElementsByTagName('DIV')[0];
     zxcBAnimator('width',slide,0,bar.offsetWidth,sec*1000);
    
    }
    //-->
    </script>
    </head>
    
    <body>
    
    </body>
    <input type="button" name="" value="10 sec" onclick="Bar('tst',10);">
    <input type="button" name="" value="5 sec" onclick="Bar('tst',5);">
    <div id="tst" >
    <div  ></div>
    </div>
    </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/

  • #5
    Regular Coder
    Join Date
    Aug 2006
    Location
    Richmond, CA
    Posts
    202
    Thanks
    3
    Thanked 10 Times in 9 Posts
    I am lost as to what this is for... With no explanation, I don't see how it applies to my problem.


  •  

    Posting Permissions

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