CSS HTML Bootstrap layout issue - javascript

I'm trying to build a page with 2 full height columns. the left column is for a menu. The right section will hold a form. I'm trying to make this a responsive page by using Bootstrap. I have written the following code, but when I resize the window, the form content overflows into the left menu. I tried using Bootstrap grid, but then ended up using my own CSS. This still won't work.
I created a jsfiddle here: https://jsfiddle.net/snehilw/8zrkcyyx/
My current layout looks like this:
<div class="containerr">
<div class="roww">
<!-- Left Navigation Menu -->
<div class="coll-md-2 no-float">
<div class="nav-side-menu">
<div class="brand"> &nbsp</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i>Scenario Builder <span class="badge badge-right">3</span>
</a>
</li>
<li id= "addNewScenario">
<a href="#">
<i class="fa fa-lg"></i> <span class="glyphicon glyphicon-plus-sign"></span> Add New Scenario
</a>
</li>
<li>
<a href="#">
<i class="fa fa-lg"></i><span class="glyphicon glyphicon-floppy-disk"></span> Save
</a>
</li>
<li>
<a href="#">
<i class="fa fa-lg"></i><span class="glyphicon glyphicon-stats"></span> Test
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- FORM CONTENT -->
<!-- End Form content-->
</div>
</div>
Please advise on how to fix the form overflowing into the menu using Bootstrap or CSS.
jsfiddle link: https://jsfiddle.net/snehilw/8zrkcyyx/

Twitter Bootstrap Solution
<div class="container">
<div class="row">
<div class="col-xs-6">
html for menu
</div>
<div class="col-xs-6">
html for form
</div>
</div>
</div>
also if you want it to stack on smaller devices you could use
col-sm-6 instead

Related

Maintain scroll position when expanding <li> item

I have a bootstrap side menu that I am making. There are are <li>'s that can be expended and collapsed to display or hide additional menus/links.
Currently when i open the <li> the scroll position of the page is reset back to the top.
I would like the page to maintain its scroll position when the <li> is opened.
This is a snippet:
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-briefcase"></i>
</div>
<div class="sidebar-brand-text mx-3">Business Centre</div>
</a>
<!-- Nav Item - Setting Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseAccount" aria-expanded="true" aria-controls="collapseAccount">
<i class="far fa-user-circle"></i>
<span>Account</span>
</a>
<div id="collapseAccount" class="collapse" aria-labelledby="headingAccount" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="login.html">Membership</a>
<a class="collapse-item" href="login.html">Information</a>
<a class="collapse-item" href="login.html">Contact Us</a>
</div>
</div>
</li>
</ul>
</div>
Can anyone help with the code or point me in the right direction?
Its due to the # you use in href replace it with
href="JavaScript:Void(0);"
like
<a class="nav-link collapsed" href="JavaScript:Void(0);" ...
Second solution
Just use "#/" or "#!" instead of "#" and the page won't jump.

Angular 2 move component to back (Change z position)

I am trying to make a responsive web app with a side menu that hide and shows via a button when the screen is small. However, I am finding that when the menu shows, it shows "behind" my main component (As shown in the images below). I am using angular 2 with with with some javascript/css from responsive website code
My main app.component.html looks like
<header class="header clearfix">
<button type="button" id="toggleMenu" class="toggle_menu">
<i class="fa fa-bars"></i>
</button>
<h1>Timesheet</h1>
</header>
<nav class="vertical_nav">
<ul id="js-menu" class="menu">
<li class="menu--item">
<a [routerLink]="['/a']" class="menu--link" title="a">
<i class="menu--icon fa fa-fw fa-user"></i>
<span class="menu--label">a</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/b']" class="menu--link" title="b">
<i class="menu--icon fa fa-fw fa-briefcase"></i>
<span class="menu--label">b</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/c']" class="menu--link" title="c">
<i class="menu--icon fa fa-fw fa-cog"></i>
<span class="menu--label">c</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/d']" class="menu--link" title="d">
<i class="menu--icon fa fa-fw fa-database"></i>
<span class="menu--label">d</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/e-csv']" class="menu--link" title="e">
<i class="menu--icon fa fa-fw fa-globe"></i>
<span class="menu--label">e</span>
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<section>
<router-outlet></router-outlet>
</section>
</div>
Just add a CSS style, or do it inline.
CSS
nav.vertical_nav {
z-index: 9;
}
Inline
<nav class="vertical_nav" style="z-index: 9;">

