Learn VBA & Macros in 1 Week!

JavaScript - Toggling Display Table Problem

Full Excel VBA Course - Beginner to Expert

Toggling Display Table Problem	View Content

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?

Full Excel VBA Course - Beginner to Expert

Need Help With Toggling Divs

Similar Tutorials

View Content

Hi, I have a good toggle script that does what I want for the most part.

I have a set of links. When you click one the content in that div replaces the previous content. When you load the page, the content of link one shows.

However, I would like to have different content show, not related to any of the links, when the page first loads. Once you click on any of the links that copy will get replaced with the corresponding copy.

I am attaching the code and a link to the page.

Code:

<!-- Hide/Show -->
<script type="text/javascript">
	window.onload=function() {
	var aObj=document.getElementsByTagName('a');
	var i=aObj.length; 
	while(i--) { 
		aObj[i].count = i;
		aObj[i].onclick=function() {return showHide(this);};
		showHide(aObj[i]);
		}
	};
	
	function showHide(obj) {
	var aDiv=document.getElementById('wrapper').getElementsByTagName('div');
	if (typeof showHide.counter == 'undefined' ) {
		showHide.counter = 0;
		}
	aDiv[showHide.counter].style.display = 'none';
	aDiv[obj.count].style.display = 'block';
	showHide.counter = obj.count;
	return false;
	}
</script>

http://www.michelleswann.com/test/index.html

Thanks so much for any help!

One Last Button Toggling Question

Similar Tutorials

View Content

Hi,

I have two excellent pieces of code (thanks Old Pedant and jmrker) that I am trying to get to talk to each other. Basically I want to achieve the same button effect as here

but with a group of buttons that get produced from xml via innerhtml.

here's the code I'm using to create the buttons:
Code:

sidebar_html += '<div id="category"><input type="checkbox" id="'+category+'" onclick="boxclick(this,\''+category+'\',\''+poly_num+'\');"></div><div id="label">' + label + '</div><div id="bus"><button onclick="startCar(this,' + poly_num + ')" style="height:24px; width:30px"> <img id=this,"pauseBtn" src="play2.png" ></button></div><br>';

and here's the code that attempts to toggle them between the play and pause symbol:

Code:

function startCar(btn,pnum,poly_num){
if (this.wasRun)
 { 
btnAction();
} else {
if( !this.wasRun )

toggleRun(btn, pnum);
btnAction();
this.wasRun = true;
}
}
	  
function toggleRun(btn, pnum){
   var inps = document.getElementsByTagName("input"); 
for ( var i = 0; i < inps.length; ++i ) {
        var inp = inps[i];
        if ( inp.value = "play2.png" ) inp.value = "pause2.png";
    }
startAnimation(pnum);
}
 
function btnAction() {
  var currentBtn = document.getElementById('pauseBtn').src;
  var currentPath = currentBtn.substring(0,currentBtn.lastIndexOf('/'));
  var currentInfo = currentBtn.substring(currentBtn.lastIndexOf('/')+1);

  if (paused == true){
    paused=false;
    if (currentInfo == "play2.png") { currentInfo = 'pause2.png'; }
    document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
   setTimeout("animate("+(continueStep)+")", tick); 
  } else {
    paused=true;
    if (currentInfo == "pause2.png") { currentInfo = 'play2.png'; }
    document.getElementById('pauseBtn').src = currentPath+'/'+currentInfo;
  
  }
}

The page I'm working on is here

Everything works as it should except for the toggling between images.

Mouseover On Toggling Image Button

Similar Tutorials

View Content

Hi,

I have this button:
Code:

  <input type="image" src="pause.png" onmouseover="src='pauseon.png'" onmouseout="src='pause.png'" onclick="togglePause()" id="pauseBtn"/>

which changes from the play image to the pause image when clicked, using this function:

Code:

function togglePause(){
	if (paused){
		paused=false;
		document.getElementById('pauseBtn').src="pause.png";
		setTimeout("animate("+(continueStep)+")", tick);
	} else {
		paused=true;
		document.getElementById('pauseBtn').src="play.png";
	}
}

but it doesn't really work how I want it to - first off, I can't get the same mouseover and mouseout effect working for when the button is on the "play" image

secondly, the button reverts to the pause image regardless of if it is in play or pause state.

I'm kind of lost - can someone throw me a line?

the page I'm working on is here if you want to have a look

Logic Error In Acrojs: Subtracting Instead Of Toggling

Similar Tutorials

View Content

Putting some javascript into a pdf file and can't get this to work out right.

Basic setup:

Field X = checkbox;
Field Y = numeric input field;

