how to change the style of anchor tag inside a div from c#?

Question

0.00/5 (No votes)

See more:

Hi all i have a div and inside that div i have some anchor tag for navigation.

code is something like below

HTML

<div id="container">
<a href="1.aspx">1</a>
<a href="2.aspx">2</a>
<a href="3.aspx">3</a>
<a href="4.aspx">4</a>
</div>

some css like this...

CSS

#container 
{
font-family:arial;
font-size:11px;
}
#container  a
{
color : black;
}
#container  a:hover
{
color : red;
}
#container  a:visited
{
color : green;
}

now my color setting for the anchor tag is coming from the database. so i want to apply this on server side inside master page using C#.

what i tried

i gave id to each anchor tag and add style attribute. it works for the first time but after that i have add java script to change color on mouse hover and mouse out so when this code runs the main color of the anchor tag is removed and default body color is applied on each anchor tag.

so main issue is when i click on 1.aspx it works ,color apply based on the master page code but now i am on same page and just hover mouse on 1.aspx and mouse out the defaut color take place. so the style of active link is not there.

can someone please help me ?

Posted 24-Mar-14 18:15pm

ravikhoda

Updated 24-Mar-14 21:25pm

v2

Add a Solution

Comments

nandakishoreroyal 25-Mar-14 0:38am

paste the code behind code, and where you have placed.

ravikhoda 25-Mar-14 1:09am

something like this

<a href="1.aspx" id="one" runat="server">1
<a href="2.aspx" id="two" runat="server">2
<a href="3.aspx" id="three" runat="server">3
<a href="4.aspx" id="four" runat="server">4

on master page load
i write something like this

one.style.add("color","databaseval");
two.style.add("color","databaseval");
three.style.add("color","databaseval");
four.style.add("color","databaseval");

and
one.attribute.add("onmousehover","this.style.color='databasevalforhover'");
one.attribute.add("onmousehout","this.style.color='databasevalforout'");

nandakishoreroyal 25-Mar-14 3:23am

spelling mistake in onmouseout

you have written "onmousehout" rename to "onmouseout"

ravikhoda 25-Mar-14 3:27am

try that but on working. actually it works on mouseover and mouseout but when mouseout happen it becomes permanent black color. it should be color from database value. if i click it again it will take value from database.

nandakishoreroyal 25-Mar-14 3:40am

dont use css while u r using codebehind to apply styles

ravikhoda 25-Mar-14 4:41am

let me say ..font size ,font family,line height all these are set from css i just want color to be change from database.

nandakishoreroyal 25-Mar-14 5:19am

update the code including css what you have exactly done, let me go through the code

ravikhoda 25-Mar-14 6:17am

okay here we go. forget about the other css properties like font style and family. i removed it for now. below is my code.

HTML
<div id="divcontaine" runat="server">
<a href="a1.aspx" id="A1" runat="server">one
<a href="a2.aspx" id="A2" runat="server">two
<a href="a3.aspx" id="A3" runat="server">three
<a href="a4.aspx" id="A4" runat="server">four
</div>

C# :
A1.Style.Add("color", "red"); -> (red comes from database)
A1.Attributes.Add("onmouseover", "this.style.color='red'");
A1.Attributes.Add("onmouseout", "this.style.color='green'");

now first time when page load i get id of the control which is set through application variable on each page. on master page i apply the color , mouseover and mouseout attribute through c#. first time a1 link will be red. when you mouseover on a1 it will be still red but when you mouse out that will be permanent green. however i want it to be red. because a1 is still active page. user is not moved to any other page.

basically i want to set below things from c#

A1:link color
A1:visited color
A1:hover color
A1:active color

nandakishoreroyal 25-Mar-14 6:31am

you have given onmouseout color to green thats y it is in green, give what ever color you want
ex make it as red, then when mousehover and mouseout link will be in red, i donno then wha tis the use of hover and mouseout

ravikhoda 25-Mar-14 6:40am

yeah that is true but in case of inactive link that will not work. I.e. when user is on page one , but if he mouseover on a2 that will be red and when he mouseout on a2 it will still be red if i follow your suggestion. so that will make both a1 and a2 as red. and same for a3 and a4 if i mouseover or mouseout from a1 page.

nandakishoreroyal 25-Mar-14 7:20am

do one thing ,

call javascript methond on body of every page,

and for every page you give title,

in the javascript method

if(document.title.toUpperCase() == "ONE" )
{
if( document.getElementById(TabID) != null)
{
document.getElementById('A1').style.color ='YOUR COLOR';
}
}

Pass title of your aspx page and color to be active of anchor tag to javascript on pageload.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Code Help 2014 · Answer 1 · 2014-03-27T03:19:00

I think you are misusing a:active property. a:active property will be used when you click on the link. It has no relation to the currently opened page. When you mouse out from the link, then it means that the link is not active at that time.

Definition of :active is:

A link becomes active when you click on it.

In one of your comments, you have mentioned that "because a1 is still active page", which means that you are still on a1.aspx page. But it has nothing to do with :active. The css set in a:active will be applied when you click on the link and do not release the mouse button.

For details, check:

http://www.w3schools.com/cssref/sel_active.asp[^]

So basically what you need is that when you are writing the C# code, set the original value of color in the onmouseout.