There is an issue where the active class is not being removed when you navigate to another tab. This means you can not visit the same tab more than once.
https://codepen.io/anon/pen/zdjawq
A working example of tabs can be seen in example two of the following pen
https://codepen.io/wizly/pen/BlKxo
<div id="exTab2" class="container">
<ul class="nav nav-tabs">
<div class="col-md-2">
<li>
<a href="#1" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
<div class="col-md-2">
<li>
<a href="#2" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
<div class="col-md-2">
<li class="active">
<a href="#3" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
<div class="col-md-2">
<li>
<a href="#4" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
<div class="col-md-2">
<li>
<a href="#5" data-toggle="tab">
<img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
</a>
</li>
</div>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
test
</div>
<div class="tab-pane" id="2">
cont
</div>
<div class="tab-pane active" id="3">
other
</div>
In your code you need to remove divs between ul and li elements. That is breaking the right DOM structure for tabs to work correctly.
Best regard,
I have a menu and i want to use the active class active with url format but I don't know how:
<div class="col-sm-6">
<div class="menul">
<a href="#">
<div>
<img src="image" alt="">
<span class="sombra"></span>
<img class="onhover" src="image" alt="image">
</div>
</a>
</div>
</div>
$(".menul a").each(function() {
if (this.href == window.location.href)
$(.onhover).addClass("active");
})
try to implement with navbar nav class example below
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<img src="img" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img" alt="image">
</a>
</li>
</ul>
I am trying to add pagination to the bottom of the page which allows the user to move from a group of thumbnail images to another. The page is a gallery page that the user can click the thumbnails on the left to change the slideshow on the right.
HTML
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-sm-6" id="slider-thumbs firstpage">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-0">
<img src="images/thumbnails/img1.jpg">
</a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-1"><img src="images/thumbnails/img2.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-2"><img src="images/thumbnails/img3.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-3"><img src="images/thumbnails/img4.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-4"><img src="images/thumbnails/img5.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-5"><img src="images/thumbnails/img6.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-6"><img src="images/thumbnails/img7.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-7"><img src="images/thumbnails/img8.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-8"><img src="images/thumbnails/img9.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-9"><img src="images/thumbnails/img10.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-10"><img src="images/thumbnails/img11.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-11"><img src="images/thumbnails/img12.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-12"><img src="images/thumbnails/img13.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-13"><img src="images/thumbnails/img14.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-14"><img src="images/thumbnails/img15.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-15"><img src="images/thumbnails/img16.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-16"><img src="images/thumbnails/img17.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-17"><img src="images/thumbnails/img18.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-18"><img src="images/thumbnails/img19.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-1" id="carousel-selector-19"><img src="images/thumbnails/img20.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail page-2 hide-thumbnail" id="carousel-selector-20"><img src="images/thumbnails/img21.jpg"></a>
</li>
</ul>
<nav>
<ul class="pagination">
<li>
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a id="pag-1">1</a></li>
<li><a id="pag-1">2</a></li>
<li><a id="pag-3">3</a></li>
<li><a id="pag-4">4</a></li>
<li><a id="pag-5">5</a></li>
<li>
<a aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-sm-6">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="images/img1.jpg"></div>
<div class="item" data-slide-number="1">
<img src="images/img2.jpg"></div>
<div class="item" data-slide-number="2">
<img src="images/img3.jpg"></div>
<div class="item" data-slide-number="3">
<img src="images/img4.jpg"></div>
<div class="item" data-slide-number="4">
<img src="images/img5.jpg"></div>
<div class="item" data-slide-number="5">
<img src="images/img6.jpg"></div>
<div class="item" data-slide-number="6">
<img src="images/img7.jpg"></div>
<div class="item" data-slide-number="7">
<img src="images/img8.jpg"></div>
<div class="item" data-slide-number="8">
<img src="images/img9.jpg"></div>
<div class="item" data-slide-number="9">
<img src="images/img10.jpg"></div>
<div class="item" data-slide-number="10">
<img src="images/img11.jpg"></div>
<div class="item" data-slide-number="11">
<img src="images/img12.jpg"></div>
<div class="item" data-slide-number="12">
<img src="images/img13.jpg"></div>
<div class="item" data-slide-number="13">
<img src="images/img14.jpg"></div>
<div class="item" data-slide-number="14">
<img src="images/img15.jpg"></div>
<div class="item" data-slide-number="15">
<img src="images/img16.jpg"></div>
<div class="item" data-slide-number="16">
<img src="images/img17.jpg"></div>
<div class="item" data-slide-number="17">
<img src="images/img18.jpg"></div>
<div class="item" data-slide-number="18">
<img src="images/img19.jpg"></div>
<div class="item" data-slide-number="19">
<img src="images/img20.jpg"></div>
<div class="item" data-slide-number="20">
<img src="images/img21.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--/Slider-->
</div>
</div>
</div>
CSS
.hide-thumbnail{
display: none;
}
.show-thumbnail{
display: block;
}
Jquery
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
function ThumbnailPagination(){
jQuery('#pag-1').live("click", function(){
jQuery('.page-1').removeClass("hide-thumbnail");
jQuery('.page-1').addClass("show-thumbnail");
});
jQuery('#pag-2').live("click", function(){
jQuery('.page-1').removeClass("show-thumbnail");
jQuery('.page-1').addClass("hide-thumbnail");
jQuery('.page-2').removeClass("hide-thumbnail");
jQuery('.page-2').addClass("show-thumbnail");
});
};
</script>
I'm basically trying to hide/show the thumbnails when each <a> pagination number is clicked. However it normally only works once, and sometimes doesn't even work at all. Currently only "1" works, "2" doesn't even do anything.
LINK to website Website Link
I have solved my problem here was the solution
HTML
<nav>
<ul class="pagination">
<li>
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a id="pag-1">1</a></li>
<li><a id="pag-2">2</a></li>
<li>
<a aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
JQuery
$(document).ready(function() {
$('#pag-1').on("click", ThumbnailPagination1);
});
$(document).ready(function() {
$('#pag-2').on("click", ThumbnailPagination2);
});
function ThumbnailPagination1(){
jQuery('.page-1').removeClass("hide-thumbnail");
jQuery('.page-1').addClass("show-thumbnail");
jQuery('.page-2').removeClass("show-thumbnail");
jQuery('.page-2').addClass("hide-thumbnail");
};
function ThumbnailPagination2(){
jQuery('.page-1').removeClass("show-thumbnail");
jQuery('.page-1').addClass("hide-thumbnail");
jQuery('.page-2').removeClass("hide-thumbnail");
jQuery('.page-2').addClass("show-thumbnail");
};
I want to do a dropdown menu. Cover a distance. But I have a problem. When I click the product menu and opening menu after product menu with the open, click the references menu opening. But click the both menu it can be break down. This problem because of Javascript. Below I share my code also Html and Javascript. I wait for your help.
---HTML---
<div class="cbp-hsinner">
<ol class="parent">
<li>Home</li>
<li>About</li>
<li>
Product
<ol class="child">
<li>
<a href="#">
<img src="img/logom.jpg" alt="img01" />
<span>Delicate Wine</span>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" alt="img02" />
<span>Fine Spirit</span>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" alt="img03" />
<span>Heavenly Ale</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" alt="img04" />
<span>Juicy Lemonade</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.png" alt="img05" />
<span>Wise Whiskey</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.png" alt="img06" />
<span>Sweet Rum</span>
</a>
</li>
</ol>
</li>
<li>
References
<ol class="child">
<li>
<a href="#">
<img src="img/1.png" alt="img01" />
<span>Delicate Wine</span>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" alt="img02" />
<span>Fine Spirit</span>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" alt="img03" />
<span>Heavenly Ale</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" alt="img04" />
<span>Juicy Lemonade</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.png" alt="img05" />
<span>Wise Whiskey</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.png" alt="img06" />
<span>Sweet Rum</span>
</a>
</li>
</ol>
</li>
<li>Contact</li>
</ol>
</div>
---JavaScript---
$('.child').hide();
$('.parent > li > a').click(function () {
$(this).parent().find('.child').slideToggle('slow');
});
You have to hide all menu before opening a menu.
You can use this code.
$('.child').hide();
$('.parent > li > a').click(function () {
$('.parent').find('.child').hide(); // this will hide menu
$(this).parent().find('.child').slideToggle('slow');
});
I have a question on my project,
currently i am using tn gallery slider. In that slider i have one link when i click that link those slider images have to display in fancy box popup.
can any one help with coding?
I am new to jquery and javascript.
$(document).ready(function() {
//Thumbnailer.config.shaderOpacity = 1;
var tn1 = $('.mygallery').tn3({
skinDir:"img",
imageClick:"fullscreen",
image:{
maxZoom:1.5,
crop:true,
clickEvent:"dblclick",
transitions:[{
type:"blinds"
},{
type:"grid"
},{
type:"grid",
duration:460,
easing:"easeInQuad",
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:"random",
sortReverse:false,
diagonalStart:"bl",
// fade, scale
method:"scale",
partDuration:360,
partEasing:"easeOutSine",
partDirection:"left"
}]
}
});
$("a[rel=example_group]").fancybox(
{
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
HTML code:
<div class="mygallery">
<div class="tn3 album">
<ol>
<li>
<h4>Hohensalzburg Castle</h4>
<div class="tn3 description">Salzburg, Austria</div>
<a href="img/620x378/1.jpg">
<img src="img/35x35/1.jpg"/>
</a>
</li>
<li>
<h4>Isolated sandy cove</h4>
<div class="tn3 description">Zakynthos island, Greece</div>
<a href="img/620x378/2.jpg">
<img src="img/35x35/2.jpg" />
</a>
</li>
<li>
<h4>A view from the Old Town</h4>
<div class="tn3 description">Herceg Novi, Montenegro</div>
<a href="img/620x378/3.jpg">
<img src="img/35x35/3.jpg" />
</a>
</li>
<li>
<h4>Walls of the Old Town</h4>
<div class="tn3 description">Kotor, Montenegro</div>
<a href="img/620x378/4.jpg">
<img src="img/35x35/4.jpg" />
</a>
</li>
<li>
<h4>Boat in the port</h4>
<div class="tn3 description">Sousse, Tunis</div>
<a href="img/620x378/5.jpg">
<img src="img/35x35/5.jpg"/>
</a>
</li>
<li>
<h4>Wall of the Jain temple</h4>
<div class="tn3 description">Jaisalmer, India</div>
<a href="img/620x378/6.jpg">
<img src="img/35x35/6.jpg" />
</a>
</li>
<li>
<h4>City park</h4>
<div class="tn3 description">Negotin, Serbia</div>
<a href="img/620x378/7.jpg">
<img src="img/35x35/7.jpg" />
</a>
</li>
<li>
<h4>Taj Mahal mausoleum</h4>
<div class="tn3 description">Agra, India</div>
<a href="img/620x378/8.jpg">
<img src="img/35x35/8.jpg" />
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="img/620x378/9.jpg">
<img src="img/35x35/9.jpg"/>
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a href="img/620x378/10.jpg">
<img src="img/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a href="img/620x378/11.jpg">
<img src="img/35x35/11.jpg" />
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a href="img/620x378/12.jpg">
<img src="img/35x35/12.jpg"/>
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="img/620x378/9.jpg">
<img src="img/35x35/9.jpg"/>
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a href="img/620x378/10.jpg">
<img src="img/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a href="img/620x378/11.jpg">
<img src="img/35x35/11.jpg"/>
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a href="img/620x378/12.jpg">
<img src="img/35x35/12.jpg"/>
</a>
</li>
</ol>
</div>
</div>
Here is what your HTML should look like with your fancybox code. Since I can not see your site, I have no idea if you are loading javascript and css files correctly, or what versions of these files you are using etc.
<div class="mygallery">
<div class="tn3 album">
<ol>
<li>
<h4>Hohensalzburg Castle</h4>
<div class="tn3 description">Salzburg, Austria</div>
<a href="img/620x378/1.jpg">
<img src="img/35x35/1.jpg"/>
</a>
</li>
<li>
<h4>Isolated sandy cove</h4>
<div class="tn3 description">Zakynthos island, Greece</div>
<a rel="example_group" href="img/620x378/2.jpg">
<img src="img/35x35/2.jpg" />
</a>
</li>
<li>
<h4>A view from the Old Town</h4>
<div class="tn3 description">Herceg Novi, Montenegro</div>
<a href="img/620x378/3.jpg">
<img src="img/35x35/3.jpg" />
</a>
</li>
<li>
<h4>Walls of the Old Town</h4>
<div class="tn3 description">Kotor, Montenegro</div>
<a rel="example_group" href="img/620x378/4.jpg">
<img src="img/35x35/4.jpg" />
</a>
</li>
<li>
<h4>Boat in the port</h4>
<div class="tn3 description">Sousse, Tunis</div>
<a href="img/620x378/5.jpg">
<img src="img/35x35/5.jpg"/>
</a>
</li>
<li>
<h4>Wall of the Jain temple</h4>
<div class="tn3 description">Jaisalmer, India</div>
<a href="img/620x378/6.jpg">
<img src="img/35x35/6.jpg" />
</a>
</li>
<li>
<h4>City park</h4>
<div class="tn3 description">Negotin, Serbia</div>
<a href="img/620x378/7.jpg">
<img src="img/35x35/7.jpg" />
</a>
</li>
<li>
<h4>Taj Mahal mausoleum</h4>
<div class="tn3 description">Agra, India</div>
<a rel="example_group" href="img/620x378/8.jpg">
<img src="img/35x35/8.jpg" />
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="img/620x378/9.jpg">
<img src="img/35x35/9.jpg"/>
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a href="img/620x378/10.jpg">
<img src="img/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a rel="example_group" href="img/620x378/11.jpg">
<img src="img/35x35/11.jpg" />
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a href="img/620x378/12.jpg">
<img src="img/35x35/12.jpg"/>
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="img/620x378/9.jpg">
<img src="img/35x35/9.jpg"/>
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a rel="example_group" href="img/620x378/10.jpg">
<img src="img/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a href="img/620x378/11.jpg">
<img src="img/35x35/11.jpg"/>
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a rel="example_group" href="img/620x378/12.jpg">
<img src="img/35x35/12.jpg"/>
</a>
</li>
</ol>
</div>
</div>