1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Highlighting the selected news item in the news list

Highlighting the selected news item in the news list

6 posts, 0 answered
  1. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    10 Jun 2008
    Link to this post
    Is there a simple way to have the news list highlight the selected news item?
    I have the news article and news list on one page so I want to highlight the selected news item in the list.

    Thanks

  2. Nikifor
    Nikifor avatar
    232 posts
    Registered:
    18 May 2013
    12 Jun 2008
    Link to this post
    Hi Darren,

    You actually could not have 'Selected News' because once you select a piece of news, you are automatically redirected to the single news page. This is laid in as basis in the NewsView functionality and it applies to the old and the new News controls. Also, by default, the article is highlighted when you move the mouse cursor over it.

    Please let me know if you had something else in mind and we have not understood your request.
     
    Regards,
    Nikifor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    19 Jun 2008
    Link to this post
    Well we have a news list down the right hand side of the page with news articles opening in the same page.

    We're not using the new newsview control but the original news list and article controls all in the same page.
    This works fine except when we open a news article we want the news article currently being viewed to be highlighted in the news list plus have the roll over event for news articles in the list to change the background colour as well.

    I'm thinking I'll have to record the news article id in session state or something and then when the news list is generated set the background colour for each article accordingly.
    It seems a lot of effort though to get such a common setup running so I wondered if there was a better way of getting this effect without having to rewrite too much of the control.

    Thanks

  4. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    20 Jun 2008
    Link to this post
    I resolved this by editing the newslist control and adding a panel with a rollover event handler to highlight the menu item and then by adding some code behind which checked the URL against the article title in the list and set the background accordingly.

    It would be nice to be able to quickly turn on article highlighting though although it wasn't much code to get the desired result.
  5. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    20 Jun 2008
    Link to this post

    Hello Darren,

    I can suggest a javascript solution to highlight the selected news.

    So open the News List and Single News templates that you are using. Both should be found in ~/Sitefinity/ControlTemplates/News folder. After that set IDs for the tags that wrap both templates.

    In single news template set ID singleNews.

    <div class="reverseMargins" id="singleNews">
        <
    h2 class="singlenews"><asp:Literal ID="Title" runat="server" /></h2>

        <p class="newsdate"><asp:Literal ID="Publication_Date" runat="server" /></p>
       ....
    </
    div>


    In news list template set ID newsList

    <h1 id="categoryModeTitle" runat="server" class="categorizedAs">
        <
    asp:Literal ID="Label1" runat="server" Text='<%$Resources:Category %>'></asp:Literal> :
        <asp:Literal ID="categoryName" runat="server"></asp:Literal>
    </
    h1>
    <
    h1 id="taggedModeTitle" runat="server" class="categorizedAs">
        <
    asp:Literal ID="Label2" runat="server" Text='<%$Resources:AllNewsTaggedWith %>'></asp:Literal> :
        <asp:Literal ID="tagName" runat="server"></asp:Literal>
    </
    h1>
    <
    asp:Repeater ID="newsRepeater" runat="server">
        <
    HeaderTemplate>
            <
    ol class="sf_newsList" id="newsList">
        </
    HeaderTemplate>
        <
    ItemTemplate>
            <
    li>
                <h2 class="sf_newsTitle">
                    <
    asp:HyperLink ID="newsLink" runat="server"><%#DataBinder.Eval(Container.DataItem, "Title")%></asp:HyperLink>
                </
    h2>
                <p class="sf_newsDate"><%#DataBinder.Eval(Container.DataItem, "Publication_Date", "{0:dd MMMM yyyy}")%></p>
                <
    p class="sf_newsSummary">
                    <
    asp:Image ID="Thumbnail" ImageUrl='<%#DataBinder.Eval(Container.DataItem, "Thumbnail")%>' runat="server" />
                    <
    asp:Literal ID="Summary" Text='<%#DataBinder.Eval(Container.DataItem, "Summary")%>' runat="server" />
                </
    p>

                ....

    After that add the following javascript to the single news template.

    <script type="text/javascript">

    window.onload = function () {
        var singleNewsWrapper = document.getElementById("singleNews");
        var singleNewsTitle = singleNewsWrapper.getElementsByTagName("h2")[0];
        
        var newsListWrapper = document.getElementById("newsList");
        var newsListTitles = newsListWrapper.getElementsByTagName("h2");
        for(var i = 0; i < newsListTitles.length; i++) {
            if(singleNewsTitle.innerHTML == newsListTitles[i].getElementsByTagName("a")[0].innerHTML) {
                newsListTitles[i].parentNode.className = "selectedNews";
            }
        }
    }

    </script>

    Make sure news titles are marked with H2 in both template.

    After that add CSS in your theme CSS file to highlight the selected news item. For example:

    .selectedNews {
        background-color: #eee;
    }


    Best wishes,
    Katia
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center

     

  6. Darren
    Darren avatar
    72 posts
    Registered:
    19 Mar 2008
    27 Jun 2008
    Link to this post
    Thanks for this. It's a similar solution to what I applied and works a treat.
Register for webinar
6 posts, 0 answered