Here's what should happen (increment is toggled):

Y has a value. When X is checked, Y is increased by 5. When X is unchecked, Y goes back to its original, unmodified value.

Here's what really happens (increment is subtracted):

Y has a value. When X is checked, Y is reduced by 5. When X is unchecked, Y is reduced by 5 again. Anytime X is clicked on, Y is reduced by 5 yet again.

Here's the code:

Code:

function check_box(X, Y){
  if(X.checked == true){
    Y.value += 5;   
  } else {
    Y.value -= 5;
  }

Any help or advice is greatly appreciated.

Toggling Class Works With One Function But Adding Second Function Does Not

Similar Tutorials

View Content

Hi!

I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe.

Link to the page:
Franklin Township Soccer Club - Change Field Status

My sad, sorry attempt =|

Code:

	$( "li.open" ).click(function() {
	$( this ).toggleClass( "closed" );
	});
	
	$( "li.closed" ).click(function() {
	$( this ).toggleClass( "open" );
	});

The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so!

In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission!

I do appreciate any help given!

Dave

Table/div Display

Similar Tutorials

View Content

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?

I Need To Display A Summary Table

Similar Tutorials

View Content

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>

Can't Display A Table Row Via Ajax

Similar Tutorials

View Content

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...

Having Problems Getting My Table To Display

Similar Tutorials

View Content

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);
    
    }

Using Javascript To Display Next Table Row.

Similar Tutorials

View Content

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

How To Display Spinner Buttons In Another Table

Similar Tutorials

View Content

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.

Parse Xml Using Js Into Html Table, Help Display Thumbnail

Similar Tutorials

View Content

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!

Display Cell Position In A Table Using Javascript

Similar Tutorials

View Content

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>&nbsp</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.

To Display Return Value Of A Function In A Table In The Same Html Form

Similar Tutorials

View Content

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/>");
     }	  
}

Making A Function To Display A Full Size Image In A Table..from A Thumnail

Similar Tutorials

View Content

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>

Slideshow Display Problem

Similar Tutorials

View Content

I'm not sure whether this is a javascript or CSS related problem so sorry if I've posted this in the wrong place.
I'm modifying a slideshow plugin to fit my website and have changed some of the dimensions of the slides. Now the next slide is coming in from the wrong position on the right hand side.
I'm not sure how to fix this, can someone please help?

http://ah.mjtippet.com/

Textbox Display Problem.

Similar Tutorials

View Content

Can anyone tell me what I am doing wrong? I am a javascript student and I am building a calculator. The display on the calculator will not show the numbers when the button is selected. I am inserting my javaScript and html:

<html>
<head>
<title> Calculator</title>

</head>
<script type = "text/javascript" src="calculator.js"></script>
<body>
<center>Calculator<br>
To use this calculator, CLICK a number, then an ACTION, then another
number, then the EQUALS button. <br>
Press "C" when ready to start over.
<br> The "N" button makes your previous number a negative.<br></center>

<form name="calculator">

<table border = "1" align ="center">
<tr>
<td ><input type = "text" size = 26 name = "display" id = ""/></td>
</tr>

<tr ><br />

<td>
<input type = "button" value = " 7 " id = ""
onclick="newstring('7')">

<input type = "button" value = " 8 " id = ""
onclick="newstring('8')"/>
<input type = "button" value = " 9 " id = ""
onclick="newstring('9')">
<input type = "button" value = " / " id = ""
onclick="newstring('/')">
</td>
</tr>
<tr ><br />


<td>
<input type = "button" value = " 4 " id = ""
onclick="newstring('4')">
<input type = "button" value = " 5 " id = ""
onclick="newstring('5')">
<input type = "button" value = " 6 " id = ""
onclick="newstring('6')">
<input type = "button" value = " * " id = ""
onclick="newstring('*')">
</td>
</tr>

<tr ><br />


<td>
<input type = "button" value = " 1 " id = ""
onclick="newstring('1')">
<input type = "button" value = " 2 " id = ""
onclick="newstring('2')">
<input type = "button" value = " 3 " id = ""
onclick="newstring('3')">
<input type = "button" value = " - " id = ""
onclick="newstring('-')">
</td>
</tr>

<tr ><br />


<td>
<input type = "button" value = " 0 " id = ""
onclick="newstring('0')">
<input type = "button" value = " N " id = ""
onclick="newstring('N')">
<input type = "button" value = " = " id = ""
onclick="newstring('=')">
<input type = "button" value = " + " id = ""
onclick="newstring('+')">
</td>
</tr>

<tr ><br />


