AllSeoHelp.com
Search the Entire Site
  • PHP
  • JavaScript
  • CSS
  • HTML
Learn VBA & Macros in 1 Week!

JavaScript - Parse Xml Using Js Into Html Table, Help Display Thumbnail
Full Excel VBA Course - Beginner to Expert

Parse Xml Using Js Into Html Table, Help Display Thumbnail

 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!
Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Display Image When Clicked On Thumbnail
To Display Return Value Of A Function In A Table In The Same Html Form
Parse Html To Create Array From Specific Td Tags
Table/div Display
Can't Display A Table Row Via Ajax
I Need To Display A Summary Table
Using Javascript To Display Next Table Row.
Having Problems Getting My Table To Display
Toggling Display Table Problem
How To Display Spinner Buttons In Another Table
Display Cell Position In A Table Using Javascript
Display Html In Javascript
Making A Function To Display A Full Size Image In A Table..from A Thumnail
Xml: How Do I Get It An Xml To Display Contents In Html Page?
Javascript Call To Display A Html File
Dynamically Display Textbox In Html Using Javascript & Jquery
Javascript Stopwatch That Can Divide Seconds On Display In Html Form
Getting Next Thumbnail In Jquery
Sliding Thumbnail Bar
Thumbnail Image Viewer


Learn VBA & Macros for Excel in 1 Week!


Display Image When Clicked On Thumbnail

 Similar Tutorials View Content
Hi,
I have a table with 2 colums, the left column is to preview image and the right column is for 4 small thumbnails. Iwant the preview picture to change when clicked on the individual thumbnail.
Can someone please help me on this?
Code:
<table width="816" height="303" border="1">
  <tr>
    <td width="396" height="297">&nbsp;</td>
    <td width="404" valign="top"><table width="100%" border="1">
      <tr>
        <td width="52%" height="166"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200"/> </td>
        <td width="48%"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
      <tr>
        <td height="174"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
        <td><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
    </table></td>
  </tr>
</table>


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


Parse Html To Create Array From Specific Td Tags

 Similar Tutorials View Content
Well after much trial and error I come asking for help. I am trying to write a greasemonkey script that scans a page for all the values between certain <td> tags. When I used firebug it shows what I am looking for as
<td class="username">THEUSERNAME</td>
but when I view the source it just shows up as
<td>THEUSERNAME</td>
I want to create an array of the 100 <td>'s on the page that pertain to usernames but none of the other <td>'s

I created a test page that mimicked the code, what I thought origionally, to be so I could test my script with ease. And it worked when there was an actually <td class="username">

This is what I have so far:

Code:
// ==UserScript==
//
//Displayable Name of your script 
// @name           EXAMPLE 
//
// brief description
// @description    EXAMPLE 
//
//URI (preferably your own site, so browser can avert naming collisions
// @namespace      http://something.com
//
// Your name, userscript userid link (optional)   
// @author         ME
//
//Version Number
// @version        1.0
//
// Urls process this user script on
// @include        http://example.com
// ==/UserScript==


var test = document.getElementsByClassName('username');

alert(test.length);
test[5].style.color="yellow"; //Just to see if it actually worked


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?

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

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 &nbsp;&nbsp;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>

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

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


Toggling Display Table Problem

 Similar Tutorials 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?

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.

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.

Display Html In Javascript

 Similar Tutorials View Content
I'm trying to display the elements in an array but doesn't seem to work:

Code:
var myurl=new Array("google.com", "yahoo.com"); 

for (i=0;i<=myurl.length-1;i++){
   document.writeln("<a href='http://www.' +  myurl[i] +  target='_blank'>");
}


Not sure why it is not working??

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>


Xml: How Do I Get It An Xml To Display Contents In Html Page?

 Similar Tutorials View Content
Hello,

I have an issue. I can't seem to extract XML from an somepage.xml document and display it on a regular webpage. I have no way of reading its contents.

I read up on some microsoft way of doing it, but not sure that is gonna fly (need it for most browsers), so can this be done easily with json/ajax?

