JavaScript - Shim Layer For Bind()

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!)

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>
&nbsp;<p> 
     <! I added this button, so that it returns us to the main Menu.> 
     <INPUT TYPE="button" onClick="window.print()" value="Print" /><br>
&nbsp;</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

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

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?

Hi i am trying to create a draggable css layer.

Code:

<html>
<head>
<style type="text/css">
#box {position:absolute;
left:150;top:150;
background-color:blue;
height:100;
width:100;}
</style>
<script type="text/javascript">
       function start(){
var count = cnt.value
var count=0;
while (count=0)
  {
var x;
var y;
var layer = document.getElementById('box');
x=window.event.clientX;
layer.style.left=x;
y=window.event.clientY;
layer.style.top=y;
}
}
            function stop(){
var count = cnt.value;
count = 1;
}

            function shw(){
alert(cnt.value);
}
</script>
<body>
<input type="hidden" name="cnt" value="1">
<div id="box" onclick="start()" onrelease="stop()">
</div>
<br /><br /><br /><br /><br /><br /><br />
<input type="button" name="show" value="Show" onclick="shw()">
</body>
</html>

It doesn't seem to work though. The loop never seems to start.

btw i was also thinking couldn't i just put
while(box.clicked)
{

or something along those lines.

Thanks