We Keep Coding

Button needs to be clicked twice (Jquery)

Background: Trying to build a fullscreen menu for mobile devices on a one page site.
Problem: The #handle div needs to be clicked 2 times for action. I have tried to use following in different ways but i seem to implement it wrong in some way:
live / die,
bind / unbind,
on / off,
delegate / undelegate.
I don't understand how i should solve my problem. Sorry for bad id-names on some divs.
HTML
<div id="overlay">
<input type="checkbox" id="op"></input>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<div id="nav">
<ul>
<li class="homescroll" class="overlayli">Home</li>
<li class="servscroll" class="overlayli">Services</li>
<li class="workscroll" class="overlayli">Work</li>
<li class="aboutscroll" class="overlayli">About</li>
<li class="contactscroll" class="overlayli">Contact</li>
</ul>
</div>
</div>
</div>
Jquery
When li is clicked the user gets scrolled down the page and the menu is hidden:
If the user now wants to open the menu again it needs to be clicked 2 times for action.
<script>
$(document).ready(function () {
$('li').hover(
function () {
$('li', this).fadeIn();
},
function () {
$('li', this).fadeOut();
}
);
$(".aboutcroll").off().on('click', function() {
$('html, body').animate({
scrollTop: $("#aboutdummy").offset().top
}, 800);
$("#overlay").hide();
$("#handle").on('click');
});
});
</script>
When #handle is clicked the overlay fullscreen menu will open:
<script>
$(document).ready(function(){
$("#handle").off().on('click', function() {
$("#overlay").show();
});
});
</script>

The problem seems to be with your #handle onClick function
In your code you are using
$("#handle").off().on('click', function() {
$("#overlay").show();
});
Here .off() is removing the event listener on the first click! Try removing .off()
Also for the scrolling, you can use the following code (which is also without .off())
$("SELECTOR").click(function() {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 500);
return false;
});
Hope this works for you! And If it doesn't it would better if you can share your code via jsFiddle or CodePen.

How can I use the scollTop function to enable smooth scrolling with Bootstrap?

I have created a custom "subnavbar" that sits under bootstrap's navbar. It's based on the code from wrapbootstrap.
I want to enable smooth scrolling using scrolltop. I have the following Javascript:
$(document).ready(function(e) {
$('#subnav').bind('click', function(e) {
e.preventDefault();
$('html,body').animate({scrollTop: $(this.hash).offset().top});
});
});
However, I can't seem to make it work. Am I using the wrong # reference? Here is a bootply: http://bootply.com/62720
HTML snippet below:
<!-- Subnav bar -->
<div class="subnav subnav-fixed">
<ul class="nav nav-pills">
<li>Overview</li>
<li>Opening hours</li>
</ul>
</div>
<section id="Overview">
<h3>OVERVIEW</h3>
Thanks

Very simple and easy mistake to make "#subnav" should be ".subnav a" firstly because subnav is the class and secondly because you want the click binded to the link

Something like this will work. This will set top to 0 when there is no offset()
$('.subnav li a').bind('click', function(e) {
e.preventDefault();
var hashTag = this.hash;
var top = 0;
if ($(hashTag).offset()) {
top = $(hashTag).offset().top
}
$('html, body').animate({scrollTop:top}, 'slow');
});
Here is the update: http://bootply.com/62723

Add/Remove classes and using Cookie to remember selection

I have this simply piece of JQuery that toggle a class on anchor tags/links.
What I don't know is how do I make the class toggle or add/remove when the other links are clicked? Example: The class can only apply to the link that is click and cannot be on more than one at a time. That's where I am stuck. Well, I don't know how to do it.
Secondly how do I use the JQuery Cookie to keep the currently link active. I have downloaded the cookie extension.
Here is what I have done:
HTML:
<ul class="navbar">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
.activeLink{
color: #930;
}
JQuery:
$(document).ready(function() {
$('.navbar li a').click(function(){
$(this).toggleClass('activeLink');
});
});
Thank you!!

Below is a solution that uses event propagation:
$(function() {
var $activeLink,
activeLinkHref = $.cookie('activeLinkHref'),
activeClass = 'activeLink';
$('.navbar').on('click', 'a', function() {
$activeLink && $activeLink.removeClass(activeClass);
$activeLink = $(this).addClass(activeClass);
$.cookie('activeLinkHref', $activeLink.attr('href'));
});
// If a cookie is found, activate the related link.
if (activeLinkHref)
$('.navbar a[href="' + activeLinkHref + '"]').click();
});​
Here's a demo (without the cookie functionality as JSFiddle lacks support).

Here is how I do it. It's a little simplistic, but it gets the job done without a lot of brain strain.
<ul class="navbar">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<script>
$(document).ready(function() {
$('.navbar li a').click(function(){
$('.navbar li a').css('color', 'black');
$(this).css('color', '#930');
});
});
</script>

