I have two tabs on my page and I would like the page to init with both tabs closed. I cannot get it to work. If I switch to accordion I can get both to init closed.
Is there a different property for tabs?
Also I would assume closing a tab would occur if you click on a tab that is already open. However that is not the case.
<div class="section-container auto tabs" data-section data-options="one_up: false;">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
http://jsbin.com/omuvik/1/
I believe this was a design decision on the part of the Foundation team, as tabbed content normally has one section open at all times. If you resize a browser window with all accordion elements closed to the breakpoint where those become tabs, the first one will be forced open, which makes it seem like a deliberate behavior.
You can try setting a callback function in your data-options attribute: if you remove the "active" class from all tab sections, they'll all be closed.
Related
I'd like to display 1 or more content details in a featherlight gallery, so users can swipe or click from page to page, and then close to return to their previous tasks. The content might look something like this:
<div id="ContentDetails">
<div class="ach">
<h3>Title 1</h3>
<p>Content Item 1</p>
</div>
<div class="ach">
<h3>Title 2</h3>
<p>Content Item 2</p>
</div>
<div class="ach">
<h3>Title 3</h3>
<p>Content Item 3</p>
</div>
</div>
JSFiddle: https://jsfiddle.net/6n0a55qn/46/
I can get the single $.featherlight($("div.ach")); call to work, but it places all the text in the same lightbox -- I'd like each content item in a separate "slide." Unfortunately, the same call to $.featherlightGallery($("div.ach")); doesn't appear to do anything. Some questions from a really new user:
Can featherlightGallery() be called manually like featherlight()?
If so, what's the syntax that would separate each of those blocks into their own "slide"?
Okay, got it to work. In answer to the questions above:
Yes, featherlightGallery() can be called manually, like featherlight(). There does appear to be a distinction, though...
It doesn't look like featherlightGallery() likes <div> content elements, at least in the current version (1.7.6) (note that the call to featherlight() is okay with <div> elements, though). I was able to create a gallery by changing the outer <div> elements to <a> guys instead, as follows:
<a class="slides" href=".slide-1">
<div class="slide-1">
<h3>Title 1</h3>
<p>Content Item 1</p>
</div>
</a>
<a class="slides" href=".slide-2">
<div class="slide-2">
<h3>Title 2</h3>
<p>Content Item 2</p>
</div>
</a>
<a class="slides" href=".slide-3">
<div class="slide-3">
<h3>Title 3</h3>
<p>Content Item 3</p>
</div>
</a>
To manually call the gallery:
$.featherlightGallery($(".slides"));
jsfiddle: https://jsfiddle.net/6n0a55qn/66/
I am using a theme that has tabs (list items) that are only displayed when the class is "active". By clicking on a tab, it changes the tab's class to 'active' (li class="active"), and only displays the content in the 'active' tab.
If I wanted to link to a specific tab from a different page, how can I create a link (presumably via javascript) that will send you to the page, and change an elements class?
Here's the HTML for reference
<div class="q_tabs horizontal center" style="visibility: visible;">
<ul class="tabs-nav"><li class="active">First Tab</li><li class="">Second tab</li><li class="">Third tab</li></ul>
<div class="tabs-container">
<div id="tab-1428877498-1-88" class="tab-content" style="display: block;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>First tab text</p>
</div>
</div>
</div>
<div id="tab-1428877498-2-39" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Second tab text</p>
</div>
</div>
</div>
<div id="tab-1428877529303-2-2" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Third tab text</p>
</div>
</div>
</div> </div>
</div>`
As far as I know, sadly, there is no way with only Javascript to open up a tab in a new page. Fortunately, there are a few way to transfer information within the URL.
1. Using the # symbol
Send info within the URL without reloading the page.
For instance, yoursite.com/yoursecondpage#yourtabselection If you are to add the # plus the tab number, your page would not reload. With javascript, you could find the number using the .hash property. This is the easier way to do it.
2. Using the ? symbol
Send info within the URL with reloading the page.
For instance, yoursite.com/yoursecondpage?tab=2 If you are to add ?tab=tabnum to the end of the URL, your page would reload. With javascript, this method is a little bit harder to find. This is the harder way to do it.
I hope this helps!
how about you create a function that recive a tab id(as an argument) and it will show only that tab (as it also hides the others).
then if you want to link it from another page make sure to pass the id(of the tab) via the url so you'll be able to make a simple JS check if there is any request for a specific tab and then use the function (as I described before).
use jQuery it shouldn't take more then 5min'
good luck.
I can't seem to get tabs to work. I copied and pasted the code from the Foundation docs, and the tabs show up properly, but the content does not change when I click on them. It just displays the content for the first tab.
This is the page I am working on.
If it helps to know, I am working on a child theme of Reverie.
EDIT: Here's the code from the Foundation Tabs page that I am using:
<dl class="tabs vertical" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
<dd>Tab 4</dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here.</p>
</div>
<div class="content" id="panel2a">
<p>Panel 2 content goes here.</p>
</div>
<div class="content" id="panel3a">
<p>Panel 3 content goes here.</p>
</div>
<div class="content" id="panel4a">
<p>Panel 4 content goes here.</p>
</div>
</div>
The foundation file you have is ©2013, and 200+ lines. The current Foundation 5 file is ©2014 and 163 lines. Perhaps there is a version issue? Try to update the file with the most current F5 js file and see if that helps.
In searching the source of your "example" there is no mention of the actual "tabs-vertical" lass and the tabs containers... has it been removed? It's hard to test a page without the code actually on it...
Your code shown here is syntactically correct so the error must be within the JS file somewhere/somehow.
Click this link (Line 312) in the source to see the ©2013 Zurb file.
In addition.. you are calling two files so this may be the problem too...
I'm having some trouble with the JQuery Mobile collapsible content (http://jquerymobile.com/demos/1.2.0-rc.2/docs/content/content-collapsible.html)
This HTML:
<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<div id="address_container">
Some hidden content here
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<div id="descriptions_container">
Some more hidden content here
</div>
</div>
Should be appearing like so:
Is looking like this:
In the broken example the buttons do not expand to show the hidden content. The html on the page is as in the example on the jquery mobile site. When the page loads it is initially fine, however in a moment the page flashes, and then displays incorrectly as above. What's worse is that it's not consistent. Sometimes it works and others it doesn't.
The HTML on the broken version shows that it's inserting an entire hidden content container inside the div that contains the hidden content. Here it is after load:
Any advice or ideas about what causes this and how it can be addressed would be greatly appreciated.
Edit:
Well I've stopped it happening. I had some debug text being Response.Written to the page outside of the HTML elements at the very beginning of the page and stopping this seems to have stopped the above issue occurring. I suppose JQuery Mobile must be throwing its toys out of the pram in an unusual way because of it.
As the example on jquerymobile.com shows, try using paragraph instead of div for the content. Your code would be
<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<p id="address_container">
Some hidden content here
</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<p id="descriptions_container">
Some more hidden content here
</p>
</div>
I have a number of jQuery UI Tab divs. Is there any way to have markup that is common to all of the tab / divs? Specifically, I would like to add save and cancel buttons but really the markup could contain anything.
I can duplicate these across all my tabs if needed or simply add the markup within the outer div and give it some negative margin (moving it to within all of the tab areas.
Maybe you could add the commom content in a single div and then before invoking the tab plugin, just add that common markup to each of the content blocks. Something like this:
Markup:
<div id="commonContent">
<p>Some common stuff</p>
</div>
<ul id="tabNav">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div id="tabContent1" class="tabContent">
<p>Content 1</p>
</div>
<div id="tabContent2" class="tabContent">
<p>Content 2</p>
</div>
<div id="tabContent3" class="tabContent">
<p>Content 3</p>
</div>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#commonContent').hide().appendTo($('.tabContent'));
$('#tabNav').tabs();
});
})(jQuery);
</script>
Not tested, just giving the idea.