|
JavaScript - Problem Dynamically Generating Mathml (xhtml + Javascript + Mathml)
So I'm trying to dynamically generate MathML code.
I can get this to work on Internet Explorer 8 + MathPlayer, Firefox 3.6, and Opera 11: test1.xht: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title></title></head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mrow>
<mi>x</mi>
<mo>−</mo>
<mn>4</mn>
</mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mn>3</mn>
<mi>x</mi>
<mo>−</mo>
<mn>4</mn>
</mrow>
</mfrac>
</math>
</body>
</html>
But this only works on Firefox: test2.xht: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="test2.js"></script>
<title></title>
</head>
<body></body>
</html>
test2.js: Code: window.onload = test;
function test()
{
var math = "<math xmlns=\"http://www.w3.org/1998/Math/MathML\">"
math += "<mfrac>";
math += "<mrow>";
math += "<mi>x</mi>";
math += "<mo>−</mo>";
math += "<mn>4</mn>";
math += "</mrow>";
math += "<mrow>";
math += "<msup>";
math += "<mi>x</mi>";
math += "<mn>2</mn>";
math += "</msup>";
math += "<mo>−</mo>";
math += "<mn>3</mn>";
math += "<mi>x</mi>";
math += "<mo>−</mo>";
math += "<mn>4</mn>";
math += "</mrow>";
math += "</mfrac>";
math += "</math>";
document.getElementsByTagName("body")[0].innerHTML = math;
}
Sorry for the code dump and for being such a n00b and thanks for any help. Similar TutorialsI'm new to programming, Here's my problem: I'm using a for loop to generate a list of hyperlinks for(i = 100; i < 200; i++) { var str = "link"; document.write(str.link('http://someWebsite.com/' + i +'.html')); document.write("<br />"); } so the list that is generated looks like... link link link ---------and so on until the loop is finished. My question: is it possible for each links text to be dependent on the pages title? for example instead of the the text "link", the program would follow the URL and know in the pages header was the title "Bob's website" or whatever the pages title was and would generate the list. Example: bobs website daves website rons website susies website betsys website ______________________________ Any help to differentiate the links text based on following the URL would be helpful Thank you! Ok, just to be honest this is for my assignment from my University, I have completed the whole code myself I just can't seem to get just one little thing. Code: function GenerateTables(){
var start = document.tables.start.value;
var end = document.tables.end.value;
var size = document.tables.size.value;
for (start; start <= end; start++) {
document.write("<table width='100' align='center'>")
document.write("<caption><b>Table of </b>" + start + "</caption><br>")
document.write("</table><br>")
for (var i = 1; i <= size; i++) {
document.write("<table border=1 align='center'>")
document.write("<tr height=40 align='center'>")
document.write("<td width=40 align='center'>" + start + "</td>")
document.write("<td width=40 align='center'> * </td>")
document.write("<td width=40 align='center'>" + i + "</td>")
document.write("<td width=40 align='center'> = </td>")
document.write("<td width=40 align='center'>" + start * i + "</td>")
document.write("</tr>")
document.write("</table>")
}
}
}
The function generates multiplication tables depending on the input user provides using this interface (given below). And it generates them like this (given below). Now what I want is to generate those tables sideways not downwards. Not all the tables, but it should complete one table downwards, then start the new table on its side. I can't seem to figure out anything that would make that happen, and ideas would be appreciated, thanks. Regards, Papichoolo. I'm almost finished with this app for XUL / HTML Table Generation, and i have a really strange problem... The HTML strings in the Arrays can be changed, and the HTML file saved, and the HTML page reloaded, and the changes will render. However, i have one array, no matter what i change the HTML strings to, it refuses to render the changes made to the HTML strings. It's quite confusing... the array in question is Code: // Humidor InnerHTML
HumidorInnerHTML[0] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[1] = "<input type='textbox' id='Others_Caption" + HumidorIndex + "'>";
HumidorInnerHTML[2] = "<input type='textbox' value='85' id='Others_Height" + HumidorIndex +"'>";
HumidorInnerHTML[3] = "<input type='textbox' value='85' id='Others_Width" + HumidorIndex +"'>";
HumidorInnerHTML[4] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[5] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[6] = "<img src='delete.png' onClick=DeleteRow('" + HumidorIndex + "','Humidor_Table');>";
HumidorInnerHTML[7] = "<img src='add.png' onClick=AddRow('" + HumidorIndex + "','Humidor_Table');>";
and the function that generates the HTML Table on the fly (and adds the cell data to them) is he Code: function AddRow(index, DIV)
{
MyTable = document.getElementById(DIV);
var newCell;
var newRow = MyTable.insertRow(index);
var Length;
switch (DIV)
{
case "Intro_Table" : Length = IntroInnerHTML.length;
break;
case "Image_Table" : Length = ImageInnerHTML.length;
break;
case "Watch_Table" : Length = WatchInnerHTML.length;
break;
case "Others_Table" : Length = OthersInnerHTML.length;
break;
case "Humidor_Table" : Length = HumidorInnerHTML.length;
break;
}
for (var i = 0; i < Length; i++)
{
newCell = newRow.insertCell(i);
switch (DIV)
{
case "Intro_Table": newCell.innerHTML = IntroInnerHTML[i];
break;
case "Image_Table": newCell.innerHTML = ImageInnerHTML[i];
break;
case "Watch_Table": newCell.innerHTML = WatchInnerHTML[i];
break;
case "Others_Table": newCell.innerHTML = OthersInnerHTML[i];
break;
case "Humidor_Table": newCell.innerHTML = WatchInnerHTML[i];
break;
}
}
// Update the Index Counters
switch (DIV)
{
case "Intro_Table": IntroIndex++;
break;
case "Image_Table": ImageIndex++;
break;
case "Watch_Table": WatchIndex++;
break;
case "Others_Table": OthersIndex++;
break;
case "Humidor_Table": HumidorIndex++;
break;
}
}
when the page is loaded, the Init() function is started, that code is he Code: function Init()
{
AddRow(1, "Intro_Table");
AddRow(1, "Image_Table");
AddRow(1, "Watch_Table");
AddRow(1, "Humidor_Table");
AddRow(1, "Others_Table");
}
Did i miss something? there must be something i've over looking. I have even tried isolating some other external JS, and CSS includes that i have, and isolating them has no change in the result. the html file is live he http://kevinjohnson.clanteam.com/XML...anageSite.html thanks I have an XML document, styled by an xslt to make it into a table, placed inside an xhtml document. my code is as follows: Code: <head>
<script language="javascript" type="text/javascript">
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult() {
xml = loadXMLDoc("conference.xml");
xsl = loadXMLDoc("conference.xslt");
// code for IE
if (window.ActiveXObject) {
ex = xml.transformNode(xsl);
document.getElementById("falctable").innerHTML = ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("falctable").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="falctable"> <!--falcons conference table space div-->
</div> <!--end falcons table space div-->
The falctable <div> is placed absolutely with CSS. The XML table shows up locally in Firefox, Opera, Safari and Chrome, but not in Internet Explorer. Also, it only appears locally, and not in the live version. Any help? Been annoying me for hours. Hi guys I am trying to make my first xhtml form using javascript but am having some problems. I have 4 text boxes on the form and two buttons: Car Year Password Re-enter Password *Buttons* Reset and Submit query I want an alert to pop up when the submit button is pressed if any of the fields are not filled in. I have written the javascript for the events but for some reason it is not picking up the car or year fields. When the submit button is pressed it only prompts for a password (if not filled in). I have looked over the code but I cant see where i'm going wrong. I have added the xhtml code with the external javascript pages at the bottom. Any help would be much appreciated. Fatbot Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Test</title>
<!--Scripts for submit button event handlers-->
<script type="text/javascript" src="submit_car.js"></script>
<script type="text/javascript" src="submit_year.js"></script>
<script type="text/javascript" src="submit_pass.js"></script>
</head>
<body>
<form id="myForm" action="">
<p>
<!--Input car name-->
<label>Car<br />
<input type="text" id="car" size="30" />
</label>
<br />
<br />
<!--Register car name event handlers-->
<script type="text/javascript" src="car_check.js"></script>
<!--Input year-->
<label>Year<br />
<input type="text" id="year" size="4" />
</label>
<br />
<br />
<!--Register year event handlers-->
<script type="text/javascript" src="year_check.js"></script>
<!-- Password entry and re-entry -->
<label>Password<br />
<input type="password" id="first" size="10" />
</label>
<br />
<br />
<label>Re-enter Password<br />
<input type="password" id="second" size="10" />
</label>
<br />
<br />
<!--Register password event handlers-->
<script type="text/javascript" src="password_check.js"></script>
<input type="reset" name="reset" />
<input type="submit" name="submit" />
</p>
</form>
</body>
</html>
//submit_car.js
//Event handler function for entering car name
function carCheck() {
var car = document.getElementById("car");
if (car.value== "") {
alert ("Please enter a car name");
return false;
} else
return true;
}
//car_check.js
//Registers the event handlers for submit_car.js
document.getElementById("car").onsubmit = carCheck;
document.getElementById("myForm").onsubmit = carCheck;
//submit_year.js
//Event handler function for entering year
function yearCheck() {
var year = document.getElementById("year");
if (year.value== "") {
alert ("Please enter a year");
return false;
} else
return true;
}
//year_check.js
//Registers the event handlers for submit_year.js
document.getElementById("year").onsubmit = yearCheck;
document.getElementById("myForm").onsubmit = yearCheck;
//Submit_pass.js
//Event handler function for ensuring password entry is correct
function passwordCheck() {
var first = document.getElementById("first");
var second = document.getElementById("second");
if (first.value== "") {
alert ("Please enter a password");
return false;
}
if (first.value !== second.value) {
alert ("The two passwords you entered did not match. \n" +
"Please ensure both passwords are identical.");
return false;
} else
return true;
}
//password_check.js
//Registers the event handlers for submit_pass.js
document.getElementById("second").onblur = passwordCheck;
document.getElementById("myForm").onsubmit = passwordCheck;
I'm having a problem validating this script in w3c its the last one to make the page valid xhtml transitional. here are the errors w3c gives me for the code.the website in question is http://www.orgdesignz.com Error Line 2722, Column 31: document type does not allow element "p" here Code: document.write('<p class="no">We\'ve detected that you\'re using <strong>AdBlock Plus</strong> or some other adblocking software. Please be aware that this is only contributing to the demise of the site. We need money to operate the site, and almost all of that comes from our online advertising. To read more about why you should disable ABP, please <a href="#">click here</a>.<!-- end .content --></p>');
the error was detected on the > after "no" The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error). Thanks, Mike@orgdesignz Hi, I have been attempting to transition to use of xhtml strict doctype and my text editor, BBEdit (on Mac) tells me, when I ask it to check syntax, that the attribute 'name' is not allowed in form object, as in any other form element that I tried to use it in. This begs the question, how do I script forms with javascript in the context of this doctype? None of the javascript texts I have address this issue (O'Reilly Rhino book and others). I could figure it out, but it appears to be a complicated process, just doing getElementById() and sorting it out. Does anyone have a reference to material that deals with this issue? Or do I just abandon xhtml strict doctypes? Thanks for time and attention JK I've done some googling and have come across some information, but I'm not quite sure how to apply it to my problem. I have a PHP page saturna.php with six frames on it using the frameset commands. I would like to somehow make it so that when I click on something in one frame (with one PHP page loaded in it - game.php), it automatically/dynamically updates one of the other PHP pages (inventory.php) in another frame. What will happen is when the thing is clicked on in game.php, an entry will be added to the database, and the second PHP page (which retrieves information from the database) will notice that there is a new relevant record, and will add it to the inventory.php page in the table I have constructed there. From my googling it seems I need to use JavaScript to do this, but I'm not quite sure how - any ideas ? Thanks very much! hi i am totally frustrated !! i have been using this on my webpage. http://www.barelyfitz.com/projects/tabber/ if u see under the advanced section there is a code for changing tabs dynamically. Code: document.getElementById('mytab1').tabber.tabShow(0);
this doesn't work. basically i have a webpage internet.htm. which has a menubar with loads of menu items. if i click one of the submenu items this code should change the dynamic tabs in admin.htm. the code i have defined for the submenu click is: Code: <li><a href="admin.htm" onClick="document.getElementById('Admin').tabber.tabShow(0)" >Forms</a></li>
the full code is: Code: <ul id="QualityMenuBar" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#"><strong>Admin</strong></a>
<ul>
<li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(0)" >Forms</a></li>
<li><a href="AdminDocuments.htm" >Guidance</a></li>
<li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(2)" >Organisation Chart</a></li>
<li><a href="AdminDocuments.htm">Plans</a></li>
<li><a href="AdminDocuments.htm">Procedures</a></li>
</ul>
</li>
this is what the admindocuments.htm contains, based on the website link i have borrowed the code from. Code: <div class="tabber" id="admin">
<div class="tabbertab">
<h2>Forms</h2>
<script type="text/javascript" src="adminForms.js"></script>
</div>
<div class="tabbertab">
<h2>Guidance</h2>
<script type="text/javascript" src="adminGuidance.js"></script>
</div>
<div class="tabbertab">
<h2>Org. Chart</h2>
<script type="text/javascript" src="adminOrg.js"></script>
</div>
<div class="tabbertab">
<h2>Plans</h2>
<script type="text/javascript" src="adminPlans.js"></script>
</div>
<div class="tabbertab">
<h2>Procedures</h2>
<script type="text/javascript" src="adminProc.js"></script>
</div>
</div>
whenever i click the submenu they all point to the first tab only. it doesn't change inspite of the code. what am i doing wrong here? please advice. Many thanks. I'm new here and this is my first post, I hope I can find help here. How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements and whenever that 'Add More' button is clicked, a new instant of the same form will generated and select drop down list populated. I have try to google for solution, but without success. I code in PHP, but i need it to integrate in my code. Thanks for your help. Hi everyone, I am pretty new to JS and I am looking for help writing a function that will dynamically calculate filed values. I have a PHP-generated form which may have a varying number of fields. I need to: 1. calculate the line total for each row -- unitprice * units = linetotal 2. calculate total of all linetotals. I have named my fields as follows: unitprice[1], unitprice[2]... , units[1], units[2], ... I have the following calculate function: Code: function calculateOld() {
// get both values
unitprice = document.forms["invoice"].unitprice.value;
units = document.forms["invoice"].units.value;
// do some calculation
lineTotal = formatNumber((unitprice * units), 2);
// set the value in the right field
document.forms["invoice"].linetotal.value = lineTotal;
unitprice2 = document.forms["invoice"].unitprice2.value;
units2 = document.forms["invoice"].units2.value;
if(unitprice2 != '') {
// do some calculation
lineTotal2 = formatNumber((unitprice2 * units2), 2);
// set the value in the right field
document.forms["invoice"].linetotal2.value = lineTotal2;
document.forms["invoice"].totalprice.value = formatNumber((parseFloat(lineTotal) + parseFloat(lineTotal2)),2);
}
else {
document.forms["invoice"].linetotal2.value = '';
document.forms["invoice"].totalprice.value = formatNumber(lineTotal,2);
}
}
This does calculate what I need but only if I have up to two rows. I need to make the function dynamically count how many rows there are, and calculate the linetotal for each row. And here's where my limited JS knowledge brings me to a halt. I have been thinking about what this new and dynamic function should look like, but that's the best I could produce... Code: function calculate() {
var unitprice[i] = document.forms["invoice"].unitprice[i].value;
var units[i] = document.forms["invoice"].units[i].value;
var linetotal[i] = formatNumber((unitprice[i] * units[i]), 2);
return linetotal;
}
Your help will be appreciated. Please explain how things are done, don't just give me the code. Thanks in advance! I currently have a page which, when the user clicks a button creates a new row displaying a form. I also have other forms on this page however so I was wondering if anyone knew how to close a form using javascript? Thanks for any help. My code to create the table row and form are below... Code: myform = document.createElement("form");
myform.method = "post";
myform.action = "editdetails.php";
myform.id = "editemail";
myform.name = "editemail";
var a=document.getElementById('editdetailstable').insertRow(2);
var b=document.getElementById('editdetailstable').insertRow(3);
var x=a.insertCell(0);
x.innerHTML="New Email: ";
x.align = "right";
var y=a.insertCell(1);
y.innerHTML="<input type='text' name='email' id='email' />";
var z=b.insertCell(0);
z.innerHTML="<input type='button' value='Change' />"
z.colSpan = "2";
z.align = "center";
I'm attempting to run a small piece of code that will execute one of two source js files on my server. I have no problem creating the proper DOM script object with the proper type and conditional src value. However, when i add it to the document it does not seem to execute. I've tried adding it in two places, both using .appendChild(); myLocation.parentNode.appendChild(newScript); and document.getElementsByTagName("head")[0].appendChild(newScript); (myLocation is a calculated element representing the current script tag) In both these cases, the script tag is added to the document where I intended, but it does not appear to execute. The src has some doc writes in it and the tags the new script should generate right after itself are not there, as they are when I hard code the new sourced script tag into the document. All in all, my confusion comes from the fact that when I write a <script ... src="mysrc.js"></script> into my document, it behaves differently than when I have a script write an identical tag into the document in the same location. Also, fyi, I'm currently using Chrome (though I will require a multi-platform solution). Thanks for your time. Hello my first post. I have a function that insert commas via onclick or onblur. Code: function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
I also am using code from this link, where I can specify what parameters to allow the user to enter only positive/negative, decimals values and restricting characters that are not allowed. http://www.mredkj.com/tutorials/validate2.html I am having a hard time to incorporate the addCommas function into the link above. Does anyone have an example that I can look at where I can have commas added to a value dynamically while typing? e.g. if I type 1000 after that last 0 keystroke, it turns the value into 1,000. If I add 3 more zeros it turns it into 1,000,000. In the same vain if I subtract a 0 from the 1,000,000 the value is 100,000 instead. I appreciate any assistance in advance. Hi Everyone I'll explain the situation first: I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected. More Detail: LEFT SIDE OF SCREEN: [DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected. [ADD] <- add button that puts the values from the dropdown list to an array. RIGHT SIDE OF SCREEN: My Courses: * TEST1001 * TEST1002 This is being updated dynamically so that whenever the add button is hit, this lists grows. [SEND] <- Send button Thank you, I have the need to include an Ad Tag from a third party source that is generated via javascript which document.writes the code to display the ad. I have no control over this. I have it working on my end, BUT for the life of me I cannot get this to center in my div. It's like it busts out and aligns left after my div. I can't fathom what is going on. "IF" I include this ad tag directly in the page inside the div, it centers. But I need to dynamically pass it some data before it requests the ad, so I Have to dynamically create it, but this is the issue. It displays, just aligned left outside the target div. So, I am given a js tag with a src and that src generates a document.write that writes out an iframe. Here is my code below. I take the js src and replace some value in it since it is a string. Then I create a script element and then insert it into my div element on my page. var js_src = ("contents_of_the_src").gsub(/tie=/,'tie=' + random10_digit) var js_script = new Element('script',{'src': js_src}); Event.observe($('myDiv'), 'load', $('myDiv').insert({top : js_script})); so the view in question is something like this: <div id="myDiv"> <script language="text/javascript"> var js_src = ("contents_of_the_src").gsub(/tie=/,'tie=' + random10_digit) var js_script = new Element('script',{'src': js_src}); Event.observe($('myDiv'), 'load', $('myDiv').insert({top : js_script})); </script> </div> I've tried moving the js out of the div, afterwards, and try to insert then. I tried to create a new div, center that, and write the ad tag to it. All left alighned and outside of the div. Hi Friends, I need to select browser option dynamically using javascript for handling cookies , i.e., in need select checkbox "override automatic cookie handling" checkbox dynamically. Kindly help me friends how to select this checkbox dynamically. Tools - -> Internet Options --> Privacy (Tab) --> Advance (Button) --> Override automatic cookie handling . Thanks in Advance, Siva. hi this is santosh first off all thanks in advance to all who r reading my question im in prblm in my project in 1 file i have to first display textbox in html statically which will hav + & - button preceding it , & on click of + button one more textbox should appear dynamically & first textbox + button should disapper & it should hav only - button & the textbox which was dynamically generated now on click of first textbox + button should hav + & - button & it should go on. & on click of - button textbox which is in front of it should get deleted. here i tried alot but my code is showing + & - button to every textbox that is dynamically generated which is not the requirement plz help me im in great need. earlier also i hav submitted my queries & got a fully satisfied result bcoz of that now im having great hopes from u & this site plz reply as early as possible waiting for ur reply again thanks in advance Hi, I am using a javascript datepicker which works fine with simple textboxes: For example: I have a textBox startDate1 in the table below: <form method="post" name="upload" action=""> <table id="tableId"> <tr> <td> <input type="text" name="startDate1" value="" readonly="true" size="10"/> <script language="JavaScript"> new tcal ({'formname': 'upload','controlname': 'startDate1'}); </script> <td> </tr> <table> </form> --Now I want to add rows dynamically to this table for which I have <a href="javascript:addRowToTable();" >Add Row</a> and the corresponding javascript function: <script type = "text/javascript"> function addRowToTable() { var tbl = document.getElementById('tableId'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var box = row.insertCell(0); var element = document.createElement('input'); element.setAttribute('type', 'text'); element.setAttribute('name', 'startDate' + iteration); box.appendChild(element); } </script> --This code creates the text boxes properly, but I am not being able to add the datepicker to it. Please suggest me a way to add the datepicker to the textboxes in the dynamically generated rows. Thank You Regards Rusho Shaw So I have been struggling with a Javascript issues for a couple of days now and can't find an answer anywhere online that has helped. I have a javascript loop that is looping through all of my <dfn> html tags. These tags are used to show a glossary term on my page. When the user mouses over the term it shows a popup with the term name and the definition. Here is my javascript function: Code: function definitionRollover(){
var j;
var dfns = document.getElementsByTagName('dfn')
for (j=0; j<dfns.length;j++){
var term = dfns[j].innerHTML.charAt(0).toUpperCase() + dfns[j].innerHTML.slice(1);
var definitionArray = new Array(term, dfns[j].title);
dfns[j].onmouseover = function(){stm(definitionArray,Style[0])}
dfns[j].onmouseout = function(){htm();};
}
}
As you can see I am adding a onmouseover event to these <dfn> tags which calls another function (stm) with the definition and term being held in the definitionArray. This works great until I have multiple terms on a page. When I have multiple terms it only shows the last terms definition for all terms. My question is how I can get it to work for all terms. I know that throughout the loop the definitionArray is holding the correct info at the correct time but for some reason it only shows the last one. I hope that this makes sense and if anyone could give me any tips or leads it would be very much appreciated. |
|||||||