Hello again,
How can I change the font color of the items when they are clicked on the TagCloud in one transaction? I mean when I refresh the page the selected items font color should convert to the default value.
Because when there are many tags in the TagCloud, the user will need to know which tags have been already selected by him/her to avoid the confusion.
Thank you very much for your support,
Cheers,
Hamed
How can I change the font color of the items when they are clicked on the TagCloud in one transaction? I mean when I refresh the page the selected items font color should convert to the default value.
Because when there are many tags in the TagCloud, the user will need to know which tags have been already selected by him/her to avoid the confusion.
Thank you very much for your support,
Cheers,
Hamed
4 Answers, 1 is accepted
0
Hello Hamed,
In order to have different styling for the visited links, you should use the Anchor presudo-class :visited.
In the sample code bellow I have used WebBlue skin, and I am applying red color to all visited links. When page is loaded, the anchor color palette will be the normal one for the skin. When the user visit any of the links from the TagCloud, it will be colored in red. Of course, this is just a simple example, and you could edit as you like the presudo class - you could change the text-color, to set some borders, underline, overlie or any other styles you could want to apply to the already visited link. You could put the style marked in yellow in the head section of your document, or to a different style sheet, that will be linked to the document.
Regards,
Bojo
the Telerik team
In order to have different styling for the visited links, you should use the Anchor presudo-class :visited.
In the sample code bellow I have used WebBlue skin, and I am applying red color to all visited links. When page is loaded, the anchor color palette will be the normal one for the skin. When the user visit any of the links from the TagCloud, it will be colored in red. Of course, this is just a simple example, and you could edit as you like the presudo class - you could change the text-color, to set some borders, underline, overlie or any other styles you could want to apply to the already visited link. You could put the style marked in yellow in the head section of your document, or to a different style sheet, that will be linked to the document.
<!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></title> <style type="text/css"> .RadTagCloud_WebBlue .rtcTagList .rtcTagItem a:visited { color: #f00 !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadTagCloud ID="RadTagCloud2" runat="server" RenderItemWeight="true" Enabled="true" Width="400px" Skin="WebBlue"> <Items> <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" NavigateUrl="http://www.google.com" /> <telerik:RadTagCloudItem Text="AJAX" Weight="134" NavigateUrl="http://www.ajax.com" /> <telerik:RadTagCloudItem Text="VB" Weight="56" /> <telerik:RadTagCloudItem Text="C#" Weight="38" /> <telerik:RadTagCloudItem Text="Web" Weight="73" /> <telerik:RadTagCloudItem Text="jQuery" Weight="23" /> <telerik:RadTagCloudItem Text=".NET" Weight="78" /> <telerik:RadTagCloudItem Text="Code" Weight="50" /> <telerik:RadTagCloudItem Text="UI" Weight="80" /> <telerik:RadTagCloudItem Text="Unit" Weight="20" /> <telerik:RadTagCloudItem Text="Class" Weight="50" /> <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" /> <telerik:RadTagCloudItem Text="AJAX" Weight="134" /> <telerik:RadTagCloudItem Text="VB" Weight="56" /> <telerik:RadTagCloudItem Text="C#" Weight="38" /> <telerik:RadTagCloudItem Text="Web" Weight="73" /> <telerik:RadTagCloudItem Text="jQuery" Weight="23" /> <telerik:RadTagCloudItem Text=".NET" Weight="78" /> <telerik:RadTagCloudItem Text="Code" Weight="50" /> <telerik:RadTagCloudItem Text="UI" Weight="80" /> <telerik:RadTagCloudItem Text="Unit" Weight="20" /> <telerik:RadTagCloudItem Text="Class" Weight="50" /> <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" /> <telerik:RadTagCloudItem Text="AJAX" Weight="134" /> <telerik:RadTagCloudItem Text="VB" Weight="56" /> <telerik:RadTagCloudItem Text="C#" Weight="38" /> <telerik:RadTagCloudItem Text="Web" Weight="73" /> <telerik:RadTagCloudItem Text="jQuery" Weight="23" /> <telerik:RadTagCloudItem Text=".NET" Weight="78" /> <telerik:RadTagCloudItem Text="Code" Weight="50" /> <telerik:RadTagCloudItem Text="UI" Weight="80" /> <telerik:RadTagCloudItem Text="Unit" Weight="20" /> <telerik:RadTagCloudItem Text="Class" Weight="50" /> </Items> </telerik:RadTagCloud> </form></body></html>Regards,
Bojo
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Hamed
Top achievements
Rank 1
Rank 1
answered on 11 Oct 2010, 12:51 AM
Hello Bojo
Thank you very much for your respond.
I want to clarify that I am using the code below as onclientclicking property:
<script type="text/javascript">
function OnClientItemClicking(tagCloud, args) {
var currentItem = args.get_item();
var popup2 = window.open("popup2.aspx?KEYWORD=" + currentItem.get_text(), 'Popup2', 'width=700, height=300, resizeable=yes, menubar=0, toolbar=0, scrollbars=yes');
popup2.focus();
}
</script>
In this case, I inserted the style you advised me, but the style of all tagcloud items changed to red instead of the visited ones.
How can I implement the style according to the javascript I am using?
Cheers,
Hamed
Thank you very much for your respond.
I want to clarify that I am using the code below as onclientclicking property:
<script type="text/javascript">
function OnClientItemClicking(tagCloud, args) {
var currentItem = args.get_item();
var popup2 = window.open("popup2.aspx?KEYWORD=" + currentItem.get_text(), 'Popup2', 'width=700, height=300, resizeable=yes, menubar=0, toolbar=0, scrollbars=yes');
popup2.focus();
}
</script>
In this case, I inserted the style you advised me, but the style of all tagcloud items changed to red instead of the visited ones.
How can I implement the style according to the javascript I am using?
Cheers,
Hamed
0
Cori
Top achievements
Rank 2
Rank 2
answered on 12 Oct 2010, 02:20 PM
Hello Hamed,
If all the them turned red, it means they were visited or exist in your browser history, so they will always appear red unless you clear your history. If you don't want that behaviour you can set a class to the tag, to make them red, if you're opening them in a new window.
I don't see no other way around the "visited" css class behaviour.
If all the them turned red, it means they were visited or exist in your browser history, so they will always appear red unless you clear your history. If you don't want that behaviour you can set a class to the tag, to make them red, if you're opening them in a new window.
I don't see no other way around the "visited" css class behaviour.
0
Cori
Top achievements
Rank 2
Rank 2
answered on 12 Oct 2010, 02:24 PM
I just thought of something. If you set a CssClass on each of the RadTagCloud items, to cancel the visited css style. In your OnClientItemClicking event you could remove that class from the item, so the visited style will take affect.
I hope that solves your problem.
EDIT:
So something like this:
So if the CssClass was normalStyle, I would remove it. I do it this way, just in case it has another class on it.
I hope that solves your problem.
EDIT:
So something like this:
currentItem.get_element().className = currentItem.get_element().className.remove("normalStyle");So if the CssClass was normalStyle, I would remove it. I do it this way, just in case it has another class on it.