I'm trying to build responsive layout for webpage using bootstrap. I would like to render the webpage normally with header, left navigation on large displays[desktop resolutions]. But I would like to show toggle button if the site is resized to that of tablets or mobile device [OffCanvas Bootstrap]. Below is what i have achieved so far..
JsFiddle : http://jsfiddle.net/BqKNV/222/
Now,I'm having issues with slide animation and left navigation visibility[always hidden]. If anyone can spot where I'm going wrong will be appreciated.. thanks
<section class="offcanvas-layout">
<aside id="aside-menu" class="offcanvas-left nav-collapse collapse">
<div id="leftcontent">
<div class="inner">
<div></div>
</div>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav nav-pills nav-stacked">
<li> <span class="glyphicon glyphicon-play"></span>United States
</li>
<li> <span class="glyphicon glyphicon-play"></span>Canada
</li>
</ul>
</div>
<!-- /.container-fluid -->
</div>
</aside>
<article class="offcanvas-content">
<div id="header">
<div class="container">
<button class="btn navbar-btn" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>
<div class="dropdown pull-right"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<div class="searchBox">
<div class="input-group input-group-sm">
<input id="header-search" type="text" class="form-control" placeholder="search..." /> <span class="input-group-btn">
<button class="btn btn-default" type="button" id="search_Button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<div id="maincontent">
<div id="maincontentnav">
<p>Main Content Here</p>
</div>
</div>
</article>
</section>
You can use the visible-xs responsive utility class like this...
<button class="btn navbar-btn visible-xs" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>
http://bootply.com/130279
Related
I've built a nav menu using expand and collapse in and not using a dropdown. My problem is that I can't get the div to toggle when I click a menu link. I've tried using js to toggle it closed when a link is clicked, but then I can't re-open the menu again.
Here's my html:
<header style="padding:0px 0%;">
<nav class="navbar navbar-inverse navbar-static-top" style="margin:0px 0px;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header hidden-md hidden-lg">
<button type="button" class="navbar-toggle collapsed hidden-sm hidden-xs" data-toggle="collapse" data-target="#myNavmenu" aria-expanded="true" style="color:#fff;display:inline-block;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right inverse hidden-xs hidden-sm" style="margin:0px 0px; font-size:0.8em;">
<li style="float:left !important"><img src="/products/greg2/images/avatierwatermark.png" style="height:34px; width:auto;"></li>
<li>Customers</li>
<li>Solutions</li>
<li>Products</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="collapse" id="expandmenu">
<div class="well">
<div class="container">
<button type="button" class="navbar-toggle2 pull-right" data-toggle="collapse" href="#expandmenu" aria-expanded="false" aria-controls="collapseExample" style="float:right; padding:16px 5px 17px 0px; color:#333;"><p class="explore" style="font-size:0.8em; color:#333;">Close </p>
<span class="glyphicon glyphicon-remove" aria-hidden="true" style="font-size:1.1em;"></span>
</button>
<div class="row">
<div class="col-sm-12">
</div>
</div>
<div class="row">
<ul class="expand txt-ctr" style="padding-left:0px;">
<li class="blue"><div style="background-position:0px 0px;"></div><span>Benefits</span></li>
<li class="blue"><div style="background-position:-165px 0px;"></div><span>Overview</span></li>
<li class="blue"><div style="background-position:-330px 0px;"></div><span>Features</span></li>
<li class="blue"><div style="background-position:-495px 0px;"></div><span>Reports</span></li>
<li class="blue"><div style="background-position:-660px 0px;"></div><span>Security</span></li>
<li class="blue"><div style="background-position:-825px 0px;"></div><span>Help Desk</span></li>
<li class="blue"><div style="background-position:-990px 0px;"></div><span>App Support</span></li>
<li class="blue"><div style="background-position:-1155px 0px;"></div><span>Architecture</span></li>
<li class="blue"><div style="background-position:-1315px 0px;"></div><span>Languages</span></li>
<li class="blue"><div style="background-position:-1490px 0px;"></div><span>Ticketing</span></li>
<li class="blue"><div style="background-position:-1665px 0px;"></div><span>Testimonials</span></li>
<li class="blue"><div style="background-position:-1825px 0px;"></div><span>Demo</span></li>
<li class="blue"><div style="background-position:-1998px 0px;"></div><span>Resources</span></li>
<li class="blue"><div style="background-position:-2165px 0px;"></div><span>True Cost</span></li>
</ul>
</div>
</div>
</div>
</div>
And here's the js I've tried:
$('.collapse a').click(function(){
$("#expandmenu").toggle();
});
Thank you for your help!
Try this, it worked for me:
$('#expandmenu a').click(function(){
$("#expandmenu button").click();
});
<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#" id="navitem1" data-content="content-wrap1 ">
<i class="glyphicon glyphicon-user"></i>
View Profile </a>
</li>
<li class="active">
<a href="#" id="navitem2" data-content="content-wrap2">
<i class="glyphicon glyphicon-"></i>
Account Settings </a>
</li>
<li class="active">
<a href="#" id="navitem3" data-content="content-wrap3">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li class="active">
<a href="#" id="navitem4" data-content="content-wrap4">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
<div id="content-wrap1" class="content">Edit Profile Content goes here Either it may form or what ever </div>
<div id="content-wrap2" class="content">Account settings</div>
<div id="content-wrap3" class="content">Invoices</div>
<div id="content-wrap4" class="content">Credit card info</div>
</div>
</div>
</div>
</div>
<br>
<br>
On my menu I have a font awesome icon that I would like to be able to change once click on parent link.
I am trying to get it if menu link is closed will show
And if menu link is open will show
Currently my java script not working.
I can only get it to change if change it manually but trying to get java script to do so.
<?php echo Modules::run('admin/common/header/index');?>
<div id="wrapper">
<nav class="navbar navbar-inverse" role="navigation">
</nav>
<div class="menu">
<ul class="nav navbar-nav menu">
<li>
<a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> System <span class="pull-right"><i class="fa fa-angle-right"></i></span></a>
<ul id="setting" class="collapse">
<li class="third-level">
<a data-toggle="collapse" data-target="#user"><i class="fa fa-angle-double-right"></i> First Level</a>
<ul id="user" class="collapse">
<li>
<i class="fa fa-angle-double-right"></i> Second Level
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-tachometer"></i> Dashboard <small>Dashboard Home</small></h1>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.parent').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa fa-angle-down');
});
</script>
<?php echo Modules::run('admin/common/footer/index');?>
You need to attach the listener to the object that is actually collapsing:
$('#setting').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa-angle-down');
});
#setting is the element being collapsed, so the event happens there.
What's wrong here is you jquery syntax
$('.parent').on('shown.bs.collapse', function() {});
The correct syntax looks like $('.parent <sub classes>').on('click', function() {});
I am working on a pagination script and all is well apart from one small problem. I need to fire an action when the page number (li) is clicked.
The pagination is returned via ajax to a div called "result". However this div is burried amound several other divs deep - i think this may be the problem. How can fix?
Thanks
$('#result .pagination li').live('click', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});
The full output is below with the full pagination
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
<div class="navbar-header">
<button class="navbar-toggle" type="button"><span class="sr-only">Toggle navigation</span>
</button> <a class="navbar-brand" href="index.php">Title</a>
</div>
</nav>
<nav class="navbar-default navbar-static-side">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input class="form-control" placeholder="Search..." type="text">
</div>
<!-- /input-group -->
</li>
<li class="active">Dashboard
</li>
<li>Claims
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Claims</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
<div id="loading" style="float: right; display: none;">
<img src="images/loading.gif">
</div>
</div>
<div class="panel-body">
<div id="result">
<!-- DATABASE RESULTS GO HERE -->
<ul class="pagination" id="pg">
<li class="disabled">First
</li>
<li class="disabled">«
</li>
<li class="disabled"><a>1</a>
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>»
</li>
<li>Last
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using jQuery v1.10.2
You are using jQuery >= 1.9, so there is no .live() method
$(document).on('click', '#result .pagination li', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});
I'm trying to put a panel with a few form elements and a dropdown category selection into a collapsible navbar in bootstrap. Currently I have
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<img class="headerToolbarIcon2" src="img/configuration.png"> Configuration<b class="caret"></b>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data>
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
</div>
I stopped event propagation on the panel, and the radio buttons work great, but whenever I click the "Personal" button to select from categories, the panel shuts. I'm sure it has something to do with having the data target of the parent dropdown, but I'm not sure how to fix that.
Bootstrap 3.0.3 can't show 2 dropdown-menu class with data-toggle="dropdown" because first click show class="dropdown-menu" and second click hide first class="dropdown-menu" and show the second . this your problem .
try this solution :
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a id="dp1" class="dropdown-toggle" data-toggle="dropdown" href="#" ><img class="headerToolbarIcon2" src="vbnet.PNG" width="20px" height="20px"> Configuration<b class="caret"></b></a>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button id="dp2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(function(){
$("#dp2").click(function(){
$("#dp1").attr("data-toggle","");
$("#dp1").one("click",function(){
$("#dp1").attr("data-toggle","dropdown");
});
});
});
</script>