195 users online (0 members and 195 guests)  

> > > > Help to populate DIV from an array

  Results 1 to 4 of 4

Related

  1. Populate fields by javascript using MYSQL    Forum: Javascript Forum
    Replies: 0
  2. Passing PHP array from one file to Javascript array in another file    Forum: PHP Forum
    Replies: 4
  3. How do I populate nested drop down lists?    Forum: CGI Perl Forum
    Replies: 1
  4. Populate fields when checkbox selected    Forum: Javascript Forum
    Replies: 0
  5. Is it possible to dynamically populate a textarea with data from a database?    Forum: HTML Forum
    Replies: 1
  1. 07-15-2004, 05:10 PM #1
    woodknut
    woodknut is offline
    woodknut's Avatar
    Disabled
    Status
    Offline
    Join Date
    Dec 2003
    Posts
    32

    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.
    Reply With Quote Reply With Quote
  2. 07-16-2004, 06:51 AM #2
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    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>
    coothead
    Reply With Quote Reply With Quote
  3. 07-19-2004, 10:12 AM #3
    woodknut
    woodknut is offline
    woodknut's Avatar
    Disabled
    Status
    Offline
    Join Date
    Dec 2003
    Posts
    32
    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.
    Reply With Quote Reply With Quote
  4. 07-19-2004, 12:38 PM #4
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    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
    Attached Files Attached Files


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread