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

Forums / Designing & Styling / RadTabStrip rtsSelected and active navigation link

RadTabStrip rtsSelected and active navigation link

15 posts, 1 answered
  1. John
    John avatar
    9 posts
    Registered:
    15 Jun 2011
    12 Jul 2011
    Link to this post
    Hi.

    I am trying to set the ACTIVE link in the RadTabStrip navigation. I am using a css class (.sfNavigation) to target the navigation for styling. I notice in firebug that when a user has their mouse over a navigation link, a class name of "rtsSelected" is added to the a href. this only happens on the HOVER state of each link.

    why is this and how can i target the ACTIVE navigation link to show the website user the link/page they are currently on?

    Here is my css:

    .sfNavigation {height: 37px; width: 882px; margin: 27px auto 0 auto; background: none; border: none}
    .sfNavigation ul.rtsUL {float: none}
    .sfNavigation ul.rtsUL li.rtsLI {height: 37px; width: 143px; margin: 0 2px; padding: 0}
    .sfNavigation ul.rtsUL li.rtsLI a.rtsLink {height: 27px; width: 143px; padding: 10px 0 0 0; display: block; text-align: center; background: transparent url(../images/background-nav.png) no-repeat left top}
    .sfNavigation ul.rtsUL li.rtsLI a.rtsLink {font-family: Trebuchet MS, Arial, Sans-Serif; font-size: 1.1em; color: #fff; line-height: normal; text-transform: uppercase; text-decoration: none; cursor: pointer}
    .sfNavigation ul.rtsUL li.rtsLI a.rtsLink:hover {background: transparent url(../images/background-nav.png) no-repeat left bottom}
    .sfNavigation ul.rtsUL li.rtsLI a.rtsLink span.rtsOut {margin: 0; padding: 0}
    .sfNavigation ul.rtsUL li.rtsLI a.rtsLink span.rtsIn {margin: 0; padding: 0}
    .sfNavigation ul.rtsUL li.rtsLI a.rtsLink span.rtsTxt {margin: 0; padding: 0}




  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    15 Jul 2011
    Link to this post
    Hello John,


    Actually the class .rtsSelected is used to show the current page in the navigation. The add classes on hover are: rtsBefore, rtsAfter, rtsHoverAfter...

    You can check this out in the template demo website here:
    http://templates.sitefinity.com/university/academics/athletics



    Kind regards,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. John
    John avatar
    9 posts
    Registered:
    15 Jun 2011
    22 Jul 2011
    Link to this post
    Hi, thanks for your response. I wish it were as simple as you are explaining. However, you're missing what I am referring to.

    I am using the class .rtsSelected to show the current page in the navigation, however using the Horizontal RadTabStrip, whenever I HOVER to a NEW navigation link, the class .rtsSelected adds itself to the link being hovered and removes itself from the current page link in the navigation.

    link (current page - .rstSelected added)
    link
    link

    link (current page - .rtsSelected removed)
    link (hover - .rstSelected added) 
    link

    I am beginning to think this is a bug with the Horizontal RadTabStrip only.
    Thanks!
  4. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    26 Jul 2011
    Link to this post
    Hi John,

    Acrtuallty there is such bug logged only for RadTabStrip. At the moment what I can propose is using RadMenu instead of RadTabStrip with onClick event.


    Greetings,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  5. John
    John avatar
    9 posts
    Registered:
    15 Jun 2011
    26 Jul 2011
    Link to this post
    Roger that!
  6. thelyrist
    thelyrist avatar
    16 posts
    Registered:
    18 May 2007
    26 Sep 2011
    Link to this post
    Any update to this issue? (or workaround)?
  7. Vijay
    Vijay avatar
    5 posts
    Registered:
    13 Jul 2012
    04 Oct 2011
    Link to this post
    Hi Jordan,

    Any update on the RadTabStrip issue. Is that issue fixed in latest version?

    We are using Telerik version(2010.1.519.20) and we are getting some error css on Radtabstrip while running the testcases in selenium.

    Error: css=li.rtsLI.rtsLast > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt not found

    Thanks,
    Vijay
  8. Petya
    Petya avatar
    123 posts
    Registered:
    17 Oct 2016
    07 Oct 2011
    Link to this post
    Hello Vijay,

    Are you reproducing this error manually or only when you are running the selenium test? Can you also give some more information about what kind of test are you executing? Thank you in advance! 
     
    All the best,
    Petya
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Vijay
    Vijay avatar
    5 posts
    Registered:
    13 Jul 2012
    11 Oct 2011
    Link to this post
    Petya,

    I am getting this error only when I run the test cases from Selenium.  There is no error on running applications individually.

    Steps of selenium test cases:

    1. Run the application
    2. Scripts generation from Selenium for running application.
    3. Execute the script again ( getting error on executing the script).

    Error: css=li.rtsLI.rtsLast > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt not found

    Thanks,
    Vijayababu
  10. Petya
    Petya avatar
    123 posts
    Registered:
    17 Oct 2016
    12 Oct 2011
    Link to this post
    Hello Vijay,

    Can you send me the selenium test in html format so I could try to execute it locally. Thanks in advance.

    Regards,
    Petya
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Vijay
    Vijay avatar
    5 posts
    Registered:
    13 Jul 2012
    14 Oct 2011
    Link to this post
    Petya,

    Please find the below test case script,

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head profile="http://selenium-ide.openqa.org/profiles/test-case">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="selenium.base" href="http://uat.sengen.com/" />
    <title>Reports - Checking all Report Tabs</title>
    </head>
    <body>
    <table cellpadding="1" cellspacing="1" border="1">
    <thead>
    <tr><td rowspan="1" colspan="3">Reports - Checking all Report Tabs</td></tr>
    </thead><tbody>
    <tr>
        <td>open</td>
        <td>/Sengen/Tax306/pages/reports.aspx</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip &gt; div.rtsLevel.rtsLevel1 &gt; ul.rtsUL.rtsScroll &gt; li.rtsLI &gt; a.rtsLink.rtsAfter &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip &gt; div.rtsLevel.rtsLevel1 &gt; ul.rtsUL.rtsScroll &gt; li.rtsLI &gt; a.rtsLink.rtsAfter &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>css=li.rtsLI.rtsLast &gt; a.rtsLink.rtsAfter &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip &gt; div.rtsLevel.rtsLevel1 &gt; ul.rtsUL.rtsScroll &gt; li.rtsLI &gt; a.rtsLink.rtsBefore &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip &gt; div.rtsLevel.rtsLevel1 &gt; ul.rtsUL.rtsScroll &gt; li.rtsLI &gt; a.rtsLink.rtsBefore &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>css=li.rtsLI.rtsFirst &gt; a.rtsLink.rtsBefore &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
        <td></td>
    </tr>
    </tbody></table>
    </body>
    </html>

    Thanks,
    Vijay
  12. Petya
    Petya avatar
    123 posts
    Registered:
    17 Oct 2016
    18 Oct 2011
    Link to this post
    Hello Vijay,

    Can you also give me a link to the frontend page you are testing, so I can execute the test there. My suggestion is to put some "wait for element present" commands, because some of the elements you are testing may be loaded slowly and this might cause some troubles.

    Best wishes,
    Petya
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Vijay
    Vijay avatar
    5 posts
    Registered:
    13 Jul 2012
    18 Oct 2011
    Link to this post


    Thanks Petya,I will use "wait for element" and let you know if any issues. Please find the below front page link,

    http://uat.sengen.com/Sengen/Tax306/pages/reports.aspx

    Regards,
    Vijay
  14. Vijay
    Vijay avatar
    5 posts
    Registered:
    13 Jul 2012
    18 Oct 2011
    Link to this post


    Thanks Petya,I will use "wait for element" and let you know if any issues. Please find the below front page link,

    http://uat.sengen.com/Sengen/Tax306/pages/reports.aspx

    Regards,
    Vijay
  15. Petya
    Petya avatar
    123 posts
    Registered:
    17 Oct 2016
    20 Oct 2011
    Link to this post
    Hello Vijay,

    You can try something like this:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="selenium.base" href="http://uat.sengen.com/" />
    <title>testcase</title>
    </head>
    <body>
    <table cellpadding="1" cellspacing="1" border="1">
    <thead>
    <tr><td rowspan="1" colspan="3">testcase</td></tr>
    </thead><tbody>
    <tr>
        <td>open</td>
        <td>/Sengen/Tax306/pages/reports.aspx</td>
        <td></td>
    </tr>
    <tr>
        <td>waitForElementPresent</td>
        <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip > div.rtsLevel.rtsLevel1 > ul.rtsUL.rtsScroll > li.rtsLI > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>link=Agency List</td>
        <td></td>
    </tr>
    <tr>
        <td>pause</td>
        <td>5000</td>
        <td></td>
    </tr>
    <tr>
        <td>waitForElementPresent</td>
        <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip > div.rtsLevel.rtsLevel1 > ul.rtsUL.rtsScroll > li.rtsLI > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>link=Customer List</td>
        <td></td>
    </tr>
    <tr>
        <td>pause</td>
        <td>5000</td>
        <td></td>
    </tr>
    <tr>
        <td>waitForElementPresent</td>
        <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip > div.rtsLevel.rtsLevel1 > ul.rtsUL.rtsScroll > li.rtsLI > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>link=Adjustments</td>
        <td></td>
    </tr>
    <tr>
        <td>pause</td>
        <td>5000</td>
        <td></td>
    </tr>
    <tr>
        <td>waitForElementPresent</td>
        <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip > div.rtsLevel.rtsLevel1 > ul.rtsUL.rtsScroll > li.rtsLI.rtsLast > a.rtsLink > span.rtsOut > span.rtsIn > span.rtsTxt</td>
        <td></td>
    </tr>
    <tr>
        <td>click</td>
        <td>link=Age Report</td>
        <td></td>
    </tr>
    </tbody></table>
    </body>
    </html>

     

    Kind regards,
    Petya
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
15 posts, 1 answered