Forum user: fruitbatinshades

Gave up trying to get it to work and wrote my own mini tabs that can handle dynamic markup fiddling :)

var api = $tabs.tabs('div.panes > div', { current: 'selected' });
		$('#Content ul.tabs li a').click(function (e) {
			var li = $(e.target).closest('li');
			var position = li.closest('ul').find('> li').index(li);
			api.click(position);
		});

The click event fires but the api.click() error with the infamous 'd is undefined' error. Has anyone got another way to to dynamically add tabs that works?

Hi alibby,
I've tried capturing the event and the api is valid but its as id the tabs haven't created properly.

If I fire api.click(1) I get 'd is undefined'!

I'm trying to take some markup and convert it to tabs which works, except when I click on the tab link the pages reloads. Its like it isn't preventing default for some reason :/

var $tabs = $('<div class="panes"></div>');
$('#Content ul.tabs li > div').each(function(i){
$tabs.append($(this));
});
$tabs.insertAfter($('#Content ul.tabs'));
$tabs.tabs('div.panes > div');

Before script:

<ul class="tabs">
	<li>
		<a href="#">Tab One</a>
		<div><p>Tab one content</p></div>
	</li>
	<li>
		<a href="">Tab Two</a>
		<div><p>Tab Two Content</p></div>
	</li>
</ul>

After Script:

<ul class="tabs">
	<li class="tab"><a href="#">Tab One</a></li>
	<li class="tab"><a href="#">Tab Two</a></li>
</ul>

<div class="panes">
	<div class="current" style="display: block;">
		<p>Tab one content</p>
	</div>
	<div>
		<p>Tab Two content</p>
	</div>
</div>

So the jq seems to work its just the link that is misbehaving. Any ideas what could be going on?

I am using a scrollable that clients add a series of images to. Sometimes there are not enough images to fill the scrollable.

How do I detect this situation and turn off autoscroll or is there a way to it out-of-the-box.

I have been trying to get scrollable to start and stop. I can't seem to get it to work. I call scrollapi.interval = 0 which does stop it but I cannot get it to restart!

I've tried

scrollapi.interval,scrollapi.seekto() and scrollapi.reload() but none of them restart the animation! Any idea where I'm going wrong?

var scrollapi;
	$('div.timeline a.next').attr('href', '#').bind('mouseenter', pause).bind('mouseleave', start);
	$('div.timeline a.prev').attr('href', '#').bind('mouseenter', pause).bind('mouseleave', start);
	function pause() {
		scrollapi.getConf().interval = 0;
		scrollapi.reload();
	}
	function start() {
		scrollapi.getConf().interval = 350;
		scrollapi.getConf().easing = 'swing';
		scrollapi.reload();
	}

Doh! Never mind, just occurred to me to use the following:

$('div.timeline a.next').click(function(e) {
        $('div.scrollable').scrollable().next();
        e.preventDefault();
    });

Thank you for such a great library :)

I have a little issue with the scrollable. You say in the documentation that the prev and next items need to be in the same parent EVEN if you pass in specific dom objects. This seems a little unusual!
Why do they need to be in the same parent? If we are passing specific objects in then surely we are grabbing the click event so why do they need to be in the parent?

I ask because I am trying to do a scrollable where the prev and next are styled inside a sliding door so they need a wrapper div.

Is there any way around this?