Develop Reference

How to fix "Opened sidebar when page is loaded"?

I am making a sidebar nav. There is a hamburger button when clicked opens nav. But when page is loaded, it is already opened. I don't want it to already opened. How do I fix this?
I am a noob in JS. I have tried value 'javascript:void(0)' in href attribute, but it didn't work.
<a href="javascript:void(0)" class="click-menu" onclick="openMenu()">&9776;
</a>
<div class="side-menu" id="side-menu">
<a href="#" class="cross-btn" onclick="closeMenu()" style="font-size: 50px">×
</a>
Features
Pricing
Login
</div>
<script>
function openMenu() {
document.getElementById("side-menu").style.width = "250px";
}
function closeMenu() {
document.getElementById("side-menu").style.width = "0";
}
</script>
Expected result: Sidebar nav will open only when Hamburger icon is clicked.
Actual result: When page is loaded, nav is already opened.

Add display:none to the style of div #side-menu:
<div class="side-menu" id="side-menu" style="display:none;">
And instead of resizing the width of #side-menu, change the display to block when the menu is clicked, and back to none when the cross sign is clicked.
function openMenu() {
document.getElementById("side-menu").style.display = "block";
}
function closeMenu() {
document.getElementById("side-menu").style.display = "none";
}
The full code:
☰
<div class="side-menu" id="side-menu" style="display:none;">
×
Features
Pricing
Login
</div>
<script>
function openMenu() {
document.getElementById("side-menu").style.display = "block";
}
function closeMenu() {
document.getElementById("side-menu").style.display = "none";
}
</script>
P.S. Also change &9776; to ☰

JQuery Toggle Slide – display element when other elements toggle closed

JSFiddle: http://jsfiddle.net/ncuacvcu/
DIV home is displayed by default.
When I click on LINK one/LINK two, DIV one/DIV two replaces DIV home. When I click on LINK one/LINK two again, DIV one/DIV two toggles shut, leaving an empty white space. How do I get DIV home to display again at that moment?
At the same time, if DIV one is open and I click on LINK two, I want DIV one to be replaced by DIV two (i.e. without going through DIV home).
Here's what I tried (and some variations), but I can't get it to work:
$("a#one_toggle").click(function()
{
$(".hideall").not(".one").slideUp();
$(".one")slideToggle(function(){
if($('#client1').is(':visible')){
$('#client0').SlideUp();
} else{
$('#client0').SlideDown();
}
});
});
Thanks in advance for any tips!

You need to use the callback of slideToggle and check if the div with class home is visible or not then you show it.
http://api.jquery.com/slidetoggle/
http://api.jquery.com/is/
$(function() {
$("a#one_toggle").click(function() {
$(".hideall").not(".one").slideUp();
$(".one").slideToggle('slow', function() {
showHome($('.one'));
});
});
$("a#two_toggle").click(function() {
$(".hideall").not(".two").slideUp();
$(".two").slideToggle('slow', function() {
showHome($('.two'));
});
});
});
function showHome(elementToCheck) {
// now we know if the div to check is visible or not
if (!$(elementToCheck).is(':visible')) {
// the div is not visible so we show it
$('.home').slideDown();
}
}
.one,
.two {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
link one
link two
<div class="home hideall">
home
</div>
<div class="one hideall">
one
</div>
<div class="two hideall">
two
</div>

Cancel animation when click or remove class on click

How do I remove or cancel an animation, when I click on a div it opens a second div with a sub menu that is fine, the thing is that I have added a sub menu and it shows when hover but if I click on any link on the hover link it opens the second div...
<div class="togger">
Nice Title
<div class="sub-menu-hover">
Some page
</div>
</div>
<div class="hiden-menu">
Some page
</div>
So when I click on "Nice Title" it display the ".hiden-menu", that is fine, when I hover on "Nice Title" it display the ".sub-menu-hover" also is fine, the problem is when I click on any menu "a" tag inside the ".sub-menu-hover".
What it does is that it opens the ".hiden-menu" and I don't want that...
I notice that when I click to whatever is inside ".toggler" it add a class ".active" and it opens the ".hiden-menu", so how can I prevent that when someone click inside ".sub-menu-hover"? it should only take you to whatever link you click on...
I did this
<script>
(function($) {
$(".sub-menu-hover").click(function(){
$('.toggler').removeClass('active');
})
})(jQuery);
</script>
but didn't do anything...

$(".togger p").click(function() {
$(".hiden-menu").toggle();
$(".sub-menu-hover").hide();
});
$(".togger p").mouseover(function() {
$(".sub-menu-hover").show();
});
$(".togger p").mouseout(function() {
$(".sub-menu-hover").hide();
});
.sub-menu-hover,
.hiden-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="togger">
<p>Nice Title</p>
<div class="sub-menu-hover">
hover Some page
</div>
</div>
<div class="hiden-menu">
click Some page
</div>

Hide div and show onclick using js

I've been trying to hide and show a div using javascript in my website.
But i want it to be hidden by default and be able to show and hide it on click.
My code seems okay and when I click the button, the display:none; turns into a display:block; but the div doesn't show…
Here's the HTML
<div class="col-lg-8 col-lg-offset-2 text-center">
<button href="#collapse1" class="nav-toggle">Show</button>
</div>
<div class="col-md-3 col-sm-4 col-xs-12 portfolio-item" id="collapse1" style="display:none">
<img src="img/myimage.jpg" class="img-responsive" />
</div>
Here's the JS
// Show or hides div
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Show');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Hide');
}
});
});
});
And here's the example on my website

