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)
Related
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
$(this).next().slideToggle().addClass('expanded').prev('h4').removeClass('icon-rotate');
$(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});
});
/* Accordion - Left Panel */
/* line 4, ../sass/my-request.scss */
.filter-panel .accordion-header {
background: #506070;
color: #FFF;
font-size: 16px;
padding: 15px;
font-weight: 600;
}
/* line 11, ../sass/my-request.scss */
.filter-panel .accordion-toggle-first {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #333;
background: #F6F6F6;
padding: 15px 20px;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 22, ../sass/my-request.scss */
.filter-panel .accordion-toggle {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #333;
background: #F6F6F6;
padding: 11px 20px;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 33, ../sass/my-request.scss */
.filter-panel .accordion-content {
display: none;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 39, ../sass/my-request.scss */
.filter-panel .accordion-content ul li {
padding: 10px 30px;
}
/* line 42, ../sass/my-request.scss */
.filter-panel .accordion-content.default {
display: block;
}
/* line 45, ../sass/my-request.scss */
.icon-rotate span {
transform: rotate(90deg);
transition: .25s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion" class="filter-panel">
<div class="accordion-header">Refine by:</div>
<div class="accordion-toggle-first">All</div>
<h4 class="accordion-toggle">Active <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content default">
<ul>
<li>
<div class="align-left">Pending DSL (12)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending ECR (21)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending OSI (10)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending OWS (6)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending Requestor (10)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
</ul>
</div>
<h4 class="accordion-toggle">Closed <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Cancelled (21)</li>
<li>Rejected (14)</li>
<li>Completed (21)</li>
</ul>
</div>
<h4 class="accordion-toggle">Type <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Alias (13)</li>
<li>Sites (15)</li>
<li>Domain (19)</li>
<li>Social Media (9)</li>
<li>Archive/Back-up (21)</li>
<li>Mobile App (6)</li>
</ul>
</div>
<h4 class="accordion-toggle">VPU <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Africa (23)</li>
<li>East Asia Pacific (15)</li>
<li>South Asia (19)</li>
<li>Latin America (9)</li>
</ul>
</div>
<h4 class="accordion-toggle">Date <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
</div>
</div>
I am using the following script
http://uniondesign.ca/wp-content/uploads/2012/09/accordion-demo.html
and adding arrow icon if any accordion is open n changing based on accordion open n close but I am stuck once all the accordion is closed my icon is not rotating.
Also attached the screenshot for more details
Error Screenshot
I think you could use toggleClass in this situation. Here is what I changed to get the demo to work.
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
$(this).toggleClass('icon-rotate').next().slideToggle().addClass('expanded');
$(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});
});
Fiddle
I made a html page using some simple bootstrap and have it linked to a database using some php. I want the page to be simple at the beginning, only 2 sections, and as you complete the inputs and press next, another section becomes visible. I tried doing this with a toggle visibility in javascript but for some reason it either doesn't switch between the display: none or block, doesn't take on the inputs or just simply does nothing.
Below is 2 sections, if anyone can explain why and how this does not work.
/*Contect style*/
input,
textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/*sections*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
display: none;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
display: none;
}
.reservation-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
display: none;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: left;
background: #fff;
}
<?php $servername="localhost" ; $username="root" ; $password="" ; // Create connection $conn=n ew mysqli($servername, $username, $password); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $conn->select_db("airports"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="scrolling-nav.css" rel="stylesheet" type="text/css" />
<link href="contactStyle.css" rel="stylesheet" type="text/css" />
<script src="paymentFormJS.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title>Licenta - Rezervare bilete de avion</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Home</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#reservation">Reservation</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>-->
<!-- Intro Section -->
<section id="intro" class="intro-section section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div style="height: 50px"></div>
<h1>Tells us what you want!</h1>
<div style="height: 100px;"></div>
<form role="form">
<div class="form-group col-xs-6">
<h3><label for="departure">Where will you be leaving from</label></h3>
<input class="form-control input-lg" id="departure" type="text" placeholder="Madrid, Spain" name="source">
</div>
<div class="form-group col-xs-6">
<h3><label for="arrival">Where you will arrive to</label></h3>
<input class="form-control input-lg" id="arrival" type="text" placeholder="Bucharest, Romania" name="destination">
</div>
<div class="form-group col-xs-4" style="margin-left: 33%; margin-top: 100px;">
<button type="submit" class="btn btn-info btn-lg btn-block" name="city_search" id="aboutBtn" onclick="toggle_visibility('about')">
<a class="page-scroll-about" href="#about" style="text-decoration: none; color: #ffffff;"> Find it </a>
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container" style="">
<div class="row">
<div class="col-lg-12">
<h1>Pick a flight</h1>
<div style="height: 50px;"></div>
<form role="form">
<?php if(isset($_GET[ "city_search"])) { $src=$ _GET[ "source"]; $dest=$ _GET[ "destination"]; $query_txt="SELECT * FROM flights WHERE source_city LIKE '%{$src}%' AND destination_city LIKE '%{$dest}%'" ; if($qu=$ conn->query($query_txt)) { while($row = $qu->fetch_row()) { echo "
<div class=\ "form-group col-xs-12\" style=\ "border: 1px solid black; height: auto\">"; echo "
<div class=\ " col-lg-6\" style=\ "border-right: 1px solid black; height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo "
<p style=\ " margin-top: 25px;\">{$row[1]}</p>"; echo "</div>"; echo "
<div class=\ " col-lg-6\" style=\ " height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo "
<p style=\ " margin-top: 25px;\">{$row[2]}</p>"; echo "</div>"; echo "
<button type=\ "submit\" class=\ "btn btn-primary btn-sm \" name=\ "flight_id\" value=\ "{$row[0]}\" id=\ "submitBtn{$row[0]}\" style=\ " margin-top: 15px; margin-bottom: 15px;\" onclick=\
"toggle_visibility('services')\"><a class=\ "page-scroll\" href=\ "#services\" style=\ "text-decoration: none; color: #ffffff;\">Pick a flight</a>
</button>"; echo "</div>"; } } } ?>
</form>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Tell us about you</h1>
<form class="form-horizontal col-lg-6" role="form" style="margin-left: 23%;">
<div class="form-group">
<label for="inputdefault">Name</label>
<input class="form-control" id="inputdefault" type="text" placeholder="John" style="text-align: center;" name="client_name">
</div>
<div class="form-group">
<label for="inputdefault">Surname</label>
<input class="form-control" id="inputdefault" type="text" placeholder="Doe" style="text-align: center;" name="client_surname">
</div>
<div class="form-group">
<label for="inputdefault">ID</label>
<input class="form-control" id="inputdefault" type="text" placeholder="1770423112233" style="text-align: center;" name="client_id">
</div>
<div class="form-group">
<label for="inputdefault">Age</label>
<input class="form-control" id="inputdefault" type="text" placeholder="27" style="text-align: center;" name="client_age">
</div>
<div class="form-group">
<label for="inputdefault">Address</label>
<input class="form-control" id="inputdefault" type="text" placeholder="Bd. Unirii nr. 144" style="text-align: center;" name="client_address">
</div>
<div class="form-group col-xs-3" style="margin-left: 80%; margin-top: 15px;">
<button type="submit" class="btn btn-info btn-lg btn-block" name="client_flight_id" value="<?php
if(isset($_GET[" flight_id "]))
echo $_GET["flight_id "];
else
echo "nullb ";
?>" id="reservationBtn" onclick="toggle_visibility('reservation')">
<a class="page-scroll" href="#reservation" style="text-decoration: none; color: #ffffff;" onclick="toggle_visibility('reservation')"><span class="glyphicon glyphicon-search"></span> Neext </a>
</button>
<?php if(isset($_GET[ "client_flight_id"])) { $client_name=$ _GET[ "client_name"]; $client_surname=$ _GET[ "client_surname"]; $client_id=$ _GET[ "client_id"]; $client_age=$ _GET[ "client_age"]; $client_address=$ _GET[ "client_address"]; $client_flight_id=$
_GET[ "client_flight_id"]; $query_txt="INSERT INTO clients (name, surname, client_id, age, address, flight_id) VALUES (\" {$client_name}\ ",\"{$client_surname}\ ", {$client_id}, {$client_age}, \"{$client_address}\
", {$client_flight_id})"; $conn->query($query_txt); $client_db_id = $conn->insert_id; } ?>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
Thanks in advance to anyone who answers.
Just tested your code and moving the script in the bottom of the page seemed to fix the problem. If you are using Google Chrome always check your console (Ctrl + Shift + i) when you are messing with Javascript.
And Javascript that makes DOM manipulation should be loaded at the end of the page after all elements are loaded or using load event must in order to execute the code after the elements are loaded.
I took code for a dashboard we're building here; it's a free bootstrap dashboard template:
http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html
We like it a lot as it's simple and displays the kind of layout we need. Here's what I've done to edit the above so far, to suit our needs:
http://tumolo.co.uk/smartcm/pages/index.html
If you resize your browser, so that you're reducing the width, with the original template, once it gets to (I assume) xs or sm size, the sidebar menu neatly hides and the 3line button in the top right displays. You can tell I'm new to bootstrap!
If you resize my version, once it gets to (I assume) xs or sm size, the sidbar menu displays instead of hides, like it should in original template.
IF it helps, I noticed that as I was editing from template to my version, when I started removing containers from original template, the menu stopped hiding when resizing browser window.
As we want to use this dashboard on mobile phones, it's important for me to understand how to make this menu hidden, as soon as you browse to it, from a mobile device... hope you can help, thanks.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li>
<i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li>
<i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li>
<i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li>
<i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
You are missing <div class="collapse navbar-collapse" ></div>which surrounds the ul class.
Refer to the docs here > Bootstrap Navbar
/*!
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
background-color: #fff;
}
}
.navbar-static-top {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="index.html">
<img class="img-responsive" src="img/loginlogo.png">
</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li> <i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li> <i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li> <i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li> <i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li> <i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>
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>
I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.
skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.