Results 1 to 4 of 4
Related
-
Populate fields by javascript using MYSQL Forum: Javascript Forum
Replies: 0 -
Passing PHP array from one file to Javascript array in another file Forum: PHP Forum
Replies: 4 -
How do I populate nested drop down lists? Forum: CGI Perl Forum
Replies: 1 -
Populate fields when checkbox selected Forum: Javascript Forum
Replies: 0 -
Replies: 1
-
07-15-2004, 05:10 PM #1
Help to populate DIV from an array
I would like to populate a DIV based on elements of 3 arrays.
Specifically I would like to maintain Title, Author, and URL-of-Document:
var aAuthor = newArray("Joe Smith", "John Baker", "Jane Jones");
var aTitle = newArray("How to Golf", "I Want My MTV", "Dating In the 90s");
var aLink = newArray("articles/golf.html", "articles/mtv.html", "articles/dating.html");
in a separate, external *.js file. If this can be accomplished within a single array then great.
Here's a function (in another external *.js file) that's not working:
function writeScroll(arr, element) {
nC = document.getElementById(element);
nC.innerHTML = "";
for(i=0;i<arr.length;i++)
nC.innerHTML = nC.innerHTML + arr[i] + '<br>';
}
Here's the code within the page body:
<DIV id=nContainer>
<script language="JavaScript">writeScroll('aTitle', 'nContainer');</script>
DIV>
I realize that the "author" and "link" items are not being referenced as yet...I thought I would get one portion to work first. I appreciate any direction you can provide; the archives don't address this problem directly.
W.
-
07-16-2004, 06:51 AM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Hi there woodknut,
Here is a basic example using .innerHTML.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>innerHTML</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> /*<![CDATA[*/ body { background:#aaaaaa; } #foo { position:absolute; top:60px; left:400px; width:162px; height:100px; border:solid 1px #000000; background:#ffffff; text-align:center; padding:10px 0 0 0; } #links { width:70px; border:solid 1px #000000; background:#ffffff; padding:10px; } a:hover { color:#ff0000; } /*//]]>*/ </style> <script type="text/javascript"> //<![CDATA[ var aAuthor = new Array("Joe Smith", "John Baker", "Jane Jones"); var aTitle = new Array("How to Golf", "I Want My MTV", "Dating In the 90s"); var aLink = new Array("articles/golf.html", "articles/mtv.html", "articles/dating.html"); var front="<a href="; var back=">go there</a>"; function writeScroll(num) { document.getElementById("foo").innerHTML=aAuthor[num]+"<br />" +aTitle[num]+"<br /><br />"+front+aLink[num]+back; } //]]> </script> </head> <body> <div id="foo"></div> <div id="links"> <a href="#"onclick="writeScroll(0)">golf</a><br /> <a href="#"onclick="writeScroll(1)">MTV</a><br /> <a href="#"onclick="writeScroll(2)">Dating</a> </div> </body> </html>
-
07-19-2004, 10:12 AM #3
Thank you...that's a good example and it works quite well.
Borrowing from that example I would like to be able to place the function in an external *.js for use in multiple pages:
editing the function to pass a variable didn't work:
(contained in scroll.js with an include in the main page header)
function writeScroll(element) {
document.getElementById(element).innerHTML=document.getElementById(element).innerHTML+"<UL>";
for(i=0;i<aAuthor.length;i++)
document.getElementById(element).innerHTML=document.getElementById(element).innerHTML + "<LI>" + aAuthor[i]+"<br />"
+aTitle[i]+"<br /><br />"+front+aLink[i]+back+"</LI>";
document.getElementById(element).innerHTML=document.getElementById(element).innerHTML+"</UL>";
}
Here's the call within the page:
<body onload="writeScroll('foo')">
How do I handle the arrays? I placed them in the scroll.js file just like this:
var aAuthor = new Array("Joe Smith", "John Baker", "Jane Jones");
var aTitle = new Array("How to Golf", "I Want My MTV", "Dating In the 90s");
var aLink = new Array("articles/golf.html", "articles/mtv.html", "articles/dating.html");
var front="<a href=";
var back=">go there</a>";
I appreciate your help.
W.
-
07-19-2004, 12:38 PM #4bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Hi there woodknut,
I may be wrong but I am assuming that you want to rotate these links.
Using an external link for the javascript is no problem, you will also need to do the same for the css
Check the attached .zip file to see how it works.
coothead
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum