How to make the search field responsive? - javascript

I have used bootstrap navbar for the start, how do I make the search field dynamic as that of Stack Overflow? For now instead of expanding it contracts.
<template name="DashboardLayout">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<div class="col-md-8" style="align-content: right;"><input type="text" name="search" placeholder="Search.."> </div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</template>

I hope this can help you.
https://jsfiddle.net/pablodarde/6r842g4r/
Add a class name to your input search field...
HTML
<div class="col-md-8" style="align-content: right;"><input type="text" name="search" placeholder="Search.." class="alive"> </div>
</div>
CSS
.alive {
width: 200px;
transition: all 0.5s;
}
.expand {
width: 350px;
}
JavaScript
const input = document.querySelector('.alive');
input.addEventListener('click', () => {
input.className += ' expand';
});
input.addEventListener('blur', () => {
input.className = 'alive';
});

Related

anchor hover every anchor except the one hovered change color

When a user hover on anchor every anchor except the one hovered change color. Lets say there is link1 link2 link3. If the user hovers on link1 I want the color of link2 and link3 to be changed. same with the others.
Here is my attempt on it so far link on codpen
a:hover{color:green}
#link1:hover{color: originalcolor}
#link2:hover{color: originalcolor}
#link3:hover{color: originalcolor}
This can be achieved using jQuery hover() function like this -
$( "a" ).hover(
function() {
$("a").not($(this)).css("color","green");
},function(){
$("a").css("color","white");
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
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>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end container -->
P.S Expand the snippet to full screen to view best result
Pretty sure you can do this with pure CSS. Add a hover rule for the container that changes the children, but also add a hover state rule for the child that you want to be different.
ul li {
transition: background-color 200ms ease;
}
ul:hover li {
background-color: lightblue;
}
ul:hover li:hover {
background-color: yellow;
}
<ul>
<li>Hello</li>
<li>World</li>
<li>Foo</li>
<li>Bar</li>
<ul>

How to make some links in nav to not hide on mobile? bootstrap 3

I have a 2 li dropdowns in the nav menu on bootstrap. I want the first to hide, and the second not to. But by default bootstrap hides all lists under the burger icon on small screens.
I am using pure bootstrap 3 code from there site:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
NOT HIDE ON MOBILE <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!-- HOW TO MAKE THIS PART NOT HIDE ON MOBILE? -->
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
In this case you'd have to add some custom CSS media queries to position the navbar components accordingly.
Demo: http://www.codeply.com/go/5E3YxlDKYy
/* float the left and right collapsible navs only on desktop */
#media (min-width: 768px) {
.pull-sm-left {
float:left;
}
.pull-sm-right {
float:right;
}
}
/* absolute position the single item next to the brand on mobile */
#media (max-width: 767px) {
.navbar-text.list-inline {
position: absolute;
z-index: 1;
top: 0;
left: 100px;
}
}
Well you can put it after navbar-brand inside navbar-header div as:
<a class="navbar-brand" href="#">Brand</a>
<a class="btn btn-default pull-right" href="#">Menu</a>
You can use button or drop downs there
Hope this helps..

Responsive Bootstrap Push Menu

i m trying to create Responsive Bootstrap Push Menu , i have created this templete and this for computer
and for mobile it look like this
so when we click dropdown it should push to the left side and show the dropdown menu list
this is code i have tried
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container
<div class="navbar-header">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2" style="height:30px;margin-top:5px;">
<button type="button" class="navbar-toggle toggle-menu menu-left push-body" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="col-xs-8 col-md-8" style="height:30px;margin-top:5px;">
<input type="text" placeholder="email" class="form-control">
</div>
<div class="col-xs-2 col-md-2" style="height:30px;margin-top:5px;">
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
<div class="collapse navbar-collapse cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Another action</li>
<li>Something else here</li>
<li>Another action</li>
<li>Something else here</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<script src="js/jPushMenu.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.toggle-menu').jPushMenu({closeOnClickLink: false});
$('.dropdown-toggle').dropdown();
});
//]]>
</script>
but i m not able to push to left side.
Is this something you looking for
http://jsfiddle.net/w6qc954t/
your template http://jsfiddle.net/w6qc954t/2/
its using jPushMenu.js by takien at github other than follwing part is include in that js
$(window).resize(function() {
$('.cbp-spmenu').v2p({
height:'100vh'
});
});
$(window).resize(); // trigger event so it shows on load
$(document).ready(function(){
$('.toggle-menu').jPushMenu({closeOnClickLink: false});
$('.dropdown-toggle').dropdown();
});
This has been answered here already, use an "off canvas" layout provided for in Bootstrap code: Bootstrap 3 Slide in Menu / Navbar on Mobile.

Bootstrap 3 menu - two collapse buttons - only one open at a time

I am trying to make a menu in bootstrap 3. When it gets down to mobile size, I have two collapse nav-toggle buttons. As default, when one is open, it just gets stacked on top of each other. What I would like is one drop down open at a time.
<nav class="navbar navbar-default navbar-fixed-top" 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="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-search">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
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>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div id="test2" class="nav-search collapse">
<div class="search_box">
<ul class="nav navbar-nav">
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
</ul>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div><!-- /.container-fluid -->
</nav>
I searched and found this, but that is for bootstrap 2:
Bootstrap Menu - Two Collapse buttons which toggle each other? Meaning, only 1 open at a time
I feel like I am missing something easy. Below is a jsfiddle link:
http://jsfiddle.net/Bootstrap714/RfsS9/4/
You have got the name of the event wrong. You need to call it on on('show.bs.collapse'... instead of just on on('show'....
Here is a fixed fiddle
Found a kind of "hackish" solution
if, the sibilings button, doesn't have a collapsed class, click on it.
$('.navbar-toggle').on('click', function () {
if(!$(this).siblings('.navbar-toggle').hasClass('collapsed')) {
$(this).siblings('.navbar-toggle').click();
}
});
http://jsfiddle.net/t96Ry/

Show notification counter with bootstrap

I want to implement a notification counter which rolls up to show incremented number.(Like the one google shows with google+ notifications) I can't get overflow:hidden to work for .notif-surround. Its child element's(the one with three numbers) height is larger and still it's visible. I want its appropriate portion to be visible. How do I do that?
jsfiddle demo
html
<div id="top_navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/">Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="span6 offset1">
<form class="navbar-form form-search">
<div class="input-append">
<input class="span4 search-query" type="text" placeholder="Search...">
<button type="submit" class="btn">Search</button>
</div>
</form>
</li>
<li class="dropdown">
Home <span class="notif-surround"><span class="badge badge-info notif-background" > </span><span id="num_notif">0<br/>1<br/>2</span></span><b class="caret"></b>
<ul class="dropdown-menu">
<li class="nav-header">Notifications</li>
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Messages</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<!-- <li><i class="icon-exclamation-sign icon-white"></i></li> -->
<li class="dropdown">
<img class="img-rounded img-profile inline" src="{{user['picture']['data']['url']}}" />
{{user['name']}} <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 class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
css
.notif-background{
width:18px;
height:14px;
}
#num_notif{
position: relative;
float: right;
left: -38px;
color: #fff;
height:18px;
bottom:20px;
}
.notif-surround{
overflow:hidden;
}
Set display: inline-block on the .notif-surround span.
.notif-surround{
overflow:hidden;
display: inline-block;
}
The problem is that you can't set overflow hidden on an element which is set as display: inline, which is the default for a span, as you can't set its width and its height. Setting display: block or display: inline-block fixes this, with the first forcing a line break after itself, and the latter leaving the original flow of elements intact.

Categories