RadTabStrip rtsSelected and active navigation link - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

RadTabStrip rtsSelected and active navigation link

  • RadTabStrip rtsSelected and active navigation link
  • 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



  • 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
  • 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!
  • 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
  • Roger that!
  • Any update to this issue? (or workaround)?
  • 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
  • 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
  • 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
  • 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
  • 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" "www.w3.org/.../xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head profile="selenium-ide.openqa.org/.../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
  • 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


  • 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


  • 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