I have an xml file in normal format:

www.somedomain.com/somepath/somexml.xml

<products>
<items>
<item>blah</item>
<item>blah2</item>
<item>blah3</item>
<item>blah4</item>
<item>blah5</item>
</items>
</products>

So, how do I get that data to manipulate and display in my html?
I don't even know where to begin with json/ajx etc.. and how to call the xml file etc..

Javascript Call To Display A Html File

 Similar Tutorials View Content
I have a javascript file and a html file. On the html file I have an action (button) and would like to use some type of attribute of the onclick to call my function to open this html file.

below is the beginning of my function:

requestPanel_Forwardme: function() {

view.opendialog("show_me")

What other attributes of action can I use? can this function in my JS file be called and if so how would I call it?

<action??

Dynamically Display Textbox In Html Using Javascript & Jquery

 Similar Tutorials View Content
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

Javascript Stopwatch That Can Divide Seconds On Display In Html Form

 Similar Tutorials View Content
Hi guys!

I have a simple JavaScript stopwatch that displays the time using an html form with start/reset and clear buttons. Basically I'm making a speed calculator that converts seconds into MPH. All I need it to do is divide whatever the amount of seconds are by 40.91. So instead of it displaying the seconds being counted up (i.e. 2 seconds, would displayed as 20.455 MPH). Does that make sense?

JavaScript is not my strong suit, and It's got me stumped.

JavaScript:
Code:
	var t=[0, 0, 0, 0, 0, 0, 0, 1];

	function ss() 
	{
	t[t[2]]=(new Date()).valueOf();
	t[2]=1-t[2];
	if (0==t[2]) 
	{
		clearInterval(t[4]);
		t[3]+=t[1]-t[0];
		t[4]=t[1]=t[0]=0;
		disp();
	} 
	else 
	{
		t[4]=setInterval(disp, 43);
	}
	}

	function r() 
	{
	if (t[2]) ss();
	t[4]=t[3]=t[2]=t[1]=t[0]=0;
	disp();
	t[7]=1;
	}

	function disp() 
	{
	if (t[2]) t[1]=(new Date()).valueOf();
	t[6].value=format(t[3]+t[1]-t[0]);
	}

	function format(ms) 
	{
	var d=new Date(ms+t[5]).toString()
		.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
	var x=String(ms%1000);
	while (x.length<3) x='0'+x;
	d+='.'+x;
	return d;
	}

	function load() 
	{
	t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
	t[6]=document.getElementById('disp');
	disp();
	}

HTML form:
Code:
  <input type='text' id='disp' maxlength=12 readonly />
  <button type='button' onclick='ss()' id='butt' data-inline="true">Start/Stop</button>
  <button type='button' onclick='r()' id='butt2' data-inline="true">Reset</button>

Any help is greatly appreciated!!!

Getting Next Thumbnail In Jquery

 Similar Tutorials View Content
Code:
<ul>
<li><a href="dog.jpg"><img src="dog_t.jpg"  alt="dog" /></a></li>
<li><a href="cat.jpg"><img src="cat_t.jpg"  alt="cat" /></a></li>
<li><a href="pig.jpg"><img src="pig_t.jpg"  alt="pig" /></a></li>
<li><a href="cow.jpg"><img src="cow_t.jpg"  alt="cow" /></a></li>
</ul>

My jQuery is set up so that when I click on a thumbnail, a div opens up with the bigger image. I also want the thumbnail of the next image to appear in the same div. So if I click the cat, I want to see the large cat and the pig thumb. How do I tell it that I want the next IMG inside the next A inside the next LI?

Sliding Thumbnail Bar

 Similar Tutorials View Content
So about a couple of weeks ago I decided to start learning the basics of web development and design through the w3schools website. I found no problems learning HTML/XHTML and CSS1/2/3. I decided the best way to learn these languages was to implement something from each language into a project (a website, which is currently stored locally on my laptop)

The project is a site dedicated to favourite images of my family. In it is a main image viewer, followed by a nav bar underneath displaying thumbnails of a few images. I implemented a small JS script so when I click a thumbnail, the corresponding image is displayed within the main image viewer.

I then moved onto jQuery in my development knowledge quest, and decided the next thing I wanted to do was add more images to the nav bar and be able to scroll (with two buttons) across the nav bar. This is where I've hit an end stop in being able to do this with no help.

So to begin with, this is my HTML for the thumbnail navbar:

Code:
<div class="scrollWrapper">
<div class="controlsPrev"></div>
<div class="controlsNext"></div>
		

<div class="scrollableArea">
		<p><input type="image" src="images/home/54.jpg" alt="Image" onclick="displayImage('images/home/54.jpg')" /></p>
		<p><input type="image" src="images/home/55.jpg" alt="Image" onclick="displayImage('images/home/55.jpg')" /></p>
		<p><input type="image" src="images/home/56.jpg" alt="Image" onclick="displayImage('images/home/56.jpg')" /></p>
		<p><input type="image" src="images/home/57.jpg" alt="Image" onclick="displayImage('images/home/57.jpg')" /></p>
		<p><input type="image" src="images/home/58.jpg" alt="Image" onclick="displayImage('images/home/58.jpg')" /></p>
		<p><input type="image" src="images/home/59.jpg" alt="Image" onclick="displayImage('images/home/59.jpg')" /></p>
		<p><input type="image" src="images/home/60.jpg" alt="Image" onclick="displayImage('images/home/60.jpg')" /></p>
		<p><input type="image" src="images/home/61.jpg" alt="Image" onclick="displayImage('images/home/61.jpg')" /></p>
		<p><input type="image" src="images/home/62.jpg" alt="Image" onclick="displayImage('images/home/62.jpg')" /></p>
		<p><input type="image" src="images/home/63.jpg" alt="Image" onclick="displayImage('images/home/63.jpg')" /></p>
		

</div>
</div>
</div>

CSS Styling (external sheet):

Code:
div.scrollWrapper
{
background-color:#252525;
width:960px;
height:115px;
display:block;
overflow:hidden;
}

div.scrollableArea
{
height:115px;
}

div.scrollableArea p
{
margin:0;
}
div.controlsPrev
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
}

