Bacchas at 15:02, 6 January 2017

2017-01-06T15:02:07Z

← Older revision		Revision as of 15:02, 6 January 2017
Line 12:		Line 12:

	==[[animate\| Using Animate Function]]==		==[[animate\| Using Animate Function]]==

			==[[widgets\| Dialog, Date Picker etc]]==

	----		----
	[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]		[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]

Bacchas at 23:07, 26 December 2016

2016-12-26T23:07:49Z

← Older revision		Revision as of 23:07, 26 December 2016
Line 10:		Line 10:

	==[[btndisplay\| Toggle Certain Products]]==		==[[btndisplay\| Toggle Certain Products]]==

			==[[animate\| Using Animate Function]]==

	----		----
	[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]		[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]

Bacchas at 22:53, 26 December 2016

2016-12-26T22:53:12Z

← Older revision		Revision as of 22:53, 26 December 2016
Line 8:		Line 8:

	==[[tooltip\| Toggle a Tooltip]]==		==[[tooltip\| Toggle a Tooltip]]==

			==[[btndisplay\| Toggle Certain Products]]==

	----		----
	[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]		[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]

Bacchas at 22:41, 26 December 2016

2016-12-26T22:41:16Z

← Older revision		Revision as of 22:41, 26 December 2016
Line 6:		Line 6:

	==[[plugins \| Plugins]]==		==[[plugins \| Plugins]]==

			==[[tooltip\| Toggle a Tooltip]]==

	----		----
	[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]		[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]

Bacchas at 20:19, 26 December 2016

2016-12-26T20:19:13Z

← Older revision		Revision as of 20:19, 26 December 2016
Line 4:		Line 4:

	==[[Forms\| Working with forms]]==		==[[Forms\| Working with forms]]==

			==[[plugins \| Plugins]]==

	----		----
	[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]		[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]

Bacchas at 17:25, 26 December 2016

2016-12-26T17:25:35Z

← Older revision		Revision as of 17:25, 26 December 2016
Line 2:		Line 2:

	==[[Selecting Elements\| Selecting Dom Elements]]==		==[[Selecting Elements\| Selecting Dom Elements]]==

			==[[Forms\| Working with forms]]==

	----		----
	[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]		[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]

Bacchas at 23:24, 24 December 2016

2016-12-24T23:24:42Z

