Sidebar hide and show with Bootstrap and Jquery? - javascript

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

Related

jQuery isn't working despite no error showing up

I'm relatively new to jQuery, and I'm experiencing some trouble with it. My assignment is to redesign a webpage and implement certain features using jQuery. Right now, I'm trying to create a dropdown menu for each "button" in my nav bar. When I hover over a "button" in the nav bar, a dropdown menu should show up. My jQuery appears to be working but the dropdown menu isn't showing up on the webpage...
Here is my code:
<head>
<title>Team Imperial College: Project Description</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="styles/normalize.css" type="text/css"/>
<link rel="stylesheet" href="styles/styles.css" type="text/css"/>
</head>
Here is the HTML code (nav bar and dropdown menu code):
<ul class="nav_bar">
<li class="dropdown">
Our Team
<ul class="dropdown_content">
<li>Meet the Team</li>
<li>Attributes</li>
</ul>
</li>
<li>Our Project</li>
<li>
Modelling
</li>
<li>Software</li>
<li>
Documentation
</li>
<li>
Human Centered Design
</li>
</ul>
Here is my CSS code:
html, body {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
background-color: #EDDBDB;
}
.nav_bar {
position: fixed;
top: 0px;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #F3F3FF;
overflow: hidden;
}
.nav_bar li {
float: left;
}
li a {
display: block;
color: #000000;
text-align: center;
padding: 24px 20px;
text-decoration: none;
font-size: 105%;
}
/*dropdown menu code*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown_content {
display: none;
position: absolute;
background-color: #F3F3FF;
min-width: 160px;
z-index: 1;
}
.dropdown_content li a {
color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown_content li a:hover {
background-color: #DBDBE5;
}
.dropdown:hover .dropdown_content {
display: block;
}
/dropdown menu code/
And here is my jQuery code:
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
});
$('.dropdown_content li a').hover();
});
Please help! Help will be greatly appreciated, thanks!
First test i would make is make dropdown_content visible since begin, to make sure the toggle function works.
Then you can do this test:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
alert('Over here');
});
Check how many times "Over here" appears.
Having those answers will help you on the way out of this.
if (jQuery) {
alert(“jquery is loaded”);
} else {
alert(” Not loaded”);
}
it seems you haven't addressed the event on mouse out. try changing this code:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
});
to this:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
}, function() {
$('.dropdown_content').toggle();
});
if you want it only to be trigger on when entering it do this:
$('.dropdown').mouseenter(function() {
$('.dropdown_content').toggle();
});
i suggest looking at this for better detail.
EDIT:
how toggle works is by making the element's display variable to none that essentially means that it does not exist on the page anymore.
if you wanted it to toggle on hover, you would need to toggle the opacity between 0 and 1.
best method:
create a css class
.hidden {
opacity: 0;
}
edit JQuery code
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown').toggleClass('.dropdown', "hidden");
//you can use this for multiple elements
//$(this).toggleClass(this, "hidden");
});
$('.dropdown_content li a').hover();
});
deprecated method:
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown_content').toggle(() => {
$('.dropdown_content').css({opacity: "0"});
}, () => {
$('.dropdown_content').css({opacity: "1"});
});
});
$('.dropdown_content li a').hover();
});
note: () => {} is shorthand for a callback function

How would I resize an image while scrolling down on a page?

I am creating a nav bar for a website, however I can't seem to get this to work. I want the logo to shrink as you scroll down on the site. I've tried the webkit animation stuff, and a few javascript/jQuery functions but they don't want to cooperate. This is the current function i've played with and it doesn't seem to like it. How do I fix it?
HTML:
<html>
<body>
<script>
$(document).on("scroll", function() {
if($(document).scrollTop() >= 1)
{
$(".nav .logo img").css('-webkit-transform', 'scale(.5, .5');
$(".nav .logo img").css('-ms-transform', 'scale(.5, .5');
$(".nav .logo img").css('transform', 'scale(.5, .5');
}
else
{
$(".nav .logo img").css('-webkit-transform', 'scale(1, 1');
$(".nav .logo img").css('-ms-transform', 'scale(1, 1');
$(".nav .logo img").css('transform', 'scale(1, 1');
}
});​
</script>
<div class="nav">
<div class = "logo">
<img src="Pics/siren.png" alt="" width="196" height="196"/>
</div>
</div>
</body>
</html>
CSS:
.nav{
position: fixed;
top: 0;
z-index: 1;
width: 100%;
height: 100px;
}
.nav .logo{
position: fixed;
text-align: left;
z-index: 2;
top: 0;
bottom: 100px;
overflow: hidden;
opacity: .5;
}
You could do something like this with jQuery:
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 10) {
$('.logo img').css('width', '50px');
} else {
$('.logo img').css('width', '');
}
});
Full example here: https://jsfiddle.net/sL89qxcx/
you could use onscroll event :
<body onscroll="myFunction()">

JQuery Hide/Show on Scroll down

I'm new to jquery. I'm trying to write a script that will hide the div "box" and all children. When the user scrolls to the bottom of the page, the div "box" and all children display. For time's sake, we'll say the children are "chamber1", "chamber2" and "chamber 3".
when I hide "box", it only removes that div.
$(document).ready(function() {
$("#box").hide();
});
Apologies for lack of code, but I'm having trouble understanding this lesson and I can't find an exact example of what I'm trying to do through my internet searches.
Thank you!
If you to hide the box when you reach the bottom of the page, you javascript should be as follows:
JAVASCRIPT:
$(document).ready(function() {
$(document).on("scroll", function(){
if ( window.scrollMaxY == window.scrollY ) {
$("#box").hide();
}
})
});
HTML:
<div id="box">
<div>Chamber 1</div>
<div>Chamber 2</div>
<div>Chamber 3</div>
</div>
You should make sure that the div has id "box". If you're working with a div of class "box" then you would use:
$(document).ready(function() {
$(".box").hide();
});
I think this might help you and would be better to understand. A good explantion is given below here with demo.
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
//Script for activity on reaching bottom of document
$("#box").fadeOut();
} else // optional
{
$("#box").fadeIn();
}
});
body {
margin: 0px;
width: 100%;
}
.container {
position: relative;
height: 900px;
width: 100%;
background: #fee;
}
#box {
position: fixed;
top: 50px;
left: 0px;
background: lightblue;
height: auto;
padding: 15px;
overflow: hidden;
max-width: 250px;
width: 210px;
}
#box > div {
margin: 5px;
background: #F33636;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="box">
Box
<hr>
<div class="chamber1">
Chamber 1
</div>
<div class="chamber2">
Chamber 2
</div>
</div>
JSFiddle
You can play around with Fiddle Link.

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;
}

How to created Fading In Navbar after scroll?

I have a cover photo which, using jscript, stretches the entire window on any resolution. When you scroll down the cover page goes up and content appears. I am trying to have the navbar fade in once the cover photo is completely scrolled up and then keep the navbar static the rest of the page unless you scroll back up to the cover photo which will have the navbar fade back out. Unfortunately if i make the position of the navbar fixed, it will not show at all. Please help.
HTML
<body>
<div id="container">
<div id="header">
</div>
<div id="navbar">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
</body>
CSS
html, body{
height:100%;
margin:0;
background:#F9F9F9;
/*This is to cut off the white border around the webpage*/
}
#container {
position: relative;
max-width: 2048px;
margin: 0px auto;
width: 100%;
height:100%;
}
#header {
background: url('../images/cover6.jpg') no-repeat;
background-size:cover;
height: 100%;
margin:0px auto;
width:100%;
}
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
JSS
<script>
$(window).resize(function() {
$("#container").height($(window).height());
});
</script>
<script>
(function ($) {
$(document).ready(function(){
// hide .navbar first
$("#navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 1000) {
$('#navbar').fadeIn();
} else {
$('#navbar').fadeOut();
}
});
});
});
}(jQuery));
</script>
make the navbar inside the header div, and change the top and left properties to 0 :
#navbar {
position:static;
margin: 0;
padding: 0;
left:0;
top:0;
}
here is the exact same effect your are looking for :
Live Demo
I've used Jquery and waypoints.js to do so easily :
$( function() {
$( "#demo-heading" ).waypoint( function() {
$( "#demo" ).fadeIn();
},
{
offset: 400
} );
$( ".site-header" ).waypoint( 'sticky' );
} );
make sure to add these two libs after Jquery :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/shortcuts/sticky-elements/waypoints-sticky.js"></script>

Categories