...

View Full Version : create a linkable list from another list with js



Bubbel
12-16-2010, 01:54 PM
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:


<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=/

jmrker
12-16-2010, 03:48 PM
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.

Shaka Zorba
12-16-2010, 04:15 PM
<!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>

Logic Ali
12-16-2010, 04:41 PM
I presume this is what you mean:
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum