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>
Related
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');
});
On hover over images button appears
HTML
<div class="block-11 block-1">
<div class="carousel-wrapper" id="carousel-1">
<ul class="carousel clearfix">
<li>
<a href="img/img_8.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_8.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_9.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_9.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_8.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_8.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_9.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_9.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>
</ul>
<div class="semitransparentoverlay">
<input name="" type="button" value="Смотреть все фото" class="btn-1">
</div>
</div>
</div>
http://jsfiddle.net/1po0acv6/5/
Is there a way to do so that the images are downloaded to Lightbox when clicked on the button?
The images will not get "downloaded" to lightbox on button click, you will have to add the images in the innerHTML of 'ul class="carousel clearfix"', I mean the HTML of 'li' including its children 'a' and 'img'. And then reinitialize the lightbox.
Like this:
jQuery('#button').click(function(){
$('ul.carousel').html('<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>');
//now code lightbox reinitialization, according to the library you are using
});
Best of luck :)
How to place the blocks in such a way?
Link of the image -> http://upload.akusherstvo.ru/image664571.jpg
<ul class="list">
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
</ul>
I would make 4 separate CSS columns and fill each of them separately.
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>