jQuery ui - tabs - show option

Hi,

I am using the jQuery ui, tabs widget. I want to to be able to create an effect (eg sliding) when the pane is shown upon clicking on a tab item.

The standard js for a tab would be:

      $(function() {
            $("#tabs").tabs({
                  event: 'click'
            });
      });

There is an option called "show" but the documentation is really unclear as to how to use it....

For example, I'd like to be able to use the slide effect (also in the UI) and call this for the option.

The documentation says you do this:

Supply a callback function to handle the show event as an init option.

    $('.selector').tabs({
       show: function(event, ui) { ... }
    });

Bind to the show event by type: tabsshow.

    $('.selector').bind('tabsshow', function(event, ui) {
      ...
    });

But this isn't terribly helpful!

Any help much appreciated!

Daisy
daisydoosAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

XemorphCommented:
Have you tried someing like the code below?  

Where ".Effect" is any of the jQuery effects (example: hide(), fadein(), slideDown()).

Try using the jQuereySelector as your tab id. (div id for your tab).

Hope that works, or at least points you in the right direction.
$('.selector').tabs({
       show: function(event, ui) { $('jQuerySelector').Effect(...); }
    });

Open in new window

0
daisydoosAuthor Commented:
Hi,

Thanks for getting back to me.

Still not working I am afraid.

I am trying to use the slide effect ui.effects.slide.js such that you click on a tab, the content for that tab has this effect (slide) applied to it.

Mark up is like this:

<div id="tabs">
<ul>
      <li><a href="#tabs-1">1</a></li>      
      <li><a href="#tabs-2">2</a></li>
</ul>
<div class="tabstest" id="tabs-1">
<p>some content</p>
</div>
<div class="tabstest" id="tabs-2">
<p>some content</p>
</div>
</div>

and the jquery is like this:

$(function() {
            $("#tabs").tabs({
                  event: 'click'
            });
      });

or with the attempted effect applied:

$(function() {
            $("#tabs").tabs({
                  event: 'click',
                  
                  
                  show:function(event,ui)
                  {
                        $('.tabstest').effect('slide',options,3500);
                  };
                  
                  
            });
      });

this not working at all....

Any ideas?

Cheers,

Daisy

0
daisydoosAuthor Commented:
Hi,

This is working ...

$(function() {
             var options = {};
            
            $("#tabs").tabs({
                  event: 'click',
                  show:function(event,ui)
                  {
                        $(ui.panel).effect("slide",options,1500);
                  }
                  
            });
      });

The only problem now is that when you load the page the first pane slides into view..

Cheers,

Daisy
0
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

XemorphCommented:
If you add the selected option and set the value as -1, it will not select any tab.  I hope that is the functionailty you need
// Replace your function with this.
$(function() {
    $('#tabs').tabs({
	selected: -1,
	show: function(event, ui) {
		$('.tabstest').effect( 'slide', 'options', 1500); 
	}
    });
});

Open in new window

0
daisydoosAuthor Commented:
Hi,

Thanks for getting back to me.

What this does is not show the pane content for the first time when the page is loaded. What I ideally want is to show this - rather than have it slide it on page load.

This actually works:

$(function() {
             var options = {};
            
            $("#tabs").tabs({
                  event: 'click',
                  show:function(event,ui)
                  {
                        $(ui.panel).effect("slide",options,500);
      
                  }
                  
            });
      });

WIth this when you load the page, the first tab in the list is selected, but the content slides in - it's ok, but it would be great to know how to just present the pane of the first tab without the slide. Thereafter, all pane content slides in.

Cheers,

Daisy
0
XemorphCommented:
Sorry it took we a while, but I think I got it.  

So, we initalize the tabs and have a function bound to the select event.  This fires whenever you click on a tab.  So, at first, we don't have the slide event bound, but after the first select, we bind the effect to the tabs.
 
I know I did this my way rather then yours, but it works.    To make it work with yours, I be
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" href="css/smoothness/jquery-ui-1.7.2.custom.css" type="text/css">
	
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
 
	<script>
		
//  My way
		$(function() {
			$('#tabs').tabs({
				select: function(event, ui) {
					$('#tabs').unbind('tabsshow');
					$('#tabs').bind('tabsshow',  function (event, ui){
								$('.tabstest').effect( 'slide', 'options', 1500);
							});
				}
			});
		});
 
// Your way /*
         $(function() {
             var options = {};
            
            $("#tabs").tabs({
                  event: 'click',
                  select:function(event,ui)
                  {
						$("#tabs").unbind('tabsshow');
						$("#tabs").bind('tabsshow', function (event, ui){
							$(ui.panel).effect("slide",options,500);
						})
                  }
                  
            });
      });
 
 
 
*/
	</script>
</head>
 
<body>
	<div id="tabs">
		<ul>
			  <li><a href="#tabs-1">1</a></li>      
			  <li><a href="#tabs-2">2</a></li>
		</ul>
		<div class="tabstest" id="tabs-1">
			<p>some content 2</p>
		</div>
		<div class="tabstest" id="tabs-2">
			<p>some content</p>
		</div>
	</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
daisydoosAuthor Commented:
Many thanks for your help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.