user control as a header - SQL Server Forums

Please start any new threads on our new site at https://forums.sqlteam.com. We've got lots of great SQL Server experts to answer whatever question you can come up with.

All Forums

Development Tools

ASP.NET

user control as a header

Author

Topic

jhermiz

3564 Posts

Posted - 2007-05-15 : 13:22:48

i was creating a user control that had some tabs on it. Using CSS I was able to set the current tab of the li like so:


 <table width="95%"  border="0" cellpadding="0" cellspacing="0" style="margin-left:auto; margin-right:auto;">
       <tr>
       <td align="left"><img src="images/VacationTracker.jpg" alt="Vacation Tracking Application"/></td>
       </tr>
      <tr>
      <td>
        <div id="tabsF">
         
                                  <ul>
                                             <!-- CSS Tabs -->
          <li id="current"><a href="#"><span>Home</span></a></li>
          <li><a href="#"><span>Views</span></a></li>
          <li><a href="#"><span>Reports</span></a></li>
          <li><a href="#"><span>My Profile</span></a></li>
          <li><a href="#"><span>Help</span></a></li>
            </ul>
     
         
                             </div>
       </td>
      </tr>
      <tr>
        <td style="background-image:url(images/rowfader.jpg); margin-top:auto; height: 25px;"> </td>
      </tr>
     </table>

The above is the html side of it...there is a style sheet that goes along with this that gives the colors, fonts, and images. My question is considering this is a user control that I will use as a header and I want to use this on each page. How do I tell the <li id=current to change for each page that I am on ? For instance in the user control if I am on home all is well since:


                                  <ul>
                                             <!-- CSS Tabs -->
          <li id="current"><a href="#"><span>Home</span></a></li>

However let us say I click on the next list item "Views" how do I tell the user controls id to move to Views ?

Is that possible or forget about the header user control all together ?

Programmers HowTo's -- [url]http://jhermiz.googlepages.com[/url]

jsmith8858
Dr. Cross Join

7423 Posts

Posted - 2007-05-15 : 14:26:49

Here's what I do:

1) add runat="server" attributes to all of your <LI> tags, and given them all ID's so that you can reference them from your ASP.NET code. For example, "liHome", "liReports", etc ...
2) Dont use #current in your CSS definition, use a class name (since changing the ID of the server-side controls is more trouble than it is worth)
3) Add a public property to your header class, call it "CurrentSection" or something like that. make it a string or an enum.

Then in you controls' Page_Load event, you just do something like this:

if CurrentSection = "Home" then liHome.attributes.add("class","current")
if CurrentSection = "Reports" then liReports.attributes.add("class","current")

.. etc ..

that is a very sloppy example, but it should give you the idea. the key is to use public properties of your header control and to use server-side controls and let ASP.NET do the work.

- Jeff
http://weblogs.sqlteam.com/JeffS

cvraghu
Posting Yak Master

187 Posts

Posted - 2007-05-15 : 17:29:52

Check whether this approach would work for you - Write a JScript function that'll change the class name of the LI items. It should also reset the classname for other items. Something like this -

<UL id="Ulist">
<li id="id1" onclick="ChangeStyle()"><a href="#"><span>Home</span></a></li>
<li id="id2" onclick="ChangeStyle()"><a href="#"><span>Views</span></a></li>
</UL>

function ChangeStyle()
{

for (i=0;i< UList.children.length;i++)
{
if ((window.event.srcElement.id) == UList.children[i].id)
iUList.children[i].ClassName = "current";
else
iUList.children[i].ClassName = "none";
}
}

Subscribe to SQLTeam.com

SQLTeam.com Articles via RSS

SQLTeam.com Weblog via RSS

- Advertisement -

Resources