Dynamically assigning HTML elements an ID?

Boogle · 10-04-2007, 12:58 PM

Hi guys,

basically I have a menu system made from

Code:

<div id="wrapper">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>

Basically when the 'current' menu item is selected i want it to be assigned with an indiviual ID, i.e.

Code:

<div id="wrapper">
<ul>
<li>menu1</li>
<li id="current">menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>

does anyone have any ideas how this can be assigned dynamically? This is important because of the use of master pages.

Thanks,
Nath

scottdizzle · 10-04-2007, 01:07 PM

I don't know the proper or easiest way to do it.. although I know there is a very nice PHP way of doing this.. I've seen people do it.. but here's how I do it. I cut out my categories or menus into a separate file such as menu.php and I then change the class of each area that needs to change.. for example say this is my menu:

Home, Games, Cars, Blog, Contact

When you're on the Cars page I want it to show up like this:

Home, Games, Cars, Blog, Contact

Now the person can tell they are on the Cars page and I don't need to waste any extra time telling and showing the person where they are.

So, in order to make this happen.. I already have menu.php cut out of my site.. So now I just make separate menu files with the necessary changes like this:

menu.php
menu-games.php
menu-cars.php
menu-blog.php
menu-contact.php

Now, depending on what page is loaded.. I include the proper menu file in my layout.. for example on the Games page I would use:

Code:

<?php include("menu-games.php"); ?>

and the code for menu-games.php would be something like this:

Code:

<style>
a.menu1:link {
color: #000000;
text-decoration: none;
}
a.menu1:visited {
color: #000000;
text-decoration: none;
}
a.menu1:hover {
color: #000000;
text-decoration: underline;
}
a.menu2:link {
color: #000000;
text-decoration: underline;
}
a.menu2:visited {
color: #000000;
text-decoration: underline;
}
a.menu2:hover {
color: #000000;
text-decoration: underline;
}
</style>
<a href="index.php" class="menu1">Home</a>, <a href="games.php" class="menu2">Games</a>, <a href="cars.php" class="menu1">Cars</a>, <a href="blog.php" class="menu1">Blog</a>, <a href="contact.php">Contact</a>

Notice.. slightly different styles for the classes menu1 and menu2.. and so I've set the hyperlink for Games to class="menu2"

Capo64 · 10-04-2007, 05:10 PM

You can do this with PHP by altering your code a little. I'll just show you a quick example (I'm not testing this so I'm not positive that it works but something very similar).

Code:

<?php
$links = array();
$links['home'] = "http://www.mysite.com";
$links['page1'] = "http://www.mysite.com/page1.html";
$links['page2'] = "http://www.mysite.com/page2.html";
?>
<div id="wrapper">
<ul>
<?php
foreach ($links as $key=>$link) {
$url = "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$id = (strtolower($link) == strtolower($url)) ? " id=\"current\"" : "";
echo "<li$id>$key</li>";
}
?>
</ul>
</div>

I'm guessing you had each of these <li>'s link to a page so I included URLs in the array.

Boogle · 10-05-2007, 02:32 AM

Thanks for your quick & enthusiastic replies guys but i'm using asp.net 2.0 and don't want to include PHP for hosting reasons.

Thanks anyway guys

Costin Trifan · 10-05-2007, 03:57 AM

Every web hosting company offers support for PHP, but it's your choice to use php or not...

I was confused at first, and I still am (that's because I don't know your site structure)... why don't you use a css class instead of dynamically generating an ID?

How do you use that menu? As User control? As markup in page?

scottdizzle · 10-05-2007, 03:59 AM

Well, you can probably still use my method.. just translate it into an ASP method. I'm sure there are other ways to 'include' other than with PHP... but I have no experience with anything other than PHP.

Boogle · 10-05-2007, 04:05 AM

Sorry it was a bit sparse as a post for help wasn't it!

OK, this is the code:

Code:

<div id="modernbricksmenu" style="width:801px;">
        <ul>
        <li runat="server" onload="SetID()" id="h"  style="margin-left: 1px"><a href="#" title="Home">Home</a></li>
        <li runat="server" id="Who" ><a href="Who.aspx" title="Who">Who Are We?</a></li>
        <li runat="server" id="Servicing" ><a href="Servicing.aspx" title="Servicing">Servicing</a></li>
        <li runat="server" id="ContactUs" ><a href="ContactUs.aspx" title="Forums">Contact Us</a></li>	
        <li runat="server" id="Forums" ><a href="Forums.aspx" title="Swift Forums">Forums</a></li>	
        </ul>
    </div>
    <div id="modernbricksmenuline" style="width:801px;">&nbsp;</div>

