Slider for Hta or Html (plain script)

Author Message
Fredledingue

  • Total Posts : 572
  • Scores: 2
  • Reward points : 0
  • Joined: 5/9/2005
  • Location: Europe
  • Status: offline
Slider for Hta or Html (plain script) Tuesday, August 26, 2008 12:19 PM (permalink)
0
Move the pink slider left and right while keeping the mouse button pressed.
Returns a value from 0 to 300.

Just no eye candy yet... 
Couldn't help dash the code in on this forum....

Edit: Little optimization of the code 

 <HTML>
 <HEAD>
 <HTA:APPLICATION
 ID="test" 
    APPLICATIONNAME="slider">
 <meta name="VI60_defaultClientScript" content="VBScript">
 <TITLE>Slider</TITLE>
 <SCRIPT LANGUAGE="VBScript">
 Public x, mso, objSlider, objMousePos
 Sub Window_OnLoad()
 Set objSlider = document.all.Slider.style
 Set objMousePos = document.all.MousePos
 End Sub
 Sub MoveSlider
 If mso=True Then
 x=window.event.X -6
 objMousePos.InnerText = x -12
 objSlider.left = x
 End If
 End Sub
 </SCRIPT>
 <BODY OnMouseUp="mso=False">
 Slider value = <span id="MousePos"></span>
 
 <!-- Start of slider code -->
 <p align="justify"
 style="position: absolute; left: 5; top: 42; width: 640; height: 16; cursor='default'"
 OnSelectStart="javascript:return false"
 OnBlur="mso=False">
 -
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 <span OnMouseOver="MoveSlider">_</span>
 +
 </p>
 <p id="Slider" align="justify"
 style="position: absolute; left: 10; top: 48; width: 40; height: 16; cursor='default'" 
 OnSelectStart="javascript:return false"
 OnMouseDown="mso=True">
 <font color="#FF00FF">[|]</font>
 </p>
 <!-- End of slider code -->
 </BODY>
 </HTML>
 <!-- by Fredledingue -->
<message edited by Fredledingue on Tuesday, August 26, 2008 9:42 PM>
Fred
 
