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.

Always close current div regardless of which trigger you click

How is it possible to close a div that's currently open when you click on its trigger that usely opens the div or any other trigger (that opens a different event on the page)?
So basicaly I have two links: Login and Register. When you click Register, the Login block/div disappears and the Register div shows up. When I hit Login, the Register div hides and the Login div shows up.
Also when I, e.g. click Login and the Login div is already shown - the Login div must hide aswell.
How do I accomplish this? I tried for days now, but unfortunately i'm a beginner to jQuery and my skills in jQuery aren't great at the moment. I made the following script that works. I only can hide/show divs when you click the same trigger. If you click Register AND Login the divs will just show up on top of eachother, without the hiding.
;(function($) {
var $jq = jQuery.noConflict();
$jq.fn.login_switch = function(options) {
var o = $jq.extend({}, $jq.fn.login_switch.defaults, options);
var $this = $jq(this);
$jq(this).click(function(e)
{
e.preventDefault();
// hides matched elements if shown, shows if hidden
$jq(this).closest("div#wrapper").children("div#member_login").eq(0)[o.method](o.speed);
});
};
$jq.fn.reg_switch = function(options) {
var o = $jq.extend({}, $jq.fn.reg_switch.defaults, options);
var $this = $jq(this);
$jq(this).click(function(e)
{
e.preventDefault();
// hides matched elements if shown, shows if hidden
$jq(this).closest("div#wrapper").children("div#member_reg").eq(0)[o.method](o.speed);
});
};
$jq.fn.login_switch.defaults = {
speed : "slow",
method: "slideFadeToggle"
};
$jq("a.log-expand").login_switch();
$jq.fn.reg_switch.defaults = {
speed : "slow",
method: "slideFadeToggle"
};
$jq("a.reg-expand").reg_switch();
var msie = false;
if(typeof window.attachEvent != 'undefined') { msie = true; }
$jq.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function() {
if (msie) { this.style.removeAttribute('filter'); }
if (jQuery.isFunction(callback)) { callback(); }
});
};
};
})(jQuery);
My html is:
<div id="member_reg" style="display:none;">
<div class="container">
<div class="sixteen columns">
REGISTRATION.
</div>
</div>
</div>
<div id="member_login" style="display:none;">
<div class="container">
<div class="sixteen columns">
LOGIN.
</div>
</div>
</div>
with the trigger buttons:
<ul class="user">
<li>Register</li>
<li>Login</li>
</ul>

Here I have created a FIDDLE for you with the behavior I think you are trying to achieve.
Let me know if you have any questions or if I'm way off base.
HTML
<button id="btnLogin" data-bound="login">Login</button><button id="btnRegister" data-bound="register">Register</button>
<hr />
<div id="login" class="area" data-state="closed">
Login div
</div>
<div id="register" class="area" data-state="closed">
Register div
</div>
CSS
.area{
float:left;
width:200px;
height:0;
margin:10px;
overflow:hidden;
text-align:center;
line-height:100px;
}
#login{
background:#41cc36;
}
#register{
background:#3764e3;
}
JAVASCRIPT
$(document).ready(function(){
$('button').bind('click', function(){
//close any open areas
$('.area').each(function(){
if($(this).data('state') == 'open'){
$(this).animate({'height': 0}, 750, function(){
$(this).data('state', 'closed');
});
}
});
//retrieve the div we need to toggle and it's state
var divID = $(this).data('bound'),
div = $('#' + divID),
state = div.data('state');
//animate the div based on it's state, then set the new state
if(state == 'closed'){
div.animate({'height': 100}, 750, function(){
div.data('state', 'open');
});
}else{
div.animate({'height': 0}, 750, function(){
div.data('state', 'closed');
});
}
});
//init
$('#btnLogin').trigger('click');
});

JQuery: show div below pushed button

How can I show the div-element below the pushed button?
html:
<button id="one" class="btn">One</button>
<button id="two" class="btn">Two</button>
<button id="three" class="btn">Three</button>
<div id="popup">Message!</div>
JS:
$('.btn').click(function(e) {
const targetBtn = e.target;
$("#popup").show("slow").delay(3000).hide("slow"); //HOW TO SHOW IT BELOW TARGET BUTTON
})

Because your div has an id not class so you have to use # notation for ids:
$('.btn').click(function (e) {
$("#popup").css({
'position': 'absolute',
'left': $(this).offset().left,
'top': $(this).offset().top + $(this).height() + 5
}).show("slow").delay(3000).hide("slow");
});
Demo