basically, I want, whatever page the user is on, i.e. if they are on servicing; i want the

Code:

<li runat="server" id="Servicing" ><a href="Servicing.aspx" title="Servicing">Servicing</a></li>

to become (i changed the id to 'current' from 'servicing'

Code:

<li runat="server" id="Current" ><a href="Servicing.aspx" title="Servicing">Servicing</a></li>

does that make better sense?

my worst thing here is i have got a perfect script for it, which wasn't too hard to write:

Code:

    <script language="javascript" type="text/javascript">
        public void SetID()
        {
        var currentID = document.title;
        switch (currentID)
        {
        case "Servicing":
        document.getElementById('li')[0].setAttribute('id','currentID');
        alert(document.getElementById('currentID').innerHTML);
        break;

        case "Home":
        document.getElementById('li')[0].setAttribute('id','currentID');
        alert(document.getElementById('currentID').innerHTML);
        break;

        etc etc end switch
        }
        }
    </script>

but i can't get the javascript to run; everytime i call it, i getthis error:

Code:

'ASP.masterpage_master' does not contain a definition for 'SetID'

i called the script like so,

Code:

<li runat="server" id="Current" onload="SetID()" ><a href="Servicing.aspx" title="Servicing">Servicing</a></li>

does this make more sense?

I wish i could post a link for you but i'm only in the infant stages of this one and don't have anywhere to host it... i'm just trying new things really...

Thanks,

Boog's

Costin Trifan · 10-05-2007, 04:11 AM

First thing first:

In javascript there is no such thing as: public void SetID()
you have to create a function, like this:

Code:

function SetID()
{
your code here
}

If there are no other functions you want to run when page loads, you can use this

Code:

window.onload = SetID();

after the end of your javascript file so you don't have to call the function from your markup.

Edit:
if you use window.onload, then you should pass the element's ID as parameter to your function SetID();
ignore the above edit note I see you already do that in your function..

Costin Trifan · 10-05-2007, 04:19 AM

One more thing:

Quote:

document.getElementById('li')[0].setAttribute('id','currentID');

^^ That is not right. I mean when using getElementById the returned value will be a single element, found by the requested ID.

The way you use getElementById is wrong, because you ask for an Array:
getElementById('li')[0]. to access the first element in the Array...

You have to do like this:

Quote:

document.getElementsByTagName('li')[0].setAttribute('id', 'currentID');

Boogle · 10-05-2007, 04:28 AM

Ok, i've gone about this the wrong way i see... i'm new @ trying javascript too so thanks for the pointers, Costin!

i'm not even sur if you can use switch-case in javascript? Also, i renamed the function, to

Quote:

function SetID() {//code}

and i still get the error when calling the function.

i can't use the window.onload = SetID() because I have pagE_load events in the code=behind, i.e. datasourcing.

Thanks for your help Costin!

Boog's

Costin Trifan · 10-05-2007, 04:39 AM

You can use switch in javascript: http://www.w3schools.com/js/js_switch.asp

Have you tried to register client script block?

Btw, as another option, you have a list control in your toolbox as an asp control;
You can use that one, set an id to each list item and in the code behind file to do what you want to do in your javascript.

Boogle · 10-05-2007, 07:05 AM

Costin, or anyone else ableto answer this!:

should this work?

Code:

        function setMenuItem()
        {
        var currentPage = document.title;
        switch (currentPage)
        {
        case "Servicing": 
        document.getElementById('Servicing').style.backgroundColor = '#D25A0B';
        document.getElementById('Servicing').style.borderColor = '#D25A0B';
        break;
        
        case "Who":
        //code
        break;
        
        }
        }

and calling the function on

Code:

<body onclick="setMenuItem()">

<div id="modernbricksmenu" style="width:801px;">
        <ul>
        <li id="Home" style="margin-left: 1px;"><a href="#" title="Home">Home</a></li>
        <li id="Who" ><a href="Who.aspx" title="Who">Who Are We?</a></li>
        <li id="Servicing" ><a href="Servicing.aspx" title="Servicing">Servicing</a></li>
        <li id="ContactUs" ><a href="ContactUs.aspx" title="Forums">Contact Us</a></li>	
        <li id="Forums" ><a href="http://www.swiftmobility.co.uk/forum/default.asp" title="Swift Forums">Forums</a></li>	
        </ul>
    </div>

</body>

I know the switch-case is working because i've put an alert("showmesage"); after the code for each case, so i know it's doing something on the onload method, however it's not setting the style properties like i've asked... any ides why?

Thanks again,

Boog's

Costin Trifan · 10-05-2007, 07:16 AM

1. yes, that should work. Though you could have call the function in the "onload" event instead on "onclick"...

2. I'm still trying to figure it out why would you use javascript to set some styles to a list item when you could simply use a class to do that instead..

3. A simple note: that code of yours would not be available for users with javascript disabled in their browser...

Boogle · 10-05-2007, 07:25 AM

i'm not following why you think i should use a class as i think it makes no difference? Either way i've got to set a tag of an HTML element dynamically?

The reason i need to do this is because the currently selected manu item has a different style to the rest, and the menu is on my master page, thus the only way to get 'shuffle' around the 'currently' selected item is to dynamically change the style of the current menu item?

Or am i missing something really stupid here!? i often do that and think things are more complicated than they actually are and so try the hardest thing possible!

Boog's

Costin Trifan · 10-05-2007, 07:33 AM

It's not something that you're missing here, it's something that I'm missing...

I'll get back to you later with a straight answer. { right now my mind is kinda somewhere else and I can't focus... }

Boogle · 10-05-2007, 07:38 AM

the link below might help, Costin, i'm sure it's my explanation that's the problem and not yor mind being elsewhere!

basically i found the menu design from there and all i want to do is make it so the menu is dynamic, otherwise it's kind of useless... They'e posted a great looking menu but in a static form when it's deisgned to be dynamic. So in otherwords they expect you to be using it on single HTML pages, where the menu is reloaded every single time and it's currently selected item is hard-codedly shifted around.

http://www.dynamicdrive.com/style/cs...n-bricks-menu/

Cheers,
Boog's

Costin Trifan · 10-05-2007, 08:24 AM

1. The site structure:

TheMaster.master
Default.aspx
MenuJS.js
MenuStyles.css

TheMaster.master

Code:

<%@ Master Language="VB" CodeFile="TheMaster.master.vb" Inherits="TheMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>The Master Page</title>
    <link href="MenuStyles.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
    <form id="myform" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                <div id="modernbricksmenu" style="width: 801px;">
                    <ul>
                        <li id="Home_ListItem" style="margin-left: 1px"><a href="#" title="Home">Home</a></li>
                        <li id="Who"><a href="#" title="Who">Who Are We?</a></li>
                        <li id="Servicing"><a href="#" title="Servicing">Servicing</a></li>
                        <li id="ContactUs"><a href="#" title="Forums">Contact Us</a></li>
                        <li id="Forums"><a href="#" title="Swift Forums">Forums</a></li>
                    </ul>
                </div>
                <div id="modernbricksmenuline" style="width: 801px;">
                    &nbsp;</div>
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Master page code behind:

Code:

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        Page.ClientScript.RegisterClientScriptInclude("MenuJS", ResolveUrl("MenuJS.js"))
    End Sub

Default.aspx - This is the "Home" page

Code:

<%@ Page Language="VB" MasterPageFile="~/TheMaster.master" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="_Default" Title="Home" %>

nothing else in here because the content was set as to be the same as the master Page content (from design view)

MenuJS.js

Code:

function setMenuItem()
{
    var currentPage = document.title;
    var listItem1 = document.getElementById('Home_ListItem');
    var listItem2 = document.getElementById('Who');
    
    switch(currentPage)
    {
        case "Home": 
        listItem1.className = "current";
        break;

        case "Who":
        listItem2.className = "current";
        break;
    }
}
window.onload = setMenuItem;

MenuStyles.css
Find this:

Code:

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
border-color: #D25A0B; /*Brown color theme*/ 
}

And replace with this:

Code:

#modernbricksmenu LI.current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
border-color: #D25A0B; /*Brown color theme*/ 
}

the rest of the css is the same.

The examples are in VB.NET. All you have to do, actually is to change this

Code:

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init...

into C#.

If you have any questions, I'll be here

Boogle · 10-05-2007, 08:43 AM

Costin, you are THEE man

!

Did you know it works just fine without the,

Quote:

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
Page.ClientScript.RegisterClientScriptInclude("Men uJS", ResolveUrl("MenuJS.js"))
End Sub

I think my problem was the better, much better, way you have used the switch and also by the way the CSS was defined,

Quote:

#modernbricksmenu LI.current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}

Listen, thanks a lot, Costin, you're a great help on here, mate!

Boog's!