We Keep Coding

Sidebar hide and show with Bootstrap and Jquery?

Guys I want to create a sidebar hiding and showing using bootstrap, but my code isn't working..
Please help me...
My code HTML is:
<nav role="nav" class="navbar">
button
</nav>
<nav role="nav" class="sidebar">
sidebar menu
</nav>
<main role="main" class="main-page">
main content
</main>
This is my CSS code:
.menu {
display: block !important;
}
.sidebar {
color: #fff;
width: 240px;
height: 100%;
position: fixed;
background: #2a3542;
}
.main-page {
color: #000;
margin-left: 240px;
position :relative;
}
And this is my jquery code:
<script>
$(function () {
$('.menu').on('click', function () {
if ($('.sidebar').is(':visible')) {
$('.sidebar').animate({'width': '0px'}, 'slow', function () {
$('.sidebar').hide();
});
$('.main-page').animate({'padding-left': '0px'}, 'slow');
} else {
$('.sidebar').show();
$('.sidebar').animate({'width': '240px'}, 'slow');
$('.main-page').animate({'padding-left': '240px'}, 'slow');
}
});
});
</script>
I'm using bootstrp CDN: jquery-3.2.1.slim.min.js / popper.min.js / bootstrap.min.js

Im not sure why is not working. Try this one.
Change/Add the following CSS:
.sidebar {
color: #fff;
width: 240px;
height: 100%;
position: fixed;
background: #2a3542;
left:0px;
transition:0.3s all ease-in-out;
}
.sidebar.close {
left: -240px;
transition:0.3s all ease-in-out;
}
In your script Change/Add the following:
$('.menu').on('click', function () {
$('.sidebar').toggleClass('close');
});

You are using slim version of jQuery library which does not contain DOM animation capabilities. That is why your code is not working...
See more on this link below:
https://stackoverflow.com/a/35424465/704661
EDIT:
You had several bugs in your code:
First is that your anchor has empty href attribute which causes page to reload on every click.
Secondly you had margin and padding on main content which was causing multiple gap between sidebar and content.
HTML
<nav role="nav" class="navbar">
button
</nav>
<nav role="nav" class="sidebar">
sidebar menu
</nav>
<main role="main" class="main-page">
main content
</main>
CSS
.menu {
display: block !important;
}
.sidebar {
color: #fff;
width: 240px;
height: 100%;
position: fixed;
background: #2a3542;
}
.main-page {
color: #000;
padding-left: 240px;
position :relative;
}
Javascript
$(function () {
$('.menu').on('click', function () {
if ($('.sidebar').is(':visible')) {
$('.sidebar').animate({'width': '0px'}, 'slow', function () {
$('.sidebar').hide();
});
$('.main-page').animate({'padding-left': '0px'}, 'slow');
} else {
$('.sidebar').show();
$('.sidebar').animate({'width': '240px'}, 'slow');
$('.main-page').animate({'padding-left': '240px'}, 'slow');
}
});
});
here is working fiddle example
https://codepen.io/mnikolaus/pen/mqByqK

Try not to use jquery.slim. It goes well with min.js
https://code.jquery.com/jquery-3.2.1.min.js
Check the jsfiddle

Horizontal slide banner design & functionality

I need to show the vertical banner which will slide out horizontally from the right of the screen once user click the open button/div and should be able to close the same. Base design is show in the sample image below
I have set up fiddle for the same http://codepen.io/anon/pen/oXgePX
<div class="horizontal-slide" id="other-menu"><<</div>
<div class="menu-other slide-right slide-opened" id="other-menu-content">
horizontal on right slide div
</div>
UPDATE:
I managed to do it by wrapping banner & button inside another div.
.wrapper{
float:right;
position:absolute;
right:0;
}
example: http://codepen.io/anon/pen/aOzyxo
still need to improve it so that button also slides with the banner for smooth look

You've to change your css
For example:
/* float */
float:right;
/* absolute position */
position:absolute;
You need it like this:
http://codepen.io/anon/pen/mJyMgW
Or do I missunderstand your Question?

