JavaScript - Converting Decimal To Percentage

Hi. Can someone please tell me if a bent percentage silder is possible (something like this http://www.codingforums.com/showthread.php?t=173255 only I want it to be bent about 330 degrees, and I wouldn't want to link to another class-I would like to host the entire code on my website)? Also, the reason I want the slider to be bent, is because I would like the slider to be a sort of bent rectangle, and when the user clicks/drags the slider, the rectangle would "fill" to that point (change its background color up to where the mouse is). Thank you. Bye.

Is there a way with Firefox/Chrome to get the actual % used instead of the rendered pixel values?

For example I have a table with the following CSS markup
Code:

#tableFoo : { width : 50%; }

In IE to get the percentage set in the CSS file, it is as simple as:

Code:

var width = tableObj.currentStyle["width"]

I am having trouble figuring out a way to get the percentage value with Firefox and Chrome. I am thinking it is not possible other than stylesheet sniffing and ripping out the rules that way which I am not going to do.

Thanks,
Eric

I am trying to create a function or have this work some how where it displays the first number when you make your choice in the first drop down box, which is working so far. In the second drop down box, if any of the answers are chosen except for none, it will take off 10% of the first number. Then add or subtract from there. I just have a problem with creating a function to take off that 10%. Here is the javascript:

Code:

/*
This source is shared under the terms of LGPL 3
www.gnu.org/licenses/lgpl.html

You are free to use the code in Commercial or non-commercial projects
*/

 //Set up an associative array
 //The keys represent the size of the cake
 //The values represent the cost of the cake i.e A 10" cake cost's $35
 var practice_field = new Array();
practice_field["None"]=0;
practice_field["Allergy and Immunology"]=4400;
practice_field["Endocrinology"]=4400;
practice_field["Pathology"]=4400;
practice_field["Dermatology"]=4400;
practice_field["Geriatrics"]=4400;
practice_field["Physical Rehabilitation"]=4400;
practice_field["Family Practice"]=6900;
practice_field["General Practice"]=6900;
practice_field["Internal Medicine"]=6900;
practice_field["Oncology"]=6900;
practice_field["Oral Surgery"]=6900;
practice_field["Radiology"]=6900;
practice_field["Gastroenterology"]=6900;
practice_field["Infectious Disease"]=6900;
practice_field["Nephrology"]=6900;
practice_field["Ophthalmology"]=6900;
practice_field["Pediatrics"]=6900;
practice_field["Urology"]=6900;
practice_field["Anesthesiology"]=9000;
practice_field["Cosmetic Surgery"]=9000;
practice_field["General Surgery"]=9000;
practice_field["Neurology"]=9000;
practice_field["Otolaryngology"]=9000;
practice_field["Plastic Surgery"]=9000;
practice_field["Vascular Surgery"]=9000;
practice_field["Cardiology"]=9000;
practice_field["Emergency Medicine"]=9000;
practice_field["Gynecology"]=9000;
practice_field["Orthopedic Surgery"]=9000;
practice_field["Pain Management"]=9000;
practice_field["Pulmonary Surgery"]=9000;
practice_field["Neurological Surgery"]=9900;
practice_field["Obstetrics"]=9900;

 
 //Set up an associative array 
 //The keys represent the filling type
 //The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
 //We use this this array when the user selects a filling from the form
 var society_member= new Array();
 society_member["None"]=1;
society_member["BCMA"]=0.10;
society_member["DCMA"]=0.10;
society_member["FOGS"]=0.10;
society_member["FNS"]=0.10;
society_member["PBCMS"]=0.10;
society_member["FSPS"]=0.10;
 
//This function finds the filling price based on the 
//drop down selection
function getPracticeField()
{
    var docPracticeField=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the select id="filling"
     var selectedPracticeField = theForm.elements["practice"];
     
    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    docPracticeField = practice_field[selectedPracticeField.value];

    //finally we return cakeFillingPrice
    return docPracticeField;
}	 
	 


//This function finds the filling price based on the 
//drop down selection
function getSelectedSociety()
{
    var docSelectedSociety=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the select id="filling"
     var selectedSociety = theForm.elements["society"];
     
    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    docSelectedSociety = society_member[selectedSociety.value];

    //finally we return cakeFillingPrice
    return docSelectedSociety;
}

//candlesPrice() finds the candles price based on a check box selection
function candlesPrice()
{
    var candlePrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the checkbox id="includecandles"
    var includeCandles = theForm.elements["includecandles"];

    //If they checked the box set candlePrice to 5
    if(includeCandles.checked==true)
    {
        candlePrice=5;
    }
    //finally we return the candlePrice
    return candlePrice;
}

function insciptionPrice()
{
    //This local variable will be used to decide whether or not to charge for the inscription
    //If the user checked the box this value will be 20
    //otherwise it will remain at 0
    var inscriptionPrice=0;
    //Get a refernce to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the checkbox id="includeinscription"
    var includeInscription = theForm.elements["includeinscription"];
    //If they checked the box set inscriptionPrice to 20
    if(includeInscription.checked==true){
        inscriptionPrice=20;
    }
    //finally we return the inscriptionPrice
    return inscriptionPrice;
}
        
function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var cakePrice = getPracticeField() * getSelectedSociety() + candlesPrice() + insciptionPrice();
    
    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price For the Cake $"+cakePrice;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

Hi,

I am fairly new to this so please bare with me.

I have a php page that uses Javascript (I think) to calculate the percentage Insurance Premium Tax (IPT field) of a total.

I have located where the calculation occurs and can see that it take the total of a predefined amount and divides it by 21 to give me the 5% IPT tax. IPT has risen in the UK today to 6% so I need to know what I need to change the 21 to to give me an accurate IPT calculation.

Here's a snippet of the code. Can anyone help please? Is it 17.65?

PHP Code:
////////////////////////////////////////////
// Motor Bike Calculations
////////////////////////////////////////////
$p = 3;
$q = 0;
  while ($p < 6){
  $base_array = mysql_fetch_row($result4);
  // Motor Bikes
  $risk_code = 2;
  $ap = (0 + ($p));

          $ipt_rate = $ipt_main;

  $monthly_total = $pricing_row[$ap];
  // Calculate IPT
  $ipt_percentage = $monthly_total / 21;
  $monthly_ipt = $ipt_percentage;

    $base_cost = $base_array[0] + $dealer_loading;
  $base_final = $base_cost;
  
  $profit = $monthly_total - $base_cost - $monthly_ipt;
  
        $monthly_total = number_format($monthly_total, 2, '.', '');
            $monthly_ipt = number_format($monthly_ipt, 2, '.', '');
                $base_final = number_format($base_final, 2, '.', '');
                    $profit = number_format($profit, 2, '.', '');
                    
  echo '
  <tr align="center" bgcolor="#FFDDFF"> 
    <td>';
if ($p == 3)
{
echo ('');
}
elseif ($p == 4)
{
echo ('UK');
}
elseif ($p == 5)
{
echo ('UK & European');
}
echo '</td>
    <td>
        <input name="';
if ($p == 3)
{
echo ('comprehensive_plus_'.$risk_code);
}
elseif ($p == 4)
{
echo ('comprehensive_'.$risk_code);
}
elseif ($p == 5)
{
echo ('driveline_plus_'.$risk_code);
}


echo '" type="text" value="'.$pricing_row[$ap].'" size="6" maxlength="6" class="smallinfo">
     </td>
    <td>'.$monthly_ipt.'</td>
    <td>'.$base_final.'</td>
    <td>'.$profit.'</td>
  </tr>';
  $q++;
$p++;
} 

I have my cumulative totals box at the very end of my order form and I'm required to have another underneath that one that will give a particular discount depending on how great the total of the order is.

Would someone please be able to give me the javascript codes that will allow me to do this and also tell me where I'm to put them.

I have a mortgage calc that is adding an extra decimal place to my interest rate. To see this in action go to:

http://www.keithknowles.com/elmtree/mortgagecalc2.htm
Change the interest rate to 7.5
Click Calculate Payment
Click Create Amortization Chart

On the following screen you'll see a recap of your data and the interest rate will now say 7.55. Same thing happens if you enter 6.2. Next screen shows 6.22/

I've attached the html and js files in a zip.

Any help is greatly appreciated.

Thanks.

Hi All,

Im currently working on a bidding application built within ASP.Net and i have found this javascript snippet to only allow numeric values in the desired <asp:textbox> which is working fine, but i want to allow the user to add a decimal place.

For example, say the bid is 1.50 they should be allowed to enter 1.51 but as i cant imput (.) i end up putting in 151 heres the snippet it may be a slight modification but im new to javascript so any help of knowledge will be highly appreciated

Code:

   function isNumberKey(evt) 
{
       var charCode = (evt.which) ? evt.which : event.keyCode
       if (charCode > 31 && (charCode < 48 || charCode > 57))
           return false;

       return true;
   }

thanks in advance

Hello all,

How to set decimal point in javascript ?
e.g.

var num1=23.12345;

I want output as 23.12

How can i do this ?

Please, guide me.

Thanks

Hi..

I have javascript code with computation, but I have problem in my result because it was not round off or fixed into two decimal places only.

here is my code:

Code:

<script type="text/javascript">

function test_(cmpd) {
    var len_ = (document.frmMain.elements.length) - 1;
  
     for (i=0; i <= len_; i++ ) {   
    
       var strPos_ = document.frmMain.elements[i].id.indexOf(cmpd)
         
   
              if (strPos_ != -1) {
              var strPos = document.frmMain.elements[i].id.indexOf("_");
              
var strId = document.frmMain.elements[i].id.slice(strPos + 1) + "_" + document.frmMain.elements[i].id.slice(0,strPos)               
     // this is the computation that I need to fixed the result into two decimal places
    document.frmMain.elements[i].value = document.getElementById(strId).value * document.getElementById('mult').value;  
     } 
    }  
}
</script>

Thank you so much

This script is for car loan payments. I need a R simbol only before the monthly payment and only two figures after the decimal point. Can somebody pse help me with this. Thank you in advance.
Kees Meyer (keesmarcha)

<script language="JavaScript">
<!--
function showpay() {
if ((document.calc.loan.value == null || document.calc.loan.value.length == 0) ||
(document.calc.months.value == null || document.calc.months.value.length == 0)
||
(document.calc.rate.value == null || document.calc.rate.value.length == 0))
{ document.calc.pay.value = "Incomplete data";
}
else
{
var princ = document.calc.loan.value;
var term = document.calc.months.value;
var intr = document.calc.rate.value / 1200;
document.calc.pay.value = princ * intr / (1 - (Math.pow(1/(1 + intr), term)));
}

// payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))

}

// -->
</script>

The results of this loan payment calculator are for comparison purposes only.
They will be a close approximation of actual loan
repayments if available at the terms entered, from a financial institution. This
is being
provided for you to plan your next loan application. To use, enter values
for the
Loan Amount, Number of Months for Loan, and the Interest Rate (e.g.
7.25), and
click the Calculate button. Clicking the Reset button will clear entered
values.
<p>
<center>
<form name=calc method=POST>
<table width=60% border=0>
<tr><th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font></th>
<th bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font></th></tr>
<tr><td bgcolor="#eeeee">Loan Amount</td><td bgcolor="#aaeeaa" align=right><input
type=text name=loan
size=10></td></tr>
<tr><td bgcolor="#eeeee">Loan Length in Months</td><td bgcolor="#aaeeaa"
align=right><input type=text
name=months size=10></td></tr>
<tr><td bgcolor="#eeeee">Interest Rate</td><td bgcolor="#aaeeaa" align=right><input
type=text name=rate
size=10></td></tr>
<tr><td bgcolor="#eeeee">Monthly Payment</td><td bgcolor="#eeaaaa"
align=right><em>Calculated</em> <input
type=text name=pay size=10></td></tr>
<tr><td bgcolor="#aaeeaa"align=center><input type=button onClick='showpay()'
value=Calculate></td><td bgcolor="#eeeeaa" align=center><input type=reset
value=Reset></td></tr>
</table>
</form>
<font size=1>Enter only numeric values (no commas), using decimal points
where needed.<br>
Non-numeric values will cause errors.</font>
</center>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

I'm trying to write a pi calculator that shows a comparison of the calculated value to the actual value. It works, but the output of the comparison shows only the first two decimal spots, followed by two 9s.

Why is it showing two 9s and how can I make it more precise?

Code:

<head>
 <title>
  Pi Calculator
 </title>
 <script language="JavaScript">
  function calcpi(digitsn) {
   p = 1;
   s = 0;
   for (c = 3; c < digitsn; c += 2) {
    if (s == 0) {
     p -= 1/c;
     s = 1;
    } else {
     p += 1/c;
     s = 0;
    }
   }
   p *= 4;
   return p;
  }

  function hid(input) { //Highlight Incorrect Digits
   pi = "3.14159265358979323846".split('');
   input = input.toString().split('');
   result = "";

   for (c = 0; c < input.length; c++) {
    if (input[c] != pi[c]) {
     //result += "; " + input[c] + "!=" + pi[c];
     result += "<span style='background-color:red'>" + input[c] + "</span>";
    } else {
     result += input[c];
    }
   }

   return result;
  }
 </script>
</head>
<body>
 Repeat algorithm x many times:<br/>
 <input type="text" value="10000" id="digitsx"/><br/>
 <input type="button" onClick="document.getElementById('answer').value=calcpi(parseInt(document.getElementById('digitsx').value)).toString()" value="Calculate"/><br/>
 Result:<br/>
 <input type="text" readonly id="answer"/><br/>
 Correct value:<br/>
 <input type="text" readonly value="3.14159265358979323846"/><br/>
 <input type="button" value="Compare" onClick="document.getElementById('comparison').innerHTML = hid('3.1499')"/>
 <div id="comparison"/>
</body>

Hi,
Dreamweaver generated the javascript for an onBlur validation for an input textbox. Is it possible to change this code so that I do not have a range but, instead, specific numbers that must be input by the user? I want to ensure that the users input integers and only the following decimals: .25; .5, and
.75.

[function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
</script>]

John

I am trouble in comparing decimal number.

var1 = 0.25
var2 = 0.50

if (var1<var2)
{
alert("Value is less than minimum")

}
else
{
return true;
}

How can I make it work. Thanks for help in advance

I am trying to customize this scrollbar so that it will fit all screen resolutions and I was wondering how I could do this by somehow customizing the JavaScript files created by Nathan Faubion or if I could do this using other JavaScript variables (var widthPercentage) to change the pixels to percentages? Please let me know what you think. Thank you very much!

One of the pages on the website I'm using the JavaScript on: http://www.clintshipley.com/about.html

Code:

JavaScript file jsScroller.js:
//Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/
function jsScroller (o, w, h) {
	var self = this;
	var list = o.getElementsByTagName("div");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className.indexOf("scroller-content") > -1) {
			o = list[i];
		}
	}
	
	//Private methods
	this._setPos = function (x, y) {
		if (x < this.viewableWidth - this.totalWidth) 
			x = this.viewableWidth - this.totalWidth;
		if (x > 0) x = 0;
		if (y < this.viewableHeight - this.totalHeight) 
			y = this.viewableHeight - this.totalHeight;
		if (y > 0) y = 0;
		this._x = x;
		this._y = y;
		with (o.style) {
			left = this._x +"px";
			top  = this._y +"px";
		}
	};
	
	//Public Methods
	this.reset = function () {
		this.content = o;
		this.totalHeight = o.offsetHeight;
		this.totalWidth	 = o.offsetWidth;
		this._x = 0;
		this._y = 0;
		with (o.style) {
			left = "0px";
			top  = "0px";
		}
	};
	this.scrollBy = function (x, y) {
		this._setPos(this._x + x, this._y + y);
	};
	this.scrollTo = function (x, y) {
		this._setPos(-x, -y);
	};
	this.stopScroll = function () {
		if (this.scrollTimer) window.clearInterval(this.scrollTimer);
	};
	this.startScroll = function (x, y) {
		this.stopScroll();
		this.scrollTimer = window.setInterval(
			function(){ self.scrollBy(x, y); }, 40
		);
	};
	this.swapContent = function (c, w, h) {
		o = c;
		var list = o.getElementsByTagName("div");
		for (var i = 0; i < list.length; i++) {
			if (list[i].className.indexOf("scroller-content") > -1) {
				o = list[i];
			}
		}
		if (w) this.viewableWidth  = w;
		if (h) this.viewableHeight = h;
		this.reset();
	};
	
	//variables
	this.content = o;
	this.viewableWidth  = w;
	this.viewableHeight = h;
	this.totalWidth	 = o.offsetWidth;
	this.totalHeight = o.offsetHeight;
	this.scrollTimer = null;
	this.reset();
};

JavaScript on HTML page:
<script type="text/javascript" src="Scripts/jsScroller.js"></script>
<script type="text/javascript" src="Scripts/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("scroller"), 550, 275);
  scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false);
}
</script>