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;
});
});
Related
I have tabs. All of these tabs have their own slider. These sliders have cases (slide) during the discussion according to the "More" scheme, a block should open in full screen with this case absorbed, and it should switch between the "contents" of the slider cases.
I have tabs. All of these tabs have their own slider. These sliders have cases (slide) during the discussion according to the "More" scheme, a block should open in full screen with this case absorbed, and it should switch between the "contents" of the slider cases.
How to make a slider so that the content opens only on pointers, and the elements are transferred exactly on this slider in a tab.
enter image description here
enter image description here
[...document.querySelectorAll('.portfoliobtn')].forEach(function(item){
const caseBtn = item.querySelector('.btn-more');
const caseCloseBtn = item.querySelector('.close__content');
const caseContent = item.querySelector('.portfolio__content');
caseBtn.addEventListener('click', (event) => {
event.stopPropagation();
caseContent.classList.add('case__active');
document.body.classList.add('overflowhidden');
$('.portfolio__content').appendTo('body');
$('ul.tabs#portfolio').appendTo('.portfolio__content .pc__container .pc__header');
$('.swiper-button-next').appendTo('.portfolio__content .pc__container .sbc__wrapp');
$('.swiper-button-prev').appendTo('.portfolio__content .pc__container .sbc__wrapp');
});
caseCloseBtn.addEventListener('click', (event) => {
event.stopPropagation();
caseContent.classList.remove('case__active');
document.body.classList.remove('overflowhidden');
});
});
$('.services__content').each(function(){
let tabTabs = $(this).find('ul.tabs li');
let tabItems = $(this).find('.tab_content').hide();
$(".tab_container .tab_content.active").show();
tabTabs.each(function(i){
$(this).click(function(){
$(this).addClass('active').show();
tabTabs.not(this).removeClass('active');
$(tabItems[i]).addClass('active').show();
tabItems.not(tabItems[i]).removeClass('active').hide();
});
});
});
<div class="services__content">
<ul class="tabs" id="portfolio">
<li class="active"><a>Сайты</a></li>
<li><a>SMM</a></li>
<li><a>Контекст</a></li>
<li><a>Брендинг</a></li>
<li><a>Презентация</a></li>
<li><a>Полиграфия</a></li>
</ul>
<div class="tab_container">
<div class="tab_content active">
<div class="slider__wrapper">
<div class="swiper slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
Слайд 1
<div class="portfoliobtn">
<button class="btn-more">подробнее</button>
<div class="portfolio__content">
<div class="pc__container">
<div class="pc__header">
</div>
<div class="sbc__wrapp">
</div>
<div class="close__content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab_content">Остальные табы</div>
</div>
</div>
Link codepen
Basically I want one section to be shown at first as the home page. When I click on a link, I want that section to be shown, but everything else hidden, and so on. Every time I click a link, I only want the clicked on link's section to be shown.
I am close, but stuck. Here is my HTML:
About Me
Contact
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about showing">
<h2>Contact</h2>
</div>
</div>
And here is my script:
$(document).ready(function() {
$('.about').hide();
$('.contact').hide();
$('.showing').show();
$('#contact').on('click', function(e) {
e.preventDefault();
$('div').removeClass('showing');
$('.contact').addClass('showing');
if ($('div').hasClass('showing')) {
$('div').show();
} else {
$('div').hide();
}
});
});
So it shows the 'About Me' section right away and everything else is hidden. When I click the 'Contact' link it removes the 'showing' class from all my 'div's and adds the 'showing' class to my contact section. I then check to see if the 'div' has the 'showing' class, if it does I have it show the 'div' otherwise I want it to hide it.
However, when I click on the Contact link, it does show the Contact section, but it does not hide the About Me section. I know this is a long post, I am just trying to make sure I explain everything correctly. Any help is greatly appreciated!
I would strongly suggest you use data fields and common classes to make it generic.
var $pages = $('.container');
$('.menu').on('click', function(e){
//remove showing from all containers
$pages.removeClass('showing');
//put it on the container with the matching class of the data target
$pages.filter('.'+ $(e.target).data('target')).addClass('showing');
});
.container {
display: none;
}
.container.showing {
display: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
About Me
Contact
Other
<div class="container-fluid">
<div class="container home showing">
<h2>Home</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact">
<h2>Contact</h2>
</div>
</div>
<div class="container-fluid">
<div class="container other">
<h2>Other</h2>
</div>
</div>
Here's a few things you can optimize:
$(document).ready(function() {
$('.about, .contact').hide(); //put both of them in single selector
$('.showing').show(); //this shows the only element that has "showing
$('#contact, #about').on('click', function(e) {
e.preventDefault();
var self = $(this); //reference to the object being clicked
var target = $("." + self.attr('id'));
//removes "showing" class from all others and hides them
$(".container").not(target).removeClass("showing").hide();
//adds "showing" class to the new current item
target.addClass("showing").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
About Me
Contact
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact"> <!--you don't want that "showing" class here!-->
<h2>Contact</h2>
</div>
</div>
Can i set first panel on Jquery automatically opened?
My accordion panel is close all.
This is my html
<div class="accordionx">
<div class="acitemx">
<h3>First Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Second Panel</h3>
<div class="accx">
This is the content
</div>
</div>
<div class="acitemx">
<h3>Third Panel</h3>
<div class="accx">
This is the content
</div>
</div>
This is my JS script
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
});
This the JSFiddle Link http://jsfiddle.net/bupd32rq/
Thanks for your help
Panels that opened were added with current class, then put class current manually on first panel and respective div with style="display:block":
<div class="acitemx current">
<h3>First Panel</h3>
<div class="accx" style="display:block">
This is the content
</div>
</div>
Updated DEMO
you can just add .eq(0).click()
$(".acitemx h3").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$(this).parent().toggleClass('current');
});
}).eq(0).click();
DEMO
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 am using the following script to show a different background depending on the state of the div.
When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).
The problem there is that only work once, and I dont know why.
Here's the code:
EDIT (added HTML)!
HTML:
<body>
<section>
<div class="wrapper wf">
<ul id="Parks" class="just">
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_vital" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_vital" class="nav-toggle"></div>
<div id="therapy_vital" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_natur" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_natur" class="nav-toggle"></div>
<div id="therapy_natur" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
</ul>
</div>
</section>
</body>
JS:
$(document).ready(function() {
$('.meta').click(function() {
$(this).css('background', 'none');
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$('.meta').click(function() {
$(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
});
$(collapse_content_selector).toggle(function() {});
});
});
(The .mix value makes the Div expands, and the .meta class switch to different background).
Any clue?
EDIT2 (Live example)
http://anubisfiles.com/test/test.html
(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).
Thanks!
Use on function to bind events,
$('element').on('click', function() {
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
$(collapse_content_selector).toggle(function() {});
});
Try this