This a part of the entire project. The primary requirement is to load the <div> upon link click. I'm able to achieve it using the jquery script. The loads perfectly and other sibling div hided, but it scrolls to the top of the page. My page has many two sections with <div> loading in them. Is there a possibility to modify the jquery to set page scroll the loaded <div> onclick. I tried to use focus() and event.preventdefault(). But I'm not able to get it to work.
Here is the design of the page. WEBPAGE DESIGN.
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("fast");
});
});
#header {
background-color:#A4E2F4;
color:Black;
text-align:center;
padding:20px;
}
input, textarea{
background-color:#B7F9EB;
color: Black;
}
textarea {
border-radius: 6px;
border: 1px solid Black;
outline: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;
}
ul2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #9B9A9A;
display: inline-block;
}
li1 {
float: left;
border-right: 1px solid #bbb;
}
li1 a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
li1 a:hover {
background-color: #111;
color: white;
}
#section {
width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
float:center;
padding:30px;
}
#section2 {
width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
float:center;
padding:30px;
background-color:#eeeeee;
}
/* Vertical nav bar */
vl {
list-style-type: none;
line-height:30px;
float: left;
height:auto;
width: 200px;
background-color: #EEEEEE;
padding: 10px;
}
li2 a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li2 a:hover {
background-color: #555;
color: white;
}
li3 a {
display: block;
color: #000;
padding: auto;
width: auto;
text-decoration: none;
}
li3 a:hover {
color: blue;
}
/* End of nav bar */
#footer {
Width:auto;
background-color:#F2F2F2;
color:Black;
clear:both;
text-align:center;
padding:4px;
}
<TABLE>
<center>
<ul>
<li1><a href="#" name="div100" >MAIN1</a></li1>
<li1><a href="#" name="div200" >MAIN2</a></li1>
</UL>
<UL2>
<div id="div100" style="display:none" align="left">
<li1><a href="#" name="div1" >SUBMAIN1</a></li1>
<li1><a href="#" name="div3" >SUBMAIN2</a></li1>
<li1><a href="#" name="div5" >SUBMAIN3</a></li1>
</div>
<div id="div200" style="display:none" align="left">
<li1><a href="#" name="div9" >SUBMAIN4</a></li1>
<li1><a href="#" name="div10" >SUBMAIN5</a></li1>
<li1><a href="#" name="div11" >SUBMAIN6</a></li1>
</UL2>
</center>
<center>
<!-- Second Link Container -->
<div id="div1" style="display:none" align="left">
<div id="section">
</div>
<div id="section2">
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B>
<li3><a href="#" name="l1" >1. link1</a></li3>
<li3><a href="#" name="l2" >2. link2</a></li3>
<li3><a href="#" name="l3" >3. Link3</a></li3>
<li3><a href="#" name="l4" >4. link4</a></li3>
</div>
</div>
<div id="div2" style="display:none" align="left">
<div id="section">
</div>
<div id="section2">
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B>
<li3><a href="#" name="m1" >1. link1</a></li3>
<li3><a href="#" name="m2" >2. link2</a></li3>
<li3><a href="#" name="m3" >3. Link3</a></li3>
<li3><a href="#" name="m4" >4. link4</a></li3>
</div>
</div>
</center>
<!-- Bootstrap Modal Div -->
<!-- modals goes here-->
<!-- Main Container -->
<center>
<div id="section">
<div id = "l1" style="display:none" align="left">
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
</div><!-- closing blank div -->
<div id = "l2" style="display:none" align="left">
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
</div><!-- closing blank div -->
<!--- Code goes on -->
Add $(this).scrollTop($("#" + divName);
to your function.
var elem = $("#"+divname);
$('html, body').animate({
scrollTop: elem.offset().top;
}, 800);
Related
I compose a part of the code of my project here to report the problem I am facing. I need to keep the js function to work the links that I put in the top bar.
$(function () {
function setFlatTheme() {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
$(".rad-chk-pin input[type=checkbox]").prop("checked", true);
}
setFlatTheme();
$(document).on("click", function (e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
});
.links > li {
list-style: none;
position: relative;
margin: 10px;
display: inline-block;
}
.rad-dropmenu-item.active {
display: block;
-webkit-animation: flipInX 1s ease;
}
.rad-notification-body {
color: black;
vertical-align: middle;
margin-left: 30px;
}
.rad-logo-container {
width: 225px;
text-align: center;
height: 50px;
float: left;
transition: all 0.2s ease-in-out;
}
.rad-menu-item {
position: relative;
padding: 0 5px;
line-height: 30px;
height: 30px;
color: #89949B;
z-index: 5;
display: inline-block;
}
.rad-dropmenu-item {
position: absolute;
right: -6px;
top: 45px;
min-width: 250px;
background: white;
border: 1px solid #BDBDBD;
border-top: 5px solid #515d6e;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: none;
}
.rad-chk-pin span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
}
.rad-chk-pin span:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.2s ease;
}
.rad-chk-pin input {
display: none;
}
.rad-chk-pin input:checked + span {
background: #23AE89;
}
.rad-chk-pin input:checked + span:after {
left: 19px;
}
.rad-color-swatch {
display: table;
width: 90px;
height: 25px;
border-radius: 4px;
}
.rad-color-swatch .colors {
width: 25px;
height: 25px;
display: table-cell;
cursor: pointer;
}
.rad-color-swatch .colors input[type=radio] {
display: none;
}
.rad-color-swatch .colors:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.rad-color-swatch .colors:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.rad-sidebar.rad-nav-min {
width: 65px !important;
}
#media screen and (max-width: 850px) {
.rad-navigation {
height: 100px;
}
.rad-logo-container.rad-nav-min + .rad-logo-hidden {
display: none;
}
.rad-logo-container {
display: block;
float: none;
width: 100%;
border-bottom: 1px solid #F2F2F2;
}
.rad-top-nav-container {
display: block;
float: none;
height: 50px;
background: white;
}
.rad-sidebar.rad-nav-min {
transform: translate3d(-200px, 0, 0);
}
}
.flat-theme .rad-navigation .rad-top-nav-container .links > li > a {
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display: inline-block;
line-height: 32px;
}
.rad-bg-purple {
background: rebeccapurple;
}
.rad-bg-twitter {
background: #55acee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header">Definições</li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<form class="steps" id="inscricao" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<label for="validade" Style="margin-top: 10%;">Data de Validade </label>
<input id="validade" name="validade" type="date" >
</form>
</main>
</body>
But when you put this function, you stop opening the calendar in the input with the date type. If you remove the function, the calendar of the input already works. But when I remove the function, I’m unable to close the links on the top bar.
Can you help solve this problem?
You can shift the preventDefault() inside the if condition. So that the click default action is prevented only if the menu is opened. As per your current code, what happens is that It is capturing all click events on document and then preventing the event trigger always. So the datepicker is not able to catch the click event on calender and the calender never opens. With the following modification, now the click event will only get prevented when the menu is open.
$(function () {
$(document).on("click", function (e) {
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
e.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header">Definições</li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
<li>
<a href="#" class="inbox">
<i class="fa fa-power-off">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">Terminar Sessão</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<div class="hs_firstname field hs-form-field">
<label for="validade">Data de Validade <span style="color: red;">*</span></label>
<input id="validade" name="validade" required="required" type="date" value="<?php echo $validade; ?>" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</main>
</body>
$(document).on("click", function (e) {
e.preventDefault(); //<-- THIS HERE
When you click anywhere on the document, that click will be caught and the default action (like opening the date picker) will be prevented.
I suggest that instead of calling the .on() function on the entire document you limit it only to the part where your links are i.e.
$(".rad-navigation").on("click", ....
(this selects the .rad-navigation class)
I'm working on a PHP admin management page with CRUD. In this page we want to add a vehicle and to edit data which is present in a SQL record table by using a modal box which contains a form to insert and update data. But I have a problem:
The modal box didn't display. But I've tried to substitute it with a pure HTML and CSS modal box that works.
The pure modal box works perfectly, but in the edit column of the table only the first row can display an edit modal all, the other row didn't show a modal.
Complete page code:
<?php
require_once '../inc/function.php';
adac();
require_once '../inc/db.php';
if(!empty($_POST)){
$requ = $pdo->prepare('INSERT INTO `vehicules`(`marques`, `modele`, `annee`, `proprio`, `imma`) VALUES (?, ?, ?, ?, ?)');
$rl= $requ->execute([$_POST['mq'], $_POST['ml'], $_POST['an'], $_POST['pro'], $_POST['im']]);
if($rl){
$_SESSION['flash']['success'] = "Informations enregistrées!";
}else{
$_SESSION['flash']['danger'] = "Echec!";
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<script src="../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>LeLoux</title>
<link rel="stylesheet" href="../bootstrap-4.3.1-dist\css\bootstrap.min.css">
<style>
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
}
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.o{
margin: 10px; }
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: light;
text-align: center;
}
.lk{
width: 135px;
height: 40px;
border: 1.6px solid grey;
border-radius: 5px;
margin: 10px;
display: inline-block;
}
.po{
width: 34px;
height: 34px;
background: transparent;
float: left;
margin: 1px;
cursor: pointer;
}
.poa{
text-align: center;
margin: 5px;
text-decoration: none;
}
.nav-item{
width: 17%;
text-align: center;
margin:5px;
}
.bob{
width: 720px;
}
.mo{
margin: 5px;
border: 1px solid transparent;
width: 1100px;
height: auto;
}
.fo{
display: inline-block;
}
a {
text-decoration: none;
color: black;
}
a:hover{
color: grey;
}
.co{
max-height:860px;
height:460px;/*pour IE qui comprend rien, et qui ne reconnait pas min-height, mais qui comprend mal height*/
max-width:1100px;
width:980px;/*pour IE qui comprend rien*/
overflow:auto;/*pour activer les scrollbarres*/
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
}
/* The Close Button */
.close {
color: #fefefe;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.modal-header{
background-color: #5e5e90;
color: #fff;
margin-top: -20%;
width: 110%;
height: 15%;
padding: 16px;
margin-left: -19px;
}
.btnq{
background-color: #5e5e90;
color: #fff;
}
.btnp{
background-color:#fff;
color:#5e5e90;
border: 2px solid #5e5e90;
font-weight: bolder;
}
.nu{
text-transform: uppercase;
}
</style>
</head>
<body class="bg-light">
<!--################## add modal ###############################-->
<!-- Modal -->
<div class="modal fade" id="eModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ajouter un vehicule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<table cellspacing="3"cellpadding ="6">
<tr>
<td><b>Marque</b><br>
<input type="text" class="form-control nu" value="" name="mq" id="mq">
</td>
<td><b>Modèle</b><br>
<input type="text" class="form-control" name="ml" id="ml">
</td>
</tr>
<tr>
<td><b>Année</b><br>
<input type="text" class="form-control" name="an" id="an">
</td>
<td><b>Transmission</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
<tr>
<td>
<b>N de chassis</b><br>
<input type="text" class="form-control" id="">
</td>
<td>
<b>Immatriculation</b><br>
<input type="text" class="form-control" name="im" id="im">
</td>
</tr>
<tr>
<td><b>Carburant</b><br>
<input type="text" class="form-control" id="">
</td>
<td><b>Couleur</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
<tr>
<td>
<b>Propriétaire</b><br>
<input type="text" class="form-control" name="pro" id="pro" >
</td>
<td>
<b>Contact</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="reset" class="btn btnp" data-dismiss="modal">Annuler</button>
<button type="submit" class="btn btnq">Enregistrer</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--################## edit modal ###############################-->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modifier un vehicule</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<table cellspacing="3"cellpadding ="6">
<tr>
<td><b>Marque</b><br>
<input type="text" class="form-control nu" value="" name="mq" id="mq">
</td>
<td><b>Modèle</b><br>
<input type="text" class="form-control" name="ml" id="ml">
</td>
</tr>
<tr>
<td><b>Année</b><br>
<input type="text" class="form-control" name="an" id="an">
</td>
<td><b>Transmission</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
<tr>
<td>
<b>N de chassis</b><br>
<input type="text" class="form-control" id="">
</td>
<td>
<b>Immatriculation</b><br>
<input type="text" class="form-control" name="im" id="im">
</td>
</tr>
<tr>
<td><b>Carburant</b><br>
<input type="text" class="form-control" id="">
</td>
<td><b>Couleur</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
<tr>
<td>
<b>Propriétaire</b><br>
<input type="text" class="form-control" name="pro" id="pro" >
</td>
<td>
<b>Contact</b><br>
<input type="text" class="form-control" id="">
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="reset" class="btn btnp" data-dismiss="modal">Annuler</button>
<button type="submit" class="btn btnq">Enregistrer</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="o"><h3 class="font-weight-bolder">LeLoux</h3> </div>
<div class="container bob">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item shadow-sm">
<a class="nav-link active" data-toggle="tab" href="advehi.php">Vehicules</a>
</li>
<li class="nav-item shadow-sm">
<a class="nav-link" data-toggle="tab" href="adrepa.php">Reparateurs</a>
</li>
<li class="nav-item shadow-sm">
<a class="nav-link" data-toggle="tab" href="adinter.php">Interventions</a>
</li>
<li class="nav-item shadow-sm">
<a class="nav-link" data-toggle="tab" href="adfor.php">Forfaits</a>
</li>
<li class="nav-item shadow-sm">
<a class="nav-link" data-toggle="tab" href="adfac.php">Facturations</a>
</li>
</ul>
</div>
<center><div class="tab-content mo">
<div class="container shadow tab-pane fade show active "><br>
<div class="co">
<table class="table">
<thead>
<tr>
<th scope="col">Marques</th>
<th scope="col">Modèle</th>
<th scope="col">Année</th>
<th scope="col"><div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<b> Propriétaire</b>
</button>
</th>
<th scope="col">Immatriculation</th>
<th scope="col"><div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="../im/settings.png" class="po">
</button>
</th>
</tr>
</thead>
<tbody>
<?php
$req = $pdo->prepare('SELECT DISTINCT * FROM vehicules');
$req->execute();
$user = $req->fetchAll();
foreach ($user as $row) { ?>
<?= "<tr><th scope='row'>".$row['marques']."</th><td>".$row['modele']."</td><td>".$row['annee']."</td><td>".$row['proprio']."</td><td>".$row['imma']."</td><td><img src='../im/pencil.png' class='po' id='nie' data-toggle='modal' data-target='#exampleModal'></td></tr>"; ?>
<?php } ?>
</tbody>
</table>
</div>
</div></center>
<div class="footer">
<!-- Button trigger modal -->
<button type="button" class="lk float-left" data-toggle="modal" data-target="#eModal">
<img src="../im/add.png" class="po"> <p class="poa">Ajouter</p>
</button>
<img src="../im/search.png" class="po"> <p class="poa">Rechercher</p></div>
<div class="lk float-left"><img src="../im/opera.png" class="po"> <p class="poa">Details</p></div>
<div class="lk float-right"><img src="../im/close.png" class="po"> <p class="poa">Fermer</p></div>
</div>
</body>
</html>
pure html css and js modal:
html:
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
css:
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
js:
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Got a problem here.
I have a modal and when i open it using my code, my url extension extends like having this #mymodalid .
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
if ($('#modal1 :checkbox:checked').length > 1) {
$('input[name=txt1]').val('multiple');
} else {
$('input[name=txt1]').val($('#modal1 :checkbox:checked').prev('label').text());
}
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
What I need to do is that:
Show the modal as it needs on my program.
Checked some checkbox
Close the modal but on the url, #mymodalid should be remove once close.
Even if i closed the modal, what i was checked should be retain
I need to remove #mymodalid because when i redirected to the page itself upon submission, the modal will popup because of that #
Anyone, please help me.
Add a callback to your hide() functions:
$('#modal1').hide(400, removeHashFromUrl());
function removeHashFromUrl()
{
window.location.hash = '';
}
Or you could just just inline the callback, but it's obviously reusable in a function:
$('#modal1').hide(400, function(){window.location.hash = '';});
PS: 400 is the default speed for jQuery's hide().
I have a CLEAR button. The aim of that CLEAR button is that when a user clicks the button, all selected checkbox values are removed. Thats it. Now somehow I managed to get a checkbox with the CLEAR button (seemed for me the only way), and also upon clicking then all checkbox values are selected and when clicking again all checkbox values are removed. Is it possible to get only the button and then just one click for just removal of selected checkboxes? My current code only works for the first filter-menu BRAND, but for the others it does not work, I cant figure out why.
Here my BOOTPLY - BOOTPLY
$("#clear").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
/* CSS used here will be applied after bootstrap.css */
/* FILTER_datafeed */
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
/* Filter-menu APPLY and CLEAR */
.select_filter > .multi_select_container > .div_form > .btn_apply {
border-right: 1px solid #e6e6e6;
box-sizing: border-box;
display: inline-block;
float: left;
padding: 10px 16px 10px 17px;
text-align: center;
width: 50%;
}
.select_filter > .multi_select_container > .div_form > .btn_clear.disabled, .select_filter > .multi_select_container > .div_form > .btn_clear[disabled], .select_filter > .multi_select_container > .div_form > .btn_clear[disabled]:hover {
background-color: transparent;
color: #ccc;
}
.select_filter > .multi_select_container > .div_form > .btn_clear {
box-sizing: border-box;
display: inline-block;
float: right;
padding: 10px 17px;
text-align: center;
width: 50%;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
width:100%;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
/* Type-ahead plugin */
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
/* Type-ahead plugin END */
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">Brand</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Primary buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Colour</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Eins</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Zwei
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Drei</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Vier</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fünf</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sechs
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Info buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-info" type="button">Merchant</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> First value</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Second option
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Third choice</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fourth alternative</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifth decision</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sixt focus
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-danger" type="button">Price</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Value-1</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-2
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-3</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-4</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-5</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-6
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
Man you are using the same ID four times. The ID selector always return a single element, in your case you are only attaching the event to the first input with the id #clear so it will be working ONLY on the first clear button. Use a class instead and somehow scope the changes to affect only the related checkboxes.
Change the IDs to classes and use the following:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', $(this).prop("checked"));
});
Working example
To make sure the clear button always clear the selection, you should always set the property checked to false like this:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', false);
});
Updated example
It's only working for the first menu because an id is suppose to be unique. You are actually only applying an event listener to the first #clear element. In addition, you are toggling the checked property of all the checkboxes, not just the checkboxes in that dropdown menu.
Change the id attribute to a class, in this case, .clear, and when the change event is fired, select the closest .dropdown-menu element and toggle all the descendant checkbox elements:
Updated Example
$(".clear").on('change', function () {
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', this.checked);
});
You could also just remove the checkbox and attach a click event to the .btn_clear element. You will also need to stop the event propagation in order to prevent the dropdown element from closing:
Updated Example
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
Hi I'm designing a website with JQuery for the first time. I am using Twitter-Bootstrap for a dropdown login box and I can't get the JQuery script right to make the box stay open when you click on the text area. I've tried everything and I am familiar with java script. I placed the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"</script>
at the top of the header as well as before the closing body bracket, and the following in front of the closing body tag as well...
<script>$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});</script>
here is the HTML
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li id="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 15px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div></li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>
and the CSS
#top-bar {
width: 100%;
min-height: 35px;
max-height: 35px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#top-buttons{
line-height:10px !important;
}
#top-bar a {
color: #74777c;
}
#top-bar a:hover,
#top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#dashboard-top-bar {
width: 100%;
min-height: 45px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#dashboard-top-bar a {
color: #74777c;
}
#dashboard-top-bar a:hover,
#dashboard-top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#top-info,
#top-buttons {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#top-info,
#top-buttons li {
display: inline-block;
margin-left: 25px;
}
#top-buttons {
float: right;
}
#top-buttons .divider {
position: relative;
border-left: 1px solid #74777c;
width: 1px;
height: 22px;
overflow: hidden;
margin-bottom: -6px;
}
You don't need any jquery to do this. include bootstrap.js and bootstrap.css then
Try this code.
Ex:- JS FIDDLE
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li class="dropdown">
<i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a>
<ul id="login-dp" class="dropdown-menu">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</ul>
</li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>