The title is pretty much explaining my issue I guess, I'm using Bootstrap tabs so my html looks like this:
<div class="tab-content">
<div id="tab1" class="isotopegrid tab-pane fade in">
// Images here
</div>
<div id="tab2" class="isotopegrid tab-pane fade in">
// And images here
</div>
</div>
The images look like this:
<div class="col-md-4 isotopegrid-item">
<img src="#" class="img-responsive" />
</div>
This is my Js:
(function ($) {
var $container = $('.isotopegrid');
$container.each( function( i, elem ){
var $elem = $( elem );
$elem.imagesLoaded( function() {
$elem.isotope({
itemSelector : '.isotopegrid-item',
layoutMode: 'masonry'
});
});
});
})(jQuery);
But for some reason, it only loads tab1 and not tab2, anyone here got a solution for me? Oh and with not loading i mean that the images on tab1 are loaded properly, and the images on tab 2 are overlapping
Since your using a class for your $container, not an ID, you can just do this:
var $container = $('.isotopegrid');
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.isotopegrid-item',
layoutMode: 'masonry'
});
});
Without a jsfiddle to actually see the issue, it is impossible to know what other issues might be the source of your problem.
Related
I have multiple instances of isotope running in separate tabs. Isotope functions just fine in one tab, but when i switch tabs my footer is overlaying the isotope container. it does this until i click on one of the isotope filter options. once i click one, then the footer gets pushed down. However, when i go back to the previous tab - this tab is now messed up. here are some screenshots to show what I mean.
this is what it should look like. and this is what the loads loads as
this is what it ends up looking like when i switch tabs. then if i click on "all" it goes back to normal (i guess this is where isotope turns on?) and if i go back to the first tab. it's broken like this section bad was.
here is my html and jquery
$(document).ready(function() {
loadCSS("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
// filtr menu
var navbutton = $('navbutton');
navbutton.on('click', function() {
$(this).siblings().removeClass('open').end().addClass('open');
});
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function() {
$grid.isotope('layout');
});
$('#filters').on('click', 'navbutton', function() {
var filtr = $(this).attr('data-filter');
$grid.isotope({
filter: filtr
});
});
$('#filters2').on('click', 'navbutton', function() {
var filtr = $(this).attr('data-filter');
$grid.isotope({
filter: filtr
});
});
$(function(){
$('ul.tabs li:first').addClass('active');
$('.block article').hide();
$('.block article:first').show();
$('ul.tabs li').on('click',function(){
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
return false;
});
});
});
<!-- Image portfolio -->
<!--- tabs --->
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<ul class="tabs">
<li data-toggle="tab">Interior</li>
<li>Furniture</li>
<li>Environment</li>
</ul>
</div>
</div>
</div>
<!--- end tabs --->
<section class="block">
<article id="tab1">
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<!-- image Filter -->
<gallery-filter id="filters">
<navbutton data-filter=".bedroom">Bedroom</navbutton>
<navbutton data-filter=".kitchen">Kitchen</navbutton>
<navbutton data-filter=".livingroom">Living Room</navbutton>
<navbutton data-filter=".other">Other</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters4">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters">
<div class="grid-sizer"></div>
<div class="grid-item bedroom">
<!-- images go here -->
</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
<article id="tab2">
<div class="container-fluid">
<div class = "row">
<div class ="col-md-8 col-md-offset-2">
<!-- image Filter -->
<gallery-filter id="filters2">
<navbutton data-filter=".chair">Chairs</navbutton>
<navbutton data-filter=".table">Tables</navbutton>
<navbutton data-filter=".dresser">Dressers</navbutton>
<navbutton data-filter=".bed">Beds</navbutton>
<navbutton class="open" data-filter="*">All</navbutton>
</gallery-filter>
<gallery-filter id="filters3">
<navbutton class="open description">filter</navbutton>
</gallery-filter>
<!-- image filter end -->
</div>
</div>
<!-- Gallery -->
<div class = "row">
<div class ="col-md-10 col-md-offset-1">
<div class="grid" id="filters2">
<div class="grid-sizer"></div>
<div class="grid-item chair">
<!-- images go here -->
</div>
</div>
</div>
<!-- end of gallery -->
</div>
</article>
</section>
<!-- End Image portfolio -->
while looking through stack overflow i found this post: Making a jQuery Isotope layout initialize inside a Bootstrap Tab
I tried out the code:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.grid').isotope('layout');
});
but i was unsure what to replace shown.bs.tab with and couldn't get it working. since this code applies to the bootstrap tabs (which i am not using)
any help is appreciated. thank you
I have same problem, I watch Making a jQuery Isotope layout initialize inside a Bootstrap Tab and try out but not work for me. and i found another solution for isotope in bootstrap tabs.
First of all you must create a div in your tab and Initialize in HTML isotope in your div like this:
<div class="tab-pane" id="messages">
<div class="grid-message" data-isotope='{"itemSelector": ".item-message" , "gutter":5 }'>
<div class="item-message"></div>
<div class="item-message"></div>
...
</div>
</div>
after that add this jquery code add to page for reCreate layout when tab clicked
$(document).ready(function () {
$(".nav-tabs a").click(function () {
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function (e) {
if (e.target.hash == '#messages') {
//for isotope
$('.grid-message').isotope('layout');
}
if (e.target.hash == '#Othertabs') {}
});
});
Working example: http://jsfiddle.net/Vc6Vk/38/
You need to run layout when the tab is clicked. Try this:
$(function(){
$('ul.tabs li:first').addClass('active');
$('.block article').hide();
$('.block article:first').show();
$('ul.tabs li').on('click',function(){
$('ul.tabs li').removeClass('active');
$(this).addClass('active');
$('.block article').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
$grid.isotope('layout'); //add isotope layout here
return false;
});
});
I've got a layout with something to this effect:
<div id="issueWidgets">
<div class="column">
<div class="portlet" id="boxIssues">
<div class="portlet-header">Some Title</div>
<div class="portlet-content">Some content</div>
</div>
</div>
<div class="column">
<div class="portlet" id="boxStats">
<div class="portlet-header">Some Stats Title</div>
<div class="portlet-content">Some Stats content</div>
</div>
</div>
</div>
<div id="projectWidgets">
<div class="column">
<div class="portlet" id="boxProjects">
<div class="portlet-header">Some Title</div>
<div class="portlet-content">Some content</div>
</div>
</div>
</div>
<div id="userWidgets">
<div class="column">
<div class="portlet" id="boxUsers">
<div class="portlet-header">Some Title</div>
<div class="portlet-content">Some content</div>
</div>
</div>
<div class="column">
<div class="portlet" id="boxUsers2">
<div class="portlet-header">Some Title</div>
<div class="portlet-content">Some content</div>
</div>
</div>
</div>
And on and on...Each main div serves as a jquery ui tab.
So basically I've got tabs (as divs with the following IDs: issueWidgets, projectWidgets, and userWidgets). These divs contain some portlet divs (these are just divs that act as widgets within each column (div class=column).
I've got code that looks for each class with name column to create some cookie information like so:
// function that writes the list order to a cookie
function saveOrder() {
$(".column").each(function(index, value){
var colid = value.id;
var cookieName = "cookie-" + colid;
// Get the order for this column.
var order = $('#' + colid).sortable("toArray");
// For each portlet in the column
for ( var i = 0, n = order.length; i < n; i++ ) {
// Determine if it is 'opened' or 'closed'
var v = $('#' + order[i]).find('.portlet-content').is(':visible');
// Modify the array we're saving to indicate what's open and
// what's not.
order[i] = order[i] + ":" + v;
}
$.cookie(cookieName, order, { path: "/", expiry: new Date(2016, 1, 1)});
});
}
The issue I am having is this runs for every element with class name column. So basically it goes out to issueWidgets and finds each column, and goes to projectWidget and finds any element with class=column, and finally to userWidgets and also finds any element with class=column and runs the above code.
I want to limit it to run based on the its parent widget div. So for instance I'd want it to run only on issueWidgets when I am looking at the issueWidgets tab. Remember these are actually tabs (jquery ui). If I'm in the projectWidgets tab I'd want to find all elements with class=column but ONLY on the projectWidgets tab not all the other tabs...etc etc.
So basically my function should take in the tab either issueWidgets, projectWidgets, userWidgets and work .each only located within those tabs.
edit
I'm not sure how to modify this to use find(), since the original code within document ready looks like this:
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all",
stop: function () { saveOrder(); }
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>")
.end()
.find(".portlet-content");
restoreOrder();
$(".portlet-header .ui-icon").hover(
function () { $(this).addClass("ui-icon-hover"); },
function () { $(this).removeClass('ui-icon-hover'); }
);
$(".portlet-toggle").click(function () {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
saveOrder();
});
Access to the parent of that element and compare.
$(".column").each(function(index, value){
// If isn't the parent you're looking for..
if($(this).parent().attr('id') != 'projectWidgets'){
continue;
}
// the rest of your code
}
EDIT: According to the answers below, new code:
I'm assuming that the code you post (var selectedTabIndex = $('#tabs').tabs('option', 'active');) gives the HTML content, am I right?
If so, use instead something like this:
$tabSelected = $('#tabs').tabs('option', 'active');
and all you have to do is find the .column.
$tabSelected.find('.column').each(function(index, value){
});
EDIT 2: According to the jQuery Tab documentation:
Since the activate event is only fired on tab activation, it is not
fired for the initial tab when the tabs widget is created. If you need
a hook for widget creation use the create event.
So, take care, you might need create event also. The below code should do the trick.
$('#tabs').tabs({
activate: function(event, ui){
$(this).find('.column').each(function(i, value){
});
}
});
I am trying to jquery isotope and Balkin Style portfolio to work together (http://codepen.io/MightyShaban/pen/eGaCf) buti cant. I can get them to work perfectly on there own but once together it wont work. I have also tried noConflict() with no luck as well. Any ideas would be much appreciated.
JS Code.
// Balkin
$( document ).ready(function() {
$('.portfolio ul li a').click(function() {
var itemID = $(this).attr('href');
$('.portfolio ul').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .portfolio ul').removeClass('item_open');
return false;
});
$(".portfolio ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
});
/*===========================================================*/
/* Isotope Posrtfolio
/*===========================================================*/
if(jQuery.isFunction(jQuery.fn.isotope)){
jQuery('.portfolio_list').isotope({
itemSelector : '.list_item',
layoutMode : 'fitRows',
animationEngine : 'jquery'
});
/* ---- Filtering ----- */
jQuery('#filter li').click(function(){
var $this = jQuery(this);
if ( $this.hasClass('selected') ) {
return false;
} else {
jQuery('#filter .selected').removeClass('selected');
var selector = $this.attr('data-filter');
$this.parent().next().isotope({ filter: selector });
$this.addClass('selected');
return false;
}
});
}
HTML (needs to be made more tidy i know, sorry)
<!--Portfolio-->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<!--begin isotope -->
<div class="isotope">
<!--begin portfolio filter -->
<ul id="filter" class="option-set clearfix">
<li data-filter="*" class="selected">All</li>
<li data-filter=".responsive">Responsive</li>
<li data-filter=".mobile">Mobile</li>
<li data-filter=".branding">Branding</li>
</ul>
<!--end portfolio filter -->
<!--begin portfolio_list -->
<ul id="list" class="portfolio_list">
<!--begin span4 -->
<li class="list_item col-xs-12 col-sm-4 col-md-4 responsive"><a href="#item02">
<div class="view view-first"> <img src="../overlay/images/photos/project_1.jpg" class="img-responsive" alt="Title Goes Here"> <div class="mask"> <div class="portfolio_details zoom"><h2>Nostrum mnesarchum</h2>
<span>Art / Illustration</span></div> </div> </div></a>
</li>
<!--end span4 -->
Put the second jQuery item in a separate $( document ).ready(function() {});, and you should be fine.
You might even want to put it in a whole different set of <script></script> tags too.
I've used the answer from this question 'How to make twitter bootstrap menu dropdown on hover rather than click'
The problem is that when the mouse is moved quickly over all tabs, multiple .tab-pane elements are displayed in the tab-content element.
Demo
HTML
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Account</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active" id="tab1">
TAB1 CONTENT
</div>
<div class="tab-pane fade active" id="tab2">
TAB2 OTHER CONTENT
</div>
<div class="tab-pane fade active" id="tab3">
TAB3 MORE CONTENT
</div>
<div class="tab-pane fade active" id="tab4">
TAB4 SO MUCH CONTENT
</div>
</div>
JS
$('.nav-tabs > li').mouseover( function(){
$(this).find('a').tab('show');
});
$('.nav-tabs > li').mouseout( function(){
$(this).find('a').tab('hide');
});
Move the mouseX across the tabs rapidly back and forth and sometimes you will see both at once:
TAB1 CONTENT
TAB2 OTHER CONTENT
In my actual version you don't have to move as fast for the problem to occur.
It's the because the fade class in bootstrap is an animation. If you move fast enought, the first one hasn't finished before the second one starts. Change the HTML:
<div class="tab-content">
<div class="tab-pane active" id="tab1">
TAB1 CONTENT
</div>
<div class="tab-pane" id="tab2">
TAB2 OTHER CONTENT
</div>
<div class="tab-pane" id="tab3">
TAB3 MORE CONTENT
</div>
<div class="tab-pane" id="tab4">
TAB4 SO MUCH CONTENT
</div>
</div>
Updated your fiddle: http://jsfiddle.net/VPn52/1/
maybe you can try my solution.
i try this solution in my code and it works.
for hover solution, i follow solution from here:
http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/
jQuery('.nav-tabs a').hover(function(e){
e.preventDefault();
jQuery(this).tab('show');
});
add this line (line 3 or after .. e.preventDefault(); .. )
jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');
and this line (after .. jQuery(this).tab('show') .. )
jQuery(tabContentSelector).addClass('active');
so the code become like this:
jQuery('.nav-tabs a').hover(function(e){
e.preventDefault();
jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');
jQuery(this).tab('show');
jQuery(tabContentSelector).addClass('active');
});
What you could also do, if you want to keep the fading effect, is have a boolean to keep track of whether a tab is currently fading in, to prevent others from being triggered, this should work:
var tabFadingIn = false;
$('.nav-tabs > li').mouseover( function(){
var $tab = $(this).find('a');
if (!tabFadingIn) {
tabFadingIn = true;
$tab.one('shown.bs.tab', function() {
tabFadingIn = false;
});
$tab.tab('show');
}
});
$('.nav-tabs > li').mouseout( function(){
$(this).find('a').tab('hide');
});
Found sollution for me.
Default speed of fade animation is 0.15s. You need to reduse it to 0.1s. Now another picture don’t have time to appear before first disappear.
I have a bit of a problem with jQuery UI Sortable and would need some help: I have the following html code:
<div class="sortable">
<div class="item">
<p>title1</p>
<div class="sort">sort 1</div>
</div>
<div class="item">
<p>title2</p>
<div class="sort">sort 2</div>
</div>
<div class="item">
<p>title3</p>
<div class="sort">sort 3</div>
</div>
</div>
There's a container with 3 divs. Each has a title and a defintion - the 3 definitions should be sortable, but the title above should always remain unchanged.
Here's the js:
$(".sortable").sortable({
items: ".sort"
});
If I specify in the sortable options to sort only the specified items, they are sorted, but taken out of the div structure I want - each inside one of the parent ".item" elements.
Here's a fiddle with the behaviour: http://jsfiddle.net/wPtjM/
Is there a way to achieve what I need with jQuery Sortable? All the examples I saw & tried lack such an outcome. Many thanks in advance!
Looking for something like this?
var dropped;
var titleDrop;
var titleChange;
$(function() {
$(".sortable").sortable({
items: ".sort",
stop: function( event, ui ) {
if(titleDrop != titleChange)
dropped.append(ui.item);
},
change: function(event, ui){
titleChange = ui.placeholder.parent().find('p').text();
}
});
$( ".item" ).droppable({
accept: ".sort",
drop: function( event, ui ) {
dropped = $(this);
titleDrop = $(this).find('p').text();
}
});
});
FIDDLE
Update
Incorporates switching places:
FIDDLE2