SitePoint Sponsor

User Tag List

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

    Adding Slide Left / Right to Transition effect in EasyTabs

    I currently have a jQuery EasyTabs plugin setup here. Right now the transitionin/out effect is to FadeIn and FadeOut. I'm trying to have it so that it slides on transition. For example, when you click on a link, when the tab is expanded, the content that is current there moves to the left, while the new content moves in from the right.

    I now that I need to modify the transitionIn and transitionOut options, but I think I need to give it something custom since slideLeft, slideRight isn't supported by default.

    Here's the plugin site .

    Here is my javascript
    Code:
      $(document).ready( function() {
    				$('#tab-buttons-container').easytabs({
    				  collapsible: true, 
    				  collapsedByDefault: true,
    				  transitionIn: 'slideLeft',
      				  transitionOut: 'slideRight',	
    				  updateHash: false
    				});
    				
    				var $tabContainer = $('#tab-buttons-container'),
    					$tabs = $tabContainer.data('easytabs').tabs,
    					$tabPanels = $(".tab-buttons-panel")
    					totalSize = $tabPanels.length;
    			  });
    and my html

    HTML Code:
    <div id="tab-buttons-container" class='tab-container'>
    				 			<ul class='etabs'>
    <li id="menu-item-240" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-240"><a href="#tab1">About</a></li>
    <li id="menu-item-241" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-241"><a href="#tab2">Committees</a></li>
    <li id="menu-item-242" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-242"><a href="#tab3">Events</a></li>
    <li id="menu-item-243" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-243"><a href="#tab4">Grants & Support</a></li>
    <li id="menu-item-244" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-244"><a href="#tab5">Knowledge Base</a></li>
    <li id="menu-item-245" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-245"><a href="#tab6">Blog</a></li>
    <li id="menu-item-246" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-246"><a href="#tab7">Forum</a></li>
    <li id="menu-item-247" class="tab menu-item menu-item-type-custom menu-item-object-custom menu-item-247"><a href="#tab8">Support</a></li>
    					 		</ul>
    					 	<div class="panel-container">
    					  		<div id="tab1" class="tab-buttons-panel">
    					   			
    					   			<h2>Heading 1</h2>
    					  			<p>This is the content of the first tab.</p>
    					  		</div><!-- /tab1-->
    					  		<div id="tab2" class="tab-buttons-panel">
    					   			
    					  			<h2>Heading 2</h2>
    					   			<p>Stuff from the second tab.</p>
    					  		</div><!-- /tab2-->
    					  		<div id="tab3" class="tab-buttons-panel">
    					   			
    					   			<h2>Heading 3</h2>
    					   			<p>More stuff from the last tab.</p>
    					  		</div><!-- /tab3-->
    					  		<div id="tab4" class="tab-buttons-panel">
    					  		 	
    					  		 	<h2>Heading 4</h2>
    					  		 	<p>More stuff from the last tab.</p>
    					  		</div><!-- /tab4-->
    					  		<div id="tab5" class="tab-buttons-panel">
    					  		 	
    					  		 	<h2>Heading 5</h2>
    					  		 	<p>More stuff from the last tab.</p>
    					  		</div><!-- /tab5-->
    					  		<div id="tab6" class="tab-buttons-panel">
    					  		 	
    					  		 	<h2>Heading 6</h2>
    					  		 	<p>More stuff from the last tab.</p>
    					  		</div><!-- /tab6-->
    					  		<div id="tab7" class="tab-buttons-panel">
    					  		 	
    					  		 	<h2>Heading 7</h2>
    					  		 	<p>More stuff from the last tab.</p>
    					  		</div><!-- /tab7-->
    					  		<div id="tab8" class="tab-buttons-panel">
    					  		 	
    					  		 	<h2>Heading 8</h2>
    					  		 	<p>More stuff from the last tab.</p>
    					  		</div><!-- /tab3-->					  		
    						</div><!-- /panel_container-->
    					 </div><!-- /tab-container -->
    Any suggestions?

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I managed to get it to work using some components from jQueryUI - I don't know if you want to go that route, as it does add about 17kb of extra JS to your page. Someone else here probably knows a better way to do this.

    First include these JS files in your page:
    HTML Code:
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
    and add this javascript (can be in an external files, as long as you load it before you initialise EasyTabs):
    Code:
    jQuery.fn.extend({
          slideRightShow: function(duration, easing, fn) {
            return this.each(function() {
                $(this).show('slide', {direction: 'right'}, 1000, fn);
            });
          },
          slideLeftHide: function(duration, easing, fn) {
            return this.each(function() {
              $(this).hide('slide', {direction: 'left'}, 1000, fn);
            });
          }
        });
    Code:
    $('#tab-buttons-container').easytabs({
        collapsible: true, 
        collapsedByDefault: true,
        transitionIn: 'slideLeftHide',
        transitionOut: 'slideRightShow',	
        updateHash: false
    });


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
  •