jQuery: Toggle other dropdowns when any is toggled

I would like to know how I can make it so that when I have a dropdown opened and I open another one, it will close the one previously opened.
This is what I have so far:
$(document).ready(function(){
// Hide other drop downs when opening another
// $(".hideothers").hide();
// $(".show_hide_account").click(function(){
// $(".slidingDiv_account").slideToggle();
// });
// Account Drop down
$(".slidingDiv_account").hide();
$(".show_hide_account").show();
$(".hideothers").hide();
$(".show_hide_account").click(function(){
$(".slidingDiv_account").slideToggle();
});
// Work drop down
$(".slidingDiv_work").hide();
$(".show_hide_work").show();
$(".hideothers").hide();
$(".show_hide_work").click(function(){
$(".slidingDiv_work").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></p>
<h5 class="centered">USER</h5>
<!-- Account Dropdown -->
<li>
<a class="show_hide_account">
<i class="fa fa-chevron-down"></i>
<span>Account</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
<li>
<a href="/users">
<i class="fa fa-pencil"></i>
<span>Find Users</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- Work Dropdown -->
<li>
<a class="show_hide_work">
<i class="fa fa-suitcase"></i>
<span>Work</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/jobs">
<i class="fa fa-search"></i>
<span>Find a Job</span>
</a>
</li>
<li>
<a href="/startup">
<i class="fa fa-star"></i>
<span>Create a Startup</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- <li class="mt">
<a href="index.html">
<i class="fa fa-users"></i>
<span>Friends</span>
</a>
</li> -->
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->
Refer to the snippet for a clearer idea. Click on account & work to see the dropdowns.
Thank you.
$(document).ready(function(){
function slideAllUp(obj)
{
$(".hideothers").each(function(){
if ($(this)[0] != obj[0])
{
$(this).slideUp(); //perform on all except self.
}
})
}
// Account Drop down
$(".slidingDiv_account").hide();
$(".show_hide_account").show();
$(".hideothers").hide();
$(".show_hide_account").click(function(){
slideAllUp($(".slidingDiv_account"));
$(".slidingDiv_account").slideToggle();
});
// Work drop down
$(".slidingDiv_work").hide();
$(".show_hide_work").show();
$(".hideothers").hide();
$(".show_hide_work").click(function(){
slideAllUp($(".slidingDiv_work"));
$(".slidingDiv_work").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></p>
<h5 class="centered">USER</h5>
<!-- Account Dropdown -->
<li>
<a class="show_hide_account ">
<i class="fa fa-chevron-down"></i>
<span>Account</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
<li>
<a href="/users">
<i class="fa fa-pencil"></i>
<span>Find Users</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- Work Dropdown -->
<li>
<a class="show_hide_work dropdown">
<i class="fa fa-suitcase"></i>
<span>Work</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/jobs">
<i class="fa fa-search"></i>
<span>Find a Job</span>
</a>
</li>
<li>
<a href="/startup">
<i class="fa fa-star"></i>
<span>Create a Startup</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- <li class="mt">
<a href="index.html">
<i class="fa fa-users"></i>
<span>Friends</span>
</a>
</li> -->
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->
This edit introduces a function called slideAllUp. It passes over all ULs with the class .hideothers. When calling the slideAllUp you need to pass the ul that isn't supposed to go up. This way it closes all others and opens the one clicked upon. The exception is there to allow the menu to close again.

Render a main menu into a fixed navbar when scrolling on the browser

I'm using bootstrap latest version.
I create a main menu like this:
This is the code for in my html view:
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-folder-close"></span>
<p>header Menu 1</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-flash"></span>
<p>header Menu 2</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-list-alt"></span>
<p>header Menu 3</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-home"></span>
<p>header Menu 4</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-wrench"></span>
<p>header Menu 5</p>
</button>
</div>
</div>
</div>
</div>
Now I would like, when user scrolling, change this menu into a fixed to top navbar like this (check the link to have a better idea, scroll to see the animation):
this is the code for the nav fixed to top:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dropdown-thumbnail-preview">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand active" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="dropdown-thumbnail-preview">
<ul class="nav navbar-nav">
{# Suivis Fluides #}
<li class="dropdown thumb-dropdown">
Header Menu 1 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Suivis Contrats #}
<li class="dropdown thumb-dropdown">
Header Menu 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Patrimoines #}
<li class="dropdown thumb-dropdown">
Header Menu 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Equipements Technique #}
<li class="dropdown thumb-dropdown">
Header Menu 4 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# User #}
<li class="dropdown thumb-dropdown navbar-right">
Menu Header 5 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The purpose of this question is to render my main menu into a navbar fixed to top when user is scrolling.
Anybody knows what is the best solution and to make this?
You could use something like Prinzhorn/skrollr or imakewebthings/waypoints to define, when (talking about scroll position) to add/remove a class which makes the navbar sticky.
You can do something like below if you have an option of including jquery
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) //Change this value 280 as per your need
{
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
Considering the structure of each navigation is different, I would suggest hiding/showing each element with a css class of hidden. Then it's just a matter of adding/removing that class when the first nav is scrolled equal to or passed the top of the viewport.
The jQuery would look something like this:
//Fired when the page is scrolling
$(window).scroll(function() {
var window = $(this);
//Create a reference to both navigations
var buttonNav = $('#buttonNav');
var fixedNav = $('#fixedNav');
if(window.scrollTop() >= buttonNav.offset().top) {
//Hide the buttonNav and Show the fixed nav
buttonNav.addClass('hidden');
fixedNav.removeClass('hidden');
} else {
//The opposite
fixedNav.addClass('hidden');
buttonNav.removeClass('hidden');
}
}
Keep in mind that you will need to add id's to each nav in order to reference them with jQuery and the hidden class just needs the css property display: none; in it. Hope this helps :)
Thanks to you all , I found a solution for my project, following the specification of my clients.
First, I add an id to the button nav, named firstMainMenu. Then, I add an id for the navbar named secondMainMenu. I add an hidden class for the navbar and make the script.
This is the script for:
$(window).scroll(function() {
if ($(this).scrollTop()>222) {
$('#secondMainMenu').removeClass('hidden').fadeIn();
$('#firstMainMenu').addClass('hidden').fadeOut('fast');
} else {
$('#secondMainMenu').fadeOut('fast');
$('#firstMainMenu').removeClass('hidden').fadeIn('slow');
}
});
This is the code who works for me. But the three answer are right too. Tahnk you to all of you for your suggestions. You are the best.
Don't hesitate if you have suggestions or edits for this script.

Semantic UI sticky module not working

I am trying to make my menu bar sticky but for some reason it doesn't do anything.
As explained on Semantic-UI documentation:
Sticky content attaches itself to the viewport when it is passed
However my navbar does not stick to the top once it is passed.
Any one know why this is?
Markup:
<div id="example1">
<div class="ui sticky">
<div style="clear:both" class="ui teal menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="info icon"></i> About
</a>
<a class="item">
<i class="book icon"></i> Read
</a>
<a class="item">
<i class="edit icon"></i> Write
</a>
<div class="ui right menu">
<a class="item" id="logIn">
<i class="user icon"></i> Log In
</a>
<a class="item" href="signup">
<i class="signup icon"></i> Sign Up
</a>
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function(){
$('.ui.sticky')
.sticky({
context: '#example1'
});
})
EDIT
Here is a link to the site.
Are you sure you're checking it correctly?
Here's a codepen with your code and it works fine to me:
http://codepen.io/anon/pen/jEYXGG
This is what I used:
<div id="example1">
<div class="ui sticky">
<div style="clear:both" class="ui teal menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="info icon"></i> About
</a>
<a class="item">
<i class="book icon"></i> Read
</a>
<a class="item">
<i class="edit icon"></i> Write
</a>
<div class="ui right menu">
<a class="item" id="logIn">
<i class="user icon"></i> Log In
</a>
<a class="item" href="signup">
<i class="signup icon"></i> Sign Up
</a>
</div>
</div>
... Added some content here ...
</div>

Categories