As it stands, clicking on "Link" twice redirects you to a page, but whenever you click on and around it such that the menu drops down or goes up, the CSS code
a:active span {
color:#bdbcae;
}
is put into effect. What I am trying to do is make it so that the link only changes color when you click it the second time, resulting in you being redirected to the page. If you click it only once so that only the menu drops down, I want the link to remain its default color.
This is the code in my function below that I was looking at to accomplish this
if ($(this).data('clicks')==2){
$(this).data('clicks', 0);
window.open("accomplishments.html");
}
I was thinking of adding something along the lines of $(this).addClass("active") within this if statement but that doesn't work - and then making it do $(this).removeClass("active") whenever this isn't the case, but none of this works. See my full code below.
Here's my Bootply.
HTML:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span>Link</span><b class="caret"></b>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul><!-- END: "dropdown-menu" -->
</li><!-- END: "dropdown" -->
</ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
</div><!-- END: "container" -->
</div><!-- END: "container" -->
</div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->
CSS:
a span {
color:#ffffff;
}
a:hover *.caret {
color:#bdbcae;
}
a:active span {
color:#bdbcae;
}
a:active *.caret {
color:#bdbcae;
}
jQuery:
$(document).on("click", "span", function() {
if(typeof $(this).data('clicks') == 'undefined') {
$(this).data('clicks', 1);
}else {
$(this).data('clicks', $(this).data('clicks')+1);
}
if ($(this).data('clicks')==2){
$(this).data('clicks', 0);
window.open("page.html");
}
});
$(document).click(function(event) {
if(!$(event.target).closest("span").length) {
$("span").data('clicks', 0);
}
});
I think using a "click" and a "dblclick" event will help you, why do you want to set a particular color if you're going to redirect user ?
Jquery Double click event : http://api.jquery.com/dblclick/
Related
Okay so my HTML for the navbar is here(I m using boostrap Nav)
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="MyNav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#collapse" 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>
<a class="navbar-brand" href="#featured"><h1>Wisdom <span class="subhead">Pet Medicine</span></h1></a>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right" id="collapse">
<li class="active">Home</li>
<li>Mission</li>
<li>Services</li>
<li>Staff</li>
<li>Testimonials</li>
</ul>
</div>
</div>
</nav>
</header>
The javascript(JQuery) code is here,
$('.navbar-fixed-top').on('activate.bs.scrollspy',function(){
var current= $(this).find('#MyNav li .active a').attr('href');
if(current !== '#featured'){
$('header nav').addClass('inbody');
}
else{
$('header nav').removeClass('inbody');
}
});
Now, the problem is that, whenever i scroll down to a section, the ACTIVE class changes to a different li tag and so the inbody class gets attached to the <nav> element, following the IFCondition. But when i scroll back up the inbody class is not getting removed as per the ELSE condition. Need help.
You have an extra space in selector for li.active
Change:
var current= $(this).find('#MyNav li .active a').attr('href');
^^ // extra space
To
var current= $(this).find('#MyNav li.active a').attr('href');
Your version looks for an active class inside the <li> not an <li> that has that class
What #charlietfl said is correct. However a better solution might be to use the event target instead:
$('.navbar-fixed-top').on('activate.bs.scrollspy',function(ev){
var current = $(ev.target).find('a').attr('href');
...
});
There were two issues with this line of code:
var current= $(this).find('#MyNav li .active a').attr('href');
Your initial select $(this) will be your nav element. You then use .find() which searches for all descendants of the nav element. #MyNav isn't a descendant (its the same element) so the find function won't return anything.
The second issue is "li .active" which will look for elements with the active class that are a descendant of an li element. But you want li elements that have the class "active". In order to get that, don't include a space between them.
The line should look like this:
var current= $(this).find('li.active a').attr('href');
So I want to make a Navbar using Bootstrap then when you scroll down past 150 pixels the navbar has a background that is slightly transparent all the examples I have found for this on Stackoverflow haven't been what I need :/ I know how to add classes and so on with jQuery and when you scroll down pass a certain height but I want the Navbar to fadeOut and then fadeIn with a different class but I haven't found a way to do this.
I am grateful for any help :)
Thanks,
Ste
Answer:
jQuery
$(window).on( "scroll", function() {
$('nav').toggleClass('scrolled navbar-fixed-top', $(this).scrollTop() > 150);
});
CSS
nav.scrolled {
background: rgba(0,0,0,0.5);
}
nav {
transition: background-color 0.5s ease;
}
HTML
<nav id="secondNav" class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Responsive Slider</a>
</div>
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right navText">
<li>Home
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
</nav>
You can do the fading with just css transitions all you need to do is use jquery toggleClass function when the window reaches 150px.
Try the following:
$(window).on( "scroll", function() {
$('#secondNav').toggleClass('scrolled', $(this).scrollTop() > 150);
});
and the css
#secondNav.navbar-default{
background: #000;
transition: background-color 0.5s ease;
}
#secondNav.scrolled {
background: rgba(0,0,0,0.5);
}
The transition property is what will give you the fade in and out and then you can change the background of the navbar-default to whatever you want it to be. When it reaches 150px it will toggle the scrolled class and change the background.
I have a difficult solution. You can create two navbar. second nav should be hidden. when you scroll more than 150px, then it should be fade in with fixed position. Below my jQuery code is
$(window).scroll(function(){
var scrolled = $(window).scrollTop();
if(scrolled>149){
$('#second_nav').fadeIn();
}
else{
$('#second_nav').fadeOut();
}
});
Below the code is first nav.
<nav class="navbar navbar-default">
And below the code is second nav.
<nav class="navbar navbar-default navbar-fixed-top" id="second_nav">
Check my live demo on jsfiddle
Are you using jQuery? if so, maybe something like this?
$('#div').click(() => {
$('#div').fadeOut();
$('#div')
.css('background-color', 'green')
.fadeIn();
});
https://jsfiddle.net/53n2o76g/
My bootstrap menu is as follows (this is the code snippet for one menu-item out of many):
<!-- Code for Navigable menu (mobile) -->
<nav class="navbar navbar-default" role="navigation">
<div class="container commonWidth">
<button type="button" style="width: 100%" class="navbar-toggle" data-toggle="collapse" data-target="#led-collapse">
LED & Lighting <b class="caret"></b>
</button>
<!-- Collect the nav links for toggling -->
<div class="collapse navbar-collapse hidden-sm" id="led-collapse">
<ul class="nav navbar-nav">
<li class="dropdown visible-xs">
LED Lights<b class="caret visible-xs"></b>
<ul class="dropdown-menu">
<li>LED Lamps & Tubes</li>
<li>Downlights, Spotlights & COB</li>
<li>LED Panels</li>
<li>LED Surface</li>
<li>Commercial & Industrial</li>
<li>LED GU10 Fittings</li>
<li>LED Strips</li>
</ul>
</li>
<li class="dropdown visible-xs">
Luminaires (Fittings)<b class="caret visible-xs"></b>
<ul class="dropdown-menu">
<li>Domestic Tube Fittings</li>
<li>Floodlights</li>
</ul>
</li>
</div> <!-- End LED Menu -->
</div> <!-- End commonWidth -->
</nav>
The issue is that immediately after clicking a 3rd level link (.dropdown-menu > li > a), entire 2nd level menu (li class="dropdown visible-xs") collapses. However, I want this to stay open after the 3rd level link is clicked.
Here is the fiddle: http://jsfiddle.net/dk49/ugzwmhm6/
Any Suggestions?
Thanks.
Once the economy link is clicked the click event is getting propagated to its parent, from there it goes to the next parent and so on . when it reaches the third parent, the third parent element is reacting to it by toggling the open class. So if you stop the propagation it will stay as it is.
Try the code below.
$('.dropdown-menu a').click(function(e){
e.stopPropagation();
})
This code will stop the propagation of the anchor tag to its parent
In case if you want to prevent the default click action use
$('.dropdown-menu a').click(function(e){
if($(this).attr('href') == "#" || $(this).attr('href') == "") // New code
e.preventDefault();
e.stopPropagation();
})
Update
I have updated the code to prevent scrolling if the URL is # or if there is no URL. this should serve the purpose
I am trying to get my navbar to auto collapse on click. Specifically when it is on a mobile device. I do not see why the below code will not work but I believe I maybe have the '.nav navbar-toggle a' wrong.
HTML
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<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="#"></a>
</div>
<div class="collapse navbar-collapse" id="close">
<ul class="nav navbar-nav">
<li class="navtext">ABOUT</li>
<li class="navtext">SERVICES</li>
<li class="navtext">WORK</li>
<li class="navtext">CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Java script (I added this code to the end of bootstrap.js)
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav.navbar-nav a').on('click', function(){
$("#close").click();
});
}
else {
$('.nav.navbar-nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The website is speak-design.com
Thank to Hide Twitter Bootstrap navbar on click
I commented first:
('.nav navbar-nav a') should be ('.nav.navbar-nav a') see:
CSS rule to apply only if element has BOTH classes and you should apply your click
for closing on .navbar-collapse if i understand your question well
When i test the above i think i should work with the code shown below.
<script>
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav.navbar-nav a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.nav.navbar-nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
</script>
NB i think .collapse('hide'); make more sense (more readable) than doing click although the effect will be the same maybe.
Its already doing it. Make sure you added the viewport in your metatags
<meta name="viewport" content="initial-scale=1">
Reference
I'm having a problem regarding dropdown menus not working on mobile devices that i've been struggling with for a week. I've taken a copy of the current example from the bootstrap site, modified it a bit and during the test i noticed it didn't work as expected. (same goes for the original example(http://twitter.github.io/bootstrap/examples/carousel.html), where i only add a link to for instance google) - why this behaviour?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Dropdown test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
Links<span class="caret"></span>
<ul class="dropdown-menu">
<li>Google (opens in new window)</li>
<li>Bing (opens in new window)</li>
<li><a class="linkcheck" href="http://www.google.com">Google</a></li>
<li><a class="linkcheck" href="http://www.bing.com">Bing</a></li>
</ul>
</li><!-- .dropdown -->
</ul><!-- .nav -->
</div><!-- .nav-collapse -->
</div><!-- .container -->
</div><!-- .navbar-inner -->
</div><!-- .navbar -->
Bootstrap is new to me, and i can't find any documentation on nav-collapse, where can i find this?
And do i really have to do a click event, then window.open(url)? (or does onclick behave different on a mobile device?)
Here's my online example: http://test-web.dk/sandbox/bootstrap/
Edit:
Found a solution:
$('.linkcheck', this).click(function(){
var url = $(this).attr('href');
alert("link clicked:" + url);
if(url.match(/^http:/)) {
window.location.href = url;
}
});
// fix by RobDodson: github.com/twitter/bootstrap/issues/4550
// Kills regular links in browsers though, but they will be redirected by linkcheck above
$('.dropdown a').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
});
Still, a real bootstrap solution would be nice to known, rather than a hack :-) So if anybody has a suggestion, please post it.
Check that you are using the most up to date jQuery.
I was having the same problem with the Bootstrap theme for Drupal, but solved this problem by changing the settings in jQuery Update to the most up to date!