← Older revision		Revision as of 23:24, 24 December 2016
Line 1:		Line 1:
	==[[jquery load\| Load Jquery after the dom is loaded]] ==		==[[jquery load\| Load Jquery after the dom is loaded]] ==

			==[[Selecting Elements\| Selecting Dom Elements]]==

	----		----
	[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]		[[#top\|Back To Top]]-[[Programming\|Category]]-[[Main_Page\| Home]]

Bacchas: Replaced content with "== Load Jquery after the dom is loaded == ---- Back To Top-Category- Home"

2016-12-24T23:16:51Z

Replaced content with "== Load Jquery after the dom is loaded == ---- Back To Top-Category- Home"

Show changes

Bacchas: Created page with "==Working With Forms ==

 Get element by id document.getElementById('idname').value Select Boxes document.getElementById('idname').value Radio Buttons Loop throught button..."

2016-10-25T19:19:56Z

Created page with "==Working With Forms == <pre> Get element by id document.getElementById('idname').value Select Boxes document.getElementById('idname').value Radio Buttons Loop throught button..."

New page

==Working With Forms ==
<pre>
Get element by id
document.getElementById('idname').value
Select Boxes
document.getElementById('idname').value
Radio Buttons
Loop throught buttons and see which one is checked
------------------------------------------
var methods = document.getElementById('form_name').nameProperty
for(var i=0;i<methods.length; i++){
if(methods[i].checked==true)
alert(methods[i].value)
}
------------------------------------------------
Check Boxes - the check property return boolean

document.getElementById('idname').checked
Add event listner to submit
-------------------------------------------
************************HTML ********
<form class="cart" id="cart-oil">
<div class="item">
<h2>Extra Virgin, Cold-Pressed</h2>
<p>You've never tasted olive oil this delicious.</p>

<div class="info">
<span>Price: $10/bottle</span>
</div>

<div class="order">
<label for="txt-q-extra">Quantity desired:</label>
<input type="text" id="txt-q-extra" size="3" placeholder="0">
</div>
</div>

<div class="item">
<h2>Cold-Pressed</h2>
<p>Ideal for cooking.</p>

<div class="info">
<span>Price: $8/bottle</span>
</div>

<div class="order">
<label for="txt-q-cold">Quantity desired:</label>
<input type="text" id="txt-q-cold" size="3" placeholder="0">
</div>
</div>

<div class="item">
<h2>Garlic-infused</h2>
<p>If you love garlic, this is the one for you.</p>

<div class="info">
<span>Price: $10/bottle</span>
</div>

<div class="order">
<label for="txt-q-garlic">Quantity desired:</label>
<input type="text" id="txt-q-garlic" size="3" placeholder="0">
</div>
</div>

<div class="item">
<h2>Lemon-infused</h2>
<p>If you love Lemon, this is the one for you.</p>

<div class="info">
<span>Price: $12/bottle</span>
</div>

<div class="order">
<label for="txt-q-lemon">Quantity desired:</label>
<input type="text" id="txt-q-lemon" size="3" placeholder="0">
</div>
</div>

<div id="summary">
<h2>Estimate Order</h2>
<div class="group state">
<label for="s-state">State:</label>
<select id="s-state">
<option value="">- select -</option>
<option value="CA">California (7.5% tax)</option>
<option value="IL">Illinois</option>
<option value="NH">New Hampshire</option>
<option value="PA">Pennsylvania</option>
<option value="WA">Washington</option>
</select>
</div>

<div class="group method">
<label for="r-method-pickup">Shipping Method:</label><br>
<input type="radio" value="pickup" name="r_method" id="r-method-pickup" checked> <label for="r-method-pickup">Pickup (free)</label><br>

<input type="radio" value="usps" name="r_method" id="r-method-usps"> <label for="r-method-usps">US Mail ($2/bottle)</label><br>

<input type="radio" value="ups" name="r_method" id="r-method-ups"> <label for="r-method-ups">UPS ($3/bottle)</label>
</div>

<div class="group special">
<label for="c-special-gift">Special:</label><br>
<input type="checkbox" value="YES" id="c-special-gift"> <label for="c-special-gift">This is a gift</label><br>

<input type="checkbox" value="YES" id="c-special-gold"> <label for="c-special-gold">Use gold-flecked bottles</label><br>

<input type="checkbox" value="YES" id="c-special-cork"> <label for="c-special-cork">Use plastic caps instead of cork</label>
</div>

<div class="group calc">
<p>
<label for="btn-estimate">Click to estimate:</label>
<input type="submit" value="Estimate Total" id="btn-estimate">
<input type="text" id="txt-estimate" placeholder="$0.00">
</p>

<div id="results"></div>
</div>
</div>

</form>

**************************************
// this listens for the submit button then run the estimate function
document.getElementById('cart-oil').addEventListener('submit', estimateTotal);

function estimateTotal(event){
event.preventDefault();
if (document.getElementById('s-state').value=='') {
alert("please choose");
document.getElementById('s-state').focus();

} //end if

var btlCold = parseInt(document.getElementById('txt-q-cold').value) || 0;
var btlExtra = parseInt(document.getElementById('txt-q-extra').value) || 0;
var btlGarlic = parseInt(document.getElementById('txt-q-garlic').value) || 0;
var btlLemon = parseInt(document.getElementById('txt-q-lemon').value) || 0;
var state = document.getElementById('s-state').value;

var methods = document.getElementById('cart-oil').r_method;
var shippingMethod = document.getElementById('r_method');

for (var i = 0; i < methods.length; i++) {
if (methods[i].checked==true) {
shippingMethod = methods[i].value;

} // end if

} // end for
var taxFactor = 1;
if (state=='CA') {
taxFactor = 1.075;
}else if(state=='WA'){
taxFactor =1.065;

}else{
taxFactor = 1;
}

//calculate shipping values from a drop down list
var shippingCostPer = 0;

switch(shippingMethod){
case 'pickup':
shippingCostPer = 0;
break;
case 'usps':
shippingCostPer = 2;
break;
case 'ups':
shippingCostPer = 3;
break;
default:
shippingCostPer = 0;
break;
}
var totalBottles = btlExtra + btlCold + btlGarlic + btlLemon;
var shippingCost = totalBottles * shippingCostPer;
var subTotal = ((btlExtra * 10) + (btlCold * 8) + (btlGarlic * 10) + (btlLemon * 12)) * taxFactor;

var estimate = "$"+(subTotal + shippingCost).toFixed(2);

document.getElementById('txt-estimate').value = estimate;
// results is a empty div with id='results'

document.getElementById('results').innerHTML = 'Total Bottles: ' + totalBottles + '<br>';
document.getElementById('results').innerHTML += 'Total Shipping: $' +shippingCost.toFixed(2)+'<br>';
document.getElementById('results').innerHTML += 'Tax: $'+ ((taxFactor - 1)*100 ).toFixed(2)+ '%';
</pre>
== Javascript add google map==
<pre>
<div id="map">

</div>

<h2>Customer Service</h2>

<p> </p>
</div>
<div id="footer"><a href="index.html">home</a> | <a href="about.html">about</a> | <a href="process.html">process</a> | <a href="shop.html">shop</a> | contact</div>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEYFROMGOOGLE&callback=initMap">
</script>
<script>
'use strict';

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat:26.369285, lng:-81.756904},
zoom: 13
});
}

