Nav tabs Location

jay's Avatar

jay

23 Aug, 2012 06:53 PM

i saw a similar comment about this question but it was just for bullets
i need to put the NAV bar (Tabs at the top of the slider)
check this link (this is the one im using now)
in this link NAV bar is at the bottom, how can i move it to the top of the content?
http://dimsemenov.com/plugins/royal-slider/content-slider/

thank you

  1. Support Staff 1 Posted by Dmitry Semenov on 24 Aug, 2012 07:11 AM

    Dmitry Semenov's Avatar
  2. Dmitry Semenov closed this discussion on 24 Aug, 2012 07:11 AM.

  3. jay re-opened this discussion on 24 Aug, 2012 02:27 PM

  4. 2 Posted by jay on 24 Aug, 2012 02:27 PM

    jay's Avatar

    Thanks for your response
    as i said i saw that comment but when i do this (adding the script to the page, the actual page not any JS ones, hope ive done it right) and change fitInViewport to false, it changes the tabs in to bullets and they still sitting at the bottom of the content.
    would you please help?

    thank you

  5. Support Staff 3 Posted by Dmitry Semenov on 24 Aug, 2012 02:31 PM

    Dmitry Semenov's Avatar

    Please send me a link to your page and I'll take a look what's not right. Are you sure that controls aren't shifted via CSS?

    Dmitry

  6. 4 Posted by jay on 24 Aug, 2012 02:34 PM

    jay's Avatar

    here is a test link
    http://condoscentre.ca/test.asp

    here is the modified test link
    http://condoscentre.ca/test_Modified.asp

  7. 5 Posted by jay on 24 Aug, 2012 02:36 PM

    jay's Avatar

    the class you are referring the tabs to is rsTmb
    i search for this and i didnt see it in any CSS used on the page

  8. Support Staff 6 Posted by Dmitry Semenov on 24 Aug, 2012 02:39 PM

    Dmitry Semenov's Avatar

    You need also make sure that controls aren't shifted via CSS (it may be different based on skin).

    .rsDefault .rsBullets {
        bottom: auto;
        top: -20px;
    }
    

    https://skitch.com/diiiimaaaa/eq11n/html-content-slider-royalslider...

    Dmitry

  9. 7 Posted by jay on 24 Aug, 2012 02:54 PM

    jay's Avatar

    i searched for it and i didnt found ".rsDefault .rsBullets" what i found is >>> .rsDefaultInv .rsBullets which is in >> rs-default-inverted.css
    and i did change it as follow

    .rsDefaultInv .rsBullets {

    position: absolute;
    z-index: 35;
    left: 0;
    bottom: auto;
    top: -20px;
    width: 100%;
    height: auto;
    margin: 0 auto; 
    text-align: center;
    overflow: hidden;
    

    }

    but still doset work :(

  10. Support Staff 8 Posted by Dmitry Semenov on 24 Aug, 2012 03:04 PM

    Dmitry Semenov's Avatar

    Please send me the link to page you're working on now and I'll tell you what you did wrong and how to put nav on top.

    Dmitry

  11. 9 Posted by jay on 24 Aug, 2012 03:57 PM

    jay's Avatar

    i already sent it to you
    check post number 5

  12. Support Staff 10 Posted by Dmitry Semenov on 24 Aug, 2012 04:03 PM

    Dmitry Semenov's Avatar

    Then please take a look again at my post # 7. There is even screenshot there with filename and what needs to be changed/added.

    Dmitry

  13. 11 Posted by jay on 24 Aug, 2012 04:19 PM

    jay's Avatar

    Thank you very much for your effort
    i added the style inside the page and here is what im getting
    http://condoscentre.ca/test_Modified.asp

    the original is
    http://condoscentre.ca/test.asp

    as you can see the tabs changed to bullets (which is wrong) and the content background is changed.
    sorry would you be a little more specific ?
    would you be able to download my test page and apply the changes you talking about and send the link for me please
    i really appriciated

  14. Support Staff 12 Posted by Dmitry Semenov on 24 Aug, 2012 05:50 PM

    Dmitry Semenov's Avatar

    Here is all you need:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
    
        <title>HTML Content Slider | RoyalSlider Example</title>
    
        <!-- slider JS files -->
        <link href="IncludeFiles/Tabs/royalslider/royalslider.css" rel="stylesheet">
        <script  src="IncludeFiles/Tabs/royalslider/jquery-1.8.0.min.js"></script>
        <script src="IncludeFiles/Tabs/royalslider/jquery.royalslider.min.js"></script>
    
    
        <!-- slider stylesheets -->
        <link href="IncludeFiles/Tabs/royalslider/default/rs-default.css" rel="stylesheet">
        <link href="IncludeFiles/Tabs/preview-assets/css/main.css" rel="stylesheet">
    
    
        <!-- slider css -->
        <style>
          .contentSlider {
            width: 100%;
          }
          .contentSlider .rsSlide,
          .contentSlider .rsOverflow {
            background: #eee;
          }
          .contentSlider h3 {
            font-size: 24px;
            line-height: 31px;
            margin: 12px 0 8px;
            font-weight: bold;
          }
          .contentSlider img {
            max-width: 100%;
            height: auto;
            display: block;
          }
          .rsBullets {
            position:absolute;
            z-index:35;
            left:0px;
              bottom: auto;
              width:100%;
              height:auto;
              top: -20px;
              margin:0 auto;
              text-align:center;
              line-height:18px;
              overflow:hidden;
          }
        </style>
    
      </head>
      <body>
    
        <div id="content-slider-1" class="royalSlider contentSlider rsDefault">
          <div>
            <span class="rsTmb">page 1 </span>
        this is page 1
            <p>&nbsp;</p>
          </div>
          <div>
            <span class="rsTmb">page 2</span>
        this is page 2
          </div>
          <div>
            <span class="rsTmb">Page 3</span>
        this is page 3
          </div>
        </div>
    
    
        <script>
        jQuery(document).ready(function($) {
         var slider =  $('#content-slider-1').royalSlider({
            autoHeight: true,
            arrowsNav: false,
            fadeinLoadedSlide: false,
            controlNavigationSpacing: 0,
            controlNavigation: 'tabs',
            imageScaleMode: 'none',
            imageAlignCenter:false,
            loop: false,
            loopRewind: true,
            numImagesToPreload: 6,
            keyboardNavEnabled: true
          });
    
            slider.prepend(slider.find('.rsNav'));
          });
        </script>
    
      </body>
    </html>
    

    Also, I took a look at code that you added, and there are a lot of mistakes there. You should probably hire someone if you wish some customizations. Please follow the instruction from basic usage section of documentation.

    Dmitry

  15. 13 Posted by jay on 24 Aug, 2012 05:57 PM

    jay's Avatar

    I dont know whats wrong but i completely replaced your code with mine and i got the same location for the tabs, They are sitting at the bottom of the content (i mean the content scrolling at the top of the tabs.
    here it is

    http://condoscentre.ca/test_Modified.asp

    :(

  16. Support Staff 14 Posted by Dmitry Semenov on 24 Aug, 2012 06:03 PM

    Dmitry Semenov's Avatar

    Now it's my fault =) I edited prev comment, now should work correctly.

    Dmitry

  17. 15 Posted by jay on 24 Aug, 2012 06:05 PM

    jay's Avatar

    YESS
    thats what im looking for
    thank you very much :)

  18. Dmitry Semenov closed this discussion on 24 Aug, 2012 06:43 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac