|
JavaScript - Code In Body Tag Causing Js To Fail
EDIT: Ive actually managed to sort this out.
The problem was as simple as the onload in the body tag was overriding the onload script in the header. Combining the two solved the problem. Ive recently been appointed to do some work on my employers website. For now, to hold us over until we can manage a complete re-write, I have been asked to just do a little update to the look and feel. One of the things I have done is use the niftycorners code for rounded divs. I have had no trouble implementing this code over all the site pages, until I got to one page. Our product pages. Ive never seen a code placed directly within the body tag, but this is what has been done here. <BODY onload="pricing_init(); attribute_changed();"> This code loads the dynamic pricing feature. Unfortunately, it also causes the nifty corners code I have placed between the head tags to fail. I dont know if its just the odd placement of the code or the code itself as I am just learning js (using the Javascript and Ajax for dummies book). Is there some way I can alter this so that both the dynamic pricing and nifty corners works? thanks in advance for any suggestions. Similar TutorialsThe suspect line is the following $('.leaveClan').attr('id') = <?php echo $id; ?>; the span with the class (there is only one) leaveClan is on the main page, and that line of javascript is on a page being called by AJAX within that page. Can anyone see why that is causing an error? Let me know if you need to see any more of the code Greetings, I had to add the following DOCTYPE to a webpage in order for IE to parse my page design properly, and this caused the form on the page to fail in FireFox (which works fine without the doctype). The form works fine in IE. Here is the DOCTYPE I added to the top of the page; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The error log in FireFox says; frmTest is not defined - Line 30 Here is the block of code it is referring to; function MoveForward(ipage) { if(TestAnswers()) { frmTest.action.value = 'next'; frmTest.p.value = ipage; frmTest.submit(); frmTest.cmdNext.disabled = true; try { frmTest.cmdBack.disabled = true; } catch(err) { } } } Line 30 is: if(TestAnswers()) The opening form code further down the page is; <form action="stress_test.asp" method="post" name="frmTest" id="frmTest"> I have been up against this for a couple days, any help would be very (very) appreciated. Regards, Ross I try to auto scroll to bottom of a div when the page is loaded. It works on firefox but it is not working on IE. How to scroll to bottom on a div when page is loaded on IE? You can test it by copy paste my codes into two html files. test5.html : Code: <div id='div' style='overflow:scroll; height:300px; width:200px; border:1px solid blue; background:yellow;'>
</div>
<script src="javascripts/jquery-1.5.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
function showrsp(){
jQuery.get("test5a.html", function(data) {
$('#div').append(data);
$(document).ready(function(){asd();});
});
};
function asd(){
$('#div').scrollTop($('#div')[0].scrollHeight);
}
showrsp();
</script>
test5a.html : Code: <p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
How to wait until innerHTML finish render the contents before execute function asd()? You know the deal: you have something (tooltip-like) that pops up on mouseover and disappears again on mouseout. But sometimes, the mouse moves too fast (speedy Gonzalez?), and the event doesn't get trapped. So your tooltip thingy stays popped, and doesn't go away till another mouseover-mouseout happens. Any suggestions for avoiding this scenario?
If you try some codes and then catch exception, it should catch the exception when there is. However, if there is a setInterval method in the try clause, then the exception cannot be caught... why??? the following works ( a usual method is invoked in the try clause): Code: <script language="javascript" type="text/javascript">
function invoke()
{ var i=0;
return i.x.y;
}
try
{
alert(invoke());
}
catch(ex){ alert(ex); } //Any Exception will be caught.
</script>
if the highlighted line is changed as below (using setInterval method), then it fails... Code: <script language="javascript" type="text/javascript">
function invoke()
{ var i=0;
return i.x.y;
}
try
{
setInterval(alert('invoke())',1000);
}
catch(ex){ alert(ex); } //The Exception will NOT be caught.
</script>
any idea? thx in advance I have a JSP page,such as test.jsp Code: <input name="id1" type="text" value="abc" size="40"> Then I want to open it by using Javascript,and alert id1 value,so I use following statements: Code: var s=window.open('test.jsp','mywin');
alert(s.document.id1.value);
When I run alert(s.document.id1.value),,it raise javascript error Code: s.document.id1.value undefined I want to know how Javascript can get jsp value by window.open? Thanks Honestly, its probably my fail. Regardless, here is the deal, any help would be appreciated. I am currently skinning up a custom cpanel theme for a company I work with from time to time, kudolabs.net. They would like their Jixed Bar that is on their main web page to be on the skin, and I am attempting to put it there now. I have put the code into the html of the skin, both the call to the proper javascript files and css files, and the proper code for the bar itself. It is not working, the bar shows up as it is supposed to, but it is not aligned correctly and the bar does not float with the page. It acts exactly like the javascript is not working at all.... Unfortunately I can't just provide access to the cpanel for people to check, but you can see the source code of the main page, kudolabs.net, and if you're willing to help, I can of course give you access to a demo account (and quite possibily provide some hosting for a month or two, we're based in the netherlands and have plenty of space to share to anyone willing to help us with little problems such as this. @_@ ) Thank you for your time reading this, any help or points in the right directions would be appreciated. Unfortunately, google has failed me this time. Or, rather, I have failed google. o.o for an anchor object, it is ok to reference by index. But when referenced by name, it seems unavailable in IE8 (not sure abt other IE version). I tried FF, it works well. So is it an IE bug or something? Code: <a name="thisAnchor">HERE</a> <script language="javascript" type="text/javascript"> alert(document.anchors[0].nodeType) // no problem in IE and FF alert(document.anchors["thisAnchor"].nodeType) // does't work in IE? </script> thx in advance I've cannibalised some code from the jQuery supersized plugin that scales images to full screen size while retaining aspect ratio. However, I seem to be getting it wrong, and my maths is... well, appalling. The problem is that while it's resizing correctly to fit the width OR the height, it's not fitting the width AND the height. That is: If I adjust the window height, the image scales to fit the height, but goes outside the window width. If I adjust the window width, the image scales to fit the width, but goes outside the window height. If I adjust both (dragging the window corner) it seems to favour fitting the width. I am currently using only landscape images. I don't know if that has a bearing. This may well just be a logic issue, but my brain is just turning to jelly when I look at my code below: Code: var image_ratio = options.image_dimensions.height / options.image_dimensions.width;
var browser_ratio = browser_height / browser_width;
if (browser_ratio > image_ratio){
var target_height = browser_height;
var target_width = Math.floor(browser_height / image_ratio);
} else {
var target_width = browser_width;
var target_height = Math.floor(browser_width * image_ratio);
}
The code above works out some new image dimensions and is called when the browser is resized. The options.image_dimensions.height and options.image_dimensions.width variables represent the original dimensions of the image, and browser_height and browser_width are calculated from the window size. How can I make it fit either landscape or portrait images to the smallest available dimension of the browser? I have placed the <script></script> in the <head></head> tags and the page will not work. But placing the <script> below the element that the JS works with allows the page to work but thought the correct method to use was place all JS functions inside the <head> tags? here is a link to the folder I am testing this out on. http://www.realistichostings.com/test_booking/ I have named the two files accordingly, test_booking_page-script is in head tags.php test_booking_page-script is outside head tags.php can anyone tell me why the code works outside the head tag but not when i is inside the head tag ? Hi all, I am a little stuck trying to use arrays for the purpose of creating a currency converter. I have created the script below but it seem to work fine without the arrays added in. Any ideas? <script type="text/javascript"> function currencyConverter() { //declare and initialise variables var CurrYen = 128.7; var CurrUSDollar = 1.59; var CurrEuro = 1.15; var CurrSwissFrank = 2.06; var CurrDanishKorona = 9.69; var strCurrency = new Array(5); var dblExchange = new Array(5); var dblGross var dblCurrency //collect information from drop-down menu and text boxes strCurrency = document.getElementById("cmbCurrency").value; intSterling = document.getElementById("txtSterling").value //selection if (strCurrency == "Yen") { dblCurrency = CurrYen; } else if (strCurrency == "US Dollar") { dblCurrency = CurrUSDollar; } else if (strCurrency == "Euro") { dblCurrency = CurrEuro; } else if (strCurrency == "Swiss Frank") { dblCurrency = CurrSwissFrank; } else if (strCurrency == "Danish Korona") { dblCurrency = CurrDanishKorona; } else { dblCurrency = 0; } //calculate total currency to convert dblGross = dblCurrency * intSterling; //display total cost document.getElementById("txtSterling").value = dblGross.toFixed(2); } </SCRIPT> I'm trying to run two javascript files on a web page and there appears to be a conflict. Im using InnerFade with JQuery which can be seen at: http://medienfreunde.com/lab/innerfade/ And Im using Lightbox2 which is at http://www.huddletogether.com/projec...box2/#download If I use them individually they work fine but as soon as I call them together the one won't work. I'm not fluent in javascript so I would really appreciate any help with this. Thanks. I am building a wordpress theme that utilizes a theme options panel. The theme has a area where someone can enter in their email address, and when they do a Thank You message displays. One of the sections in the theme options panel allows the users to modify that message. Right now the message is formated like this: "Thank you for your interest!<br />As soon as as we are ready we will send you an email with all the details." and the page source shows this: Code: $('#right').html("<div id='submitted'></div>");
$('#submitted').html("Thank you for your interest!<br />As soon as as we are ready we will send you an email with all the details.")
.hide()
.fadeIn(1000, function() {
});
(i bolded the thank you message) now the form functions properly the way it should and the thank you message appears accordingly when someone submits their email. However, if the person modifies the message via the theme options panel and uses "Enter" for a return or line break the code looks like this: Code: $('#right').html("<div id='submitted'></div>");
$('#submitted').html("Thank you for your interest!
As soon as as we are ready we will send you an email with all the details.")
.hide()
.fadeIn(1000, function() {
});
and this causes the form not to function properly. The thank you message will not show up. Is there a way to fix the java code so a person can use "Enter" if they choose to? Ive narrowed it down to this one section of the javascript. If you need the entire script I can post it. Any help is greatly appreciated. Thank you for your time. hello, The following code is causing firefox to crash: Code: if (!e)
{
alert("!e");
e = window.event;
}
alert("before");
var x = e.pageX;
alert("after");
By 'crash', I mean it just stops running. It doesn't give me an error message or shut down the browser, it just quits reading the script. I get the alert box "!e" and "before" but I don't get anything for "after". At the line var x = e.pageX; it seems to die. This seems to happen anytime I use e, for example e.clientX, e.screenX, e.type, etc. This doesn't occur in IE. Anyone know what the problem is? hello i am trying to include the following following in my code, but it keeps creating an error. i need to know the correct place to include the function.many thanks Code: CODE
----------------------------------------
<script type="text/javascript">
$(function() {
$("#flex1").flexigrid(
{
url: 'staff.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id_con', width : 40, sortable : true, align: 'left'},
{display: 'Name', name : 'name_con', width : 150, sortable : true, align: 'left'},
{display: 'Email', name : 'email_con', width : 150, sortable : true, align: 'left'},
{display: 'Phone', name : 'phone_con', width : 250, sortable : true, align: 'left'},
{display: 'Mobile', name : 'mobile_con', width : 150, sortable : true, align: 'left'},
{display: 'Fax', name : 'fax_con', width : 150, sortable : true, align: 'left'},
{display: 'Notes', name : 'notes_con', width : 250, sortable : true, align: 'left'}
],
buttons : [
{name: 'Edit', bclass: 'edit', onpress : doCommand},
{name: 'Delete', bclass: 'delete', onpress : doCommand},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name_con'},
{display: 'Email', name : 'email_con', isdefault: true},
{display: 'Position', name : 'position'}
],
sortname: "name_con",
sortorder: "asc",
usepager: true,
title: "Staff",
useRp: true,
rp: 10,
showTableToggleBtn: false,
resizable: false,
autowidth: true,
autoheight: true,
singleSelect: true
}
);
});
FUNCTION
-----------------------------------------------------------
function doCommand(com, grid) {
if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id_con = $(this).attr('id_con');
id_con = id_con.substring(id_con.lastIndexOf('row')+3);
alert("Edit row " + id_con);
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id_con = $(this).attr('id_con');
id_con = id_con.substring(id_con.lastIndexOf('row')+3);
alert("Delete row " + id_con);
Hello there, I am using Dynamic Drive's dhtml windowfile and when I had a link for it to call the popup window, it makes my site deliver a 500 server error. Here is the line of code I'm adding: Code: echo '<td><a class="link" href="#" onClick="ajaxwin=dhtmlwindow.open('ajaxbox', 'ajax', 'pages/post.php', 'Composing Mode: Post', 'width=650px,height=400px,left=300px,top=100px,resize=0,scrolling=1'); return false">Compose</a></td>';
It is not a php issue, I plaintext the link and it still did the same thing. I was told by Kunena developers that the issue is that when I insert an image or a video in my forum, it is loading after javascript loads setting the height to "static". Unfortunately they didn't know a fix, so I came here I guess the script is causing the forum articles to overflow the height by exactly the same number of pixels as the image/video. When the page is reloaded, the issue is corrected, but its really annoying for visitors who don't know to reload the page. Not to sound like a big dummy or anything, but I have gone through every file in my template and have found absolutely no "static" scripts, so any help in tracking it down would be greatly appreciated as I am not a javascript guru. I have tried preloading the images, but it had no effect. An example of the overflow issue can be found here https://christian-knowledge.com/inde...id=22&id=25#25 At the moment I have changed the overflow value on that particular section to "auto" to get around it for the time being, but its definitively not a good fix. Thank you for your time and I really appreciate any assistance or advice on how to fix this Hi, I want to make a piece of text fade from black to white while someone puts their mouse over it and change it back to black when they move their mouse away. I did it with the following code, but I'm wondering if anyone would do some (or all) of it a different way. Thanks! Code: //convert RGB values to hexidecimal
function RGBtoHex(color) {
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var R = parseInt(digits[2]);
var G = parseInt(digits[3]);
var B = parseInt(digits[4]);
Hex = new Array(R, G, B);
return Hex;
}
// Start the text fading
function FadeStart(id, FadeTo) {
Element = document.getElementById(id);
OriginalColor = getComputedStyle(Element, null).color;
Start = RGBtoHex(FadeTo);
rgb = RGBtoHex(OriginalColor);
red = (Start[0] - rgb[0])/16;
green = (Start[1] - rgb[1])/16;
blue = (Start[2] - rgb[2])/16;
BeginFading = true;
Fade();
}
//Actually do the fading
function Fade() {
var Complete = (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]);
if (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]) {
rgb[0] += red;
rgb[1] += green;
rgb[2] += blue;
var ChangeColor = "rgb(" + Math.round(rgb[0]) + ", " + Math.round(rgb[1]) + ", " + Math.round(rgb[2]) + ")";
Element.style.color = ChangeColor;
time = setTimeout("Fade()", 500);
}
}
//Return text to original color
function FadeStop() {
BeginFading = false;
clearTimeout(time);
if (Element != null) Element.style.color = OriginalColor;
}
Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!! Here is the Code: Code: function getEl(element)
{
var object = null;
if (document.layers)
{
object = document.layers[element];
}
else if (document.all)
{
object = document.all[element];
}
else if (document.getElementById)
{
object = document.getElementById(element);
}
return object;
}
function addRow()
{
var tbl = getEl('invTbl');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellqty = row.insertCell(0);
var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
cellqty.appendChild(qty);
var cellitm = row.insertCell(1);
var itm = document.createElement('input');
itm.type = 'text';
itm.name = 'itm_' + iteration;
itm.id = 'itm_' + iteration;
itm.size = 30;
cellitm.appendChild(itm);
var celldsc = row.insertCell(2);
var dsc = document.createElement('input');
dsc.type = 'text';
dsc.name = 'dsc_' + iteration;
dsc.id = 'dsc_' + iteration;
dsc.size = 50;
dsc.value = iteration;
celldsc.appendChild(dsc);
var cellprc = row.insertCell(3);
var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
cellprc.appendChild(prc);
var celldel = row.insertCell(4);
var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
celldel.appendChild(del);
}
function removeRow(row)
{
alert("you are deleting row " + parseInt(row));
tbl = getEl('invTbl');
rowTotal = tbl.rows.length;
alert("there are " + rowTotal + " rows!");
tbl.deleteRow(parseInt(row));
for ( i = 1; i < rowTotal; i++ )
{
if ( i > parseInt(row) )
{
place = i - 1;
alert(i + " becomes " + place);
qtycontainer = "qty_" + i;
itmcontainer = "itm_" + i;
dsccontainer = "dsc_" + i;
prccontainer = "prc_" + i;
delcontainer = i.toString();
buttonchange = place.toString();
getEl(qtycontainer).name = 'qty_' + place;
getEl(qtycontainer).id = 'qty_' + place;
getEl(itmcontainer).name = 'itm_' + place;
getEl(itmcontainer).id = 'itm_' + place;
getEl(dsccontainer).name = 'dsc_' + place;
getEl(dsccontainer).id = 'dsc_' + place;
getEl('dsc_'+place).value = getEl('dsc_'+place).id;
getEl(prccontainer).name = 'prc_' + place;
getEl(prccontainer).id = 'prc_' + place;
getEl(delcontainer).name = buttonchange;
getEl(delcontainer).id = buttonchange;
alert("del button changed to " + getEl(i).id);
}
}
// updatePrice();
}
The button element for each row calls javascript:removeRow(this.id); Please help me figure out what I am doing wrong! HI,what is wrong here? I am trying to write code to print a message 5 seconds after document has loaded. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
var i;
function printMsg(){
document.write("delayed string");
//tried adding to this line: clearTimeout(i);
}
function timedfunc(){
i=setTimeout(printMsg,5000);
}
</script>
</head>
<body onload="timedfunc()">
</body>
</html>
The message appears ok but the page loading bar in the browser + hourglass wont go away (in firefox). |
|||||||