I have a HTML structure like so
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>
When the primary-nav li a is hovered, jQuery is to slide an image with the apopropriate data-motion attribute of the hovered #primary-nav li.
function mpSlide() {
$("#primary-nav li a").on("mouseenter", function () {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).on('mouseleave', function () {
$("#feature-images .image-field ul li").removeClass("is-open");
});
}
My console gives no errors or warning. I'm not sure what I have done here.
You can use mouseover and mouseout for this like so also you need to remove the a from your select because it doesn't have a data-rel attribute.
$("#primary-nav li").mouseover(function() {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).mouseout(function() {
$("#feature-images .image-field ul li").removeClass("is-open");
});
.is-open{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>
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 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>
I need to make a mega menu/mashable like 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.
this has 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 doesn't 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 don't need actually.
I modified script to show the first li of sub-menu it works find for Parent menu ONE, TWO but creates alignment 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>