JavaScript - Getting The Actual Percentage Value, Not Pixels For Rule
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 Similar TutorialsI 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> Hi everyone Dont know if it can be done but.... I am using the percentage calculator Code: <SCRIPT language=JavaScript> <!-- //Script by Tom Richardson Jr. //If you have any questions, e-mail me at gooftroop@geocities.com //or visit mt web site at http://home.rmci.net/gooftroop //For this script and more, visit http://javascriptkit.com function perc1() { a = document.form1.a.value/100; b = a*document.form1.b.value; document.form1.total1.value = b } function perc2() { a = document.form1.c.value; b = document.form1.d.value; c = a/b; d = c*100; document.form1.total2.value = d } //--> </SCRIPT> <FORM name=form1> <TABLE cellSpacing=1 cellPadding=1 border=1> <TBODY> <TR> <TD align=middle colSpan=3><B><FONT size=4>Percentage Calculator</FONT></B> </TD> <TR> <TD>What is <INPUT size=5 name=a> % of <INPUT size=5 name=b>?</TD> <TD>Answer: <INPUT maxLength=40 size=5 name=total1></TD> <TD><INPUT onclick=perc1() type=button value=Calculate></TD> <TR> <TD><INPUT size=5 name=c> is what percent of <INPUT size=5 name=d>?</TD> <TD>Answer: <INPUT size=5 name=total2> %</TD> <TD><INPUT onclick=perc2() type=button value=Calculate></TD> <TR> <TD align=middle colSpan=3><INPUT type=reset value=Reset></TD></TR></TBODY></TABLE></FORM> Does anyone know how I could change the answer to a percentage bar instead of the numeric answer ? or change the colour of the answer to say red or green depending on the value ? Many thanks Donna Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request. I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how. I tried this and it didn't work in Firefox nor in IE. Code: THE HTML FILE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Greenbrain</title> <script language="javascript" type="text/javascript" src="greenbrain.js"></script> <link rel="stylesheet" type="text/css" href="greenbrain.css"> </head> <body> <div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div> <div id=img_intrare> <img src="soare.png"; class="soare"> </div> </body> </html> THE .CSS FILE body {background-image:url(fondhome.png); position:fixed;} img.soare {position:absolute; left:-459px; top:100px; z-index:1;} h1.intrare {z-index:2} THE .JS FILE function intr() { var x, xi; x=0; xi=document.getElementById('img_intrare').style.left; if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"} } ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it... Hi guys, My site has links in it with hash tags so people can share information externally, and when the link is clicked on my page loads already scrolled down on the correct div. ex. http://www.mysite.com/#div123 My issue is the top of the div is aligned exactly on the top of the text in div123. Since the browser automatically scrolls there, is there a way to make the page scroll up by 20 pixels just to make it look nicer? Thanks!! I am using a JavaScript price calculator. Right now it does everything I need except for one thing. If you look at the "type" field, they can choose either woven or printed. Right now, if they choose "woven" it adds 6 cents to to the total as you can see in this portion of the code: if (theForm.select.value=="woven") { priceeach+=0.06; Rather than 0.06, how do I get it to add a percentage--say 20% The form is located he http://goo.gl/YlJWo Thank you! I am having an issue with converting my decimal to a percentage... any suggestions? Thanks - it's probably an easy solution, but I am lost below is my code (cost * .06) is where the issue is - Thanks! var cost = prompt("What is the cost of your purchase?", "") document.write("Return Value: "+cost,("<br />")); var salestax = cost * .06 document.write("Return Value: "+salestax,("<br />")); var total = cost + salestax document.write(cost + salestax); 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 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'; } 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. 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.
How can i "prompt the user for the sales tax rate as a percentage"? Thanks soooo much for any help! this is what i have so far.... var tax = prompt("What is your tax rate percentage?", "") document.write("Return Value: "+tax,("<br />")); Hi. Sort of new to Javascript. I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched. I plan to apply it to several pages, and don't really fancy working out the pixels for each. I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so? Thanks! Code: <script> $('#in').click(function() { $('#drag img').animate({ width: '150%', height: '150%', }, 5000, function() { // Animation complete. }); }); </script> I am having issues with my code... below are the instructions. "prompt the user for the cost of a purchase and the sales tax rate as a percentage. Calculate the tax amount and the total cost. Display all 4 values in the document" I am having some real issues with the tax rate percentage, it keeps showing as a decimal, and does not calculate correctly. Any help is highly appreciated. Thanks so much! var cost = prompt("What is the cost of your purchase?", "") document.write("Return Value: "+cost,("<br />")); var tax = prompt("What is your tax rate percentage?", "") document.write("Return Value: "+tax,("<br />")); var salestax= cost * tax document.write("Return Value: "+salestax,("<br />")); var total = eval(cost) + salestax document.write(total, ("<br />")); I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me. I need to change the caption image for a text one. The site is here Frank alias effpeetee. |