|
JavaScript - Caclulating Tax Rates Based On Province
Unfortunately JavaScript is not my strong suit but I need to update a script that's currently functioning on a client site. The original script for the form comes from here http://mredkj.com/javascript/orderform.html. I've tried several different methods but not making any progress.
HTML Code: <form id="frmOrder" method="post" action="quote-engine.php">
<fieldset>
<legend>Sawmill</legend>
<table>
<tr>
<td>9.5 H.P Sawmill - Cut 10ft logs</td>
<td>$<span id="txtPrice0">2799</span></td>
<td>
<select name="sel0" id="sel0">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Track Extension</legend>
<table>
<tr>
<td>6 ft Track Extension - Extends Cut Length By 6 ft</td>
<td>Each $<span id="txtPrice1">375</span></td>
<td>
<select name="sel1" id="sel1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Carriage Cover</legend>
<table>
<tr>
<td>Heavy Duty Rubberized Head Cover</td>
<td>$<span id="txtPrice5">100</span></td>
<td>
<select name="sel5" id="sel5">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Blades</legend>
<table>
<tr>
<td>144" x 1.25" x 0.42" Lennox Blade</td>
<td>$<span id="txtPrice6">25</span></td>
<td>
<select name="sel6" id="sel6">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
<tr>
<td>10 of 144" x 1.25" x 0.42" Lennox Blade</td>
<td>$<span id="txtPrice7">225</span></td>
<td>
<select name="sel7" id="sel7">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Shipping</legend>
<table>
<tr>
<td>Pick up - Port Perry, Ontario</td>
<td>$<span id="txtPrice8">0</span></td>
<td><input type="checkbox" name="chk8" id="chk8" /></td>
</tr>
<tr>
<td>Ontario Flat Rate Shipping*</td>
<td>$<span id="txtPrice9">249</span></td>
<td><input type="checkbox" name="chk9" id="chk9" /></td>
</tr>
<tr>
<td>Canada Wide Flat Rate Shipping*</td>
<td>$<span id="txtPrice10">299</span></td>
<td><input type="checkbox" name="chk10" id="chk10" /></td>
</tr>
</table>
</fieldset>
<p>* Residential delivery to most Canadian cities/towns.</p>
<fieldset>
<legend>Total without Taxes</legend>
<table>
<tr>
<td>Total without taxes: </td>
<td> $<input type="text" name="txtTotal" id="txtTotal" size="8" class="total" readonly="readonly"/></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<table>
<tr>
<td><label for="First_Name">Name:</label></td>
<td><input type="text" name="First_Name" id="First_Name" size="50" /></td>
</tr>
<tr>
<td><label for="Address">Address:</label></td>
<td><input type="text" name="Address" id="Address" size="50" /></td>
</tr>
<tr>
<td><label for="City">City:</label></td>
<td><input type="text" name="City" id="City" size="50" /></td>
</tr>
<tr>
<td><label for="Province">Province:</label></td>
<td><select id="Province" name="Province">
<option value="" selected="selected">-- Select --</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NF">Newfoundland</option>
<option value="NT">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon Territory</option>
</select></td>
</tr>
<tr>
<td><label for="Postal_Code">Postal Code:</label></td>
<td><input type="text" name="Postal_Code" id="Postal_Code" size="50" /></td>
</tr>
<tr>
<td><label for="Email">Email:</label></td>
<td><input type="text" name="Email" id="Email" size="50" /></td>
</tr>
<tr>
<td><label for="Phone">Phone Number:</label></td>
<td><input type="text" name="Phone" id="Phone" size="50" /></td>
</tr>
<tr>
<td><label for="Comments">Comments:</label></td>
<td><textarea cols="39" rows="4" name="Comments" id="Comments"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Final Quote</legend>
<table>
<tr>
<td>Total without taxes: </td>
<td> $<input type="text" name="txtTotal2" id="txtTotal2" size="8" class="total" readonly="readonly" /></td>
</tr>
<tr>
<td>Tax: </td>
<td> $<input type="text" name="taxTotal" id="taxTotal" size="8" class="total" readonly="readonly" /></td>
</tr>
<tr>
<td>Total with Taxes: </td>
<td> $<input type="text" name="grandTotal" id="grandTotal" size="8" class="total" readonly="readonly" /></td>
</tr>
</table>
</fieldset>
<ul class="submit">
<li><input type="submit" name="submit" value="Submit" class="submit-button" /></li>
<li><input type="button" name="print" value="Print" onclick="window.print()" class="print-button" /></li>
</ul>
</form>
JavaScript Code: // mredkj.com
// OrderForm.js - v0.4
// v0.4 - 2007-02-01
// v0.3 - 2006-04-09
// v0.2 - 2006-04-08
// v0.1 - 2006-04-06
function OrderForm(prefix, precision, firstChoice) {
this.prefix = prefix ? prefix : '';
// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';
this.TXT_OUT2 = this.prefix + 'txtTotal2';
this.TAX_OUT = this.prefix + 'taxTotal';
this.GRAND_TOTAL_OUT = this.prefix + 'grandTotal';
this.PORT_PERRY_PICKUP = this.prefix + 'chk8';
this.ONTARIO_SHIPPING = this.prefix + 'chk9';
this.CANADA_SHIPPING = this.prefix + 'chk10';
// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';
// precision for the decimal places
// If not set, then no decimal adjustment is made
this.precision = precision ? precision : -1;
// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************
// form
this.frm = document.getElementById(this.FORM_NAME);
// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};
// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};
// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');
// text output
this.txtOut = document.getElementById(this.TXT_OUT);
this.txtOut2 = document.getElementById(this.TXT_OUT2);
// tax output
this.taxOut = document.getElementById(this.TAX_OUT);
// grandTotal output
this.grandTotalOut = document.getElementById(this.GRAND_TOTAL_OUT);
// Port Perry pickup checkbox
this.portPerryCheckbox = document.getElementById(this.PORT_PERRY_PICKUP);
// Ontario shipping checkbox
this.ontarioCheckbox = document.getElementById(this.ONTARIO_SHIPPING);
// Canada shipping checkbox
this.canadaCheckbox = document.getElementById(this.CANADA_SHIPPING);
// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);
// price array
this.prices = new Array();
var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};
this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};
this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};
/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
var taxRate;
if (document.getElementById('Province').options[4] || document.getElementById('Province').options[5] || document.getElementById('Province').options[9]) {
taxRate = 0.13;
}
if (document.getElementById('Province').options[2]) {
taxRate = 0.12;
} if (document.getElementById('Province').options[7]) {
taxRate = 0.15;
} else {
taxRate = 0.05;
}
if (this.precision == -1) {
orderObj.txtOut.value = total;
orderObj.txtOut2.value = total;
orderObj.taxOut.value = total * taxRate;
orderObj.grandTotalOut.value = total * (1 + taxRate);
} else {
orderObj.txtOut.value = total.toFixed(this.precision);
orderObj.txtOut2.value = total.toFixed(this.precision);
orderObj.taxOut.value = (total * taxRate).toFixed(this.precision);
orderObj.grandTotalOut.value = (total * (1.0 + taxRate)).toFixed(this.precision);
}
};
/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};
/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);
/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj[i].id)) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj[i].innerHTML);
}
}
}
};
this.grabPrices(this);
}
I'm setting up the taxrate in the section of the code but the script is not doing the calculation. Code: var taxRate;
if (document.getElementById('Province').options[4] || document.getElementById('Province').options[5] || document.getElementById('Province').options[9]) {
taxRate = 0.13;
}
if (document.getElementById('Province').options[2]) {
taxRate = 0.12;
} if (document.getElementById('Province').options[7]) {
taxRate = 0.15;
} else {
taxRate = 0.05;
}
I suspect I haven't been using the correct method to assign the rate to the variable. Can anyone tell me where I"m going wrong with this? Similar TutorialsFirstly i have to thank Philip M for this code which is great but for what i need, requires a little extra tweaking. Its a price quote generator (package price x number of pages = price) However if the customer has more pages over a set amount (2000) the package price changes. So the formula becomes (package price x pages (upto 2000) = price + number of pages over 2000 x new package price = Total price. Does that make sense? So i can do a flat rate with this code but if anyone has suggestions on how to do the rest? I would be eternaly grateful as my head really hurts. Code: <head>
<script type="text/javascript">
function update(){
var price = document.getElementById("Package").value;
var pages = document.getElementById("pages").value;
var Tprice = (price * pages).toFixed(2) ;
document.getElementById("Totprice").value = Tprice;
document.getElementById("Totprice2").innerHTML = "Your Order Total Is: $" + Tprice
}
</script>
</head>
<body>
choose<select name="Package" id = "Package">
<option value="2">a</option>
<option value="3">b</option>
<option value="4">c</option>
</select>
No. of PAGES <input type = "text" id = "pages" onChange="update()" ><br>
QUOTE <input type = "text" id = "Totprice"> <br><br>
<span id ="Totprice2"></span><br>
</body>
Thanks all Hi, I have a table displaying records from query, now i want to have a small dropdown listbox on the top right corner called "sort by". The list index would be "date modified", "Price(High-low)" and "Price(Low-High)". I want my order by clause in my SQL to change according to the values in the dropdownlistbox. Code: SELECT * FROM Cars ORDER BY date modified How can i pass my selected value from the listbox to my PHP SQL statement? Thanks I have a site where users enter there certain timezome (+1, +4, -8 etc) and i want to display a clock with the local time on their profile page so when people view there profile they can see currently what time it is for them. I currently a have this. Code: function timeclock()
{
var t=setTimeout("startclock()",500);
}
function startclock()
{
var x = new Date();
var hour = x.getHours();
var min = x.getMinutes();
var sec = x.getSeconds();
if (hour<10){hour="0"+hour}
if (min<10){min="0"+min}
if (sec<10){sec="0"+sec}
document.getElementById("clock").innerHTML=hour+":"+min+":"+sec;
timeclock();
}
Is it possible to alter the date dependent on the timezone? Maybe put startclock(timezone) andchange it to new Date(timezone);? Hi, I've just created an image based digital clock following a youtube tutorial, and I understand all of it except one thing. I have created a regular digital clock (a text one), and then split this into an array. So I can manipulate the hours/ mins/ secs with [0],[1] and [2], is this the element that makes my regular text into the images I am using? There must be a correlation between the two, and that's all I can see that would do that for me. Here is the code: Code:
digit_Images = ["d0.jpg","d1.jpg","d2.jpg","d3.jpg","d4.jpg","d5.jpg","d6.jpg","d7.jpg","d8.jpg","d9.jpg",
"d10.jpg","d11.jpg","d12.jpg"]
for (i=0;i<digit_Images.length;i++){
document.write('<img style="display: none;" src="' + digit_Images[i] + '" />');
}
function clock_final(){
//make time object
the_Date = new Date();
current_Time = the_Date.getHours() + ":" + the_Date.getMinutes() + ":" + the_Date.getSeconds();
var time_Parts = current_Time.split(":");
//am or pm
if (time_Parts[1] <=12){
var AM_PM = digit_Images[11];
}
else{
var AM_PM = digit_Images[12];
}
//split down to 12 hour clock by subtracting 12
if (time_Parts[0]>=13){
time_Parts[0] = time_Parts[0] - 12 + "";
}
else if(time_Parts[0] =="0"){
time_Parts[0] = "12";
}
var the_Clock = new Array();
for (var i = 0; i < time_Parts.length; i++) {
if (time_Parts[i].length == 1) {
the_Clock[i] = '<img src="' + digit_Images[0] + '" />' + '<img src="' + digit_Images[parseInt(time_Parts[i])] + '" />';
} else if (time_Parts[i].length ==2) {
the_Clock[i] = '<img src="' + digit_Images[parseInt(time_Parts[i].charAt(0))] + '" />' + '<img src="' + digit_Images[parseInt(time_Parts[i].charAt(1))] + '" />';
}
}
var clockHTMLInput = the_Clock[0] + '<img src="' + digit_Images[10] + '" />' + the_Clock[1] + '<img src="' + digit_Images[10] + '" />' + the_Clock[2] + '<img src="' +AM_PM + '" />';
document.getElementById('clock').innerHTML = clockHTMLInput;
}
Hope that's not too jumbled. Thanks. Can anyone tell me how I can check to see if a checkbox has actually been checked or not? The code I need to use this in basically gets data from a form which has alot of dropdowns and a checkbox in it. The function builds a query based on the values it finds in these variables. I was trying to check to see if the checkbox was selected and if so assign a value to another var but I can't seem to get it to work. Any ideas? The checkbox is called pics. if (pics.checked) { var photos = "Yes"; } else { var photos = "No"; } if (pics.checked == 1) { var photos = "Yes"; } else { var photos = "No"; } Any help much appreciated. I am trying to calculate age based on the date of birth input into a text field. the date field should allow users to enter a one or two digit month, one or two digit date and a two or four digit year. Users should be able to enter any of the following date formats: 11-2-10, 1-25-2010, or 01/25/2010. On some days it works and others it wont, like 11-1-91 returns that the user is under 18. Code: function checkAge(){
var stDate = document.getElementById("birth").value;
var dayPartToDate = parseInt(stDate.substring(0,2),10);
var monPartToDate = parseInt(stDate.substring(3,5),10);
var yearPartToDate = parseInt(stDate.substring(6,10),10);
var dtTo = new Date(yearPartToDate, monPartToDate-1, dayPartToDate);
var mydate = new Date();
mydate.setDate(mydate.getDate());
var bday = dtTo - mydate
if (bday < 18){
window.alert("You must be 18 to rent equipment.");
document.getElementById("birth").value = "";
}
}
I have a form that has a checkbox that I want to base a hidden value on. If the checkbox is checked I want the hidden value to be 25. If not checked, I want the value to be 0. I am working with code someone else has written and I am fairly new to javascript and cannot get it to work. Here is the code on the form: <code> <td><input type="checkbox" name="binderdiscount" value="Yes" <?php /*?><?php if ($pgdata['binderdiscount']=='Yes') echo 'checked'; ?><?php */?> />I do not need a book;</td> <input type="hidden" name="binder_discount" value="0"> </code> and then in a separate page is all the javascript to process the form. I have this, but it is not working. <code> if(getControlValue(form.binderdiscount)==="Yes") {form.binder_discount.value=25;} </code> As I said, i am really new to javascript and I am working with someone else's code. All the research I have done has just confused me more about why it is not working. Any help would be greatly appreciated. Can anyone help me out with a script that can redirect based on IP address? I want all of my computers on my LAN, 192.168.1.1-255 to be redirected to a specific page. IE When I type in test.homeip.com it goes to my web server and reads the index.html file. If the IP is in the 192.168.1.0 range it will redirect to 192.168.1.10:80 and if its any other IP it will send it to 192.168.1.11:80 Thanks! Probably a simple question but it's got me stumped, this post on codingforums didn't really help me either. I have 5 divs, and I want to have each of them visible seperately on a certain weekday. In pseudo-code: Code: if today=monday, show div "bla1" if today=tuesday, show div "bla2" etc. "bla2" should not be visible if it's monday, etc. I've struggled with trying to bend existing scripts to this purpose but I can't get it working. Please help! First off, I'd like to say that I do not know much javascript. I am building a rather intensive website for tutorial purposes, and so far it has required me to become quite familiar with html5, css, php, and mysql. However, I've avoided javascript like the plague due to how different it seems from the rest. Lets just say, I'm confused. I've scoured the net looking for a similar tutorial on how to create a pop-up window onclick for a link. This is what I currently have it doing: Firstly, I query and display the DB, referencing images based on an incremental variable. I really want to make it all automatic...in the sense, that when I update the database with a new "Structure" it will automatically apply itself to the page without me having to edit html/css/js/php/etc. It all seems to be working fine, except when I click on the second listing. It refers to the same div (Town Center), because, I assume, the divs are identically labeled, and it refers to the first. Here is my code: This is my Callstructures.php file. Code: <?php
$query = "SELECT str_name, str_imageloc, str_infoloc FROM structures";
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());
$i = 0;
if (mysql_num_rows($result) > 0) {
while(list($str_name, $str_imageloc, $str_infoloc) = mysql_fetch_row($result)) {
echo "<li>";
echo "<a href='#' onClick='javascript: loadPopup()';>";
echo "<img src='$str_imageloc' title='$str_name' longdesc='$str_infoloc' alt='stralt text' class='image$i'>";
echo "</a>";
echo "</li>";
echo "<div id='popupContact'>";
include ($str_infoloc);
echo "</div>";
$i++;
}
}
?>
This is my main page: Structures.php Code: <body> <div id =allstr> <ul> <?php include 'gamephp/callstructures.php'; ?> </ul> <div id="backgroundPopup"></div> </div> </body> </div> </html> And here is the JavaScript I am using, popup.js: Code: /***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
centerPopup();
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
And the CSS for the popup: Code: /* pop up css */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
Should I keep this code? Is there anyway to make it work? My thought process is to change "callstructures" to include a variable ($i is already there) that creates a bunch of unique div ids Code: echo "<div id='popupContact$i'>"; Then in the JS, somehow alter it so it recognizes the change. If not, are there any tips, or possible links to tutorials and info on how I can figure this out. With much appreciation, Thanks! I have a list of checkboxes, "group1","group2",etc. That have values of comma separated strings. such as 1,2,3,4,5. when a group is checked, I want all "individual" checkboxes to check if their value is found in that group. Group1 value="1,2,3" Group2 value="4,5,6" Group3 value="7,8,9" itemarray[] value="1" itemarray[] value="2" itemarray[] value="3" itemarray[] value="4" itemarray[] value="5" itemarray[] value="6" itemarray[] value="7" itemarray[] value="8" Found a thread that partially addressed this issue, but not for the comma separated string. See http://www.codingforums.com/showthread.php?t=115705 I know php, but have a hard time with javascript....I appreciate the help Thanks in Advance!! I would like to display one of two different <div> tags based on a radio button. In essence, this would be the "basic" and "advanced" options as the user end. Can this be done easily or will it be complex? Anyone ever did this before? domain1.com will have a paragraph of one currency price domain2.com will have the same paragraph with a different currency price. Hi guys. I am kind of new to javascript, and was hoping that someone here could help out on a problem I have been having. What I am trying to do is to make a page which will redirect to three diffrent sites, based on date. I want it to change to diffrent sites during the time before summer to summer, the time before xmas till xmas and from before easter till easter. A bit more spesific this would be: From 29. march --> 22. july (summer) From 22. august --> 24. december (xmas) From 3. january --> 22. march (easter) Could you help me out? I have tried lots of diffrent ways to do this with javascripts if...else statements, but I havent yet found a way to make it work properly. Really thankful for answers! Curious about the following issue. I currently have a dynamic drop-down based on the value of each option.. If selection in top drop-down is B it will show all options with a B contained in the second/resulting drop-down. Now - I also want to evaluate the options by having the script check for a few keywords.. Example - have it evaluate the drop-down on page load for options with text containing 'blah123' (ex. <option value="0323G">Qwerty - blah123</option>). And if any of the options have that text the script will generate an additional drop-down menu allowing you to select blah123 or other specified text. Say another thing I'd like to search each text string for is 'abump'. If there is 'blah123' and 'abump' contained within the drop-down, a third drop-down menu will be generated (as said before) with only blah123 and abump as options. Whichever of these is selected will narrow down the options available in the final drop-down menu. If any clarification is needed I would be more than happy to make this more clear. Any ideas? Hi there, This is my request. I don't know if it CAN be done via JS, but it just seemed likely it could: Basically, I have a table echoed out by PHP: PHP Code: while($row = mysql_fetch_array($result)){ echo "<tr>"; echo "<td>".$row['Name']."</td>"; echo "<td>".$row['gig_count']."</td>"; echo "<td>" .$row['dob']."</td>"; echo "<td>".$row['Mail']."</td>"; echo "<td><a href=\"/records/add_gigs.php?id=".$row['Member_ID']."&?name=".$row['Name']."\"><button class=\"submit\">Add new Gig</button></a></td>"; echo "<td><a href=\"/certsend.php?name=".$row['Name']."&?mail=".$row['Mail']."\"><button class=\"submit\">Make Certificate!</button></a></td>"; echo "</tr>"; And if the value of gig_count is less than 20, then the 'make certificate' button will be disabled. Once gig_count is 20 or more, then it is re-enabled for that particular row. Any code towards this is greatly appreciated. Ok so let's say I have this dropdown with a list of these items: PALCO TRIBUNA ORO And in a button on the page I want to send it one of those names, let's say I send it ORO, and through Javascript select that in the dropdown list. How is this done? Do I have to iterate through everything, and how? Thanks for any help in the subject. The idea behind the code is simple: when a user scrolls their mouse/trackpad/etc down, the script immediately scrolls the page to a specified div. However, I can't get if (event.wheelDelta < 0) to work. Help? Resolved Alright, I've managed to make the code work. Try it out in your browser! Now, on to Part II, to make the transitions smoother (especially in Firefox, which is very jumpy) and to add keyboard (arrows) functionality. Code: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Scroll</title>
<script type="text/javascript">
window.onmousewheel=document.onmousewheel=wheel;
window.addEventListener('DOMMouseScroll',wheel,false);
var delta;
function wheel(event)
{
if(event.wheelDelta){
delta=event.wheelDelta;
}
else if(event.detail){
delta=-event.detail;
}
}
function one()
{
if(delta < 0)
document.getElementById('section2').scrollIntoView();
}
function two()
{
if(delta < 0)
document.getElementById('section3').scrollIntoView();
else if(delta > 0)
document.getElementById('section1').scrollIntoView();
}
function three()
{
if(delta > 0)
document.getElementById('section2').scrollIntoView();
}
</script>
<style>
html,body {
margin: 0px;
height: 100%;
}
#section1 {
position: static;
background: #D9D2D6;
height: 100%;
width: 100%;
}
#section2 {
position: static;
background: #9F755E;
height: 100%;
width: 100%;
}
#section3 {
position: static;
background: #811C1E;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="section1" onwheel="one();"></div>
<div id="section2" onwheel="two();"></div>
<div id="section3" onwheel="three();"></div>
</body>
</html>
Hi, I'm trying to make something along the lines of a dynamic animated GIF. In other words, I'm trying to write a script to flip through images based on the current time. Before folks start suggesting other ways to do this, know that this is just a proof of concept. The reason for doing it this way is so that I can eventually control the animation either in response to interaction or external data queries (I'm looking into that js weather api). Code: int startTime = getTime();
float speed = 1.0;
image frames = new Array();
//load frames into array
for(int i = 0; i < 12; i++){
frames[i] = new Image(640,480);
frames[i].src = "frames/" + i + ".JPG";
}
//playback
int i = 0;
while(i < frames.length){
if( ((getTime()-startTime) % (speed*33)) == 0){
document.currentFrame.src = frames[i].src;
i++;
}
}
Thanks, Zach Hey everyone, I have a simple html form that asks a user to select a state from a drop down list. Later, in the same form, there's a question that needs to display an image of the state they previously selected from the drop down menu. How can I accomplish this using javaScript?
|
|||||||