div.controlsNext
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
right:195px;
}

My first problem is that now I have added further <p> elements to the navbar, they "wrap" to the next line, causing scrollableArea to be double the height.

The second problem is implementing some code to bring the navbar to life. Since it's jQuery (and I've linked the googleapis library in my html document) I thought the custom animation methods would be the best way to create this effect. Though I've thought of a few obstacles in my way, namely:

1. How to hide the right most or left most (depending on which control class eg. Prev or Next) <p> element and show the opposite <p> element at the same time, and also shift or slide all other <p> elements in view across (again depending on which control class or direction control I have clicked).

2. I want flexible code, that allows for (in the future) more <p> elements. All my code has been based around flexibility and the fact that it will be constantly changing at a fast rate. Therefore I think a function within my script to count the number of <p> elements within the scrollableArea would resolve this issue somewhat.

Any help or advice given on the subject would be greatly appreciated, if there would be another method to get the desired effect then please share. I've stayed away from plug-ins apart from the generic jQuery library provided by google, I want to be able to say I have created everything by myself and not "cheated" if you will. It doesn't take a genius to implement plug-ins into code, I see it on various websites and have seen developers use them before and claim them as their own.

I took a look at a few tutorials on the subject, but I haven't found anything specific to my cause.

Cheers dudes,

Johnny.

Thumbnail Image Viewer

 Similar Tutorials View Content
Hi,

Hope that someone can help me with a little problem I have. I building a little page that has some photos of the family. Ive created little thumbnails and large versions of each image.

What im trying to achieve is that in div a: i have each of the thumbnails and in div b: it displays a large verison on the image thats clicked.

Ive seen a few methods when searching using java and ajax etc, but i'm not sure which is the best way to do this and the most simple so that I dont have to create a new page for each image.

Thanks for your help in advance.
Privacy