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'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!
