• Hi,

    I am trying to copy the html for a savings calculator on a new site I am creating. The code I am trying to copy is here
    http://www.dryfire.com/savings

    The html I have pulled is;

    <div class="BoxContent">
    			£<span id="CostOfDryFire">740.00</span> for DryFire (ex VAT).
    
    			£<span id="AverageCartridgeCost">4.75</span> for <span id="AverageNumberOfCartridges">25</span> cartridges.
    
    			£<span id="AverageClayCost">5.00</span> for <span id="AverageNumberOfClays">25</span> clays.
    
    			£<span id="CostPerRound">9.75</span> for a round of <span id="AverageNumberOfShots">25</span> clays.
    
    			Number of DryFire targets per day:
    
    			<input id="Shots" type="text">
    			<input id="Calculate" value="Calculate" type="button">
    
    			Equals a total break-even time of... <span id="Saving"></span>
    		</div>

    It shows up except when I hit the ‘calculate’ button nothing appears.

    Can anyone shed some light on what I am missing?

    Thanks from a huge novice!!

    PS I have permission to use this from site owner.

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must also include the javascript that does the calculation. It is found just after the div with id=”MainColContent”:

    <div id="MainColContent">
    <script type="text/javascript">
    Thread Starter ianeire

    (@ianeire)

    Hi vtxyzzy,

    Thanks for that, I am just trying to add this a page on the wordpress site, will I have to add this line in the editor somewhere? When I out it with the html above nothing is happening.

    Apologies for my lack of knowledge here!

    Ian

    You can’t put the javascript directly in a Post or Page.

    One way would be to copy everything from the <script type="text/javascript"> tag through the </script> tag into the proper place in header.php.

    Exactly where is the proper place depends on your theme, but usually just before the </head> tag is good.

    Thread Starter ianeire

    (@ianeire)

    No joy there, I copied this into header.php

    <!-- Third Party Files -->
            <script type="text/javascript" src="/scripts/jquery-1.6.2.min.js"></script>
    		<script type="text/javascript" src="/scripts/jquery-ui-1.8.19.custom.min.js"></script>
    		<link rel="stylesheet" type="text/css" href="/stylesheets/ui-lightness/jquery-ui-1.8.19.custom.css"/>
    		<script src="/scripts/jquery.colorbox-min.js"></script>
    		<link rel="stylesheet" href="/stylesheets/colorbox.css" />
    		<script src="/scripts/jquery.upgradebrowsers.min.js"></script>
    		<link rel="stylesheet" href="/stylesheets/jquery.upgradebrowsers.min.css" />
    
    		<!-- External Files -->
    		<script type="text/javascript" src="/scripts/dryfire.js"></script>
    		<link rel="stylesheet" type="text/css" href="/stylesheets/dryfire.css" />
    		<noscript><link rel="stylesheet" type="text/css" href="/stylesheets/noscript.css" /></noscript>

    Where am I going wrong now?

    Thanks,
    Ian

    That is not the correct script. Look for the div with id=”MainColContent”. The script follows that. The start of it looks like this:

    <script type="text/javascript">
    
    	//
    	var cost_of_dryfire = new Number(740);
    	var number_of_shots_per_round = new Number(25)
    
    	//
    	var average_cartridge_cost = new Number(4.75);
    Thread Starter ianeire

    (@ianeire)

    Nope, still not working for at all. Have pasted the below section in the header.php file

    </div>
    					<div id="MainColContent">
    						<script type="text/javascript">
    
    	//
    	var cost_of_dryfire = new Number(740);
    	var number_of_shots_per_round = new Number(25)
    
    	//
    	var average_cartridge_cost = new Number(4.75);
    	var cost_per_cartridge = average_cartridge_cost/number_of_shots_per_round;
    
    	//
    	var average_clay_cost = new Number(5);
    	var cost_per_clay = average_clay_cost/number_of_shots_per_round;
    
    	//
    	var cost_per_shot = cost_per_cartridge+cost_per_clay
    	var cost_per_round = (cost_per_shot*number_of_shots_per_round)
    
    	$(document).ready
    	(
    		function()
    		{
    			//
    			$('#CostOfDryFire').html(cost_of_dryfire.toFixed(2));
    
    			//
    			$('#AverageNumberOfCartridges').html(number_of_shots_per_round.toString());
    			$('#AverageNumberOfClays').html(number_of_shots_per_round.toString());
    			$('#AverageNumberOfShots').html(number_of_shots_per_round.toString());
    
    			//
    			$('#AverageCartridgeCost').html(average_cartridge_cost.toFixed(2));
    			$('#AverageClayCost').html(average_clay_cost.toFixed(2));
    
    			//
    			$('#CostPerRound').html(cost_per_round.toFixed(2));
    
    			$('#Calculate').click
    			(
    				function()
    				{
    					var number_of_shots_per_day = new Number($('#Shots').val());
    					var number_of_rounds_per_day = number_of_shots_per_day/number_of_shots_per_round
    					var total_cost_per_day = number_of_rounds_per_day*cost_per_round
    					var break_even_time = cost_of_dryfire/total_cost_per_day
    
    					$('#Saving').html(break_even_time.toFixed(0)+" days!");
    				}
    			);
    
    			$('#Shots').keydown
    			(
    				function(e)
    				{
    					//Enter
    					if(e.keyCode == 13)
    					{
    						$('#Calculate').click();
    					}
    				}
    			)
    
    		}
    	)
    
    </script>

    Tried it without `</div>
    <div id=”MainColContent”>`
    too.

    Am I just being a total dumbass??

    Sorry for all the questions!

    Ian

    I really can’t do anything else without seeing the code. A link to your site might help.

    Thread Starter ianeire

    (@ianeire)

    Site is not fully live at the moment, it will be a day or two if thats ok? I really appreciate your help withthis by the way!

    Please put your modified header.php file into a pastebin and post a link to it here.

    Thread Starter ianeire

    (@ianeire)

    Hi,

    I have the site up now if you can have a look (at your leisure of course!!)

    Here’s the offending page;

    If you could tell me what I am doing wrong that would be great thanks!!

    Sorry, I can’t find the problem. I suspect that some other javascript may be missing, but I can’t locate it.

    I think I found the problem. In WP, you can’t use the shorthand $ sign for jQuery.

    Replace all code like this:

    $(document).ready
    
    $('#AverageClayCost').html

    with

    jQuery(document).ready
    
    jQuery('#AverageClayCost').html

    Thread Starter ianeire

    (@ianeire)

    Ah ok, so replace all $ symbols with jQuery in the MainColContent as posted above into the header file? FIngers crossed!!

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Html code for saving calculator’ is closed to new replies.