Maybe you wanted something like this. It's a good start I think.
$(function() {
//slideout-menu-toggle
$(".banner-slide").click(function(event) {
var _slideMenu = $("#right-banner");
if (_slideMenu.hasClass("slide-opened")) {
$( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
$( "#hbanner" ).html("<<");
//alert('a')
} else {
$( "#right-banner" ).animate({ "right": "0" }, "slow" );
$( "#hbanner" ).html(">>");
}
_slideMenu.toggleClass("slide-opened");
});
});
#right-banner {
position:absolute;
right:0;
top: 0;
width: 210px;
}
.right-banner {
width: 150px;
height: 200px;
background-color: green;
padding: 20px;
float: right;
background-color: blue;
}
#hbanner {
float: left;
background-color: red;
cursor:pointer;
}
.wrapper {
float: right;
position: absolute;
right: 0;
z-index: 100000;
}
.content {
width: calc(100% - 210px);
background-color: magenta;
height: 200px;
float: left;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
This is sample text</div>
<div class="wrapper">
<div id="right-banner" class="slide-opened">
<div class="banner-slide" id="hbanner">
>>
</div>
<div class="right-banner" id="hbanner-wrapper">
horizontal on right slide div
</div>
</div>
</div>

You can do it cleaner and simpler using CSS transitions and a simple toggleClass in jQuery:
$('#button').on('click', function(){
$('#banner').toggleClass('unfolded');
});
Demo : http://codepen.io/mbrillaud/pen/NqPvZM

use a JQ toggle class
$('#slider').toggleClass('sliderthing');
that plus CSS to give it looks and stuff should work well

I managed to do it by wrapping the banner & button inside another wrapper.
Here is the updated example : http://codepen.io/anon/pen/aOzyxo
I have added some exact animation so that red button hide/shows immediately upon click event with some smooth animation.
.wrapper{
float:right;
position:absolute;
right:0;
z-index:100000;
}

Why does div content jump after slide effect

<style>
#toggle {
width: 150px;
height: 50px;
background: crimson;
color: white;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<body>
<button id="clickme">Click moi</button>
<div id="toggle">
<p>This will slide in and out.</p>
</div>
<script>
$( document ).ready(function() {
$('#clickme').click(function () {
$( "#toggle" ).toggle( "slide" );
});
});
</script>
The height of the #toggle div should be constant before/during/after the slide effect. For some reason the div slides out and then the height increases to 50px. I wanted to know why this is happens.

Removed p as it wasn't required for this example. It's works, see here:
http://jsfiddle.net/3bVZy/
If you require p, let me know.
EDIT
For the same distance, in this example, add the following to your #toggle CSS:
position: relative;
top:15px;

the problem is Paragraphe margin ,
if you set paragraphe P margin to 0 ,
it will work perfectly
p { margin: 0; }
That's will solve your problem

Try This
$(document).ready(function() {
$('#clickme').click(function () {
$("#toggle" ).toggle("slide");
});
});
I have changed the jquery reference and also the css part
Demo1
Demo2

How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

I've been piecing together code and tweeking it to eventually come together with this. The code itself is fairly simple and basically just saying that once someone visits the page for the first time then drop a cookie and no longer display it for the visitor when he visits the page, well for 365 days. My only issue is that once the div loads and loads out, I can't figure out how to fade in and fade out the background, I can only fade the div itself. I've tried wrapping it in a overlay div but I think I'm approaching it all wrong.
The code looks a bit much on here so I've attached a jsfiddle for a working example: http://jsfiddle.net/newbieturd/F29uv/
** Note: Once you run the fiddle once, you will have to clear your cookie. The DIV only appears once
CSS:
#welcome {
box-sizing:border-box;
padding:34px 18px 18px 18px;
height:120px;
width:300px;
background:Salmon;
color:#f9f9f9;
border-radius:6px;
position:absolute;
top:50%;
left:50%;
margin:-60px 0 0 -150px;
font:300 normal 1.4em/1.2 'Signika', sans-serif;
display:none;
}
#close {
height:30px;
width:30px;
background:url('http://www.omagdigital.com/images/articles/WebArticle-CloseButton.png') no-repeat;
position:absolute;
top:2px;
right:2px;
cursor:pointer;
}
JS:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function(factory){if(typeof define==='function'&&define.amd){define(['jquery'],factory);}else{factory(jQuery);}}(function($){var pluses=/\+/g;function raw(s){return s;}function decoded(s){return decodeURIComponent(s.replace(pluses,' '));}function converted(s){if(s.indexOf('"')===0){s=s.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,'\\');}try{return config.json?JSON.parse(s):s;}catch(er){}}var config=$.cookie=function(key,value,options){if(value!==undefined){options=$.extend({},config.defaults,options);if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}value=config.json?JSON.stringify(value):String(value);return(document.cookie=[config.raw?key:encodeURIComponent(key),'=',config.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}var decode=config.raw?raw:decoded;var cookies=document.cookie.split('; ');var result=key?undefined:{};for(var i=0,l=cookies.length;i<l;i++){var parts=cookies[i].split('=');var name=decode(parts.shift());var cookie=decode(parts.join('='));if(key&&key===name){result=converted(cookie);break;}if(!key){result[name]=converted(cookie);}}return result;};config.defaults={};$.removeCookie=function(key,options){if($.cookie(key)!==undefined){$.cookie(key,'',$.extend({},options,{expires:-1}));return true;}return false;};}));
function setCookie() {
$.cookie("visited", "true", { expires: 365 });
}
if ($.cookie('visited') != 'true') {
$('#welcome').show(1800);
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(1800);
});
// $.cookie("visited", null);
});//]]>
</script>
HTML:
<div id="welcome">
<span id="close"></span>
Interstitial Message. You will only see this message once every 365 days.
</div>
<p> Hello World. </p>

