jQuery Tabs "common" markup - javascript

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.

Related

Manually open Featherlight Gallery with text content

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/

Using jQuery "this" plus a CSS selector?

I am writing a script to show/hide a section within a div. I have 3 of these divs with hidden sections but was hoping to use one function to control all 3.
Here's what I have right now:
$('.rates, .hours, .otherinfo').click(function() {
$('.expand').toggle();
});
Here's the HTML:
<div class="rates">
<h2>Rates</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
<div class="hours">
<h2>Hours</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
<div class="otherinfo">
<h2>Other Info</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
And CSS:
.expand {
display:none;
}
Obviously, this shows the "expand" div for all 3 of the divs when you click on any of them. Is there a way to incorporate this into the selector. Something like this'.expand'?
Thanks!
$(this).find('.expand').toggle()
You should add a fiddle for better answer. But something like this should work.
$("#something").click(function(){$(this).children("section").toggle();});

How can i have multiple slide up instances based on duplicate classes

Im using something similar on the frontend to the following code:
<div class="slide_toggle">
<div class="slide_up">
<p>Title 1</p>
</div>
</div>
<div class="slide_toggle">
<div class="slide_up">
<p>Title 2</p>
</div>
</div>
<div class="slide_toggle">
<div class="slide_up">
<p>Title 3</p>
</div>
</div>
So basically what i aim to achieve is have the "slide_up" divs slide up on hovering the "slide_toggle" using jQuery. So far im using the following jQuery which would work perfectly for one instance however i want each instance to work individually without having to process the jquery over again referring to different classes (i.e. slide_toggle1. slide_toggle2 etcetc
$(".slide_toggle").hover(function () {
$(".slide_up").slideToggle("fast");
});
Just a small change to make it local to that parent is all you need, otherwise all the .slide_up elements will slide
$(".slide_toggle").hover(function () {
$(".slide_up", this).slideToggle("fast");
});

Remove flickering on resizing ajacent divs

I use Twitter Bootstrap and JS to make a kind of sliding sidebar. When you click "Toggle", the selected column with "col-lg-1" expands to "col-lg-3" and "col-lg-10" shrinks to "col-lg-8" (with jQueryUI's switchClass() ). For animated effect on show() and hide() I use jQueryUI. But during animation and column resizing the contents of #content flicker (disappear and shown again when the animation is over).
HTML is:
<div class="row">
<div class="col-lg-1" id="menu-1">
Toggle
<ul>
<li>
...
</ul>
</div>
<div class="col-lg-1" id="menu-1">
Toggle
<ul>
<li>
...
</ul>
</div>
<div class="col-lg-10" id="content">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
Cleaned JS is something like:
if ($col.hasClass('col-lg-3')){
// hide on second click
$col.switchClass('col-lg-3','col-lg-1');
$content.switchClass('col-lg-8', 'col-lg-10');
}else{
// open
var $sibling = $bar.siblings('.col-lg-3');
if($sibling.length == 1){
// close sibling if it's open
$sibling.switchClass('col-lg-3','col-lg-1');
}
$col.switchClass('col-lg-1','col-lg-3');
$content.switchClass('col-lg-10', 'col-lg-8');
}
Could you suggest a fix? Or recommend another solution?
UPD:
JSFiddle
Browser: Firefox 27.0.1

foundation tabs with one up not working

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.

Categories