|
JavaScript - How To Display Spinner Buttons In Another Table
I have a spinner where user enters in their value or uses the buttons to increase or decrease the value. When the user is happy with the value in the spinner the user submits the value. The value would then appears in another table inside a textbox.
What my question is, is that how can I get it so that when user submits value in the other table that the spinner buttons are also displayed in the other table so that except the value is in a textbox, it is displayed in a spinner which operates exactly the same as the spinner in the previous table? Below is code where the value from the first spinner is retireved and oututted into another table into a textbox: Code: function insertQuestion(form) {
var row = document.createElement("tr");
var cell,
input,
alertErrors = "",
qnum = 1;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
input.value = form.textWeight.value;
cell.appendChild(input);
row.appendChild(cell);
document.getElementById("qandatbl").appendChild(row);
}
Below is html code which shows 3 tables, first table is where the user enters in the value of the answer weight in the spinner, second table is the submit button (Add Question) and third table is where the value is displayed after submission of the first spinner. Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<div id="detailsBlock">
<table id="answerWeight">
<tr>
<th colspan="3">
Answer Weight
</th>
</tr>
<tr>
<td class="spinner">Weight: <input type="text" class="spinnerWeight" name="textWeight" id="txtWeight" />%</td>
<td><button class="scrollBtn" id="btnWeightUp" type="button"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnWeightDown" type="button"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
</tr>
</table>
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<table id="qandatbl" border="1">
<tr>
<th class="qid">Question No</th>
<th class="question">Question</th>
<th class="option">Option Type</th>
<th class="answer">Answer</th>
<th class="weight">Weight</th>
</tr>
</table>
</form>
Hoefully that is all the information you require. If you want more information then just add a comment to me. Thank you. Similar TutorialsHi, I have 2 questions about my spinner. first question is that if a number is removed in the spinner by backspace and that there is no number in a spinner, when I click away from the spinner, it shows an empty spinner. What I really want is that if the spinner is empty and I click away, I want the spinner to display 0 instead. How can this be done? second question is that if I enter in 00045 or 0000009 in a spinner and I click away, I want it to display 45 and 9 and not 00045 and 0000009. How can this be done as well? Below is my spinner: Code: <script type="text/javascript">
function Spinner(elem,min, max){
this.elem = elem;
this.elem.value = min;
this.min = min;
this.max = max;
this.timer;
this.speed = 150; //milliseconds between scroll values
var selfO = this;
this.elem.onkeyup = function(){
var regex = /^[0-9]*$/;
if(!regex.test(selfO.elem.value)){
selfO.elem.value = selfO.elem.value.substring(0,selfO.elem.value.length-1);
return;
}
selfO.validateValue();
}
this.validateValue = function(){
if(Number(selfO.elem.value) > selfO.max) {selfO.elem.value = selfO.max;}
if(Number(selfO.elem.value) < selfO.min) {selfO.elem.value = selfO.min;}
}
this.stopSpinning = function(){
clearTimeout(selfO.timer);
}
this.spinValue = function(dir){
selfO.elem.value = Number(selfO.elem.value) + dir;
selfO.validateValue();
selfO.timer = setTimeout(function(){selfO.spinValue(dir);},selfO.speed);
}
}
window.onload=function(){
//create the Spinner objects
var SpinnerHours = new Spinner(document.getElementById('txtHours'),0,23);
var SpinnerMins = new Spinner(document.getElementById('txtMins'),0,59);
var SpinnerSecs = new Spinner(document.getElementById('txtSecs'),0,59);
//assign the scoll buttons' events
var btnHoursUpO = document.getElementById('btnHoursUp');
btnHoursUpO.onmousedown = function(){SpinnerHours.spinValue(1);}
btnHoursUpO.onmouseup = function(){SpinnerHours.stopSpinning();}
var btnHoursDownO = document.getElementById('btnHoursDown');
btnHoursDownO.onmousedown = function(){SpinnerHours.spinValue(-1);}
btnHoursDownO.onmouseup = function(){SpinnerHours.stopSpinning();}
var btnMinsUpO = document.getElementById('btnMinsUp');
btnMinsUpO.onmousedown = function(){SpinnerMins.spinValue(1);}
btnMinsUpO.onmouseup = function(){SpinnerMins.stopSpinning();}
var btnMinsDownO = document.getElementById('btnMinsDown');
btnMinsDownO.onmousedown = function(){SpinnerMins.spinValue(-1);}
btnMinsDownO.onmouseup = function(){SpinnerMins.stopSpinning();}
var btnSecsUpO = document.getElementById('btnSecsUp');
btnSecsUpO.onmousedown = function(){SpinnerSecs.spinValue(1);}
btnSecsUpO.onmouseup = function(){SpinnerSecs.stopSpinning();}
var btnSecsDownO = document.getElementById('btnSecsDown');
btnSecsDownO.onmousedown = function(){SpinnerSecs.spinValue(-1);}
btnSecsDownO.onmouseup = function(){SpinnerSecs.stopSpinning();}
var scrollBtnO = document.getElementsByClassName('scrollBtn');
for(i=0; i < scrollBtnO.length; i++){
scrollBtnO[i].onclick = function(){return false;}
}
}
</script>
<form action="create_session.php" method="post">
<table>
<tr>
<th>Duration:</th>
<td>Hrs</td>
<td class="spinner"><textarea class="spinner" name="txtHours" id="txtHours" cols="2" rows="1"></textarea></td>
<td><button class="scrollBtn" id="btnHoursUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnHoursDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
<td>Mins</td>
<td class="spinner"><textarea class="spinner" name="txtmins" id="txtMins" cols="2" rows="1"></textarea></td>
<td><button class="scrollBtn" id="btnMinsUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnMinsDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
<td>Secs</td>
<td class="spinner"><textarea class="spinner" name="txtsecs" id="txtSecs" cols="2" rows="1"></textarea></td>
<td><button class="scrollBtn" id="btnSecsUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnSecsDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
</tr>
</table>
</form>
I'm trying to implement a counter using HTML and Javascript, but I'd like the look of it to be as simple as possible. Is there a way to have the button value display a variable? Here's the relevent HTML: Code: <div id="second"> <input type="button" class="btn" value=number /> </div> number is a variable in my javascript that I'd like to have displayed as the button text so that each time the button is pressed, the number variable is increased by 1 and the button reflects that. Here's the relevent javascript: Code: window.onload = function () {
document.getElementById('Second').firstChild.onclick = number;}
var number = 0;
function increment(){
number++;
}
Any help would be appreciated. I'm super new to this so please go easy on me. I am building an online store where the customer can select custom parts. I'm quite new to javascript, but I've managed to create a radio button list, where the price is added from each section. I would like a box to show all of the options selected, not just the sum total. I've included the text with value and used parseInt. I have been told I can use value.split(" "), but I don't really know how to go about doing that. I've been fiddling for hours now and don't seem to be able to get anywhere. I would also like to include a 3rd value, another number, and add that one in a separate calculation. E.g. For "50 5850ati1gb 56" I would like one calculation which adds 50 to the total, another calculation adding 56 to a different total and 5850ati1gb added to a list of all of the components. I am not very experienced with this, so don't be afraid to talk to me like I'm stupid! Thank you in advance. My code so far: Code: <head>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.part.length; i++ ){
if( document.form1.part[i].checked == true ){
val1 = document.form1.part[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.part2.length; i++ ){
if( document.form2.part2[i].checked == true ){
val2 = document.form2.part2[i].value;
}
}
var val3 = 0;
for( i = 0; i < document.form3.part3.length; i++ ){
if( document.form3.part3[i].checked == true ){
val3 = document.form3.part3[i].value;
}
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3);
document.getElementById('totalSum').value=sum;
}
</script>
</head>
<body>
<form name="form1" id="form1" runat="server">
<br>
<input id="rdo_1" type="radio" value="0 1.8ghz2xAMD" name="part" checked="checked" onclick="DisplayPrice(this.value);">1.8Ghz Dual Core AMD
<br>
<input id="rdo_2" type="radio" value="50 2ghz2xAMD" name="part" onclick="DisplayPrice(this.value);">2Ghz Dual Core AMD
<br>
</form>Choose your memory:<br />
<form name="form2" id="form2" runat="server">
<br>
<input id="rdo_1" type="radio" value="0 1333corsair1gb" name="part2" checked="checked" onclick="DisplayPrice(this.value);">1333 Corsair 1GB
<br>
<input id="rdo_2" type="radio" value="50 1333corsair2x1gb" name="part2" onclick="DisplayPrice(this.value);">1333 Corsair 2x1GB
<br>
</form>Choose your graphics card:<br />
<form name="form3" id="form3" runat="server">
<br />
<input id="rdo_1" type="radio" value="0 5830ATI1gb" name="part3" checked="checked" onclick="DisplayPrice(this.value);">1GB ATI 5830
<br />
<input id="rdo_2" type="radio" value="50 5850ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5850
<br />
<input id="rdo_3" type="radio" value="75 5870ATI1gb" name="part3" onclick="DisplayPrice(this.value);">1GB ATI 5870
<br />
</form>
</body>
Hi, I have an HTML table dynamically populated with data from a coldfusion query and having radio buttons - see code following below. I need javascript to see the radio buttons and the user's selection - "approved"; "denied"; or, "N/A". If the user selects "approved" for multiple rows and then Submit the information will update the database table and remove those rows. However, if the user selects "approved" and "denied" then I need to update the "approved" rows and stop the update at the "denied" row and show a dialog box which informs the user that the "Reason for Denial" text box must be entered. Then the Submit button can be engaged and the "denied" selection processed. Only one "denied" at a time will be updated - but all "approved" entries can be denied similtaneously - unless a "denied" intervenes. I do have javascript code for the "denied" selection with empty "Reason for Denial" text box - see below: Code: <script type="text/javascript">
function rationale() {
var denInfo = document.getElementById("denialReason");
if(denInfo.value == ""){
alert("Please enter reason for denial in Rationale for Request Denial");
return false;
denInfo.focus();
}
}
</script>
The overall action seems like it would need some extensive javascript coding and I haven't a clue how to do it. Any help is GREATLY APPRECIATED. Code: <table border="1" cellspacing="1" cellpadding="2" style="position:relative; left:50px;" width="1000">
<tr>
<td width="140" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Name<hr />Begin Date</font></td>
<td width="75" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Request Date<hr />End Date</font></td>
<td width="145" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;">Type of Hrs<hr />Request Justification</font></td>
<td width="76" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Num Hrs Req<hr />Rel Comp Begin Date</font></td>
<td width="98" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Projects<hr />Rel Comp End Date</font></td>
<td width="180" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Decision<hr />Leave Slip Submitted</font></td>
</tr>
<cfoutput query="Req">
<tr style="background-color:'FFFFFF';" onMouseOver="this.style.backgroundColor='FFCC33';" onMouseOut="this.style.backgroundColor='FFFFFF'" >
<td colspan="6">
<table cols="6" border="1" cellpadding="5" cellspacing="0">
<tr>
<td width="177"> #Name#</td>
<td width="107"> #DateFormat(RequestDate, "m/d/yyyy")#</td>
<td width="178"> #TypeofHours#</td>
<td width="105"> #NumberHrsRequested#</td>
<td width="127"> #project#</td>
<td width="218"> #Decision#
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="approved" size="1">Approve
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="denied" size="1">Deny
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="" size="1" checked="yes">N/A
</td>
</tr>
<tr>
<td> #DateFormat(BeginDate, "m/d/yyyy")#</td>
<td> #DateFormat(EndDate, "m/d/yyyy")#</td>
<td> #justification#</td>
<td> #DateFormat(RCBDate, "m/d/yyyy")#</td>
<td> #DateFormat(RCEDate, "m/d/yyyy")#</td>
<td> #RCLeaveSlip#</td>
</tr>
<tr id="denyRow_#ID#">
<td colspan="1"><font color="##0000FF"; style="font-weight:bold">Reason For Denial</font></td>
<td colspan="5"> #ReasonForDenial#
<cftextarea name="denial_#ID#" cols="85" rows="3" wrap="hard"/>
</td>
</tr>
</table>
</td>
</tr>
</cfoutput>
</table>
Thank you, John If you type in a question in the question box and select your option and answers from the option and answers box ( do this: open grid, click on button "3", type in "1" in the "Number of Answers" text-box and select button "A" by clicking on it, the button should turn green) Now if you click on the "Add Question" button, it will display a new row in a table which would display the question in the textarea, but how do I code it so that it would display the buttons and the selected buttons under the "Answers" column? The code for inserting a row under the "Answer" column is below: Code: cell = document.createElement("td");
cell.className = "answer";
input = document.createElement("input");
input.name = "answer_" + qnum;
cell.appendChild(input);
row.appendChild(cell);
Whole code is in jsfiddle, click [here][1] [1]: http://jsfiddle.net/mMb8c/21/ I'm using php to write nested div's to a page. The div's display depending on a condition PHP Code: (if condition true) echo "<script type='text/javascript'>display(divID1);</script>"; echo "<div id='divID1'>"; (if condition true) echo "<script type='text/javascript'>display(divID2);</script>"; echo "<div id='divID2'>"; echo "<table id='tableID'><tr><td></td></tr></table>"; This is the javascript function Code: <script type='text/javascript'>
function display(id)
{
document.getElementById(id).style.display='block';
}
</script>
while both divs have {display: none;} as default, the outer div {border:solid;} does display but inner div {border:solid;} does not display. I've tried this: PHP Code: (if condition true) echo "<script type='text/javascript'>display(divID);</script>"; echo "<div id='divID1'>"; (if condition true) echo "<script type='text/javascript'>display(tableID);</script>"; echo "<table id='tableID'><tr><td></td></tr></table>"; then display using block, inline-block, table, inline-table, and still the inner element div or table will not display. Can anyone help me with this? Hi guys, I am new to this forum and I am sorry if this is not the right section to post this. Please move this to the appropriate section. I am rather new to HTML and Javascripting and am currently developing an Intranet Webpage. On one of the pages, I am required to update the contents of the webpage using a .csv file which will be uploaded to the server on a daily basis. I have learnt that it is possible to update the contents using "Tabular Data Control" to display the contents and update it regularly. I am also reuqired to change an images according to content in the table. However, I am only able to retrieve the first row the the table and therefore would like some assistance to help retrieve the subsequent rows. Here are my codes: Codes for the .csv/.txt files Code: Name,Status Item #1,Completed Item #2,Pending Item #3,Not Started Item #4,Completed Item #5,Completed Item #6,Pending HTML codes: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="loadStatus()">
<script type="text/javascript">
function loadStatus(){
var textField = document.getElementById("test").innerText
alert(textField);
if(textField == "Completed") {
document.getElementById("pic").src = '/images/completed.jpg'; }
else if (textField == "Pending") {
document.getElementById("pic").src = '/images/on-going.jpg'; }
else if (textField == "Not Started") {
document.getElementById("pic").src = '/images/not_started.jpg'; }
}
</script>
<OBJECT ID="data" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="test.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
<table border="1" bordercolor="#000000" cellpadding="0" datasrc="#data" >
<THEAD><TR>
<TBODY>
<TR>
<TD><img src="" width="14" height="14" id="pic"></TD>
<TD><div datafld="Name"></div></TD>
<TD id="test"><span datafld="Status"></span></TD></TR>
</TBODY>
</TABLE>
</body>
</html>
I have thought of adding 6 different <object> and 6 <span> using filter to filter each object according to their name. But it would be very messy and would make the page bigger in size. I hope you guys can help me. Thanks in advance. Cheers, Jermms Can someone show me how to get the summary box to the top right position under The Lighthouse address and align with the Date, Amount, etc box? Here is what I got. <title>The Lighthouse</title> <link href="lhouse.css" rel="stylesheet" type="text/css" /> <script src="list.js" type="text/javascript"></script> <script type="text/javascript"> function amountTotal() { var total = 0; for (var i=0; i < 35; i++) { total=amount[i]+total; } return total; } </script> </head> <body> <div id="title"> <img src="logo.jpg" alt="The Lighthouse" /> The Lighthouse<br /> 543 Oak Street<br /> Delphi, KY 89011<br/> (542) 555-7511 </div> <div id="data_list"> <script type="text/javascript"> document.write("<table border='1' rules='rows' cellspacing='0'>"); document.write("<tr>"); document.write("<th>Date</th><th>Amount</th><th>First Name"); document.write("</th><th>Last Name</th><th>Address</th>"); document.write("</tr>"); for (var j=0; j<35; j++) { if (j % 2 == 0) { document.write("<tr>"); } else { document.write("<tr class='yellowrow'>"); } document.write("<td>"+date[j]+"</td>"); document.write("<td class='amt'>"+amount[j]+"</td>"); document.write("<td>"+firstName[j]+"</td>"); document.write("<td>"+lastName[j]+"</td>"); document.write("<td>"+street[j]+"<br />"); document.write(city[j]+', '+state[j]+' '+zip[j]); document.write("</td>"); document.write("</tr>") } </script> </div> <div id="totals"> <script type="text/javascript"> var contributions=j; var $total=amountTotal(); document.write("<table border='1' cellspacing='1'>"); document.write("<tr>"); document.write("<th id='sumTitle' colspan='2'>"); document.write("Summary"); document.write("</th>"); document.write("</tr>"); document.write("<tr>"); document.write("<th>Contributors</th>"); document.write("<td>"+contributions+"</td>"); document.write("</tr>"); document.write("<tr>"); document.write("<th>Amount</th>"); document.write("<td>"+"$"+$total+"</td>"); document.write("</tr>"); document.write("</table>"); </script> </div> </body> </html> I'm trying to click on a link and via Ajax, get a table row to display updated data. I have it all working except it displays at the top of the table instead of inside the table at the desired row. For now, I'm just trying to add a simple table row using: Code: <TR><TD>test</TD></TR> Here is my table code: Code: <TABLE> <TR><TD>one</TD></TR> <TR><TD>two</TD></TR> <span id="id_row3"></span> </TABLE> So when I click on my link to execute the ajax code, I expect to see a table row inserted with the text "four" but "four" displays at the top of the web page, above the table itself. How can I get the new row to insert at the id_row3 tag? Thanks for any help... I'm having to write a program in javascript that appends a html table to show numerical values... Here is my code which I'm stuck at... Code: <!DOCYTYPE html>
<html>
<head><title>Numeric Bases</title>
<style type="text/css">
body { padding: 2em; margin: 0px auto; background-color: white; color: #222; font-family: "Helvetica", "Arial", sans-serif;}
h1 {border-bottom: 1px solid #aaa; text-align: center; }
p#countdown { font-size: 150px; text-align: center; margin: 0; padding: 0;}
table { width: 50%; margin: 0 auto; }
caption { font-size: xx-large; font-weight: bold; }
thead > tr {background-color: #aaa; }
td, th { text-align: center; padding: 1em; border: 1px solid #ccc; }
tr.alternate { background-color: #eee; }
</style>
<script type="text/javascript" src="num-bases1.js"></script>
</head>
<table>
<caption>Numerical values in various bases</caption>
<thead><tr><th>Dec</th><th>Binary</th><th>Octal</th><th>Hex</th></tr></thead>
<tbody></tbody>
</table>
</body></html>
Code: /*
* The following function should generate table cells
* that contain an integer (in base 10), and its equivalent
* in Binary (base 2), Octal (base 8), and Hexidecimal (base 16).
*/
var num_bases = function(max_number) {
output = '';
for ( var count = 1; count <= max_number; count++){
var binary = count.toString(2);
var octal = count.toString(8);
var hex = count.toString(16);
output += '<tr><td>' + count + '</td><td>' + binary + '</td><td>' + octal + '</td><td>' +
hex + '</td></tr><tr class="alternate"><td colspan="4"></td></tr>';
}
// TODO:
// Write a for loop that appends HTML for the
// table row and cells to the output.
//
// The following is an example of a table row:
//
// <tr> <td>4</td> <td>100</td> <td>4</td> <td>4</td> </tr>
//
// Every other row should have an "alternate" class:
//
// <tr class="alternate">
document.getElementById('num-bases').innerHTML = output;
}
window.onload = function() {
num_bases(50);
}
I have a table with red and green cells...what I want to do is collapse rows with ALL green cells and show every other... My code right now runs into a problem when there are both red and green cells in a row...It shifts the red cells to the left... Code: <html>
<head>
<style type="text/css">
.green{ background:green;display:none;}
.red{ background:red;}
</style>
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<table id='theTable' border=2>
<tr>
<th>col0</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
</tr>
<tr>
<td><a href="#" id="showgreen">Uncollapse</a></td>
<td class="green">1</td>
<td class="green">9</td>
<td class="green">20</td>
<td class="red">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr id="toggleMe">
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="green">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
</table>
<a href="#" id="showred">Toggle Errors</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$("#showgreen").click(function(){
$('.green').toggle();
});
$("#showred").click(function(){
$('.red').toggle();
});
</script>
<p><button onclick="toggleVisibility()">toggle</button></p>
</body>
</html>
How can i preserve the cell position as well? New to this, worked through the w3c tutorials and am really fascinated by some of the concepts. I'm only familiar with html, css, js (basics), so am trying to keep things as simple as I can for this. For simplicity I'll use books.xml with a listing of books. Each book has a <title><author><year><price> and <image> element. The images are stored in a folder called "images" a path is listed in the xml document. Using js and an array I can loop through the xml file and have it extract each node into a table, if I mouseOver a ROW in the table, it displays that listing in a DIV above and I would like it to display the image/thumbnail for that particular listing within another div called thumbnail which is in the same location regardless of which listing you mouseOver. Quote: if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("book"); i=0; function displayBook(i) { title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); author=(x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue); year=(x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue); price=(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue); genre=(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue); txt="Author: "+author+"<br />Title: "+title+ "<br />Year: "+year+"<br />Price: "+price + "<br />Category: " +genre; document.getElementById("showBook").innerHTML=txt; } Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <script type="text/javascript" src="myscript.js"></script> <link rel="stylesheet" type="text/css" href="stylin.css" /> </head> <body onload="displayBook(0)"> <div id="wrap" width="40%"> <div id="desc">Listing: </div> <div id='showBook'></div><br /> <div id="thumbnail">thumbnail <script type="text/javascript"> document.write(????????????????); </script></div> <script type="text/javascript"> document.write("<table border='1'; >"); document.write("<caption>Mouse over a cell to view description:</caption"); document.write("<tr><td class=top>Book Title</td><td class=top>Category</td><td class=top>Cost: </td></tr>"); for (var i=0;i<x.length;i++) { document.write("<tr onMouseOver='displayBook(" + i + ")'; >"); document.write("<td>"); document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); document.write("</td><td>"); document.write(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue); document.write("</td><td>" + "$"); document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue ); document.write("</td><td>"); document.write(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue ); document.write("</td></tr>"); } document.write("</table>"); </script></div></div> </body> </html> So the way this looks is there's a grey div. At the top it says listing, and when the body loads it lists the [0] first entry from the array. To the right of this is a small div called thumbnail that is empty and I would like it to load the relevant image from the path in the <image> tag in the xml file. Below the listing is a table with 4 columns (title, genre, price, image) and an equal number of rows to the number of listings in the xml file. Under the "image" column it just shows the path to the image. So how do I tie the empty thumbnail div to the listing so it'll just add the path from the xml <image> tag into a <img src="pathnamefromxmldocument"> Thanks in advance! Hello, I am new to JavaScript. I have stuck up at a point. I have generated a table of given dimensions (say 5x5) using JavaScript. Using Mouse events, I want to add a functionality which would display the position of the cell in that table whenever mouse pointer hovers over a particular cell. Here's what I have done. Code: <html>
<body>
<h1 align="center"><u>ITA Tutorial</u></h1>
<h3>Problem Statement</h3>
<p>Prepare the table of 5 X 5. On the cursor movement over the table, display the table cell no with row X column value.</p>
<br><br>
<table border="1" align="center" cellpadding="2">
<script type="text/JavaScript">
var i, j
for (i=1;i<6;i++)
{
document.write("<TR>")
for(j=1;j<6;j++)
document.write("<TD> </TD>")
document.write("</TR>")
}
</script>
</table>
</body>
</html>
I tried adding onMouseover event in the <TD> tag but somehow the whole table disappears when I do that. Please help. Hi All, I have a button in my html form that will process some functions when user clicks on the button. The problem is after processing the functions, the result is not displayed in the form where I want it to be displayed. I want to ask whether we can create table in the function and display the result in the table row/column but in the same form. Is this possible to be done? And how to do this? In this form cpiM, the input button will call function showIndex. Code: <tr> <td><input type="button" value="Enter" onclick="showIndex(document.cpiM.currFrom.options.selectedIndex, document.cpiM.currTo.options.selectedIndex, document.cpiM.base.options.selectedIndex, document.cpiM.country.options.selectedIndex)"> </td> <td><input type="button" onclick="frmResetM()" value="Reset form" /> </td> </tr> In this function, I want to display the result of calcIndex right below the button Enter in the form cpiM. Code: function showIndex(frm, to, base, country)
{
for (i=frm; i<=to; i++)
{
document.write(calcIndex(i, base, country));
document.write("<br/>");
}
}
Hello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance <style> .table th {border-style: solid; border-color: red;background-color: #CCCCFF; } </style> <body> <table border="1" class="table"> <thead> <th colspan = "5">Click an Image to Enlarge </th> </thead> <tbody> <tr> <td> <img src = "Thumbnails/ada1838-thumb.JPG" alt = "ada1838-thumb" > </td> <td> <img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb"> </td> <td> <img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb"> </td> <td> <img src = "Thumbnails/aediagram-thumb.JPG" alt = "aediagram-thumb"> </td> <td> <img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb"> </td> </tr> <tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center"> </td> </tr> <thead> <th colspan = "5"> </th> </thead> </table> </body> </html> I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function: 1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100. Does any one know how to code this in my function below in javascript: Code: function insertQuestion(form)
{
var row = document.createElement("tr");
var cell, input;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
cell.appendChild(input);
row.appendChild(cell);
}
Hey guys, I'm hoping this is possible or that there is an easier way to do this. I'm having an issue with displaying data from one array that contains information about users in a table that is controlled by a different array. Is it possible to do this or is this use of arrays to display the data the wrong approach? The table is located on one webpage, I simply want to extract one piece of information that I have placed in the initial array as part of the login script that contains user information (for validation for login etc) and display it in a table on the new webpage that is opened as a result of successful validation of the user details. I'm completely stumped and after many attempts I just can't seem to get it to work. Hi all, I'm having trouble getting the following right: Code: <IMG border="0" onMouseOver=this.src="home2.gif" onMouseOut=this.src="home.gif" onClick=this.src="home2.gif" SRC="home.gif"> The idea is that after somebody clicks it, the button will remain home2.gif, but ofcourse if u mouseout after the click it will return to home.gif. Can somebody please help me with this problem?! I'm not really good at js, so I've been struggling with this for quite a few days ! Thnx alot! Sjaroow hello, I created this program to hold 5 cd's and some information relating to them. I keep getting an error that says: cannot find symbol symbol : class ButtonListener location: class inventoryprogram.InventoryProgram ActionListener btnListen = new ButtonListener(); // create listener here is the part of code with the actionlistener in it [CODE] private JPanel createButtonPanel() { // begin method createButtonpanel method ActionListener btnListen = new ButtonListener(); // create listener // create button objects JButton nextButton = new JButton("Display Cd"); // create and label button nextButton.setActionCommand("Next"); // action command for click nextButton.addActionListener(btnListen); nextButton.addActionListener(this); JPanel panel = new JPanel(); panel.add(nextButton); // add next button to panel return panel; // return panel } // end method createButtonPanel [ICODE] I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page. Here's a working example of what I have. The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think. HTML-side my button images get class="rollover" and a unique id. Code: window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
var rollOvers = document.getElementsByClassName("rollover");
for(var i=0; i<rollOvers.length; i++){
setupRollover(rollOvers[i]);
}
}
function setupRollover(thisImage){
//UP
thisImage.outImage = new Image();
thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
thisImage.onerror = thisImage;
thisImage.onmouseout = rollOut;
//OVER
thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
thisImage.onerror = rollOut;
thisImage.onmousedown = rollClick;
//DOWN
thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
thisImage.onerror = rollOut;
thisImage.onmouseover = rollOver;
thisImage.onmouseup = rollOver;
}
function rollOver() {
this.src = this.overImage.src;
}
function rollOut() {
this.src = this.outImage.src;
}
function rollClick() {
if(lastClick){
lastClick.onmouseout = rollOut;
lastClick.src = this.outImage.src;
}
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;
What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible? Thanks for any help you can provide! |
|||||||