Is this what you are looking for? I gave the popup a parent container that will serve as the overlay.
HTML:
<div class="overlay">
<div id="welcome">
<span id="close"></span>
This is the only time you will see this message :)
</div>
</div>
CSS:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
jQuery:
if ($.cookie('visited') != 'true') {
$('#welcome, .overlay').show(100); // If the condiditon is true then show overlay
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(100); // Can also be added to this jQuery selector but the animation was odd
$('.overlay').fadeOut(100); // Fades out on click
});
Finally the fiddle: DEMO

Give your #welcome div a z-index (11 for example) and add css to give your document body full height and width:
html, body {
height: 100%;
width: 100%;
}
You're going to add a glass pane div to the body and it needs a height and width to fill the body of the page which, in your current example, has no height or width set
And then add a background div with a color of your choosing and a z-index less than your #welcome div such as:
<div id="glass_pane" style="width: 100%; height: 100%; z-index: 10; position: absolute: top: 0px; left: 0px; background-color: #000;"></div>
Ans then fade it in or out, remove it when you like, change the transparency

Disable Horizontal Scrolling on Mobile Webpage

I've got this simple mobile webpage I'm trying to build, with a Facebook like side menu button. I'm trying to disable horizontal scrolling with the CSS overflow-x:hidden, but it's not working. Here's my code, any help will be greatly appreciated:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var win = $("#right-side");
var position = win.position();
//alert( "left: " + position.left + ", top: " + position.top );
if(position.left < 100)
{
$("#right-side").animate({left:'250px'});
}else{
$("#right-side").animate({left:'0px'});
}
});
});
</script>
<style>
body{overflow-x: hidden;font-family: sans-serif;}
#right-side{
background:#BFC7D8;;
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
#left-menu
{
background:#323949;
left:0;
top:0;
height:100%;
width:250px;
position:absolute;
}
#navigation { font-size:20px; width:250px; padding-top:100px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }
ul.top-level li > a {
display: block;
border-bottom: 1px solid rgba(0,0,0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
text-shadow: 0 1px 0 #000;
text-decoration: none;
color: #ccc;
text-indent: 20px;
}
#toolbar
{
width:100%;
height:50px;
background:#00F;
}
</style>
<div id="left-menu">
<div id="navigation">
<ul class="top-level">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
<li>News</li>
</ul>
</div>
</div>
<div id="right-side">
<div id="toolbar">
<button>Menu</button>
</div>
<h1>This is a test</h1>
</div>

I have put your code in a fiddle but I couldn't add the 'zoom' meta tag to the head, so it is hard to test on my phone. http://jsfiddle.net/Pevara/Ku5nY/1/show/
Seems to work fine on desktop though, no scrollbars.
I did add the following to your css:
body{
overflow-x:hidden;
font-family: sans-serif;
/* added: */
max-width: 100%;
height: 100%;
}
Not sure if it will make a difference, but it is worth a try...

David.
Have you tried using this: http://mmenu.frebsite.nl/
Alternatively, Take a look at this and see if you can use it to adjust to your code:
http://jsfiddle.net/tzDjA/
You will notice there are 3 functions:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
left: 0
}, 'slow', function () {
$('#trigger span').html('Close'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
left: -40
}, 'slow', function () {
$('#trigger span').html('Show'); //change the trigger text at end of animation
});
}

I had a similar issue where I had the menu behind my content and was pushing my content to the left to reveal the facebook style menu hidden behind.
I was applying 'absolute' positioning to mimic the slide across and taking the content out of the document flow. With overflow hidden it seemed you could pull the content layer over with touch (which sounds like the same issue as you encountered). Even with overflow std, x & y set on almost everything this still occurred. This was also with width:100% on body etc.
Changing the content layer to 'relative' when I slid this across and then reducing the height of the content (while the menu was open) to the windows height seemed to work for me and seemed fairly robust over devices.
Good luck, that should help for anyone experiencing a similar issue.
Thanks,
Dave

Here's a quicky. The thing is it ONLY works if you define your modal's height. Without the height defined it won't work. Set the dialog to height 100% & overflow hidden. Then set the content to position: absolute, top: 0, bottom: 0, left: 0, right: 0, margin: auto and define the height (in below example 250px for a login modal). I know it sounds irrational - it probably is a CSS glitch, but: it works - cross browser & cross platform (haven't checked iPhone).
<div class="modal-dialog" style="height:100%;overflow:hidden"><div class="modal-content" style="position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;height:250px;">