Issue with getting Justified Gallery working within Bootstrap 4 Tabs - javascript

I have a page I'm trying to complete that has a tabbed inner menu system, and within them (the first and last tab) there are justified galleries
http://miromannino.github.io/Justified-Gallery/
The code works well within the first tab, but when I put it within the last tab it turns all the images into thumbnails 80px by 80px. I initially thought that perhaps this was limited to one gallery per page, so I did some testing and I was able to add another one outside of the tabs with no issue.
I did some further testing and figured out that the reason it was working in the first tab and not the last was because the first tab has an active class on it, making the div a block element (display: block) and as soon as I put active on the other tab it made the gallery work but obviously broke the tabs.
At this point I'm stuck as to what I can do to get this to work, so I'm hoping someone here can help me out a little. Below is the code, thanks!
<div class="middleContent">
<div class="container">
<div class="row">
<div class="col-sm-9 leftContent">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#orderOnline" role="tab">Menu</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#reviews" role="tab">Reviews</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#about" role="tab">About</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#photos" role="tab">Photos</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="orderOnline" role="tabpanel">
<div class="row">
<h2>MENU</h2>
<div id="mygallery" >
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
</a>
</div>
</div>
</div>
<div class="tab-pane" id="reviews" role="tabpanel">
<h2>Reviews</h2>
</div>
<div class="tab-pane" id="about" role="tabpanel">
<h2>About</h2>
</div>
<div class="tab-pane" id="photos" role="tabpanel">
<div>
<div>
<h2>Food</h2>
<div id="foodgallery">
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
<script>
$('#mygallery').justifiedGallery({
rowHeight: 300,
lastRow: 'nojustify',
randomize: false,
margins: 10
});
</script>
<script>
$(function(){
$('#foodgallery').justifiedGallery({
rowHeight: 200,
lastRow: 'nojustify',
randomize: false,
margins: 10
});
});
</script>

Related

How can I tracking link clicks dynamically with google analytics?

My html code like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
#foreach (Sitecore.Data.Items.Item item in _stickyMenu.Children)
{
<li class="content accent-4 z-depth-2 #item.Fields[Templates.Navigable.Fields.CustomClass]" data-color="#item.Fields[Templates.Navigable.Fields.CustomClass]">
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
</li>
}
</ul>
If it generated, the result like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
<li class="content accent-4 z-depth-2 red" data-color="red">
<a class="" href="/Specialties/menu1">
<div class="icon"><img src="" /></div>
<div class="text">menu 1</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu2">
<div class="icon"><img src="" /></div>
<div class="text">menu 2</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu3">
<div class="icon"><img src=""/> </div>
<div class="text">menu 3</div>
</a>
</li>
</ul>
I want to tracking link click with google analytics. I try like this :
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)" onclick="ga('send', 'event', 'a', 'click');">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
But, it does not work. How can I solve this problem?

How to disable infinite looping in slick lightbox?

I am using slick-lightbox plugin https://github.com/jongacnik/slick-lightbox.
I have a gallery of images.
I am trying to do this now:-
$('.slider-lightbox').slickLightbox({
navigateByKeyboard: true,
slick:{infinite:'false'}
});
But this is not disabling the infinite looping.
HTML code
<div class="image-gallery-content">
<ul class="slider-lightbox">
<li class="video active">
<a href="https://www.youtube.com/watch?v=KCI8Wb4KTG8" width="400px" target="_blank">
<img src="images/community/img2.jpg" alt="">
</a>
<img class="play-btn" src="images/video-icon.png">
</li>
<li class="image active">
<a href="images/community/img3.jpg" target="_blank">
<img src="images/community/img3.jpg" alt="">
</a>
</li>
<li class="image active">
<a href="images/community/img1.jpg" target="_blank">
<img src="images/community/img1.jpg" alt="">
</a>
</li>
</ul>
</div>
You need to pass a proper (=boolean) false into slick, not a string 'false':
$('.slider-lightbox').slickLightbox({
navigateByKeyboard: true,
slick: {infinite:false}
});

Why when tab2 is clicked it appears always the content of the tab1?

I have some tabs using bootstrap 4. In the tab with id "mytabs" I have other two tabs inside it. And in this tabs inside "#mytabs" that is an issue. If I click in the "tab1" link it appears the content of the tab1 but if I click in the "tab2" link it still appears the content of the "tab1".
Do you know where is the issue?
Fiddle with issue: https://jsfiddle.net/cv25swga/8/
HTML:
<body>
<div class="bg-light-gray2">
<div class="container nopadding py-4">
<div class="row mt-3">
<div class="col-12">
<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
<!-- other tab links -->
<li class="disabled">
<a class="nav-link" href="#mytabs" data-toggle="tab" role="tab">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="d-none d-lg-inline-block">Access Data</span>
</a>
</li>
</ul>
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane clearfix fade" id="mytabs" role="tabpanel"
aria-labelledby="contact-tab">
<div class="d-flex mb-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active border" id="tab1" href="#tab1"
data-toggle="tab"
role="tab">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link border" id="tab2" href="#tab2"
data-toggle="tab" role="tab">tab2</a>
</li>
</ul>
</div>
<div class="tab-content bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel"
aria-labelledby="home-tab">
tab1
</div>
<div class="tab-pane fade show clearfix" id="tab2" role="tabpanel"
aria-labelledby="home-tab">
tab2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
This is caused by the fact both your tabs and the links have the same ID.
Change your IDs up so that they are unique on the page and the problem will disappear.

