SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabs that Slide up and Down and also have Next/Prev ! HELP!

    Having some issues with my click/toggle function for my tabs. We are doing a "tabbed" navigation which also does "next/previous" to go back and fourth between the tabs. The tabs should open when clicked, and close when clicked - however they should remain open when you click on different tabs if you have one tab open already.

    It seems really shotty and I think its because the function 1) I'm not great at jquery and 2) I think its getting confused when you click on a tab while a tab is already open. The page also seems to be dropping down to the "anchor" location. The link is here and my code for the tabs and next/prev and the toggle for the tab content is below

    Code JavaScript:
    $('#tab-buttons-container').easytabs();
     
     var $tabContainer = $('#tab-buttons-container'),
     $tabs = $tabContainer.data('easytabs').tabs,
     $tabPanels = $(".tab-buttons-panel")
     totalSize = $tabPanels.length;
     
     $tabPanels.each(function(i){
       if (i != 0) {
     prev = i - 1;
     $(this).prepend("<a href='#' class='prev-tab btn success' rel='" + prev + "'>&laquo; Prev Page</a>");
       } else {
     $(this).prepend("<span class='prev-tab btn'>&laquo; Prev Page</span>");
       }
       if (i+1 != totalSize) {
     next = i + 1;
     $(this).prepend("<a href='#' class='next-tab btn success' rel='" + next + "'>Next Page &raquo</a>");
       } else {
     $(this).prepend("<span class='next-tab btn'>Next Page &raquo</span>");
       }
     });
     
     $('.next-tab, .prev-tab').click(function() {
       var i = parseInt($(this).attr('rel'));
       var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href');
       $tabContainer.easytabs('select', tabSelector);
       return false;
     });
     
     $('.click').click(function() {
       $('.panel-container').toggle('fast', function() {
     // Animation complete.
       });
     });

    I think my issue is with that last bit.. any help would be great!! Thanks!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    I just had a look at the link you posted.
    The page is throwing the following error:

    Code:
    Uncaught ReferenceError: jQuery is not defined jquery.easytabs.js:679
    The reason for this is that you are including jquery.easytabs.js before you are including jQuery.
    If you let me know when you have fixed that, I don't mind having a look at the problem with the tabbed navigation for you.

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    The reason for this is that you are including jquery.easytabs.js before you are including jQuery.
    If you let me know when you have fixed that, I don't mind having a look at the problem with the tabbed navigation for you.
    I just moved it, it loads prior to easy tabs, but I'm still having the same issue.. Thanks for looking into it!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    Seems to be working fine now.
    Did you get your problem solved in the meantime?

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hey,

    Seems to be working fine now.
    Did you get your problem solved in the meantime?
    Well my issue with it seems to be when you navigate through to the other "tabs" it jumps down to where the anchor is. And if you click on a different tab before closing the first one the whole thing freaks out...

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

    I had a look at your page.

    As a word of warning: you are including jQuery three times.
    This is almost never a good idea.

    Anyway, I got to the bottom of your problem.

    You should initialize the menu as collapsible, thus:

    Code JavaScript:
    $('#tab-container').easytabs({
      collapsible: true, 
      collapsedByDefault: true
    });

    I've also amended the code to make the tabs navigable.

    Here's a demo.

    And to be complete, here's the code:

    Code:
    <html>
      <head>
        <title>EasyTabs Demo</title>
        <script type='text/javascript' src='http://d.perich.com/a2ru/wp-content/themes/a2ru/js/jquery-1.7.1.min.js?ver=3.5.1'></script>
        <script type='text/javascript' src='http://d.perich.com/a2ru/wp-content/themes/a2ru/js/jquery.hashchange.min.js?ver=3.5.1'></script>
        <script type='text/javascript' src='http://d.perich.com/a2ru/wp-content/themes/a2ru/js/jquery.easytabs.js?ver=3.5.1'></script>
        <style>
          .etabs { margin: 0; padding: 0; }
          .tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
          .tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
          .tab a:hover { text-decoration: underline; }
          .tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
          .tab a.active { font-weight: bold; }
          .tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
          .panel-container { margin-bottom: 10px; }
          .prev-tab{margin-right:15px}
        </style>
      </head>
      <body>
        <div id="tab-container" class='tab-container'>
         <ul class='etabs'>
           <li class='tab'><a href="#tab1">Tab 1</a></li>
           <li class='tab'><a href="#tab2">Tab 2</a></li>
           <li class='tab'><a href="#tab3">Tab 3</a></li>
         </ul>
         <div class='panel-container'>
          <div id="tab1" class="panel">
          	<h2>Tab 1</h2>
            <p>
              Lorizzle ipsum dizzle sizzle amizzle, fo shizzle adipiscing elit. Nullam sapizzle velit, aliquet volutpizzle, izzle boom shackalack, 
              own yo' vel, arcu. Pellentesque tortizzle. Doggy eros. Cool bling bling yippiyo dapibizzle its fo rizzle stuff shiz. Mauris pellentesque 
              nibh owned turpis. Get down get down uhuh ... yih! tortor. Pellentesque mah nizzle rhoncizzle uhuh ... yih!. In go to hizzle habitasse 
              platea fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Bow wow wow dapibizzle. Curabitizzle tellizzle stuff, pretizzle fizzle, mattis 
              yo mamma, eleifend vitae, nunc. Bling bling suscipit. Integizzle gizzle velit sizzle hizzle.
            </p>
            <p>
              Ghetto a magna sed augue phat accumsizzle. Aenizzle i'm in the shizzle my shizz. Vivamizzle **** dolizzle, viverra sheezy, 
              yo izzle, yo izzle, erizzle. Sure dope bling bling gangsta in faucibus pot luctizzle sheezy black posuere cubilia Fo shizzle; 
              Dang dolizzle. Integer faucibus. Ass pharetra blandizzle quizzle. Shizzle my nizzle crocodizzle rutrizzle its fo rizzle orci. 
              Dope facilisis. Mauris sem tellivizzle, dawg eu, scelerisque gangster, blandizzle ac, gangsta.
            </p>
          </div>
          <div id="tab2" class="panel">
            <h2>Tab 2</h2>
            <p>
              Ghetto a magna sed augue phat accumsizzle. Aenizzle i'm in the shizzle my shizz. Vivamizzle **** dolizzle, viverra sheezy, 
              yo izzle, yo izzle, erizzle. Sure dope bling bling gangsta in faucibus pot luctizzle sheezy black posuere cubilia Fo shizzle; 
              Dang dolizzle. Integer faucibus. Ass pharetra blandizzle quizzle. Shizzle my nizzle crocodizzle rutrizzle its fo rizzle orci. 
              Dope facilisis. Mauris sem tellivizzle, dawg eu, scelerisque gangster, blandizzle ac, gangsta.
            </p>
          </div>
          <div id="tab3" class="panel">
            <h2>Tab 3</h2>
            <p>
              In uhuh ... yih! its fo rizzle nizzle rizzle. Get down get down things, arcu i'm in the shizzle malesuada facilisis, owned yippiyo aliquet pimpin', 
              nizzle brizzle ghetto break it down a shizznit. Suspendisse volutpat uhuh ... yih! fo shizzle my nizzle. Sed fizzle lectizzle ut libero. 
              Proin consectetizzle break yo neck, yall sapizzle. Etizzle aliquizzle, sizzle we gonna chung its fo rizzle things, stuff sem sheezy tellivizzle, 
              ac cool erizzle nisi sizzle rizzle purus. Maecenizzle for sure tortizzle vizzle pot. Phasellus stuff. My shizz we gonna chung lacizzle, 
              convallis nizzle, aliquet sit fo shizzle, pulvinar egestas, shizzle my nizzle crocodizzle. Vivamus owned. Doggy ante crazy sure in 
              ghetto phat luctizzle fizzle fo posuere cubilia I saw beyonces tizzles and my pizzle went crizzle; In eu elizzle eu enizzle bibendizzle 
              i'm in the shizzle. Cool est tortizzle, vulputate uhuh ... yih!, semper doggy, commodo da bomb, nisi. Etiam feugizzle, fo shizzle 
              my nizzle boofron vehicula luctus, lorem justo daahng dawg lorem, we gonna chung viverra mi urna fizzle erizzle.
            </p>
          </div>
         </div>
        </div>
        
        <script type="text/javascript">
          $(document).ready( function() {
            $('#tab-container').easytabs({
              collapsible: true, 
              collapsedByDefault: true
            });
            
            var $tabContainer = $('#tab-container'),
                $tabs = $tabContainer.data('easytabs').tabs,
                $tabPanels = $(".panel")
                totalSize = $tabPanels.length;
            
            $tabPanels.each(function(i){
              if (i+1 != totalSize) {
                next = i + 1;
                $(this).prepend("<a href='#' class='next-tab btn success' rel='" + next + "'>Next Tab &raquo</a>");
              } else {
                $(this).prepend("<span class='next-tab btn'>Next Tab &raquo</span>");
              }
              if (i != 0) {
                prev = i - 1;
                $(this).prepend("<a href='#' class='prev-tab btn success' rel='" + prev + "'>&laquo; Prev Tab</a>");
              } else {
                $(this).prepend("<span class='prev-tab btn'>&laquo; Prev Tab</span>");
              }
            });
            
            $('a.next-tab, a.prev-tab').click(function() {
              var i = parseInt($(this).attr('rel'));
              var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href');
              $tabContainer.easytabs('select', tabSelector);
              return false;
            });
          });
        </script>
      </body>
    </html>
    This should do everything you want.
    I've left the default styling from the plugin's demo page. I'll leave it to you to adapt it to your site's theme.

    HTH

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    BTW, if you want the tab's content to have a consistent height, you'll need:

    Code CSS:
    .panel{height: 300px;}

  8. #8
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    BTW, if you want the tab's content to have a consistent height, you'll need:

    Code CSS:
    .panel{height: 300px;}
    Awesome. Thank you so much. Figured it out, I didn't realize I was calling jquery that many times!

    How difficult is it to convert my next/prev to slide toggle? Or is that overkill?

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Nice one! I just had a look at the site and it looks much better.

    Regarding the next/previous tabs, I'm not sure how much work they would be to implement with slideToggle.
    I had a look at the docs and couldn't see anything that indicates such an option is supported, meaning you'll probably have to code this by hand.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I just had a second look at the docs and you can do it after all!
    You just have to add the following to the hash of options you pass to the easytabs method:

    Code JavaScript:
    transitionIn: "slideDown",
    transitionOut: "slideUp"

    i.e.

    Code JavaScript:
    $('#tab-container').easytabs({
      collapsible: true, 
      collapsedByDefault: true,
      transitionIn: "slideDown",
      transitionOut: "slideUp"
    });

    I've updated my demo to reflect this.

    HTH

  11. #11
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    I just had a second look at the docs and you can do it after all!
    You just have to add the following to the hash of options you pass to the easytabs method:

    Code JavaScript:
    transitionIn: "slideDown",
    transitionOut: "slideUp"

    i.e.

    Code JavaScript:
    $('#tab-container').easytabs({
      collapsible: true, 
      collapsedByDefault: true,
      transitionIn: "slideDown",
      transitionOut: "slideUp"
    });

    I've updated my demo to reflect this.

    HTH
    That's actually pretty neat, but I meant like things moving from side to side, sorry I wasn't more descriptive.

    I'm still having an issue that I can't seem to figure out the cause of... When I click on any tab (other than the first) when the whole thing is collapsed, it jumps down to the anchored div and animates open.. the animation is fine, but the jumping down part has my mystified.


    Update: Actually, I just solved it (the jumping part). I had to add and set the updateHash to false. Now I just need to figure out how to make the panel content slide to the left or right on next/prev button clicks
    Last edited by sarahfrantz; Apr 24, 2013 at 10:59. Reason: edited reply


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •