I'm using bxSlider and Bootstrap tabs for a project. I used three sliders in three tabs. The active tab is showing bxSlider but when I click on other tabs it doesn't load slider anymore.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Home
</li>
<li role="presentation">
Profile
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<ul class="bxslider-two">
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<ul class="bxslider">
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
</ul>
</div>
</div>
activation:
$(document).ready(function() {
$('.bxslider,.bxslider-two').bxSlider();
});
Sample project
In order to initialize correctly your slider should be visible. The slider on the first tab works because it is visible when bxSlider() is called. One idea is to wait to initiate until the tab is clicked. I modified your jsfiddle with an example.
New jQuery:
$(document).ready(function () {
$('.bxslider-two').bxSlider();
});
$('a[href="#profile"]').one('shown.bs.tab', function (e) {
$('.bxslider').bxSlider();
});
$(document).ready(function() {
$('.bxslider-two').bxSlider();
});
$('a[href="#profile"]').one('shown.bs.tab', function(e) {
$('.bxslider').bxSlider();
});
$( ".tabs-1").click(function() {
$('#tabs-1 .bx-viewport').css("height","433"); //manuall hight
$('#latest_pros .dishes-item').css("width","245"); //manuall width
});
$( ".tabs-2").click(function() {
$('#tabs-2 .bx-viewport').css("height","433");
$('#latest_pros .dishes-item').css("width","245");
});
$( ".tabs-3").click(function() {
$('#tabs-3 .bx-viewport').css("height","433");
$('#latest_pros .dishes-item').css("width","245");
});
Related
My website came with this javascript for submenu toggle that work, however, when I click a new menu link the rest toggled links does not close so all them are left open.
How to toggle only clicked link and untoggle or remove all "open" links? If you have a new format of javascript that's fine too.
jQuery(function($) {
$('li.has-submenu span.icon-caret').click(function(e){
var $me = $(this);
if($me.siblings('.wsite-menu-wrap').hasClass('open')) {
$me.siblings('.wsite-menu-wrap').toggleClass('open');
} else {
$me.siblings('.wsite-menu-wrap').addClass('open');
}
});
});
HTML:
<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
</ul>
</div>
Remove the open class from each element first : $('.open').removeClass('open');
First I would remove the display: none if you have no animations with jQuery on the menues. Further I don't know your CSS but you can try it like the following example
$(document).ready(function() {
$('#navMobile .wsite-menu-item').on('click', toggleMenuLink);
function toggleMenuLink(event) {
var target = $(event.target).parent();
event.preventDefault();
target.siblings().removeClass('open');
if (target.hasClass('has-submenu')) {
target.toggleClass('open');
}
}
});
#navMobile .has-submenu > .wsite-menu-wrap,
#navMobile .has-submenu > .wsite-menu {
display: none;
}
#navMobile .has-submenu.open > .wsite-menu-wrap,
#navMobile .has-submenu.open > .wsite-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-item-wrap">
<a class="wsite-menu-item">New 1</a>
<span class="icon-caret"></span>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-item-wrap">
<a class="wsite-menu-item">New 2</a>
<span class="icon-caret"></span>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
</ul>
</div>
</li>
</ul>
</div>
I was able to crack the code...
$('li.has-submenu span.icon-caret').on('click', function(e) {
event.preventDefault();
var $me = $(this);
if ($me.parent().hasClass('open')) {
$me.parent().removeClass('open');
$me.find('.open').removeClass('open');
}
else {
$('.open').removeClass('open');
$me.parents('.has-submenu').children('.wsite-menu-wrap').addClass('open');
}
});
I'm trying to make a Javascript action when a bootstrap tab is opened. I can't get it to work. These are the scripts I've tried:
$('.nav-tabs a').on('shown.bs.tab', function(){
vchart.redraw();
});
And
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
$('.nav-tabs a').on('shown.bs.tab', function(){
vchart.redraw();
});
});
I have these scripts inside of the tabs themselves. I also tried:
$('ul.nav a').on('shown.bs.tab', function (e) {
instead of
$('.nav-tabs a').on('shown.bs.tab', function(){
Some HTML
<div class="col-md-9">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#2">Tab 2</a>
</li>
</ul>
</div>
<div id="1" class="tab-pane fade in active">
Tab 1 content...
</div>
<div id="2" class="tab-pane">
Tab 2 content...
</div>
What is going on?
You have to bind the event (addEventListener in terms of vanilla js)
$('ul.nav a').bind('click', function() { //bind whatever event you want
alert('User clicked on "foo."');
//vchart.redraw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-9">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#2">Tab 2</a>
</li>
</ul>
</div>
<div id="1" class="tab-pane fade in active">
Tab 1 content...
</div>
I'm trying to display a menu when I click a link and if another menu is open close it before displaying the other menu. In other words like an accordion menu, but I only need one menu open at a time. So far everything I tried does not work. I don't know Jquery to well but I will post my code that I have so far.
HTML
<nav id="cat">
<ol>
<li><a title="" href="#1">1;</a></li>
<li><a title="" href="#2">2</a></li>
<li><a title="" href="#3">3</a></li>
<li><a title="" href="#4">4</a></li>
<li><a title="" href="#5">5</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="1">
<li><a title="" href="">1a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="2">
<li><a title="" href="">2a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="3">
<li><a title="" href="">3a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="4">
<li><a title="" href="">4a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="5">
<li><a title="" href="">5a</a></li>
</ol>
</nav>
JQuery
$('.sub').hide();
$('#cat > ol > li > a').click(function(){
var hrefSuffix = $('a').attr('href').split('#')[1];
$('.sub > ol').attr(hrefSuffix).slideDown('slow');
$('.sub').find('ol[id=' + hrefSuffix ']').slideUp('slow');
});
It is a classic accordion implementation, You can make some tweaks like below.
var $subs = $('.sub');
$('#cat > ol > li > a').click(function() {
var href = $(this).attr('href'),
$target = $(href);
$target.stop().slideToggle('slow');
$subs.not($target).stop().slideUp('slow');
});
.sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="cat">
<ol>
<li><a title="" href="#1">1;</a></li>
<li><a title="" href="#2">2</a></li>
<li><a title="" href="#3">3</a></li>
<li><a title="" href="#4">4</a></li>
<li><a title="" href="#5">5</a></li>
</ol>
</nav>
<nav class="sub" id="1">
<ol>
<li><a title="" href="">1a</a></li>
</ol>
</nav>
<nav class="sub" id="2">
<ol>
<li><a title="" href="">2a</a></li>
</ol>
</nav>
<nav class="sub" id="3">
<ol>
<li><a title="" href="">3a</a></li>
</ol>
</nav>
<nav class="sub" id="4">
<ol>
<li><a title="" href="">4a</a></li>
</ol>
</nav>
<nav class="sub" id="5">
<ol>
<li><a title="" href="">5a</a></li>
</ol>
</nav>
add class on opened menu item, then, when you open another item, find previous by added class, hide it and remove class.
$(.menu-item).on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
if($this.hasClass('opened')){
return;
}
$('.opened').slideUp('slow').removeClass('opened');
$this.slideDown('slow').addClass('opened');
});
In your case the accordion needs to be like this
HTML:
<ul class="accordion">
<li>
First Item
<div class="panel">
<p>First Item content goes here</p>
</div>
</li>
<li>
Seccond Item
<div class="panel">
<p>Seccond Item content goes here</p>
</div>
</li>
<li>
Third Item
<div class="panel">
<p>Third Item content goes here</p>
</div>
</li>
</ul>
CSS:
.accordion{padding:0px;margin:0px;list-style:none;}
.accordion li{margin-bottom:5px;}
.accordion a{padding:10px;background:#eaeaea;display:block;}
.accordion .panel{display:none;}
JS:
$(document).ready(function(){
$(".accordion a").on('click', function(){
var $allPanel = $(".accordion .panel");
var $currentPanel = $(this).next('.panel');
if($currentPanel.is(":hidden")){
$(this).next('.panel').slideDown('fast');
}else{
$(this).next('.panel').slideUp('fast');
}
$allPanel.not($currentPanel).slideUp('fast');
});
});
Created a fiddle here, hope this is what you needed.
Im planning on slidding 2 divs at the same time ,each one in opposite directions.How can i do this?
this is what i have tried
$("button").click(function () {
$(".cuadro").animate({ left: '250px', queue: false });
$("#R").animate({ left: '-250px', queue: false });
});
also if it's possible i can this to happend when my services tab is active instead of when the person click on the button.
<section id="services" class="content-section text-center">
<div class="services-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2><span class="auto-style2">Services</span></h2>
<h2> </h2>
<h2><strong>Technlogies and lenguages used for software developing<br />
</strong></h2>
<p class="btn btn-default btn-lg">Download Resume</p>
<p> </p>
<button id="serv">serv</button>
</div>
<div class="col-lg-9">
<div class="cuadro" id="L"><h2 class="leng">C#</h2></div>
</div>
<div class="col-lg-3">
<div class="cuadro" id="R"><h2 class="leng">JavaScript</h2></div>
</div>
</div>
</div>
</section>
this is my nav bar
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav" id="tabs">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
HOME
</li>
<li>
<a class="page-scroll" href="#about">ABOUT</a>
</li>
<li>
<a class="page-scroll" href="#download">RESUME</a>
</li>
<li>
<a class="page-scroll" id="serTab" href="#services">SERVICES</a>
</li>
<li>
<a class="page-scroll" href="#contact">CONTACT</a>
</li>
</ul>
</div>
This should do it:
$('#tabs').tabs();
$('#serTab').click(function(){
$("#R").animate({left:'-=250px'});
$("#L").animate({left:'+=250px'});
});
Note that id="tabs" must be moved from the <ul> to its parent <div>
If that doesn't work, you may need event delegation. Try this:
$(document).on('click', '#serTab', function(){
$("#R").animate({left:'-=250px'});
$("#L").animate({left:'+=250px'});
});
Reference:
http://davidwalsh.name/event-delegate
I would like to show a div with id "houseImages" on page load while hiding divs "landImages", "renovationImages", "UpcomingImages", and "voteForNext". Upon clicking "Landscaping", I would like to display the div "landImages" and hide div "houseImages". Obviously, I would like this functionality to continue through the list and when I click "Painting" that div would reappear. How would I do this using JavaScript?
Here is what I have so far:
<Div id="mainContent">
<h2> Our House </h2>
<div id="columnLeft">
<ul>
<li id="leftColumnPainting">
Painting
</li>
<li id="leftColumnLandscaping">
Landscaping
</li>
<li id="leftColumnRenovations">
Renovations
</li>
<li id="leftColumnUpcoming">
Upcoming
</li>
<li id="leftColumnNext">
Vote for <br>Next!</br>
</li>
</ul>
</div>
<div id="columnRight">
<div id="title">
<p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
</p>
</div>
<div id="houseImages">
<ul>
<li>
<img src="./img/house1.jpg" />
</li>
<li>
<img src="./img/house2.jpg" />
</li>
<li>
<img src="./img/house3.jpg" />
</li>
<li>
<img src="./img/house4.jpg" />
</li>
</ul>
</div>
<div id="landImages">
<ul>
<li>
<img src="./img/land1.jpg" />
</li>
<li>
<img src="./img/land2.jpg" />
</li>
<li>
<img src="./img/land3.jpg" />
</li>
<li>
<img src="./img/land4.jpg" />
</li>
</ul>
</div>
<div id="renovationImages">
<ul>
<li>
<img src="./img/renovation1.jpg" />
</li>
<li>
<img src="./img/renovation2.jpg" />
</li>
<li>
<img src="./img/renovation3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="upcomingImages">
<ul>
<li>
<img src="./img/upcoming1.jpg" />
</li>
<li>
<img src="./img/upcoming2.jpg" />
</li>
<li>
<img src="./img/upcoming3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="voteForNext">
<p> enter in voting form here</p>
</div>
</div>
</Div>
I'd suggest changing your <a href=""> to the ID of the div you would like to show. Then you can do something like:
$("#columnleft li a").click(function(e) {
e.preventDefault();
$("columnright div").hide();
$("#"+$(this).attr("href")).show();
});
I personally like the Hide -> fadeIn effect combination. If you have a 2 buttons a 2 divs, you can toggle which one is show like this:
HTML:
<div id="a">div 1</div>
<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>
CSS:
div{
width: 200px;
height: 200px;
border: solid 1px;
display: none;
}
JS:
$('#c').click(function() {
$('#b').hide();
$('#a').fadeIn();
});
$('#d').click(function() {
$('#a').hide();
$('#b').fadeIn();
});
See the JSfiddle: http://jsfiddle.net/HSNLN/
You attach this method to any event you can catch with jQuery, and show/hide and divs.