JavaScript - Javascript Bent Percentage Slider

Hello,

I am coding a slider for my portfolio which has divs that slide when you click either the arrow keys or the numbers below the slider's frame. I just can't figure out how to change the javascript/css file so that the current slide number, (the little numbers below the image), becomes a different color when you actively view it, so that it indicates to users number they're currently on.

Thanks for help!

Here's a draft of what it looks like so far in the front end with my grids still in place:



HTML file:
Code:

<div id="slider" class="span-24 last">
            
                <div id="slide2Left"> &larr;</div>
                    <div id="slideFrame">
                        <div id="slideBoard">
                          <!-- the slides -->
                            <div class="slidePoint">
                             Slide 1 Goes Here
                            </div>
                            <div class="slidePoint">
                             Slide 2 Goes Here
                            </div>
                            <div class="slidePoint">
                             Slide 3 Goes Here
                            </div>
                          <!-- end slideBoard -->
                        </div>
                        <div id="slideReference"></div>
                    <!-- end slideFrame -->
                    </div>
<div id="slide2Right" class="last"> &rarr;</div>
                
        <!-- end slider section -->    
        </div>

Javascript code
Code:

// JavaScript Document
$(document).ready(function(){						
	var slideTime = 700;
	var currentSlide = 1;
	var totalSlides = $("#slideBoard > div").size();
	var slideWidth = $('#slideFrame').css('width');
	var slideAmount = parseInt(slideWidth);
	function slideLeft(){
		if(currentSlide > 1){
			$("#slideBoard").animate({
				left: ['+='+slideAmount, 'swing']
				}, slideTime );
			currentSlide += -1;
		}
	}
	function slideRight(){
		if(currentSlide < totalSlides){
			$("#slideBoard").animate({ 
				left: ['+=-'+slideAmount, 'swing']
				}, slideTime );
			currentSlide += 1;
		}
	}
	function slideTo(slideNumber){
		///*
		slideNumber = parseInt(slideNumber);
		slidePos = slideNumber -1;
		var p1 = $('#slideBoard');
		var position1 = p1.position();
		
		var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
		//alert(p2.html());
		var position2 = p2.position();
		var slideFor = 	(-position1.left) - position2.left;

		//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
		$("#slideBoard").animate({ 
			left: ['+='+slideFor, 'swing']
			}, slideTime );
		currentSlide = slideNumber;
		
		//*/
	}
	$('#slide2Left').click(function(){
		slideLeft();
	});
	$('#slide2Right').click(function(){
		slideRight();
	});
	
	$(document).keydown(function(e){
		 if(e.keyCode == 37){ 
			 //alert( "left pressed" );
			slideLeft();
			return false;
		 }
		 if(e.keyCode == 39){ 
			 //alert( "rigt pressed" );
			slideRight();
			return false;
		 }
	});

	//# Slide Reference Tool
	for(i = 1; i < (totalSlides+1); i++){
		$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
	}
	$('.slideNumber').click(function(){
		slideTo($(this).html());
	});
	$(".slidePoint").touchwipe({
     wipeLeft: function() { 	slideRight(); },
     wipeRight: function() { 	slideLeft(); },
     min_move_x: 20,
     preventDefaultEvents: true
	});
});

CSS Code
Code:

/* CSS Document */
					#slider {
						position: relative;
						margin: 79px 0 50px 0;
						height: 500px;
						padding-bottom: 50px;
						border-bottom: 1px solid #9B9B9B;
					}
					#slideFrame { 
						width:870px;
						left: 40px;
						min-height:460px;
						height:460px;
						overflow:hidden;
						position:relative;
						border:#CCC solid 0px;
					}
					#test { 
						width:30px; 
						min-height:460px;
						height:460px;
						overflow:hidden;
						position:relative;
						border:#CCC solid 0px;
					}
					#slideBoard {
						position:absolute;
						top:0px;
						left:0px;
						width:3000px;
						min-height:400px;	
						margin:0px;
						padding:0px;
						background: #ccc;
						opacity: .3;
					}
					.slidePoint {
						width:870px; 
						min-height:400px;
						height:410px;
						display:inline-block;
						margin:0px;
						padding:0xp;
						float:left;
					}
					.slidePoint p {
						padding:5px;
					}
					#slide2Left, #slide2Right{
						position:absolute;
						top: 200px;
						bottom: 5px;
						cursor:pointer;
						width:20px;
						height:20px;
						color:#9B9B9B;
						border:#9B9B9B solid 1px;
						border-radius: 5px;
						padding:3px;
						text-align:center;
						display: inline-block;
					}
					#slide2Right{
						left: 920px;
					}
					
					#slideReference {
						position:absolute;
						width: 770px;
						min-height:10px;
						bottom:5px;
						left:50px;
						text-align:center;
					}
					.slideNumber {
						border-radius: 2px;
						background:#929292;
						color:#ffffff;
						cursor:pointer;
						display:inline-block;
						padding:3px;
						margin:3px;
						text-align:center;
						min-height:15px;
						min-width:15px;
					}