expand grid system column when i click in a icon bootstrap

I have an google maps in a tab with bootstrap, but the map become to small, so i want to change a bootstrap grid system when i click on fa icon, i want the first column torns to col-md-8, and the second column torn to col-md-4.
thx,
here my code:
<h2 class="block-title">Mapas Brasil</h1>
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs nav-cptec">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu1" role="tabpanel">
<div id="map-canvas"></div>
</div>
<div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
<div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
</div>
<div class="col-md-6">
<ul class="nav nav-tabs nav-justified nav-cptec">
<li class="nav-item">
<a class="d-flex align-items-center nav-link active" data-toggle="tab" href="#menu-1" role="tab">Anánalise Sinótica</a>
</li>
<li class="nav-item">
<a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-2" role="tab">Imagens de Satélite</a>
</li>
<li class="nav-item">
<a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-3" role="tab">Vale do Paraíba</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu-1" role="tabpanel">
<img src="/images/sinotica.png" alt="" class="img-fluid">
</div>
<div class="tab-pane" id="menu-2" role="tabpanel">Satélite</div>
<div class="tab-pane" id="menu-3" role="tabpanel">Vale</div>
</div>
<img src="http://i.imgur.com/mE72FHG.png" alt="Faça sua analise sinótica" class="img-fluid top5" width="100%">
</div>
</div>
$('#abrir').click(function() {
$('#teste').removeClass('col-md-6').addClass('col-md-8 open');
$('#teste2').removeClass('col-md-6').addClass('col-md-4');
});
$('body').click(function(e){
//Detect if click is outside #abrir AND is "open"
if($(e.currentTarget).closest('#abrir').length==0 && $('#abrir').hasClass('open')){
$('#teste').addClass('col-md-6').removeClass('col-md-8 open');
$('#teste2').addClass('col-md-6').removeClass('col-md-4');
}
});
This should do the trick. What you want is to reverse what you do on the click element. Put an event on the body, to listen for every click and inside this handler, see if the clicked element is inside or outside the targeted element to make sure we trigger accordingly.
You'll have to make sure that all click handlers on your page do not prevent event bubbling (it shouldn't, as it is bad practice) or else the click outside the element will not always be seen...
i added this code and change the column to col-md-6 to col-md-4, but when i click out, dont turn back.
javascript its the same that you gave to me
my code:
<div class="row">
<div id="teste" class="col-md-6">
<ul class="nav nav-tabs nav-cptec">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu1" role="tabpanel">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true" id="abrir"></i>
<div id="map-canvas"></div>
</div>
<div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
<div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
</div>
</div>

Menu items not showing up properly as a mega menu

I need to make a mega menu similar to one as show in image below
So far i have been able to make it work to some extent example on jsFiddle HERE.
So far i have some design issue and one functionality issue.
When i try to hide the default text for each dropdown menu //$(this).find(".nav-info").hide(); then Menu 4 & 5 doesnt show up on right side.
I am actually trying to create a menu similar to one as on this website.
One this website they also show a default text for parent menu which i dont need actually.
I modified script to show the first li of submenu it works find for Parent menu ONE, TWO but creates alighnment problem for MENU FOUR and FIVE.
I would appreciate if some can help me fix this issue...
CODE
<div class="container_16">
<div class="nav-main grid_16">
<div class="wrap-nav-media">
<ul id="nav-top-media">
<!-- ONE -->
<li class="nav-item-1">Parent Menu One
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a>
</li>
<li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
</li>
<li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
</li>
</ul>
<div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"> <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-1</p>
</div>
</div>
<div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"> <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"> <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-3</p>
</div>
</div>
</div>
</li>
<!-- TWO -->
<li class="nav-item-2"> Parent Menu TWO
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
</li>
<li class=""><a class="current" href="..capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
</li>
<li class="last"><a class="current" href="..capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-1</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"> <a href="../building" title="Building" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"> <a href="/rail" title="Rail" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-3</p>
</div>
</div>
</div>
</li>
<li class="nav-item-3">THREE
</li>
<li class="nav-item-4"> FOUR
<div style="display: none;" class="inner-nav-media">
<div style="display: block; float:right;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<ul>
<li class=""> <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>
</li>
<li class=""> <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"> <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
</div>
</li>
<li class="last nav-item-5">FIVE
<div style="display: none;" class="inner-nav-media">
<div style="display: block;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title="" href="">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>This is Default text when i try to hide this then this menu moves to left</p>
</div>
</div>
<ul>
<li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
</li>
<li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="/safety.html" title="" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"> <a href="/environment.html" title="Environment" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"> <a href="/community.html" title="Community" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"> <a href="/quality.html" title="Quality" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-4</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Add the following in the head of the document,
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
And use the method suggested by Rachel Reveley.
li:hover ul {display: block;}
The code adds support for HTML 5 and CSS3 on older browsers. And it seems to be working perfect for me.
Unless you are supporting IE6 then you don't need JavaScript to make a drop down menu work.
If you change your structure to something more like this
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
</ul>
you can simply do this with your CSS
li:hover ul {display: block;}

Categories