We help IT Professionals succeed at work.

C# code

JCWEBHOST
JCWEBHOST asked
on
Hey guys, how do set a a ref to active in c# code?

here is my tag:

<a runat="server" id="OurWorkCulture" href="~/work-culture.aspx" title="Our Work Culture">Our Work Culture</a>

and here is my css:

#left_menu a
{
      color: #FFFFFF;
      text-decoration: none;
      font-size: 14px;
      line-height: 36px;
      background-image: url(         '../images/menubox/menu.png' );
      background-repeat: no-repeat;
      padding: 0px 10px 0px 10px;
      margin: 0px;
      width: 190px;
      height: 36px;
      display: inline-block;
      text-shadow: #FFFFFF 0px 0px 1px;
}

#left_menu a:hover
{
      color: #FFFFFF;
      text-decoration: none;
      font-size: 14px;
      line-height: 36px;
      background-image: url(    '../images/menubox/menu_o.png' );
      background-repeat: no-repeat;
      padding: 0px 10px 0px 10px;
      margin: 0px;
      width: 190px;
      height: 36px;
      display: inline-block;
      text-shadow: #FFFFFF 0px 0px 1px;
}

#left_menu a:active
{
      color: #FFFFFF;
      text-decoration: none;
      font-size: 14px;
      line-height: 36px;
      background-image: url(    '../images/menubox/menu_o.png' );
      background-repeat: no-repeat;
      padding: 0px 10px 0px 10px;
      margin: 0px;
      width: 190px;
      height: 36px;
      display: inline-block;
      text-shadow: #FFFFFF 0px 0px 1px;
}


please help

Comment
Watch Question

Trigger the event Click of the link
Check whether this helps
http://www.asp.net/web-pages/overview/more-resources/asp-net-web-pages-api-reference

you requirment is not much clear, if possible provide more info
Do u want to enable the link
Call the control by the back end code and change the relevant property.

Author

Commented:
nope i want, when the page loads, the a ref must be active

Author

Commented:
i want to set the a ref to active in c#
what do u meant by active

Author

Commented:
this is the css for the a ref

an a ref has link,active,hover css

when you hover over the a tag, the css kick in, now i want to trigger my a ref to be active so my a:active css kick in.


#left_menu a:active
{
      color: #FFFFFF;
      text-decoration: none;
      font-size: 14px;
      line-height: 36px;
      background-image: url(    '../images/menubox/menu_o.png' );
      background-repeat: no-repeat;
      padding: 0px 10px 0px 10px;
      margin: 0px;
      width: 190px;
      height: 36px;
      display: inline-block;
      text-shadow: #FFFFFF 0px 0px 1px;
}
I cant remember about links and I dont have access right now. How ever its become active because of an event as I believe. If so what u have to so is to trigger that event
Yes, Question is not clear
If you can share with screen shot and requirment will help to provide possible solution.

Author

Commented:
my menu
ok thats my menu, has you can see they is three links. now when i click on one it must have a red background like the hover css.

<div id="left_menu">
                    <table cellpadding="0" cellspacing="0" style="width: 210px;">
                        <tr>
                            <td class="middle">
                                <a runat="server" id="OurWorkCulture" href="~/work-culture.aspx" title="Our Work Culture">Our Work Culture</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="middle">
                                <a href="~/vision-mission.aspx" runat="server" title="Our Vision & Mission">Our Vision & Mission</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="middle">
                                <a href="~/ownership.aspx" runat="server" title="Our Ownership">Our Ownership</a>
                            </td>
                        </tr>
                    </table>
                </div>



#left_menu
{
}

#left_menu a
{
      color: #FFFFFF;
      text-decoration: none;
      font-size: 14px;
      line-height: 36px;
      background-image: url(         '../images/menubox/menu.png' );
      background-repeat: no-repeat;
      padding: 0px 10px 0px 10px;
      margin: 0px;
      width: 190px;
      height: 36px;
      display: inline-block;
      text-shadow: #FFFFFF 0px 0px 1px;
}

#left_menu a:hover
{
      color: #FFFFFF;
      text-decoration: none;
      font-size: 14px;
      line-height: 36px;
      background-image: url(    '../images/menubox/menu_o.png' );
      background-repeat: no-repeat;
      padding: 0px 10px 0px 10px;
      margin: 0px;
      width: 190px;
      height: 36px;
      display: inline-block;
      text-shadow: #FFFFFF 0px 0px 1px;
}

#left_menu a:active, .ActiveMenu
{
      color: #FFFFFF;
      text-decoration: none;
      font-size: 14px;
      line-height: 36px;
      background-image: url('../images/menubox/menu_o.png' );
      background-repeat: no-repeat;
      padding: 0px 10px 0px 10px;
      margin: 0px;
      width: 190px;
      height: 36px;
      display: inline-block;
      text-shadow: #FFFFFF 0px 0px 1px;
}

In the codebehind, declare the string variable and assign the ID which needs to active.
string WorkCultureId = "IDActive";

<script language="javascript" >

var linkactive = "<%=WorkCultureId>";
if(linkactive  != "")
document.getElementById(linkactive ).linkactive ="ActiveMenu"
</script>

Author

Commented:
your syntaxs wrong, please help
Follow the steps

Declare an class level string variable with access as "Protected"

protected string selectedIndex;

add assign the controls "ClientId" which needs the class change
selectedIndex = OurWorkCulture.ClientID;

In the aspx Page at the bootom, place the below code
<script language="javascript" >

var ddl = "<%=selectedIndex%>";
document.getElementById(ddl).className = "ActiveMenu";

</script>

Author

Commented:
the class is set but the "#left_menu a" background still over rights the "ActiveMenu" class

Author

Commented:

Author

Commented:
menu
Check with this link for removing the pevious class and replacing with the new class

http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript
do u want to do it in javascript or backend code
if its backend code then u can deal with the property named CssClass of the controller
if its javascript u can use the way in above comment