#1
    seakip

    • Total Posts : 6
    • Scores: 0
    • Reward points : 0
    • Joined: 8/14/2008
    • Status: offline
    RE: Slider for Hta or Html (plain script) Thursday, September 11, 2008 9:21 AM (permalink)
    0
    Neat! =)


    [ Seakip ]
     
    #2
      Fredledingue

      • Total Posts : 572
      • Scores: 2
      • Reward points : 0
      • Joined: 5/9/2005
      • Location: Europe
      • Status: offline
      RE: Slider for Hta or Html (plain script) Saturday, June 20, 2009 11:27 AM (permalink)
      0
      New version
       
      -Easier to position in your webpage composition (just two numbers to change)
      -More accurate: Each bar pointed to will return an exact number.
      -Better reaction at the start and the end
      -Reposition the slider with a single click
      -Numbering
       
      and... a  CL  little test included!
        
       <html>
 <head>
   <HTA:APPLICATION
  ID="test" 
     APPLICATIONNAME="slider">
 <meta name="VI60_defaultClientScript" content="VBScript">
 <title>slider</title>
 <script language="VBScript">
 
 Public gw,gl,gr,gs,gt,sw,gq,q,r, mso, objSlider, objMyResult
  
 Sub Window_OnLoad()
 '----set objects---
 Set objSlider = document.all.Slider.style
 Set objMyResult = document.all.MyResult
 '----take the measures we need---
 '----Thanks to these complicated calculations we can position all the elements ----
 '-----just by changing the left and top of the  pGroove paragraph (see in html body) ---
 sw = document.all.Slider.offsetWidth/2
 gw = document.all.Groove.offsetWidth
 gl = document.all.Groove.offsetLeft
 gt = Replace(document.all.pGroove.style.top, "px", "")
 gs = gl + Replace(document.all.pGroove.style.left, "px", "") - sw
 gr = Round( gs + gw - sw, 0)
 q = Round( gw/51, 0)
 gq = Round( (gs-gl)/q, 0)
 '---Position slider at the begining of the ruler---
 objSlider.left = gs
 objSlider.top = gt -4
 '---Position numbers on the ruler---
 nw = Round(document.all.Num1.offsetWidth/2, 0)
 document.all.Num0.style.left = gs -nw + sw
 document.all.Num1.style.left = gs + Round(gw/5, 0) -nw + sw
 document.all.Num2.style.left = gs + Round((gw/5)*2, 0) -nw + sw
 document.all.Num3.style.left = gs + Round((gw/5)*3, 0) -nw + sw
 document.all.Num4.style.left = gs + Round((gw/5)*4, 0) -nw + sw
 document.all.Num5.style.left = gr
 document.all.Num0.style.top = gt +20
 document.all.Num1.style.top = gt +20
 document.all.Num2.style.top = gt +20
 document.all.Num3.style.top = gt +20
 document.all.Num4.style.top = gt +20
 document.all.Num5.style.top = gt +20
 End Sub
  
 Sub Slide
  If mso=True Then
  x = window.event.x -gl
  objSlider.left = x
  r = Int((x-gl)/q) - gq
  objMyResult.InnerText = r
  Test
  End If
 End Sub
 Sub SlideEnd(v)
  Select Case v*mso
  Case -1 objSlider.left = gs
    mso=False
    r = 0
    objMyResult.InnerText = r
    Test
  Case -2 objSlider.left = gr
    mso=False
    r = Int((gr-gl)/q) - gq
    objMyResult.InnerText = r
    Test
  End Select
 End Sub
  
 Sub Test
 document.body.bgcolor= "#" & Hex(155+r*2) & Hex(155+r*2) & Hex(155+r*2)
 End Sub
  
 </SCRIPT>
 <BODY OnMouseUp="mso=False" bgcolor= "#9B9B9B">
 
 <!-- Start of slider code -->
 r = <span id="MyResult"></span><br>
 <p align="justify" id="pGroove"
  style="position: absolute; left: 20; top: 40; cursor='default'"
  onselectstart="javascript:return false">
 <span OnMouseOver="SlideEnd(1)"> - </span>
 <span OnClick="mso=True : Slide : mso=False" id="Groove" >
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 <span OnMouseOver="Slide">|</span>
 </span>
 <span OnMouseOver="SlideEnd(2)"> + </span>
 <font face="Wingdings 3">y</font>
 
 </p>
 <p id="Num0" style="position: absolute;">0</p> 
 <p id="Num1" style="position: absolute;">10</p> 
 <p id="Num2" style="position: absolute;">20</p> 
 <p id="Num3" style="position: absolute;">30</p> 
 <p id="Num4" style="position: absolute;">40</p> 
 <p id="Num5" style="position: absolute;">50</p>
 <p id="Slider" align="justify"
  style="position: absolute; cursor='default';" 
  onselectstart="javascript:return false"
  OnMouseDown="mso=True" OnMouseUp="Slide"
  >
 <font color="magenta">[|]</font>  <!-- Design the shape of the slider button here -->
 </p>
 <!-- End of slider code -->
  
 </BODY>
 </HTML>

       
      Fred
       
      #3
        TomRiddle

        • Total Posts : 620
        • Scores: 12
        • Reward points : 0
        • Joined: 2/7/2008
        • Location: Australia
        • Status: offline
        RE: Slider for Hta or Html (plain script) Tuesday, June 23, 2009 12:52 AM (permalink)
        0
        That is brilliant Fred !!!
         
        #4

          Online Bookmarks Sharing: Share/Bookmark

          Jump to:

          Current active users

          There are 0 members and 1 guests.

          Icon Legend and Permission

          • New Messages
          • No New Messages
          • Hot Topic w/ New Messages
          • Hot Topic w/o New Messages
          • Locked w/ New Messages
          • Locked w/o New Messages
          • Read Message
          • Post New Thread
          • Reply to message
          • Post New Poll
          • Submit Vote
          • Post reward post
          • Delete my own posts
          • Delete my own threads
          • Rate post

          2000-2012 ASPPlayground.NET Forum Version 3.9