Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question create a linkable list from another list with js

    Hi all

    I have an idea but I don't know if its possible to create so I thought I ask here

    I have a navigation list like this:
    Code:
    <div id ="nav">
    <form name="head">
     <ul id="headNav">
      <li><a href="index.html" class="thisPage">Hem</a></li>
      <li><a href="../bescout/about.html">Bli scout</a></li>
      <li><a href="../avd/avdelningar.html">Avdelningar</a></li>
      <li><a href="../karen/aboutts.html">Om kåren</a></li>
      <li><a href="../verksamheten/aboutverk.html">Verksamheten</a></li>
      <li><a href="../images/main.html">Bilder</a></li>
      <li><a href="../kontakt/kontakt.html">Kontakt</a></li>
     </ul>
    </form>
    </div>
    My thought ware if I could get the links to a global variable and the text to another variable. And from there type it out on the page like a list? Is that possible?

    I have tried out some stuff myself but so far I haven't got it to work=/

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Where are the link addresses and text description coming from?
    If you are creating the script yourself, it would be pretty easy to
    have in an array to begin with and then create your navigation
    and list display separately.

  • #3
    New Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    77
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
    <title>populate list from variable</title>
    
    <script type="text/javascript">
    	linkList={'index.html':'Hem','../bescout/about.html':'Bli scout'}
    
      </script>
    
    </head>
    <body>
    
    <div id ="nav">
    <form name="head">
     <ul id="headNav">
      <script type="text/javascript">
    for(var a in linkList){
    document.writeln('<li><a href="'+ a +'" class="thisPage">'+ linkList[a]  +'</a></li>')
    }
      </script>
     </ul>
    </form>
    </div>
    
    <script type="text/javascript">
    	alert(document.body.innerHTML)
    
      </script>
    
    </body>
    </html>

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    I presume this is what you mean:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>List Links</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
    </head>
    <body>
    <div id ="nav">
    <form name="head" action='#'>
     <ul id="headNav">
      <li><a href="index.html" class="thisPage">Hem</a></li>
      <li><a href="../bescout/about.html">Bli scout</a></li>
      <li><a href="../avd/avdelningar.html">Avdelningar</a></li>
      <li><a href="../karen/aboutts.html">Om kåren</a></li>
      <li><a href="../verksamheten/aboutverk.html">Verksamheten</a></li>
      <li><a href="../images/main.html">Bilder</a></li>
      <li><a href="../kontakt/kontakt.html">Kontakt</a></li>
     </ul>
    </form>
    </div>
    
    <div id='output'></div>
    
    <script type='text/javascript'>
    
    function listLinks( aElemId, bElemId )
    {
     var eLinks = document.getElementById( aElemId ).getElementsByTagName( 'a' ),
         str = "",
         leftStyle = 'float:left; width:50%; margin:0 0 0 0; text-align:right',
         rightStyle= 'display:inline; width:50%; float:none; margin:0 0 0 20px; text-align:left';  
    
     for( var i = 0, len = eLinks.length; i < len; i++ )
      str += '<br><div style="' +leftStyle+ '">' + eLinks[ i ].innerHTML + '<\/div><div style="' +rightStyle+ '">' +eLinks[ i ].href +'<\/div>';
    
     document.getElementById( bElemId ).innerHTML = str;  
    } 
     
      
    listLinks( 'headNav', 'output' );
      
        
    </script>
    </body>
    </html>
    Last edited by Logic Ali; 12-16-2010 at 04:01 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •