Need help moving jquery tab script from demo to live

Hi there everyone!

I found a script with a jquery feature I’d like, namely fading transition between text elements. The demo is here:(disconnected tabs) http://os.alfajango.com/easytabs/#disconnected-tabs-and-panels

The first thing I did is strip everything from my own copy until I ended with just text lnks and fading text: http://schw.im/jqtabs.html

I just kept removing CSS and js elements until I ended up with nothing but the links and fading divs. I kept trying to move it into my page, but no matter what I did, it wouldn’t work. All divs were extended and links were acting as anchors. Finally, I just dropped the working code right into my page and the problem persisted. I’m wondering if it’s because I’m trying to house the feature inside another jquery element, that being a collapsing div of it’s own. You can see my attempt here: http://schw.im/jqtabs2.html If you click “Change what we show you”, the div will expand, showing the element I’m trying to add.

Here’s just the code that I’m trying to work on:

This is in the head for the parent’s container collapsing feature:

<script type="text/javascript"> $(document).ready(function(){ $('.viewControls').hide().before(''); $('a#toggle-viewControls').click(function() { $('.viewControls').slideToggle(1000); return false; }); }); </script>

And here’s the body:

<div class="viewControlsContainer" id="viewControlsContainer"> <h3 class="shadowy">You&apos;re Viewing: All Links ( <a href="#" id="toggle-viewControls">Change what we show you</a> )</h3></h3> <div class="viewControls" id="viewControls"> <div id="tab-disconnected-container"> <ul> <li><a href="#disconnected-tab1">Tab 1</a></li> <li><a href="#disconnected-tab2">Tab 2</a></li> <li><a href="#disconnected-tab3">Tab 3</a></li> </ul> <br class='clear' /> <p>Here is some random information that is not contained in the tabbed content and situated between the tabs and content divs.</p> <div class="panel-container"> <div id="disconnected-tab1"> <h2>Discontiguous Panels</h2> <p>Your panels don't have to be contiguous with your tabs, they can be elsewhere in the tab container.</p> <p>But that's not even the half of it. Your panels can also be somewhere else in the DOM entirely (outside of your tab container), if you specify an alternate <code>panelContext</code>.</p> <p>The <code>panelContext</code> is any jQuery DOM element, in which easytabs will look for the panels. By default, it's the container on which <code>easytabs()</code> was called. </div> <div id="disconnected-tab2"> <h2>Second Tab</h2> <p>Nothing to see here, folks. Move along.</p> </div> <div id="disconnected-tab3"> <h2>Third Tab</h2> <p>This is my third tab.</p> </div> </div> </div> <script type="text/javascript"> $('#tab-disconnected-container') .easytabs({ panelContext: $(document), transitionIn: 'slideDown', transitionOut: 'slideUp' }); </script> </div> </div>

If someone could help me figure out what I’m doing wrong, I’d greatly appreciate it!

At line 58 you are calling another version of jquery which is breaking things.

Remove that script and the tabs should work. However, you may need to check that everything else is working with the version of jquery you have in the head.

You can’t run 2 versions of jquery at the same time unless you run it in no conflict mode and you don;t really want to be loading more than one version anyway.

Oh, what a goof. I totally forgot about that addition.

Removing the second jquery inclusion got the demo code working. When I tried to adapt it to my desired structure, I managed to break it again.

I didn’t change any js, but just the div structure, here’s the current code:

http://schw.im/jqtabs2.html

[code]


You're Viewing: All Links ( Change what we show you )




		</div>
		<div class="viewControlsRight" id="viewControlsRight">
			<div id="disconnected-tab1">
				<h2>Discontiguous Panels</h2>
				<p>Your panels don&apos;t have to be contiguous with your tabs, they can be elsewhere in the tab container.</p>
				<p>But that&apos;s not even the half of it. Your panels can also be somewhere else in the DOM entirely (outside of your tab container), if you specify an alternate <code>panelContext</code>.</p>
				<p>The <code>panelContext</code> is any jQuery DOM element, in which easytabs will look for the panels. By default, it&apos;s the container on which <code>easytabs()</code> was called.</p>
			</div>
			<div id="disconnected-tab2">
				<h2>Second Tab</h2>
				<p>Nothing to see here, folks. Move along.</p>
			</div>
			<div id="disconnected-tab3">
				<h2>Third Tab</h2>
				<p>This is the third tab</p>
			</div>
		</div>
		<script type="text/javascript">
			$('#viewControls')
			.easytabs({
				panelContext: $(document),
				transitionIn: 'slideDown',
				transitionOut: 'slideUp'
			});
		</script>
	</div>
</div>[/code]

What I tried to do is drop the links into a div that sits to the left and the collapsible text into a div that sits to the right. I also changed the j/s at the bottom to reference “viewControls” instead of “tab-disconnected-container”. I did set the ID’s in the divs like the demo code.

I feel as if it’s going to be another bone-headed issue on my part, but so far I haven’t figured out what I’ve done.

It seems to be the nested div that is breaking the script.

You have inserted a div that has nothing more than float:left applied so you don’t need that div anyway if you apply the rules directly to the ul.

<div class="viewControls" id="viewControls">
	<ul class="viewControlsLeft" id="viewControlsLeft">
		<li><a href="#disconnected-tab1">Tab 1</a></li>
		<li><a href="#disconnected-tab2">Tab 2</a></li>
		<li><a href="#disconnected-tab3">Tab 3</a></li>
	</ul>
<div class="viewControlsMid" id="viewControlsMid"> </div>
<div class="viewControlsRight" id="viewControlsRight">
<div id="disconnected-tab1">

Hi there Paul and thanks again for your help.

I stripped the superfluous divs which did indeed get it working again, but the text divs are wrapping around the links. Would there be a way for me to force it to follow a left guide all the way down the dive, like so?

Instead of what it’s doing right now:

I’ve updated the demo code: http://schw.im/jqtabs2.html

You could just set a margin.

e.g.

#disconnected-tab1,
#disconnected-tab2,
#disconnected-tab3{margin-left:80px}

Thanks for all your help Paul. This was quite a learning experience. The order of the divs were dictated by the order of the li’s, so I couldn’t place the selected div first unless I took the li’s out of order. I even tried hiding the ul and placing my links in the body but those links didn’t work properly.

There’s a lot to that jquery file, all of which is above my head so I will save that type of thing for another battle :smile:

Thanks again for all your help!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.