Hello there,

I am new to UI Development, I had an issue in displaying slider, i have to use 3 sliders
in my page, 2 are working fine but the 3rd slide is not getting displayed even though the code is same as the remaining 2. Below are my JS and HTML pages. Please reply me ASAP. Thank you.

Java Script Code:

// Time Slider
$("#time_slider").slider({
range: true,
min: 0,
max: 1439,
values: [540, 1020],
slide: slideTime
});

function slideTime(event, ui){
var minutes0 = parseInt($("#time_slider").slider("values", 0) % 60);
var hours0 = parseInt($("#time_slider").slider("values", 0) / 60 % 24);
var minutes1 = parseInt($("#time_slider").slider("values", 1) % 60);
var hours1 = parseInt($("#time_slider").slider("values", 1) / 60 % 24);
$("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1));
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (hours < 12) {
time = "AM";
}
else {
time = "PM";
}
if (hours == 0) {
hours = 12;
}
if (hours > 12) {
hours = hours - 12;
}
if (minutes.length == 1) {
minutes = "0" + minutes;
}
return hours + ":" + minutes + " " + time;
}
slideTime();

//-----------------------------
// Trip Duration
$("#duration_slider").slider({
value: 160,
min: 0,
max: 1440,
step: 30,
slide: slideDuration
});

function slideDuration(event, ui){
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);

if(hours.length == 1) hours = '0' + hours;
if(minutes.length == 1) minutes = '0' + minutes;

$("#duration").text(hours+'hrs. '+minutes+'mins. ');
}

slideDuration();

//-----------------------------
// Max Price
$("#price_slider").slider({
value: 160,
min: 0,
max: 1440,
step: 30,
slide: slidePrice
});

function slidePrice(event, ui){
var dollars = ui.value;
$("#maxprice").text('$'+dollars);
}

slidePrice();



HTML Code:

<head>
<style>
#slider-range{width:400px;}
#slider-range,#time,#duration,#maxprice {margin:10px;display:block;}
.ui-slider-horizontal .ui-state-default {background:url(images/scrub-btn.png) no-repeat scroll 50% 50%;}
.flights-select {margin: -22px 0px 140px;}

</style>
</head>
<body>
<div class="flights-section-title">Flight Time</div>

<div class="flights-section">&nbsp;
<ul class="inline">
<li><input class="radio" type="radio" name="2" checked="checked" value="a"><div class="flight-radio-label">Take-Off</div></li>
<li><input class="radio" type="radio" name="2" value="b"><div class="flight-radio-label">Landing</div></li>
</ul>
<div class="leftnav-dot-divider">
<div id="time_slider"></div>
<span id="time"></span></div>

</div><!-- flight-section-slider -->
<div class="flights-section-title">Max Trip Duration</div>
<div class="flights-section">
<div class="leftnav-dot-divider">
<div id="duration_slider"></div>
<span id="duration">2hrs. 0mins.</span>
</div>
</div><br />


<div class="flights-section-title">Max Price</div>
<div class="flights-section"> &nbsp;
<div class="leftnav-dot-divider">
<div id="price_slider"></div><span id="maxprice">$100</span>
</div>
</div><br />
</body

I am using a JQuery Slider function in one of my forms that has the folowing code:

Code:

<script>
	$(function() {
		$( "#slider" ).slider({
			value:100,
			min: 0,
			max: 100,
			step: 1,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value + "% Clear" );
			}
		});
		$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
	});
</script>

And the form looks like:
Code:

<form method=POST etc...>
<div id="slider"></div>
      <span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>

Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again.

However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks!

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 would like to explain my situation, basically, i am trying to create a slider with thumbnails. The slider is complete, works very well. The only problem is that the captions are just not appearing properly.

I had a situation where the captions did work but they had to be coming in from the slideOut functions but what i want is for it to be displayed when the person hovers over the image.

This is what it looks like at the moment...


This is when the caption is coming from the top.

i would like to implement
Code:

http://web.enavu.com/demos/caption/

or this
Code:

