www.webdeveloper.com
Results 1 to 3 of 3

Thread: Rounding javascript output to 0.25 increments

  1. #1
    Join Date
    Jun 2008
    Location
    London
    Posts
    175

    Rounding javascript output to 0.25 increments

    Hey all, I've created a slider that outputs its position relative to it's parent. I've used the sum /30.4167 so that when it's fully to the right, the value is 12.00002630142751. I want the output to display in 0.25 increments, so 0, 0.25, 0.50 etc, all the way up to 12.00. Does anyone know how I can round the output to get this result? I've tried Math.round and toFixed(2) but can't seem to find a combination that works. thanks in advance

    Code:
    jQuery(function() {
        jQuery("#sliderButton").draggable({
            containment: "#slider",
            scroll: false,
            drag: function(event) {
                o = $(this).offset();
                p = $(this).position();
                jQuery('#money').html(p.left/30.4167);
            }
    });
    });

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,506
    JQuery is a framework, please ask in the JavaScript Frameworks forum
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Lightbulb

    Alternative solution without use of JQuery.
    May not work in older browsers, but the concepts to display to 0.25 steps are shown in code.

    Read the tutorial at http://www.developerdrive.com/2012/0...5-range-input/ for additional information.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Developer Drive | Creating a Slider Control with the HTML5 Range Input | Demo</title>
    <!-- MODIFIED FROM: http://www.developerdrive.com/2012/07/creating-a-slider-control-with-the-html5-range-input/ -->
    
    <style type="text/css">
    body { font-family: Sans-Serif; color:#333333; }
    
    #chosen {
      border-radius:10px;
      width:45px;
      padding-top:10px; padding-bottom:10px;
    
      background-image: -webkit-linear-gradient(top, #cccccc, #330000);
      background-image: -o-linear-gradient(top, #cccccc, #330000);
      background-image: -moz-linear-gradient(top, #cccccc, #330000);
    
      text-align:center;
      color:#ffffff;
      font-weight:bold;
      font-size:large;
      margin-left:40px;
    }
    
    #slider { margin-left:10px; }
    
    /*this is only for webkit, not opera*/
    input[type='range'] {  
      -webkit-appearance: none;
      padding-left:2px; padding-right:2px;
      -webkit-border-radius: 5px;  
      background-image: -webkit-linear-gradient(top, #000000, #333333, #000000); 
    }  
    
    #picHolder { width:250px;  height:240px;  margin:10px; }
    
    </style>
    
    <script type="text/javascript">
    function updateSlider(slideAmount) {
    //get the element
      var display = document.getElementById("chosen");
    //show the amount
      display.innerHTML=Number(slideAmount).toFixed(2);
    }
    </script>
    </head>
    <body>
    
    <p>This is a demo to accompany the following tutorial:<br>
     <a href="http://www.developerdrive.com/2012/07/creating-a-slider-control-with-the-html5-range-input/">
     Creating a Slider Control with the HTML5 Range Input</a>
    </p>
    
    <div id="slider">0.00
     <input id="slide" type="range" min="0" max="12" step="0.25" value="6" onchange="updateSlider(this.value)" />12.00
    </div>
    <br/>
    
    <div id="chosen">6.00</div>
    </body>
    </html>
    Last edited by JMRKER; 02-28-2014 at 11:19 PM.

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