I checked up your website and I can see that it changes state from "Show/Hide" on button as well as removing style or adds it to the div that is hidden, but however your image width and height is 0...
Perhaps like this ?
<img src="http://iampox.com/img/portfolio/Visuel_JPO_ESTEN_thumbnail#2x.jpg" class="img-responsive" alt="Visuel JPO ESTEN 2014" width="100%" height="100%" />
And here's simplified JS fiddle, since you asked "how to show/hide a div" in your question, so I used a button and hidden content just for sample demo. Perhaps you can minimize your script to something like this.
JS Fiddle Sample
$('#btn').on('click', function () {
var btnText = ($(this).text() == 'Show') ? 'Hide' : 'Show';
$(this).text(btnText);
$('#content').toggle();
});

How to properly handle a 'body' jquery event to close a dropdown

I'm trying to make a dropdown very similar to dropbox dashboard, where if you click the username a flyout menu appears. Clicking the username again will close the flyout (toggling it every time you click).
The one caveat is that clicking anywhere except on the flyout itself will also close it.
So far, I have it working almost, but not 100%. If you click on the actual 'body' element directly, it will close the flyout as it should. By this I mean my website has a .wrapper element which doesn't take up the full height of the page. Theres a thin strip down at the bottom with no actual element covering it, only the <body> tag. Any place where .wrapper or some other element takes up space (even a 100% width invisible wrapper), it will not close the window if you click on anything where there is an element (besides body).
javascript:
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$(document).on('click',function(e) {
if ( $(e.target).parents($flyout).length === 0 ) {
$flyout.fadeOut(flyoutDuration);
}
});
HTML
<body>
<div class="blackbar">
<div class="container clearfix">
<div class="icon logo"></div>
<div class="flyout">
<h3>
Welcome back, username
</h3>
<div class="menu">
<ul>
<li><div class="users"></div>Users</li>
<li><div class="groups"></div>Groups</li>
<li><div class="configuration"></div>Configuration</li>
<li><div class="logout"></div>Logout</li>
</ul>
</div>
</div>
</div>
</div>
<div class="wrapper">
<! -- content here -->
</div>
</body>
The expected behavior should be any element you click on that isnt a descendent of .flyout should close the window (including .blackbar, the logo, etc)

To be honest - when I am doing something like this and I do not want clicks inside of the "box" to close the element - I prevent clicks from bubbling.
// FLYOUT menu
$flyout = $('.flyout ul'),
flyoutDuration = 120;
$('.flyout h3 a').click(function(e) {
e.preventDefault();
$flyout.fadeToggle(flyoutDuration);
});
$('.flyout').click(function(e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('click',function(e) {
if(flyout-open) {
$flyout.fadeOut(flyoutDuration);
}
});

Jquery Menu Click - on click anywhere on body will close the menu
In my case i wanted to close a drop down menu if its clicked primary link or outside the link i.e. anywhere on the html/body
http://jsfiddle.net/austinnoronha/k2Lwj/
var toggleClick = function(){
var divObj = $(this).next();
var nstyle = divObj.css("display");
if(nstyle == "none"){
divObj.slideDown(false,function(){
$("html").bind("click",function(){
divObj.slideUp();
$("html").unbind("click");
});
});
}
};
$(".clickme").click(toggleClick);