I have a bootstrap dropdown menu. When you click on it it highlights certain buildings in my webgl map, depending on their given category (e.g. museum or cinema).
At the moment clicking on the checkbox works. But also clicking on the text next to it highlights the building. This is fine but if you click on the text it doesn't check the checkbox, so the buildings are highlighted but the checkbox isn't ticked. This makes it confusing for users.
I've tried giving the text no pointer events but this doesn't seem to be working.
Website: explorecanterbury.co.uk (dropdown is first icon on the nav)
<nav class="navbar navbar-default" style="z-index:5;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg>
</li>
<ul class="dropdown-menu">
<li><a id="alltoggle" class="small toggle" data-value="option2" tabIndex="-1"><input type="checkbox"/> Show All</a></li>
<li><a id="mgtoggle" class="small toggle" data-value="option3" tabIndex="-1"><input class="uncheck" type="checkbox"/> Museums and Galleries</a></li>
<li><a id="landmarktoggle" class="small toggle" data-value="option4" tabIndex="-1"><input class="uncheck" type="checkbox"/> Landmarks</a></li>
<li><a id="shoppingtoggle" class="small toggle" data-value="option5" tabIndex="-1"><input class="uncheck" type="checkbox"/> Shopping</a></li>
<li><a id="hotelstoggle" class="small toggle" data-value="option6" tabIndex="-1"><input class="uncheck" type="checkbox"/> Hotels + Bed & Breakfast</a></li>
<li><a id="churchestoggle" class="small toggle uncheck" data-value="option7" tabIndex="-1"><input class="uncheck" type="checkbox"/> Churches</a></li>
<li><a id="cinematoggle" class="small toggle uncheck" data-value="option8" tabIndex="-1"><input class="uncheck" type="checkbox"/> Cinemas</a></li>
</ul>
<li class="icon_display"><svg></li>
<li class="icon_display"><svg></li>
</ul>
<div class="searchBar">
<div class="input-group" style="padding-left: 10px;">
<input type="text" class="form-control ui-autocomplete-input" placeholder="Search" id="srch-term" autocomplete="off">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
<svg>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You are going to want to use the label element. Surround the text in a label element and give the input element an id. Then set the for, for the label element to the input's id.
Ex.
<a id="alltoggle" class="small toggle" data-value="option2" tabIndex="-1">
<input type="checkbox" id="show-all"/>
<label for="show-all"> Show All</label>
</a>
Related
I'm having a problem with the following piece of code.
<header style="position: fixed; z-index: 999999; width: 100%;">
<nav class="navbar navbar-default navbar-fixed-top" style=" position: relative; margin-bottom:0;">
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-3">
<a class="navbar-company" href="http://www.premiersoftware.co.uk"> </a>
</div>
<div class="col-xs-12 col-sm-9 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-product" aria-expanded="false" aria-controls="navbar">
<span class="caret"></span>
</button>
</div>
<div id="navbar-product" class="navbar-collapse collapse mainlist">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Products<span class="caret"></span>
<ul class="dropdown-menu">
<li>Salonlite</li>
<li>Premier Salon</li>
<li>Premier Spa</li>
<li>Core by Premier Software</li>
<li>College by Premier Software</li>
</ul>
</li>
<!--<li>
About Us
</li>-->
<li>
Careers
</li>
<li>
Partners
</li>
<li>
Support
</li>
<li class="dropdown">
News<span class="caret"></span>
<ul class="dropdown-menu">
<li>Premier News</li>
<li>Premier Blog</li>
</ul>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle grey" href="javascript:;" data-toggle="dropdown" id="navLogin">Login<span class="caret"></span></a>
<div class="dropdown-menu">
<h4 class="logintxt">Client Login</h4>
<p class="logintxt">Premier Softwares client login area allows you to manage your online premier web booking.</p>
<form class="form" id="dologin" action="../Web-Portal/doLogin.php" method="post">
<input name="txtSerial" id="txtSerial" class="form-control" type="text" placeholder="Serial number">
<input name="txtPostCode" id="txtPostCode" class="form-control" type="text" placeholder="Postcode">
<button type="submit" id="login-submit" class="btn">Login</button>
</form>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-default product-nav-bar">
<div class="container">
<div class="row">
<div class="col-md-push-3 col-sm-push-3 col-lg-push-2 remove-padding-and-center col-xs-3 col-lg-3">
<a class="call" href="tel:01543466580">
<i class="fa fa-phone" aria-hidden="true"></i>
<div>01543 4666580</div>
</a>
</div>
<div class=" col-xs-6 col-sm-3 col-lg-2 col-md-pull-3 col-sm-pull-3 col-lg-pull-3">
<a class="navbar-brand" href="#"> </a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-5 col-lg-push-2 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="book-consultation-nav">
<a href="#contact-us" class="scroll-to" >Book a FREE Consultation</a>
</li>
<li class="nav-small-contact-us">
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
<li>
<a class="scroll-to" href="#marketing">Overview</a>
</li>
<li>
<a class="scroll-to" href="#features">Key Features</a>
</li>
<li>
<a class="scroll-to" href="#additional-reasons">In-Depth</a>
</li>
<li class="nav-small-brochure">
<a class="scroll-to" href="#brochure">View Core Brochure</a>
</li>
<li>
<a class="scroll-to" href="#casestudies">Testimonials</a>
</li>
<li>
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="hidden-xs col-lg-pull-5 col-sm-12 col-lg-2">
<a class="btn btn-primary book-consultation scroll-to" href="#contact-us" role="button">Book a FREE Consultation</a>
</div>
</div>
</div>
</nav>
</header>
<script>
$(".scroll-to").on('click', function(event)
{
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -153
}, 800, function(){
window.location.hash = hash;
});
}
});
</script>
I'm using bootstrap and have two collapsible navigation on top of each other. When I select on of the options in the lower navigation in smaller screens (ie mobile screens), the top navigation opens.
To see this in action please visit:
http://www.premiersoftware.co.uk/corebypremier/index9.php
Really I would just like the lower navigation animate the page without the top one opening.
Any suggestions would really be appreciated.
Thanks
Dan
How can I avoid use of Toggle button navigation of Bootstrap
and add on OverFlow Horizontal set fixed height a horizontal scroll with hidden bar for movil...
scheme code:
<div class="row border-bottom">
<nav class="navbar navbar-fixed-top white-bg" role="navigation">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<a class="logo-lrg" href="#"> <img alt="image" class="img-circle1" src="sources/img/logos/LOGO.png" /></a>
</div>
<!--START MENU NEED HORIZONTAL SCROLL-->
<ul class="nav navbar-top-links navbar-right">
<li> <a id="" href="#"> <i class="fa fa-desktop"></i>Mesa de Control</a> </li>
<li id="" class="dropdown">
Administración</span> <span class="caret"></span>
<ul class="dropdown-menu pull-right">
<li><a id="" href="#">Aprobaciones</a></li>
<li><a id="" href="#">Manejo de Productos</a></li>
<li><a id="" href="#">Control Días Venta Hábiles</a></li>
</ul>
</li>
<li class="logout-click"> <a id="pro-save-p-gen-logout" href="#" > <i class="fa fa-sign-out"></i> <span class="tx1">Cerrar</span> </a> </li>
</ul>
<!--END MENU NEED HORIZONTAL SCROLL-->
</nav>
</div>
So far it looks like this:
Update
this is a example that I want but not work with dropdown on tabs.
http://www.codeply.com/go/DclUsokAoV
Can you try dropdown-menu-right instead of pull-right along with dropdown-menu
Currently on my website I use the bootstrap navbar that's always at the top of the screen (even when you scroll).
Right below it I have an image carousel which is pushed below it by giving the page top padding to push it below.
The problem is that this is mostly guesswork as the height of the navbar changes with font sizes, on my high font size it overlaps the carousel, but on lower font sizes it's fine.
Is there a way to make it so the carousel is directly below the navbar without a gap, and if the navbar gets bigger due to bigger fonts to push it down more? I never want there to be an overlap or a gap.
It's not an issue with a normal navbar as the elements would just sit after eachother, but as this is the navbar-fixed-top it makes it a bit akward.
Url: http://www.gamingonlinux.com/
Code:
<!-- navbar -->
<div class="col-md-12">
<div class="container">
<div class="navbar navbar-fixed-top {:inverse}" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></li>
<li>Home</li>
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Wiki</li>
<li class="dropdown">
Forum <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Forum</li>
<li>Community Page</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
{:user_menu}
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-search"></span><b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-12">
<div class="row add-bottom-margin">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
{:carousel_list}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /.carousel -->
</div>
</div>
I found the answer elsewhere, instead of forcing a specific gap, calculate it with js and set it:
jQuery(document).ready(function () {
$('.contentwrap').css({
'margin-top': (($('.navbar-fixed-top').height()) + 0) + 'px'
});
$(window).resize(function () {
$('.contentwrap').css({
'margin-top': (($('.navbar-fixed-top').height()) + 0) + 'px'
});
});
});
For some reason that I can't figure out, bootstrap 3 on my site is having it's way with me. The toggle menu for when the screen-size is small won't open.
Site http://www.gamingonlinux.com, code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.gamingonlinux.com"><img src="/templates/default/images/navbar_logo_light.png" alt="GamingOnLinux" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li>Community Page</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b>
<ul class="dropdown-menu">
{:user_menu}
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" style="padding-right: 5px;" class="form-control search-bar" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</div>
</nav>
You have an overriding style in another style sheet, style.light.min.css:
#media (max-width: 985px) {
.navbar-collapse.collapse {
display: none!important;
}
}
Remove that, and the navbar will toggle correctly.
freedomcore.com/saverplaces.co.uk/NEW/
In the above site when click the Terms & Conditions or More information on this voucher links just below the Get Voucher button. You will see a div slide down below with the content.
I want it so that if you have clicked Terms & Conditions then go and click More information on this voucher it will hide the "Terms & Conditions" content so that both are not displayed at the same time.
My JavaScript isn't the best this is what I came up with but it does not work:
I have More information on this voucher link this class hide-terms-1 then I have this jQuery code:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").hide();
});
});
This seems to be working kind of but once it is click you can not open it back up again.
HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar menubutton" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="menu">Menu</span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-search"><img src="images/search_03.png">Search</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About Us</li>
<li>Research & Innovation</li>
<li>Our Products</li>
<li>Responsibility</li>
<li class="subnav"><a href="#" >Careers</a></li>
<li class="subnav"><a href="#" >Newsroom</a></li>
<li class="subnav"><a href="#" >Contact Us</a></li>
<li class="navfoot">This is a mobile version of our website<br/>
View full site</li>
</ul>
</div><!--/.nav-collapse -->
<div class="nav-search collapse">
<div class="search_box">
<form action="" method="post">
<input type="text" value="Enter Search">Search
</form>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div>
</div>
</div>
JS:
$('.container a').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in'))
$('.container .in').removeClass('in').height(0);
});
http://jsfiddle.net/gNUEx/
http://jsfiddle.net/mmfansler/fzbsp/
Let's try in this way:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").collapse('hide');
});
});
This is much better I think
$(".navbar").find("[data-toggle=collapse]").click(function(e){
e.preventDefault();e.stopPropagation();
$(".navbar").find(".collapse.in").collapse("hide");
$($(this).attr("data-target")).collapse("show");
});