|
JavaScript - Adding Tax To An Invoice And Performing A Bind
Good day all:
I have an editable invoice that I have added a sales tax option with a js function doMath(). Prior to my modification with the sales tax option all worked well. the invoice which code is the following: Code: <textarea id="address" rows="6" cols="38" disabled="true">Website:
Email:
TaxID:
</textarea >
<div id="vehicleid"><label><strong><u>Vehicle Information</u></strong></label><p>Year: <?php echo $edit_caryear?></p><p>Type: <?php echo $dhtmlgoodies_categoryupdate?></p><p>Make: <?php echo $dhtmlgoodies_subcategoryupdate?></p><p>ClientID# <?php echo $edit_clientID?></p><p>Current Mileage <?php echo $edit_mileage?></p></div>
<!--</div>-->
<!--<div id="logo">
<div id="logoctr">
<a href="javascript:;" id="change-logo" title="Change logo">Change Logo</a>
<a href="javascript:;" id="save-logo" title="Save changes">Save</a>
|
<a href="javascript:;" id="delete-logo" title="Delete logo">Delete Logo</a>
<a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancel</a>
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/logo.png" alt="logo" width="280" height="33" />
</div>-->
</div>
<div style="clear:both"></div>
<br>
<div id="customer">
<?php echo $edit_firstname ?> <?php echo $edit_lastname?><p><?php echo $edit_address?></p><p><?php echo $edit_city?>, <?php echo $edit_state?>, <?php echo $edit_zipcode?></p>
</div>
<div id=invoicehead>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea style="background: transparent;" name="invoicenum" id="invoicenun" disabled="true"><?php
srand(time());
$random = (rand()%1000000);
print("$random");
?></textarea></td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td><textarea name="date" id="date">December 15, 2009</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div name="due" class="due">$0.00</div></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr">
<!--<label for=\"dhtmlgoodies_category\">Make:</label>-->
<?php echo $edit_servicearea?><br>
<!--<SELECT NAME="edit_servicearea">
<OPTION>Select One
<OPTION>Air Intake
<OPTION>Brake
<OPTION>Clutch
<OPTION>Cooling System
<OPTION>Driveshaft & Axle
<OPTION>Engine Mechanical
<OPTION>Exhaust
<OPTION>Steering
<OPTION>Suspension
<OPTION>Transmission
<OPTION>Other
</SELECT>-->
<a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description">
<textarea name="servicedesc" cols="255" rows="20"><?php echo str_replace('<br/>', "\n", "$inputbox");?></textarea></td>
<td><textarea name="cost" class="cost">$0.00</textarea></td>
<td><textarea name="qty" class="qty">1</textarea></td>
<td><span name="price" class="price">$0.00</span></td>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr">
<textarea name="Labor rate" cols="20" rows="3">Labor</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description" wrap=virtual><textarea>Labor rate for the performance of work --excluding cost for parts.</textarea></td>
<td><textarea class="cost">$75.00</textarea></td>
<td><textarea class="qty" rows="2" cols="10">0</textarea></td>
<td><span class="price">$0.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="tax-line" style="text-align: left" valign="top">INCLUDE TAX? <input type = "checkbox" id = "taxbox" onclick = "doMath()"><br>DC
5.576%</td>
<td class="total-value"><textarea class="tax" id="tax" >$0.00</textarea></td> </tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">$0.00</div></td>
</tr>
</table>
</div>
<!--<div id="terms">
<h5>Terms</h5>
<textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
</div>-->
</div>
<div>
<SCRIPT LANGUAGE="JavaScript">
document.write('<form><input type=button value="Refresh" onClick="history.go()"></form>')
</script>
</div><br>
<div id="option">
<input type="button" id="button" value="Return to Main Menu" onclick="window.location='/andy/addentry.php' " />
<input type="hidden" name="servicedesc" value="<?php echo $_POST['servicedesc']; ?>">
<br>
<p>
<! I added this button, so that it returns us to the main Menu.>
<INPUT TYPE="button" onClick="window.print()" value="Print" /><br>
</p>
<p><! The above button Clears all the Field's contents ><input type="submit" name="submit" value="Save Changes">
</div>
</form>
the section of the code higlighted in red is where my problem arises. To achieve the desired results(at least so that I thought), I included the following fuction in my js fuction file which is as follows: Code: function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("$","");
if (!isNaN(price)) total += Number(price);
});
total =roundNumber(total,2);
$('#subtotal').html("$"+total);
$('#total').html("$"+total);
//$('#tax').html("$"+total);
update_balance();
}
var taxRate = .0575;
function doMath(){
//var subtotal = 0.00;//$('.price').each(function(i);
var subtotal = ('#subtotal');//.html("$"+total);
if (document.getElementById("taxbox").checked) {
tax = subtotal* taxRate; //DC 5.576%
tax = roundNumber(tax,2);//the 2 represent the number of digits to round numbers to after decimal point
//tx = " Incl. 5.576%";
}
document.getElementById("tax").value = "$" +tax;
} function update_balance() {
var due = $("#total").html().replace("$","") - $("#paid").val().replace("$","");
due = roundNumber(due,2);
$('.due').html("$"+due);
}
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("$","") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("$"+price);
update_total();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
$(document).ready(function() {
$('input').click(function(){
$(this).select();
});
$("#paid").blur(update_balance);
$("#addrow").click(function(){
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><SELECT NAME="edit_servicearea"><option>Select One<option>Air Intake<option>Brakes<option>Clutch<option>Cooling System<option>Driveshaft & Axle<option>Engine Mechanical<option>Exhaust<option>Steering<option>Suspension<option>Transmission<option>Other</select><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea>Description</textarea></td><td><textarea class="cost">$0</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">$0</span></td></tr>');
if ($(".delete").length > 0) $(".delete").show();
bind();
});
$(".tax").blur(update_total);//binding tax
//bind();
bind();
$(".delete").live('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
$("#cancel-logo").click(function(){
$("#logo").removeClass('edit');
});
$("#delete-logo").click(function(){
$("#logo").remove();
});
$("#change-logo").click(function(){
$("#logo").addClass('edit');
$("#imageloc").val($("#image").attr('src'));
$("#image").select();
});
$("#save-logo").click(function(){
$("#image").attr('src',$("#imageloc").val());
$("#logo").removeClass('edit');
});
$("#date").val(print_today());
});
Again, here my sales tax is highlighted in red. My problem specifically is that I'm unable to: 1.) get the sales tax rate to calculate based on the value of the subtotal, and 2.) on selection for including taxes, to bind the sale tax amount to the total. I trust someone can provide some guidance! Mossa Similar TutorialsHi, I'm trying to create a Invoice form with javascript. Basically, my invoice form should have the field item, cost, quantity and product total. It shd have a function to allow the user to add rows if they want more than one item. In the end, there should be a sub total. I am able to use javascript to calc the total of each product, but not all products(Grand total). I am also unable to add rows. Can anyone help me? Thanks! This is what I have so far: <? mysql_connect("", "", ""); mysql_select_db(invoice); session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript"> function calcProdTotal(){ var total; var amount = parseInt(document.invoiceForm.qty.value); total = (parseFloat(document.invoiceForm.price.value) * amount); document.invoiceForm.Prodtotal.value = round_decimals(total, 2); } function round_decimals(original_number, decimals) { var result1 = original_number * Math.pow(10, decimals) var result2 = Math.round(result1) var result3 = result2 / Math.pow(10, decimals) return pad_with_zeros(result3, decimals) } function pad_with_zeros(rounded_value, decimal_places) { // Convert the number to a string var value_string = rounded_value.toString() // Locate the decimal point var decimal_location = value_string.indexOf(".") // Is there a decimal point? if (decimal_location == -1) { // If no, then all decimal places will be padded with 0s decimal_part_length = 0 // If decimal_places is greater than zero, tack on a decimal point value_string += decimal_places > 0 ? "." : "" } else { // If yes, then only the extra decimal places will be padded with 0s decimal_part_length = value_string.length - decimal_location - 1 } // Calculate the number of decimal places that need to be padded with 0s var pad_total = decimal_places - decimal_part_length if (pad_total > 0) { // Pad the string with 0s for (var counter = 1; counter <= pad_total; counter++) value_string += "0" } return value_string } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Invoice</title> <style type="text/css" media="screen"> @import url("css/layout.css"); .style1 { font-size: 14px; font-weight: bold; } .style2 {font-size: 14px} </style> </head> <body> <? include("header.php"); ?> <div class="find_more"> <p>Create new Invoice</p> </div> <div class="container_row"> <div style="font-family:arial; font-size : 12pt; padding:20px 0 0 20px"> <? $sqlstmt = "SELECT * From Client"; $result = mysql_query($sqlstmt); $options= ""; while ($row=mysql_fetch_array($result)) { $ClientID = $row["Client_ID"]; $orgName = $row["Org_Name"]; $options.="<option value = \"$ClientID\">".$orgName."</option>"; } $sqlstmt2 = "SELECT * From Item"; $result2 = mysql_query($sqlstmt2); $options2= ""; while ($row=mysql_fetch_array($result2)) { $ItemID = $row["Item_ID"]; $itemName = $row["Item_Name"]; $options2.="<option value = \"$ItemID\">".$itemName."</option>"; } ?> <form name="invoiceForm" method="post" action=""> <p><strong>TO:</strong> <select name ="Client"> </br></br></br> <option value = ""> --Select a Client-- <?= $options ?></option> </select></p> <table> <table border='0' cellpadding='2' cellspacing='2' width='600' > <tr bgcolor='#CCCCFF' align='centre' valign='centre' > <th>Attention</th> <th>From</th> <th colspan="2">Payment terms</th> </tr> <tr align='centre' valign='centre'> <td><input type="text" name = "contact"/></td> <td><input type="text" name = "sender"/></td> <td colspan="2"><input type="text" name = "paymentTerms"/></td> </tr> <tr bgcolor='#CCCCFF' align='centre' valign='centre' > <th>Item Name</th> <th>Cost ($)</th> <th>Quantity</th> <th>Total</th> </tr> <tr align='centre' valign='centre'> <td><select name ="ItemName"> <option value = ""> --Select a Item-- <?= $options2 ?></option> </select> </td> <td><input name="price" type="text" id="price"></td> <td><input type="text" size="5" name="qty" onChange="calcProdTotal()"></td> <td><input type="text" name="Prodtotal" onBlur="parseelement(this)"></td> </tr> <tr> <th colspan="3" align='right'>GST:</th> <td><input type="text" value="7" name = "gst"/>%</td> </tr> <tr> <th colspan="3" align='right'>Sub Total:</th> <td><input type="text" name = "Subtotal"/></td> </tr> <tr> <th colspan="3" align='right'>Grand Total:</th> <td><input type="text" name = "Grandtotal"/></td> </tr> </table> </form> <br /> <? include("footer.php"); ?> </body> </html> This is a homework assignment I am trying to work on. Simple put my goal is to be able to click a "generate payslip" button and it should pop up "(firstname)(lastname), you will pay (var1*0.2) in federal taxes and (var2*0.1) in state taxes. Then i will add a reset button to the fields. I am NOT asking you to do this for me, i just need some help on what im doing wrong seeing as my teacher refuses to be of any help. Here is what i got.. dont laugh. After literally spending hours on the computer trying to find help codes I took out the bulk of trash i had in there because it never worked, but at one point i had something like this var1 = num1 var2 = num2 var3 = num3 var answer= num3*0.2 var answer2= num3*0.1 Then i tried to include that in my alert box and even tweaked it over and over and either completely eliminated the alert box itself or include all the text in my equation. Either way, if someone can enlighten me on how to properfly perform a calculation in an alert box i would be ecstatic. <HTML> <HEAD> <center><b> Here is a pay slip generator that will determine your net annual salary. Simply type in your first and last name along with gross salary and hit calculate. Doing this will let you know how much you will end up paying in both Federal and State taxes. </center></b> <form action="" method="post" name="GPS"> <p> Enter your First Name: <input name="num1" type="text" id="num1" size="10" maxlength="10"> </p> <p> Enter your Last Name: <input name="num2" type="text" id="num2" size="10" maxlength="10"> </p> <p> Enter your gross salary: <input name="num3" type="#" id="num3" size="10" maxlength="10"> </p> Click this button to calulate your annual net pay! <script type="text/javascript"> function calculate() { alert("You type something"); } </script> <input type="button" onclick="calculate()" value="Generate Pay Slip" /> </FORM> </body> </html> </script> Hello, I am using BigInt.js javascript package for performing arithmetic operations on biginteger numbers. Following are some of the interfaces provided by this plugin: // Interfaces: // x = new BigInt("1234567890123456789012345678901234567890"); // y = new BigInt("0x123456789abcdef0123456789abcdef0"); // z = x.clone(); // z = bigint_uminus(x); // z = bigint_plus(x, y); // z = bigint_minus(x, y); // z = bigint_mul(x, y); // z = bigint_div(x, y); // z = bigint_mod(x, y); // cmp = bigint_cmp(x, y); /* return -1, 0, or 1 */ // num = bigint_number(x); /* convert normal number (may be floating) */ // From the above interfaces , I just need to use bigint_plus and bigint_minus functions for my code. But bigint_minus is not returning the proper subtraction for two big integers. Attached is the BigInt.txt file , before using please rename the file to BigInt.js.apart from bigint_minus functions other functions are working fine for me. Please let me know what is the problem with bigint_minus() function. Thanks, Dinesh I have a script that runs a sprite animation on the canvas, adapted from he http://www.kadrmasconcepts.com/blog/...-canvas-style/. After wondering why it wouldn't work on Safari or older versions of Firefox, I saw this: https://developer.mozilla.org/en/Jav.../Function/bind and implemented the suggested shim. However, I'm still getting some errors that I can't explain for the life of me. To make this easy for everyone, I threw it in a jsfiddle: http://jsfiddle.net/zachgold/AL3AQ/. Any help would be appreciated. Thanks! Zach One of the platforms I need to code for is a very (very very) old version of iceweasel (3.5.16). It does not support the "bind" function. So, I (naively) thought that writing a bind function might not be so difficult after all. I tried the following: Code: 'use strict';
if (typeof Function.prototype.bind === 'undefined') {
Function.prototype.bind = function(newCaller) {
this.caller = newCaller;
}
alert('Bind is now defined.'); //Do this to make sure that the conditional block is being entered.
}
window.onload = function() {
try {
myElement.addEventListener('click', this.doSomething.bind(this), false); //this is line 110 (see error message).
} catch (e) {
alert(e.toString());
}
}
However, this causes the following Error to be thrown: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://*** :: anonymous :: line 110" data: no]. What am I doing wrong? (I'm not sure I even understand the error message!) Hello, I am working on a project that takes links on a page (Not all, depends on if they are Merchandise links or partner links), and passes some parameters to a tracking js call. The problem is, I don't want to put 'onclicks" on every href as there could be a hundred on a page and many of the links are dynamically generated on the backend. So, I was thinking of creating a function that took in parameters from each of the links that are pressed. But I was told "bind" is a good way to do this, but to be honest - it is very confusing to me. How would I do this? Lets say we have two links (there will be many more, but for an example sake). <a href="somelink.html" id="linka">link a</a> <javascript> var cu = new Linktracker({ dispPrice: 30, dispTitle: 'Manager', dispProduct: 'Red Shoes' }); $('linka').observe('click', cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct') ); </script> <a href="somelink.html" id="linkb">link b</a> <javascript> var cu = new Linktracker({ dispPrice: 10, dispTitle: 'casual', dispProduct: 'Blue Shoes' }); $('linkb').observe('click', cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct') ); </script> How does any particular click know I am referencing the correct "var cu"? Can something like this be done? <a href="somelink.html" id="linkc">link c</a> <javascript> $('linka').observe('click',( var cu = new Linktracker({ dispPrice: 30, dispTitle: 'Manager', dispProduct: 'Red Shoes' }); ) cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct') ); </script> What am I missing here? Should I use just "bind" or "bindAsEventListener"? Since each link on the page is unique and will pass different values, what is the best way to do this without putting "onclicks" on every link? Greetings, I'm looking to add keycode Accessibility to an html + javascript interaction. It's basically like tic tac toe where a user clicks on a cell (these cells are created by divs) and an 'O' appears in the cell. I'd like to be able to tab through the cell fields and hit the spacebar to put the 'O' in the focused cell. Here's an example of the html divs... [code] <div class="grid"> <div class="row row-1"> <div class="box true"><div class="inner" tabindex="0" id="orange"></div></div> <div class="box true"><div class="inner" tabindex="0" id="orange"></div></div> <div class="box true"><div class="inner" tabindex="0" id="orange"></div></div> <div class="box"><div class="inner" tabindex="0" id="orange"></div></div> <div class="clear"></div> </div> </div> [code] What I'm needing to know is where/what code goes into the .js to set up a keydown event. Here's the .js being used... [code] $(document).ready(function() { // init $('#holder .section:first').addClass('current-slide'); $('#nav .btn:first').addClass('current-slide'); $('#holder .section').addClass('noanswer'); $('#holder .section').delay(300).animate({'top':'0px'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down // end init $('.noanswer .box').hover(function() { if ($(this).hasClass('selected')) { $(this).addClass('box-highlight-hover'); } else { $(this).addClass('box-highlight'); } }, function() { if ($(this).hasClass('selected')) { $(this).removeClass('box-highlight-hover'); } else { $(this).removeClass('box-highlight'); } }); // box functions $('.noanswer .box').live('click',function() { $(this).addClass('selected'); }); $('.noanswer .selected').live('click',function() { $(this).removeClass('selected'); $(this).removeClass('box-highlight-hover'); }); // slide animations $('#nav .mobility-btn').click(function() { if ($('.section').is(':animated')) { } else { $('#nav .btn').removeClass('current-slide'); $(this).addClass('current-slide'); $('.section').css({'z-index':'5'}); $('#mobility').css({'top':'-350px','z-index':'10'}); $('#mobility').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down $('.section').removeClass('current-slide'); $('#mobility').addClass('current-slide'); } }); $('#nav .vision-btn').click(function() { if ($('.section').is(':animated')) { } else { $('#nav .btn').removeClass('current-slide'); $(this).addClass('current-slide'); $('.section').css({'z-index':'5'}); $('#vision').css({'top':'-350px','z-index':'10'}); $('#vision').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down $('.section').removeClass('current-slide'); $('#vision').addClass('current-slide'); } }); $('#nav .hearing-btn').click(function() { if ($('.section').is(':animated')) { } else { $('#nav .btn').removeClass('current-slide'); $(this).addClass('current-slide'); $('.section').css({'z-index':'5'}); $('#hearing').css({'top':'-350px','z-index':'10'}); $('#hearing').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down $('.section').removeClass('current-slide'); $('#hearing').addClass('current-slide'); } }); $('#nav .cognitive-btn').click(function() { if ($('.section').is(':animated')) { } else { $('#nav .btn').removeClass('current-slide'); $(this).addClass('current-slide'); $('.section').css({'z-index':'5'}); $('#cognitive').css({'top':'-350px','z-index':'10'}); $('#cognitive').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down $('.section').removeClass('current-slide'); $('#cognitive').addClass('current-slide'); } }); // result $('.answerSubmit').hover(function() { $(this).addClass('answerSubmitHover'); }, function() { $(this).removeClass('answerSubmitHover'); }); $('.answerSubmit').live('click',function() { var parent = $(this).parents('.section'); var scoreParent = $(this).parent('.result'); // Calculate max score var maxScore = parent.find('.box').length; // Calculate actual score var actualScore; var selectednotTrue = 0; var selectedCorrect = 0; var notTrue = 0; actualScore = parent.find('.box').length; selectedCorrect = parent.find('.box.selected.true').length; notTrue = parent.find('.box:not(.true)').length; selectednotTrue = parent.find('.box.selected:not(.true)').length; actualScore = notTrue - selectednotTrue + selectedCorrect; scoreParent.find('.answer').html(actualScore); scoreParent.find('.outOf').html(maxScore); $(this).hide(); parent.find('.score').show(); parent.addClass('answer').removeClass('noanswer'); }); }); [code] Please let me know if I'm unclear or if more code is necessary. Thanks for any help you can give! k Ok lol don't mock me, I'm only new to javascript. I'm trying to get the text that contains "The Moderating Team" "Today's Active Topics" etc. an id to the div they are contained in. Here's my code so far: Code: <script type="text/javascript">
var c = getElementByClass("div");
if ( c.innerHTML.contains(" The Moderating Team ") ) {
}
</script>
Any help? Oh and my site: http://stereo.b1.jcink.com I'm using a PHP script which has a pop-up box that, when the thumbnail is selected, the video player dynamically appears in the pop-up box. It is outdated, and not working correctly(see attached image), so I'm trying to replace it with venobox: VenoBox - responsive jQuery modal window plugin So far, I've uploaded the venobox folder, and added this: Code: <head> <!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add venobox --> <link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" /> <script type="text/javascript" src="venobox/venobox.min.js"></script> </head> Now it says to: "Insert one or more links with its custom class": Code: <a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a> <a class="venobox_custom" data-type="iframe" href="http://www.veno.it">open iFrame</a> For Google Maps use the iFrame href attribute of map's embed code and set data-type="iframe" "For videos use the simple url of the video, such as: http://www.vimeo.com/your_video_id, or http://www.youtu.be/your_video_id" The GreyBox that I'm currently using, I believe the code is this: Code: <tr> <td width="10px"><a href="/videos/[blk1.vid_id;block=div]/" rel="gb_page_center[470,370]" style="float:right"><br /> <img src="/uploads/thumbs/[blk1.video_id;block=div].jpg" alt="video pic" width="120" height="90" border="0" /></a></td> <td width="400px"><!--[var.lang_title]--><a href="/videos/[blk1.vid_id;block=div]/" rel="gb_page_center[520,600] "> <div class="container88888"><!--[blk1.Title;htmlconv=no;block=div;ope=max:70;comm]--></a><br /> <!--[var.lang_description]:-->[blk1.vid_desc;htmlconv=no;block=div;ope=max:268;comm]</div></td> </tr> So, I don't know what, in VenoBox, is meant by "Insert one or more links with its custom class" and please help me, what I should do with these further set up instructions?: Initialize plugin Code: $(document).ready(function(){
/* default settings */
$('.venobox').venobox();
/* custom settings */
$('.venobox_custom').venobox({
framewidth: '400px', // default: ''
frameheight: '300px', // default: ''
border: '10px', // default: '0'
bgcolor: '#5dff5e', // default: '#fff'
titleattr: 'data-title', // default: 'title'
numeratio: true, // default: false
infinigall: true // default: false
});
/* auto-open #firstlink on page load */
$("#firstlink").venobox().trigger('click');
});
Additionally, since I'm trying to get a video to dynamically play in the box, it states: "Data Attributes If the content is not an image you have to specify its type via data attribute data-type" [CODE] <a class="venobox" data-type="iframe" href="http://www.veno.it">Open Iframe</a> <a class="venobox" data-type="inline" title="My Description" href="#inline">Open inline content</a> <a class="venobox" data-type="ajax" href="ajax-call.php">Retrieve data via Ajax</a> <a class="venobox" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">Open YouYbe video</a> <a class="venobox" data-type="vimeo" href="http://vimeo.com/75976293">Open Vimeo video</a> [/CODE} Any help/clarification will be appreciated. Attached Thumbnails Hello Thanks to those people on this Forum who have provided me with help, along with my little knowledge of Javascript I have been able to create the basis of a form for my Skittle League which will allow teams to submit results over the web. I have one calculation to complete before I look to make the form live and I am hoping someone can provide the final peice of the jigsaw. The scoresheet can be found at http://www.stroudskittles.co.uk/test/scorecard.html The form adds togther the 5 values for each half for each team and places them in a Half Total box below. The form adds together the two totals for each half for each team then places them in a Total box below I have been able to add a operation using the onchange event the points are automatically calculated for each half and total, depending on the overall scores, 2 points for a win, 1 for a draw 0 for a loss. What I'm struggling to do is add the three points totals together to generate the Overall Points for a team and place them in a text box at the top of the scoresheet (marked xxx on the page). Can anyone suggest the best method to do this. Also is it possible to combine the sums into one script therefore reduing the overall size. Your help very much appreciated Hi, I have a JS function which calculates "Amount" (Thanks to abduraooft and Philip M) frm.Amount.value=order_total*100; Then I have a (hidden) form input which "displays" the "Amount" <INPUT TYPE=HIDDEN NAME="Amount"> Now I would need a URL which includes the same value that is displayed in the input field (="Amount"). In practice the URL looks like this: https://www.XXX.com/payment?Amount=[this is where I would need the "Amount" to be displayed] How can I archive this? As you might have guessed I'm no pro in these matters Im trying to dynamically add more fields into my form. HTML: Code: <table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><input size="3" type="text" name="number" /></td>
<td><input type="text" name="title" /></td>
<td><input type="button" value="Add another text input" onClick="addInput('add_episodes', 'number');addInput('add_episodes', 'title');"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input name="entry_id" type="hidden" value="<?php echo $id; ?>">
<input class="input submit" type="submit" name="submit" value="Add <?php echo $type; ?>">
</td>
</tr>
</table>
Javascript Code: function addInput(divName, type)
{
var counter = 1;
var limit = 50;
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var tr.document.createElement('<tr>');
if(type == 'number')
{
var newdiv = document.createElement(element);
newdiv.innerHTML = '<input size="3" type="text" name="number" />';
document.getElementById(add_input).appendChild(newdiv);
}
if(type == 'title')
{
var newdiv = document.createElement(element);
newdiv.innerHTML = '<input type="text" name="title[]" />';
document.getElementById(divName).appendChild(newdiv);
}
counter++;
document.getElementById(add_input).appendChild(tr);
}
}
This is one of my first times working with javascript, usually i work with PHP. Im trying to add more input elements of Code: <tr> <td><input size="3" type="text" name="number" /></td> <td><input type="text" name="title" /></td> </tr> And don't reply that i should make the names into arrays for me to submit more stuff, I'll change that later. But for simplicity and a straightforward problem. I can't get it add more form elements in the correct place or nothing happens at all. hi All, I want to add UL item to Li in java script dynamically .so that i can build submenu dynamically.can any one help me. Hi and thanks for your help, I have two text boxes on my page and a third where I would like it to automatically subtract the two any time either one of them is changed. What is the simplest way to do this? Thanks again for your help, Will I want to be able to add fields to a form with JavaScript, already had a thread about this in the PHP section and someone gave me some code. But that didn't seem to work So here is some other code: JavaScript: Code: var my_div = null;
var newDiv = null;
function addElement()
{
// create a new div element
// and give it some content
newDiv = document.createElement("div");
newDiv.innerHTML = "<label for=\"column\">Column Name: </label><input style=\"margin-bottom:1em;\" type=\"text\" name=\"column[]\" id=\"column\">";
// add the newly created element and it's content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
HTML: Code: <div class="login">
<form name="tbCreate" method="post">
<label for="tableName">Table Name: </label>
<input type="text" name="tableName"><br />
</form>
<input type="button" name="addElement" onClick="addElement()" value="Add Column">
</div>
<div id='org_div1'></div>
Problem is, it only works if the org_div1 div not between any other tags apart from <body></body>. How can I make it so that the div can be put between the form tags? Hi there, Greetings, I have limited knowledge on Javascript. I wish someone could help me out. Thanks. I have actually found a free script named "Image Flow" (http://finnrudolph.de/ImageFlow/Examples) on the website. Then, I have uploaded it to my web server. Everything was fine and functioning well. I would like to add in new Var (to make new window appears after clicking) according to the codes given but failed to do so. The codes given are A) Code:
var target_1 = new ImageFlow();
target_1.init({ ImageFlowID: 'target_1,'
onClick: function() {window.open(this.url, '_blank');} });
Then, I just added the above code into imageflow.JS and imageflow.packed.JS. (I have attached the file below) Original: Code: domReady(function()
{
var instanceOne = new ImageFlow();
instanceOne.init({ ImageFlowID:'myImageFlow' });
});
After amendment: Code: domReady(function()
{
var instanceOne = new ImageFlow();
instanceOne.init({ ImageFlowID:'myImageFlow' });
var target_1 = new ImageFlow();
target_1.init({ ImageFlowID: 'target_1,'
onClick: function() {window.open(this.url, '_blank');} });
});
However, no pictures were loaded after that. Does it involve more than just "copy and paste"? Or what have I done incorrectly? Sorry to disturb you. I have a script which opens an HTML page and passes the current URL to a form on the page. I'm also using RokBox, which open a window as an overlay on the current page rather than as a popup. It is triggered by adding rel="rokbox" to any link. For instance, the following link opens moreinfo.htm using RokBox: Code: <a rel="rokbox" href="/modules/mod_S5tellafriend/moreinfo.htm">More Info</a> Problem is the link doesn't pass the URL. The following code passes the URL but doesn't trigger RokBox: Code: <input type="button" class="button" value="MORE INFORMATION" onclick="s5_open_taf_popup()"/>
<script type="text/javascript">
var s5_taf_parent = window.location;
function s5_open_taf_popup() {
window.open('/modules/mod_S5tellafriend/moreinfo.htm','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=570,left=50,top=50,titlebar=yes')
}
</script>
Is there a way to add rel="rokbox" to the script? Or maybe pass the URL with the link instead? Thanks! to be honest I have no idea where to start, i have a table, with 2 numeric values at the minute, if the checkbox is selected I want the total price to be shown? Any help to get me started would be great! this is the form I have with the numeric values Code: <form id="calculation" action="#" method="post"> 100 <input type="checkbox" name="check1" value="100" onClick='total_cost()'/> 120 <input type="checkbox" name="check2" value="200" onClick='total_cost()'/> Total cost<input type="text" name="total" id="total" readonly="readonly" /> onClick='total_cost()' is referring to the javascript function where I just don't know where to start? Hi, Want to add numbers using JS. Have 4 text boxes for user entry. Want either a label (preferred) or fifth text box to automatically sum those entries. Did following but not working. Any suggestions? <script language="javascript"> var addRange = function() { var NoHrsRangeComp = document.getElementById("NoHrsRangeComp"); var NoHrsRangeCred = document.getElementById("NoHrsRangeCred"); var NoHrsRangeOT = document.getElementById("NoHrsRangeOT"); var NoHrsRangeRC = document.getElementById("NoHrsRangeRC"); var RangeSum = document.getElementById("RangeSum"); var sum = 0; if (isNaN(parseFloat(NoHrsRangeComp.value))){ NoHrsRangeComp.value = ""; } if (isNaN(parseFloat(NoHrsRangeCred.value))){ NoHrsRangeCred.value = ""; } if (isNaN(parseFloat(NoHrsRangeOT.value))){ NoHrsRangeOT.value = ""; } if (isNaN(parseFloat(NoHrsRangeRC.value))){ NoHrsRangeRC.value = ""; } sum = parseFloat(NoHrsRangeComp.value) + parseFloat(NoHrsRangeCred.value) + parseFloat(NoHrsRangeOT.value) + parseFloat(NoHrsRangeRC.value); RangeSum.innerHTML = sum; } </script> Input as follows: <input style="width: 50px" type="text" name="NoHrsRangeComp" id="NoHrsRangeComp" onblur="addRange();"/> <input style="width: 50px" type="text" name="NoHrsRangeCred" id="NoHrsRangeCred" onblur="addRange();"/> <input style="width: 50px" type="text" name="NoHrsRangeOT" id="NoHrsRangeOT" onblur="addRange();"/> <input style="width: 50px" type="text" name="NoHrsRangeRC" id="NoHrsRangeRC" onblur="addRange();"/> <input style="width: 50px" type="text" name="RangeSum" id="RangeSum" onblur="addRange();"/> For above entry prefer - label makes it look more like usual addition and does not confuse users to want to make entry. <label id="RangeSum" onblur="addRange();" style="border-bottom:medium"></label> John helo, i just want to know how to add the same panel by clicking on a button right below the button.. |
|||||||