http://www.sohtanaka.com/web-design/examples/image-hover/

Doesnt matter which one

into my slider when an image is hovered over (not the thumbnail) the actual image, then the caption covers the whole image displaying whatever text...

Coding:
(HTML)
Code:

                    <div class="main_view">
                        <div class="window">    
                            <div class="image_reel">
                    			<a href="#">
                                    <img style="height:534px;" src="http://i55.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(253); ?>">
                                    <img src="http://i51.tinypic.com/.jpg" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(256); ?>">
                                    <img src="http://i52.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(258); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(271); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                            </div>
		<div class="descriptions">
			<!--welcome page-->
				<div class="desc">
					<strong style="font-size:30px;">Welcome to City Water</strong>
						<div class="clear"></div><br/>
                            <div id="sliderdescription">WHATEVER WHATEVER</div>

				</div>
                
			<!--Services page-->
			<div class="desc">
			<?php $post_id = 253; $queried_post = get_post($post_id); ?>
       <strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong>
                        <div class="clear"></div><br/>
                            <div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                </div>
                    <div class="desc">
                                        <!--Products page-->
<?php $post_id = 256; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Information page-->
<?php $post_id = 258; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Accounts page-->
<?php $post_id = 271; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                    </div>
                </div>
            </div>
            
<div id="hrline"></div>

 <div class="paging">
         <ul class="thumb">
<li><a href="#" rel="1"><img src="http://i55.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="2"><img src="http://i56.tinypic.com/.jpg" class="thumbnails"/></a></li>
<li><a href="#" rel="3"><img src="http://i51.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="4"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="5"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
        </ul>
    </div>
 </div>

CSS
Code:

 /*--Main Container--*/
 .main_view {
  float : left;
  height :488px;
  margin-bottom :1px;
  margin-top :-40px;
  position :relative;
}

 /*--Window/Masking Styles--*/
 .window img{
  height :492px;
  width : 974px;
}

 .window {
  /*--Hides anything outside of the set width/height--*/
  border :3px solid #D7D7D5;
  color : #B4B4B4;
  font-size : 12px;
  font-weight : bold;
  height :488px;
  overflow : hidden;
  position : relative;
  width : 974px;
}

 .image_reel {
  left : 0;
  position : absolute;
  top : 0;
}

 .image_reel img {
  float : left;
}

 .image_reel ul li {
  display : inline;
}

  #image_reel .caption {
  background-color :#000;
  bottom :0;
  color :#ffffff;
  height :100px;
  position :absolute;
  width :100%;
  z-index :600;
}

    #image_reel .caption .content {
}

    #image_reel .caption .content h3 {
  color :#1DCCEF;
  margin :0;
  padding :0;
}

 /*--Paging Styles--*/
 .paging {
  /*--Assures the paging stays on the top layer--*/
  /*--Hidden by default, will be later shown with jQuery--*/
  bottom : -25px;
  display : none;
  line-height : 40px;
  position : absolute;
  right : -70px;
  text-align : center;
  z-index : 100;
}



.desc {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
	margin-top:275px;
    color: white;
    font-size: 2em;
    padding: 7px;

}

JAVASCRIPT
Code:

$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
    
    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        hideComment();
        
        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500 );
       
        showComment();
    };
    
    //Rotation + Timing Event
    rotateSwitch = function(){        
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
        play = null;
    }, function() {
        rotateSwitch(); //Resume rotation
    });    
    
    showComment = function(){
        // slide toggle effect set to slow you can set it to fast too.
        $(".desc").eq( $('.paging a.active').attr("rel") - 1 ).show(700);
        return true;
    };
    
    showComment(); // Show Comment initially
    
     hideComment = function(){
        $(".desc").stop(true,true).slideUp(500).hide();
     };
    
    //hide comment if you click on it
    $(".desc").click(function(){
        hideComment();
    });
    
    //On Click
    $(".paging a").click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });    
    
});

OK, a friend and I have been working on implementing the javascript slider you see in the header of my website http://www.billboardfamily.com (hover over the facebook icon under the search area).

For some reason, this is causing a lot of the other items on the site to stop functioning all together. Can anyone help me figure out how to fix this?

NOTE: Running Wordpress

Here are some of the problems:

1) http://billboardfamily.com/videos/ The thumbnail videos do not work when you click them
2) http://billboardfamily.com/the-process/ All 4 slides are on the page, but the slider is not working at all.
3) http://billboardfamily.com/contact-us/ The contact forms I have running are not working correctly, and the styling is no longer correct.

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 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.

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';
}

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>

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 />"));