<td>
<input type = "button" value = " &nbsp " id = "">
<input type = "button" value = " &nbsp " id = "">
<input type = "button" value = " &nbsp " id = "">
<input type = "button" value = " C " id = ""
onclick="clear()">
</td>
</tr>

</table>

</body>

</form>

</html>

###############################################
javascript:
memory = "0";
current = "0";
operation =0;

function newstring(digit)
{
if (eval(current) == 0)
{
current = digit;
}
else
{
current = current + digit;
}
document.calculator.display.value=current;
}

Picture Display Problem In Iframe

Similar Tutorials

View Content

Code:

window.onload = function() 
	{
		var vIframeUrl;
		vIframeUrl= document.getElementById("ifrBDiagram").src;
		
		if (vIframeUrl == "#" && document.getElementById("txtBnr").value == "")
		{
			document.getElementById("ifrBDiagram").src = "C://eBondingDiagram//Infineon.jpg";
		}
		getIframeSize(); 
	} 

function getIframeSize()
	{
		//Get window width and height
		var winW = 630, winH = 460;
		if (document.body && document.body.offsetWidth) { 
			winW = document.body.offsetWidth;
			winH = document.body.offsetHeight;
		}
		if (document.compatMode=='CSS1Compat' &&
			document.documentElement &&
			document.documentElement.offsetWidth ) {//alert("in 2");
			winW = document.documentElement.offsetWidth;
			winH = document.documentElement.offsetHeight;
		}
		if (window.innerWidth && window.innerHeight) {//alert("in 3");
			winW = window.innerWidth;
			winH = window.innerHeight;
		}
		
		document.getElementById("ifrBDiagram").width = (winW * 0.95);
		document.getElementById("ifrBDiagram").height = (winH * 0.88);
	}

Code:

<table width="100%" height="100%" bgcolor="#CAD4E3" align="center" valign="center" style="border: 5px solid;">
	<tr>
		<td><b>Bnr No:</b></td>
		<td><input type="text" id="txtBnr" name="txtBnr" /></td>
		<td> </td>
		<td> </td>	
	</tr>
	<tr>
		<td><b>Lot No:</b></td>
		<td><input type="text" id="txtLot" name="txtLot" /></td>
		<td><INPUT id="btnCopy" TYPE="button" VALUE="Bonding Diagram" ONCLICK="fncCopy()">&nbsp;&nbsp;<INPUT id="btnUpdate" TYPE="button" VALUE="End Lot" ONCLICK="reloadPage()"></td>
		<td> </td>
	</tr>
	<tr>
		<td><b>Failure Catalogues:</b></td>
		<td><select id="myList">
			<option></option>
			<option>DSO</option>
			<option>Pre-Assembly</option>  
			<option>PO EOL</option>
			<option>TDSON/TSDSON</option>
			<option>S308/WISON</option>
			</select>
		</td>
		<td><INPUT id="btnCata" TYPE="button" VALUE="Failure Catalogue" ONCLICK="fcnFailureCatalogue()"></td>
		<td> </td>	
	</tr>
	<tr>
		<td colspan="4">
			<iframe name="ifrBDiagram" id="ifrBDiagram" src=# style="border-width:4px; border-style:solid; border-color:blue;">
				<span id="sMsg"></span>
			</iframe>
		</td>
	</tr>
</table>

When I first run the html , the interface just goes like this.

After I press F5 to refresh the window, it displays this. The image just wont fit the iframe exactly.

Can anyone please help to spot the bug ? I tried to use different resolution picture but still, the problem just doesn't solve. Is it really because of the image resolution ? Or something else gone wrong in my html ? Thanks

Display(objxml.responsetext) Problem =(

Similar Tutorials

View Content

Hello guys, i really need help with my code...i was stuck with it for like 4 hours ><
I want to display the content of my text file inside the html page in the div tags so i could place it somewhere around th page or change it style etc. Could anyone please help? And another question : Are there any chances to display my text data, which is one number in the input box ?

Quote:
<HTML><HEAD>
<SCRIPT language = "Javascript">

objXml = new ActiveXObject("Microsoft.XMLHTTP");

var datafile = "G:\data.txt";

objXml.open("GET", datafile, true);
objXml.onreadystatechange=function() {
if (objXml.readyState==4) {
display(objXml.responseText);
}
}

objXml.send(null);
function display(msg) {

mydiv.innerHTML = msg ;
}

</SCRIPT>
<BODY>
<input type='button' onclick='display(msg)' value='Display'/>
<div id="mydiv"></div>
</BODY>
</HTML>

Javascript Drop-down Menu Display Problem In Ie 6 And 7

Similar Tutorials

View Content

I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it).

It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it.