JQuery tabs dynamic content with on click fadeout+fadein and slide without UI

I am absolutely beginner in JQuery (but I've some knowledge about JS and programming on other languages)
I have 2 aims:
very simple tabs (or anything for controls), on click with old (active) tab content fading out and then clicked tab content fading in (same place)
same as 1 but with horizontal content slide instead of fading.
I don't want JQuery UI, because that is overkill for a simple thing of this kind and I want to learn.
Aim 1, JS:
$(function () {
$("div.tabs > div:gt(0)").hide();
$("div.tabs ul a:first").addClass('selected');
$('div.tabs ul a').click(function () {
$("div.tabs > div").fadeOut('normal', function () {
$("div.tabs > div").fadeIn('slow');
});
$('div.tabs ul a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
HTML:
<div class="tabs">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="first">
<h2>First content</h2>
</div>
<div id="second">
<h2>Second content</h2>
</div>
<div id="third">
<h2>Third content</h2>
</div>
</div>
How to find active div, instead of poking all divs with $("div.tabs > div") in fadeOut and in fadeIn lines?
Aim2:
I read about slideUp and slideDown but that is vertical, perhaps I've to use animate()?
How? If it's too complicated than it is good for me with vertical slide...

Aim 1: Just add an active class to the current content div. See demo for altered code.
Aim 2: There are several techniques to do it w/o jQuery UI, depends on what you want to achieve and where you want to use it. See the altered demo for some sliding effects.

Paul's answer simplified for aim1: without additional classes, optimized to "div" + $(this).attr('href') and solution for fadeout is div:visible:
$(function () {
$("div.tabs > div:gt(0)").hide();
$("div.tabs ul a:first").addClass('selected');
$('div.tabs ul a').click(function () {
var newDiv = "div" + $(this).attr('href');
$("div.tabs > div:visible").fadeOut('normal', function () {
$(newDiv).fadeIn('slow');
});
$('div.tabs ul a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
Thanks Paul.

Using javascript function parameters to show jquery tabs

Actually I am trying to do jquery tabs. I have written a code that needs rework and probably better ways to implement. I think I could use function arguments to achieve this, but I am not sure. Can somebody tell me how to achieve this in a better way. Though my code works but I think it is rudimentary. I would also like only one tab to display a background color if this is active.
http://jsfiddle.net/5nB4P/
HTML:
<div id="nav">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
</div>
<div id="content">
<div class="tabs first">First Div content</div>
<div class="tabs">Second Div content</div>
<div class="tabs">Third Div content</div>
</div>
Script:
$(function() {
$("li :eq(0)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:gt(0)").hide();
$(".tabs:eq(0)").show();
})
$("li :eq(1)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(this).css("background","red")
$(".tabs:gt(1), .tabs:lt(1)").hide();
$(".tabs:eq(1)").show();
})
$("li :eq(2)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:lt(2)").hide();
$(".tabs:eq(2)").show();
})
})

There is a much better way to achieve this. Here you go
$(function() {
$("li").click(function() {
$(this).css("background","red").siblings().css("background","none");
$(".tabs").hide().eq($(this).index()).show();
return false;
});
})
Working Demo
As #Niels mentioned for setting the background style you can have a dedicated class(active) and add/remove this class instead of setting the inline sytle.
FYI..In the above code $(this).index() gives the position of the first element within the jQuery object relative to its sibling elements

CSS:
.active {
background-color:red;
}
JQuery:
$('li').click(function(){
$this = $(this);
$this.addClass('active').siblings().removeClass('active');
$('.tabs:eq(' + $this.index() + ')').show().siblings().hide();
});
Here is a demo: http://jsfiddle.net/5nB4P/6/

Here is the way that I updated this to make it smaller and I believe to be more effective and easier to use:
http://jsfiddle.net/5nB4P/7/
Code:
$("#nav ul li").click(function(){
var id = $(this).attr("rel");
$("#nav ul li").each(function(){
$(this).removeClass("active");
});
$(this).addClass("active");
$("#content div").each(function(){
$(this).hide();
});
$("#"+id).show();
});

Do you mean this? http://jsfiddle.net/tsukasa1989/5nB4P/1/
$(function() {
$("#nav li").click(function(){
// Handle active status
$(this).addClass("active").siblings().removeClass("active");
// Show the tab at the index of the LI
$(".tabs").hide().eq($(this).index()).show();
})
// Don't forget to set first tab as active one at start
.eq(0).addClass("active");
})
If you want to style the active tab use
#nav li.active{}

My approach doesn't use arguments, but HTML class and id references to shorten things: http://jsfiddle.net/ZScGF/1/