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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic Unordered List?

    Hi All,

    I am fairly new to Javascript and I am in need of some help. I'm guessing that this question must be fairly easy to solve for many in this forum, but for me this is a big task. So kindly excuse me for this.

    I have an Html page that has an unordered list. Each item in the list is a link to open a Javascript function. I would like to create a function that changes the item names as well as the values in this unordered list dynamically.

    Here is the html code for the list:

    <ul id="weblist">
    <li><a onClick="getPage(link1)">First Page</a></li>
    <li><a onClick="getPage(link2)">Second Page</a></li>
    <li><a onClick="getPage(link3)">Third Page</a></li>
    <li><a onClick="getPage(link4)">Fourth Page</a></li>
    <li><a onClick="getPage(link5)">Fifth Page</a></li>
    </ul>

    I would like this list to become something like,

    <ul id="weblist">
    <li><a onClick="getPage(newlink1)">Home</a></li>
    <li><a onClick="getPage(newlink2)">Sitemap</a></li>
    <li><a onClick="getPage(newlink3)">Stuff</a></li>
    <li><a onClick="getPage(newlink4)">Instructions</a></li>
    <li><a onClick="getPage(newlink5)">Credits</a></li>
    </ul>

    This change must take place dynamically. That is, when I click a Master link, "All", the first list must be the bulleted list. When I click another Master link, "Sub", the second list must become the bulleted list.

    Thank you very much for your time and efforts.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This should get your started.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    var newlink = new Array();
    newlink[0] = 'http://www.yahoo.com';
    newlink[1] = 'http://www.google.com';
    newlink[2] = 'http://www.hotmail.com';
    newlink[3] = 'http://www.msn.com';
    newlink[4] = 'http://codingforums.com';
    function setLinks()
    {
    	
    	var links = document.getElementById('weblist').getElementsByTagName('a');
    	for(var i = 0; i < links.length; i++)
    	{
    		el = links[i];
    		linkage = newlink[i];
    		el.onclick = function()
    		{
    			getPage(linkage);			
    		}
    		alert(linkage);
    	}
    	return false;
    }
    function getPage(url)
    {
    	window.location = url;
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="return setLinks()">All</a>
    <ul id="weblist">
    	<li><a onClick="getPage(link1)" style="cursor:pointer;">First Page</a></li>
    	<li><a onClick="getPage(link2)">Second Page</a></li>
    	<li><a onClick="getPage(link3)">Third Page</a></li>
    	<li><a onClick="getPage(link4)">Fourth Page</a></li>
    	<li><a onClick="getPage(link5)">Fifth Page</a></li>
    </ul>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Aerospace Engineer,

    Thank you for your code. The link now work great, thanks to you. But, I was wanting to have a function that also changes the names of the links.

    That is, I also need:

    First Page
    Second Page
    Third Page
    Fourth Page
    Fifth Page

    to become:

    Home
    Sitemap
    Stuff
    Instructions
    Credit

    Is there a way I can get this to happen?

    Thank you very much for your help. I truly appreciate it!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
    var newlink = new Array();
    newlink[0] = ['http://www.yahoo.com', 'Yahoo'];
    newlink[1] = ['http://www.google.com', 'Google'];
    newlink[2] = ['http://www.hotmail.com', 'Hotmail'];
    newlink[3] = ['http://www.msn.com', 'MSN'];
    newlink[4] = ['http://codingforums.com', 'CodingForums'];
    function setLinks()
    {	
    	var links = document.getElementById('weblist').getElementsByTagName('a');
    	for(var i = 0; i < links.length; i++)
    	{
    		el = links[i];
    		el.href = newlinks[i][0];
    		el.innerHTML = newlinks[i][1];
    	}
    	return false;
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="return setLinks()">All</a>
    <ul id="weblist">
    	<li><a href="#">First Page</a></li>
    	<li><a href="#">Second Page</a></li>
    	<li><a href="#">Third Page</a></li>
    	<li><a href="#">Fourth Page</a></li>
    	<li><a href="#">Fifth Page</a></li>
    </ul>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Glenngv and Aerospace,

    Thank you very very much for your help. I truly appreciate your efforts.

    In the code, there's some kind of a weird problem now. I integrated both your codes in my project. The reason being that Aerospace's code has the onClick function, while Glenngv's code has the href function, and I cannot use href since I am submitting some form data. Hence, I HAVE to use the onClick function. So, I used Aerospace's code for the link addresses, and Glenngv's code for changing the link names (using innerHTML). The link names work fine. That is, the link names do change when I click the master link. But there is a problem with the link addresses. All the links point to the same location.

    That is,

    First Page, Second Page, Third Page, Fourth Page, and Fifth Page all point to "http://www.codingforums.com". I think there is something in the "for" loop that is causing this. I did try some stuff of my own to fix the "for" loop, but nothing worked. Would be great to get some help. Here is the code now:

    Code:
    <html>
    <head>
    <title> Just a Title!! </title>
    
    <script type="text/javascript">
    
    var link1 = "http://www.mywebsite.com/first.html"
    var link2 = "http://www.mywebsite.com/second.html"
    var link3 = "http://www.mywebsite.com/third.html"
    var link4 = "http://www.mywebsite.com/fourth.html"
    var link5 = "http://www.mywebsite.com/fifth.html"
    
    function SwitchMenu(obj)
    {
    	return setLinks(); //Function to change the link names and addresses
    
           // Other javascript code to open and close the div menu
    
    }
    
    var newlink = new Array();
    newlink[0] = 'http://www.yahoo.com';
    newlink[1] = 'http://www.google.com';
    newlink[2] = 'http://www.hotmail.com';
    newlink[3] = 'http://www.msn.com';
    newlink[4] = 'http://www.codingforums.com';
    
    var linkname = new Array();
    linkname[0] = 'Yahoo';
    linkname[1] = 'Google';
    linkname[2] = 'Hotmail';
    linkname[3] = 'MSN';
    linkname[4] = 'CodingForums';
    
    function setLinks()
    {
    	var links = document.getElementById('weblist').getElementsByTagName('a');
    	for(var i = 0; i < links.length; i++)
    	{
    		el = links[i];
    		el.innerHTML = linknames[i];
    
    		linkage = newlink[i];
    		el.onClick = function()
    		{
    			getPage(linkage);			
    		}
    		//alert(linkage);
    	}
    	return false;
    }
    
    function getPage(linkaddress)
    {
    	/* Commented these out since they are not needed at the moment
    	document.myform.action=linkaddress;
    	document.myform.submit();
    	*/
    
    	window.location = linkaddress;
    
    }
    
    </script>
    
    <body>
    
    <a onClick = switchMenu('all')>ALL</a> //Master Link
    
    <ul id="weblist">
    <li><a onClick="getPage(link1)">First Page</a></li>
    <li><a onClick="getPage(link2)">Second Page</a></li>
    <li><a onClick="getPage(link3)">Third Page</a></li>
    <li><a onClick="getPage(link4)">Fourth Page</a></li>
    <li><a onClick="getPage(link5)">Fifth Page</a></li>
    </ul>
    
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Coders,

    I would love to get some help on my problem as stated above. I have everything ready in my project and this small issue is preventing me from giving my presentation tomorrow

    I would very much appreciate it if anyone could give me a reply on this. Please excuse me for my haste in asking for a reply knowing that this is the weekend. It's just that I am in a very desperate situation.

    This forum has been very helpful to me. Thank you all very much.

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi,

    Got it fixed....finally!!

    Thank you all for your help. I truly appreciate it.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Glad you fixed it yourself. But please post the solution for the sake of others who might have the same problem.

    Just a question. Why did you create 2 separate arrays when you can have a single "2D" array as what I did?

  • #9
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi Glenn,

    Sorry for the late response. I kinda stopped looking here after my problem got fixed.

    Here is the code that fixed the problem:

    Code:
    <html>
    <head>
    <title>Dynamic Unordered List</title>
    
    <script language="JavaScript" type="text/JavaScript">
    
    var linkname = new Array();
    linkname[0] = 'Yahoo';
    linkname[1] = 'Google'
    linkname[2] = 'MSN'
    linkname[3] = 'CodingForums'
    
    var linkaddress = new Array();
    linkaddress[0] = "http://www.yahoo.com";
    linkaddress[1] = "http://www.google.com";
    linkaddress[2] = "http://www.msn.com";
    linkaddress[3] = "http://www.codingforums.com";
    
    function setLinks()
    {
        var links = document.getElementById('weblist').getElementsByTagName('a');
        for(var i = 0; i < links.length; i++)
        {
    	links[i].innerHTML = linkname[i]
        }
    }
    
    function getPage(linknum)
    {
      var linkage
      linkage = linkaddress[linknum];
      document.formwithlinks.action = linkage;
      document.formwithlinks.submit();
    }
    </script>
    </head>
    
    <body>
    <form name="formwithlinks" method="post">
    
    <a onClick="setLinks()">Click here to change the List's Names & URLs</a>
    
    <ul id="weblist">
    <li><a onClick="getPage(0)">First Link</a></li>
    <li><a onClick="getPage(1)">Second Link</a></li>
    <li><a onClick="getPage(2)">Third Link</a></li>
    <li><a onClick="getPage(3)">Fourth Link</a></li>
    </ul>
    
    </form>
    </body>
    </html>
    Each link, instead of the usual "href" property, has an "onClick()" function to get the page pointed by the required link. The function sends a number, which is used to get the appropriate link address from the "linkaddress" array. That is why I had to use a single dimensional array opposed to the 2-D array that Glenn suggested. I know there are ways I could have still used the 2-D array, but I wanted things to be as simple as possible .

    Thank you all for your time and efforts. I truly appreciate the help I got from this posting.


  •  

    Posting Permissions

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