TagCloud item change color after clicking

5 posts, 0 answers
  1. Hamed
    Hamed avatar
    6 posts
    Member since:
    Aug 2010

    Posted 30 Sep 2010 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 01 Oct 2010 Link to this post

    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.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hamed
    Hamed avatar
    6 posts
    Member since:
    Aug 2010

    Posted 10 Oct 2010 Link to this post

    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
  5. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 12 Oct 2010 Link to this post

    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.
  6. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 12 Oct 2010 Link to this post

    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:

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017