Not sure if your button is allready visible or not before you want to replace it. But this puts the div after the clicked button:
$("button").click(function(){
$("#popup").insertAfter($(this));
});
http://jsfiddle.net/6FLLt/
If you want to show() it use
$("button").click(function(){
$("#popup").show().insertAfter($(this));
});
http://jsfiddle.net/6FLLt/2/
UPDATE
If you want to place the message below the buttons visually you have to change to html and CSS like so:
HTML
<div class="relative">
<button id="one" class="btn">One</button>
</div>
<div class="relative">
<button id="two" class="btn">Two</button>
</div>
<div class="relative">
<button id="three" class="btn">Three</button>
</div>
<div id="popup">Message!</div>
CSS
#popup{position:absolute; bottom:-20px; display:none;}
.relative{position:relative; float:left;}
http://jsfiddle.net/6FLLt/5/

try something like this
$('.btn').click(function(e) {
$(this).after($('#popup'));
})
Note : User # for id and .(dot) for class

How can I show the div-element below the pushed button?
Set the margin of the div accordingly (to show the div directly below the pushed button):
$('.btn').click(function(e) {
var $elem = $(e.target),
$div = $('#popup');
$div.css('margin-left', $elem.offset().left + 'px');
$("#popup").stop().show("slow").delay(500).hide("slow");
})
Demo: http://jsfiddle.net/abhitalks/5ef5L/
Note: You should .stop() before attempting the animation, because when you click another button, the earlier animation might still be underway, hence giving unexpected results.
Aside: You need to use the $('#...') selector, because popup is an id.

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

Best approach to slideup and tabs with jQuery

I'm creating a page with an image at the top, and a menu below. When the user clicks on on of the 3 menu buttons, the image slideUp and the page scrolls down so the menu is at the top of the page, then the right .content div fades in. The slideUp should only happen the first time the user clicks on of the buttons.
What the absolute best way to do this with jQuery? (no plugins)
I also need to know how I can't prevent it to fade in the page that is already visible if i click the same button twice?
I'm using rel instead of href, since the href made the page jump, even with return false.
This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
imgVisible = true;
$('#mainmenu a').click(function(){
var $activeTab = $(this).attr('rel');
if(!imgVisible){
$('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
$('.content').hide();
$($activeTab).fadeIn();
} else{
$('#imgholder').slideUp(500,function(){
imgVisible = false;
$('#mainmenu a[rel="'+$activeTab+'"]').click();
});
}
return false;
});
});
</script>
<div id="imgholder"><img src="image.jpg" /></div>
<div id="mainmenu">
<ul>
<li><a rel="#tab1"></a></li>
<li><a rel="#tab2"></a></li>
<li><a rel="#tab3"></a></li>
</ul>
</div>
<div id="container">
<div class="content" id="tab1">
content
</div>
<div class="content" id="tab2">
content
</div>
<div class="content" id="tab3">
content
</div>
</div>

The following code accomplishes what you need:
$('#mainmenu a').click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
$('#imgholder').slideUp(500,function(){
$('#'+myrel).fadeIn();
});
});
....
<li><a href='#' rel='tab0'></a></li>
I have removed the '#' sign from your rel='' piece ;-)
I am not sure why you would want to scroll the page. When a user clicks on the menu, he/she already has it focused (so it is visible inside the current viewport). But do you have a very large top image? If that is the case, let me know and I will modify the snippet. (Still, it depends on the amount of content below the menu visible when the page first loads.)
Also, for SEO reasons you might want to use the href instead of the rel attribute and create separate content holding pages. The following snippet would remove the navigation action.
$('#mainmenu a').each(function(){
var myhref = $(this).attr('href');
$(this).attr('href','#').attr('rel',myhref);
}).click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
//....etc

I think this is a great example of what your looking for: Organic Tabs

var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;
$mainmenu.find('a').click(function() {
$activeTab = $($(this).attr('rel'));
if (!imgVisible) {
// dont fire any events if already open
if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
$lastTab.fadeOut('normal', function() {
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
} else {
$('#imgholder').slideUp(500, function() {
imgVisible = false;
window.scrollTo(0, offset);
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
}
return false;
});
I highly suggest adding <a href="#"> as this will not make the page jump when done properly and will ensure validation on your anchor links. Someone let me know if I missed something, it can be resolved quickly (or you can do it for me if you have an optimization or improvement).