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>
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";
}
}
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);
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 have created a tree view by using li and ul format (not using TreeView control). I want to expand all nodes using JavaScript. Please help me.
My CSS for tree view is as below:
#sitemap, #sitemap ul, #sitemap li
{
margin: 0;
padding: 0;
list-style: none;
}
#sitemap
{
background: url(../content/images/line1.gif) repeat-y;
}
#sitemap li
{
line-height: 20px;
margin-top: 1px;
position: relative;
width: 100%;
}
/* IE leaves a blank space where span is added so this is to avoid that */#sitemap li
{
float: left;
display: inline;
}
#sitemap li a
{
padding-left: 3px;
}
#sitemap li a.but
{
padding: 1px;
border: solid 1px #c0c0c0;
color: #080808;
font-size: 7pt;
margin: 2px;
font-weight: normal;
background-color: #efefef;
}
#sitemap li a.butGroup
{
padding: 2px;
border: solid 1px #888;
color: #080808;
font-size: 7pt;
margin: 2px;
background-color: #efefef;
font-weight: bold;
}
#sitemap li span
{
float: left;
position: absolute;
top: 5px;
left: 5px;
width: 13px;
height: 13px;
cursor: auto;
font-size: 0;
}
#sitemap li span, #sitemap li span.collapsed
{
background: url(../content/images/collapsed.gif) no-repeat 0 0;
}
#sitemap li span.expanded
{
background: url(../content/images/expanded.gif) no-repeat 0 0;
}
#sitemap li span.dot
{
background: url(../content/images/line2.gif) no-repeat -5px -5px;
}
#sitemap li ul
{
margin-left: 25px;
display: block;
clear: both;
background: #fff url(../content/images/line1.gif) repeat-y;
}
#sitemap li li
{
background: url(../content/images/line2.gif) no-repeat 0 0;
}
#sitemap, #sitemap ul
{
min-height: 1%;
}
#sitemap:after, #sitemap ul:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#sitemap, #sitemap ul
{
display: block;
}
#sitemap ul
{
display: none;
}
#sitemap li div.butHolder
{
clear: both;
margin: 10px 3px 3px 30px;
}
#sitemap li input[type=text]
{
width: 25px;
padding: 2px;
height: 14px;
border: solid 1px #888;
text-align: center;
}
div.LinkGroup
{
width: 95%;
margin-left: 20px;
text-align: left;
border: solid 1px #efefef;
background-color: #fcfcfc;
}
div.LinkGroup div
{
padding: 2px 1px 2px 1px;
font-size: 8pt;
}
div.TR
{
width: 100%;
margin-left: 20px;
text-align: left;
clear: both;
}
div.TR div.TH, div.TR div.TD
{
float: none;
min-width: 50px;
white-space: nowrap;
padding: 3px;
}
JavaScript:
$(document).ready
(function () {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
$(this).toggleClass("expanded");
if ($(this).find("ul:first").length > 0) {
$(this).find("ul:first").css("display", "none");
$span.attr("class", "collapsed");
//
//if more link clicks of "Manage Links" page functionality than show it expanded.
//or delete the element show parent menu expanded
//
if (jQuery.trim($(this).find("ul:first").css("content")).indexOf('expanded') > -1) {
$span.removeAttr("class");
$span.attr("class", "expanded");
$(this).find("ul:first").css("display", "block");
}
$span.click(function () {
$(this).toggleClass("expanded");
$(this).parent("li").find("ul:first").slideToggle("normal");
}
)
$(this).append($span);
}
else {
$span.removeAttr("class");
$span.attr("class", "dot");
$(this).append($span);
}
}
)
}
}
)
////HtML STructure
<ul id="sitemap">
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_1' class='module' moduleid='1' />
Start Configurations</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_1' class='child' id='menu_1' moduleid='1' parent='0'
checked='checked' />
Customer Registration</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_9' class='child' id='menu_9' moduleid='1' parent='0'
checked='checked' />
Configure Project</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_10' class='child' id='menu_10' moduleid='1' parent='9'
checked='checked' />
Search Customer</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_12' class='child' id='menu_12' moduleid='1' parent='9'
checked='checked' />
Test</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_13' class='child' id='menu_13' moduleid='1' parent='12'
checked='checked' />
Test_Child</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_14' class='child' id='menu_14' moduleid='1' parent='12'
checked='checked' />
Test_Child2</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_2' class='module' moduleid='2' />
Edit Configuration</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_3' class='child' id='menu_3' moduleid='2' parent='0'
checked='checked' />
Edit Configuration</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_11' class='child' id='menu_11' moduleid='2' parent='0'
checked='checked' />
Edit Customer Deatils</div>
</div>
</li>
</ul>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_3' class='module' moduleid='3' />
Administration</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_4' class='child' id='menu_4' moduleid='3' parent='0'
checked='checked' />
Project Stage</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_5' class='child' id='menu_5' moduleid='3' parent='0'
checked='checked' />
Module Management</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_6' class='child' id='menu_6' moduleid='3' parent='0'
checked='checked' />
Question Management</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_7' class='child' id='menu_7' moduleid='3' parent='0'
checked='checked' />
Access Group</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_8' class='child' id='menu_8' moduleid='3' parent='0'
checked='checked' />
User Creation</div>
</div>
</li>
</ul>
</li>
</ul>
//Expanding
<script type="text/javascript">
function fun1() {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
//$(this).toggleClass("expanded");
if ($(this).find("ul:first").length > 0) {
$span.removeAttr("class");
$span.attr("class", "expanded");
$(this).find("ul:first").css("display", "block");
$(this).append($span);
}
}
)
}
}
</script>
//Collapsing
<script type="text/javascript">
function fun() {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
if ($(this).find("ul:first").length > 0) {
$(this).find("ul:first").css("display", "none");
$span.attr("class", "collapsed");
$(this).append($span);
}
}
)
}
}
</script>