</script
</pre>

== Java Script Escape Characters==
<pre>

\' single quote
\" Double quote
\& ampersand
\\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed
</pre>

==Java Script - Rounding Numbers ==
<pre>
**** Round a Number

In some situations, for example when you want to display a number, you may want to round it to a certain number of decimal places. The Java Script Math object provides three different methods for rounding numbers.

Math.round

The Math.round method produces the result as we learned it in grammar school. If the decimal portion of the number is less than .5, it rounds down to the next lower integer. If the decimal portion of the number is greater than .5, it rounds up to next higher integer.

The statement Math.round(4.4) returns the value 4.
The statement Math.round(4.5) returns the value 5.

********** Math.floor

The Math.floor method simply drops the decimal part of the number, this causes it to always return the next integer less than or equal to the original value.

The statement Math.floor(4.4) returns the value 4.
The statement Math.floor(4.4) returns the value 4.

- When would you want to round down? When calculating sales charges you should always round down to the nearest penny so that the benefit of rounding goes to the customer.

************ Math.ceil

If the Math.ceil method finds any decimal portion of a number greater zero, it returns the next integer higher than or equal to value.

The statement Math.ceil(4.4) returns the value 5.
The statement Math.ceil(4.4) returns the value 5.

- When would you want to round up? When calculating wages paid to employees or interest earned by investors you should always round up to the nearest penny so that the benefit of rounding goes to the employee or investor.

********** Rounding a Number to n Decimal Places

If you were to use the Math.PI method to retreive the value pf pi, it might return a number such as 3.141592653589793. This is a combersome string of digits to deal with. You might want to round this value to 5 digits to the right of the decimal point. The line below shows how to use the Math.round method to round pi to 5 digits to the right of the decimal point.

var n = Math.round(Math.PI * 100000) / 100000;

Of course, you can round other numbers besides pi to any number of digits to the right of the decimal point. The number of zeros in the multiplier and divisor determines the number of digits to the right of the decimal point. The example below rounds the number 34.82765 to 2 digits to the right of the decimal point.

var m = 34.82765;
var n = Math.round(m * 100) / 100;

when you want to round a number a certain number of decimal places, choose the apropriate Java Script Math object method (round, ceil, or floor) for the situation.
</pre>

----
[[#top|Back To Top]]-[[Programming|Category]]-[[Main_Page| Home]]

JQuery - Revision history