Change the content of container with particular table with different button clicks - javascript

I am trying to change the tables or a div nested inside a jumbotron,whenever i click on a specific button it should replace the current table and again clicking on it should display the table the button associated.Tried many different examples,but none seem to work.
Sorry if posted some things in a wrong way.
What i saw(only some of them listed here):
http://jsfiddle.net/sU9Pf/
Replace Div Content onclick
JS Code:
$(window).load(function() {
$("#table_mb tr").click(function() $(this).addClass('selected').siblings().removeClass('selected');
var value = $(this).find('td:first').html();
//alert(value);
});
$('.ok').on('click', function(e) {
alert($("#table_mb tr.selected td:first").html());
});
});
$('#mb').on('click', function() {
if ($('#table_mb').css('display') != 'none') { $('#table_pr').html($('#static').html()).show().siblings('table_responsive').hide();
}else if ($('#table_pr').css('display') != 'none') {
$('#table_mb').show().siblings('table_responsive').hide();
}
});
***CSS Code***
body
{
font-family: 'Play', sans-serif;
background-image: url(/images/default.jpg);
background-position: right;
/*background: #1976D2;*/
}
.header
{
font-family: 'Play', sans-serif;
color: whitesmoke;
}
td
{
border: 1px #DDD solid;
padding: 5px;
cursor: pointer;
}
.selected {
background-color: #2196F3;
color: #FFF;
}
.a1
{
position: relative;
bottom: 48px;
}
.a2
{
position: relative;
bottom: 48px;
}
.a3
{
position: relative;
bottom: 48px;
}
.a4
{
position: relative;
bottom: 48px;
}
.a5
{
position: relative;
bottom: 48px;
}
.a6
{
position: relative;
bottom: 48px;
}
.demo
{
display: none;
}
.table_mb
{
display: inline-block;
}
HTML Code:
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="jumbotron">
<div class="btn-group" role="group">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-primary a1" id="mb">Motherboards</button>
<button type="button" class="btn btn-primary a2" id="pr">Processors</button>
<button type="button" class="btn btn-primary a3" id="rm">Ram</button>
<button type="button" class="btn btn-primary a4" id="cb">Cabinet</button>
<button type="button" class="btn btn-primary a5" id="hd">Hard Drives</button><button type="button" class="btn btn-primary a6" id="ps">Power Supplies</button>
</div>
</div>
<table class="table" id="table_mb">
<thead>
<tr>
<th>Serial NO</th>
<th>Model NO</th>
<th>Price</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Asus Rampage</td>
<td>5000</td>
</tr>
<tr>
<td>2</td>
<td>Asus Rampage VII</td>
<td>7000</td>
</tr>
<tr>
<td>3</td>
<td>Asus Rampage</td>
<td>9000</td>
</tr>
</table>
<div class="demo" id="table_pr">
This works</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>


Done using the Navs class from the bootstrap framework.
http://jsfiddle.net/Azhar786/d1k411pz/
<ul class="nav nav-pills nav-justified" role="tablist" id="tabs">
<li role="presentation" class="active" id="mb">Motherboards</li>
<li role="presentation" id="pr">Processors</li>
<li role="presentation" id="rm">Ram</li>
<li role="presentation" id="mr">Monitor</li>
<li role="presentation" id="hd">Hard Disk</li>
</ul>

Related

Bootstrap modal didn't display fix

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";
}
}

Angular Add button not working

I am implementing the form with add and remove fields using angularjs, running outside is working fine, but when I put it inside an div its not working only remove is working. Could you please suggest whats going wrong.
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2">
<div class="emp_details">
<h3><span>Anil Kumar K</span></h3>
<h3><span>IND1469</span></h3>
<hr></hr>
<h2><span>Manager</span></h2>
<h3><span>Vikram Ranade</span></h3>
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="card hovercard">
<div class="card-background">
<!-- <img class="card-bkimg" alt="" src="http://lorempixel.com/100/100/people/9/">
http://lorempixel.com/850/280/people/9/ -->
</div>
<!-- <div class="useravatar">
<img alt="" src="anil.png">
</div> -->
<div class="card-info"> <h1><span class="card-title">OBJECTIVES</span></h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2">
<div class="side_menu">
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">JOB</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Behaviour</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div ng-app="myapp" ng-controller="ListController">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Objective Type</th>
<th>Activity</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.fname" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.lname" required/></td>
<td>
<input type="email" class="form-control" ng-model="personalDetail.email" required/></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript file
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [
{
'fname':'Muhammed',
'lname':'Shanid',
'email':'shanid#shanid.com'
},
{
'fname':'John',
'lname':'Abraham',
'email':'john#john.com'
},
{
'fname':'Roy',
'lname':'Mathew',
'email':'roy#roy.com'
}];
$scope.addNew = function(personalDetails){
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
});
$scope.PD = {};
};
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function (personalDetails) {
personalDetails.selected = $scope.selectedAll;
});
};
}]);
CSS file
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat center center;
position: relative;
padding-top: 40px;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info h1{
background-color: rgba(255, 255, 255, 0.7);
overflow: hidden;
text-align: center;
padding: 10px;
font-weight: bold;
font-family: arial;
font-size: 83px;
margin: 450px 0px 27px 0px;
}
.card.hovercard .card-info .card-title {
background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
background-position: center -450px;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
.btn-primary{
margin-right: 10px;
}
.container{
margin: 20px 0;
}

Your add function is of the syntax
$scope.addNew = function(personalDetails) {
// Code
}
it takes up argument personalDetails. So in view when add function is called it should be passed as argument.
<form ng-submit="addNew(personalDetails)">
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.employeeCount = 4;
$scope.personalDetails = [{
'fname': 'Muhammed',
'lname': 'Shanid',
'email': 'shanid#shanid.com'
},
{
'fname': 'John',
'lname': 'Abraham',
'email': 'john#john.com'
},
{
'fname': 'Roy',
'lname': 'Mathew',
'email': 'roy#roy.com'
}
];
$scope.addNew = function(personalDetails) {
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
});
$scope.PD = {};
};
$scope.remove = function() {
var newDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected) {
if (!selected.selected) {
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function() {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function(personalDetails) {
personalDetails.selected = $scope.selectedAll;
});
};
}]);
x
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat center center;
position: relative;
padding-top: 40px;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info h1 {
background-color: rgba(255, 255, 255, 0.7);
overflow: hidden;
text-align: center;
padding: 10px;
font-weight: bold;
font-family: arial;
font-size: 83px;
margin: 450px 0px 27px 0px;
}
.card.hovercard .card-info .card-title {
background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
background-position: center -450px;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius: 0 !important;
}
.btn-primary {
margin-right: 10px;
}
.container {
margin: 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2">
<div class="emp_details">
<h3><span>Anil Kumar K</span></h3>
<h3><span>IND1469</span></h3>
<hr></hr>
<h2><span>Manager</span></h2>
<h3><span>Vikram Ranade</span></h3>
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="card hovercard">
<div class="card-background">
<!-- <img class="card-bkimg" alt="" src="http://lorempixel.com/100/100/people/9/">
http://lorempixel.com/850/280/people/9/ -->
</div>
<!-- <div class="useravatar">
<img alt="" src="anil.png">
</div> -->
<div class="card-info">
<h1><span class="card-title">OBJECTIVES</span></h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2">
<div class="side_menu">
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">JOB</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Behaviour</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div ng-app="myapp" ng-controller="ListController">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew(personalDetails)">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Objective Type</th>
<th>Activity</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected" /></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.fname" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.lname" required/></td>
<td>
<input type="email" class="form-control" ng-model="personalDetail.email" required/></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New" ng-disabled="personalDetails.length>employeeCount">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>

<form ng-submit="addNew()"> here you are not passing any anguments. but in your controller
$scope.addNew = function(personalDetails){
$scope.personalDetails.push({
'fname': personalDetails.fname,
'lname': personalDetails.lname,
'email': personalDetails.email,
});
$scope.PD = {};
};
its expected to get personalDetails so change in html like this
<form ng-submit="addNew(personalDetails)">

Set page to scroll to loaded div onclick

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);

css ul list multiple item alignment

I have a ul element that conatins multiple items in line. I put my list in 300px fixed panel.
<div class="panel panel-primary" style="width:300px">
<div class="panel-heading"> Menu Items</div>
<div class="panel-body">
<ul>
<li>
<div class="content">
<button class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-th" ></span>
</button>
A Long Menu Item Name
<div class="settings">
<div class="show-settings pull-rigth">
<div class="btn-group pull-right">
<button class="btn btn-xs btn-info">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-xs btn-info">
<span class="glyphicon glyphicon-eye-close"></span>
</button>
</div>
</div>
<button class="btn btn-xs btn-default pull-right">
<span class="glyphicon glyphicon-cog"></span>
</button>
</div>
</div>
</li>
</ul>
</div>
And my css settings is here
ul, li {
list-style: none; margin: 0; padding: 0;
}
ul { padding-left: 1em; }
li { padding-left: 0; }
.show-settings{
display: none;
}
.settings:hover .show-settings{
display : block;
}
.content{
position: relative;
padding: .4em .4em .4em 0.2em;
*padding: .4em;
margin: .5em 0;
background: #D9EDF7 ;
color: #444;
text-decoration: none;
border-radius: .3em;
}
Working code is here.
My settings class item is going out of blue content.
My settings button count may be 3 or 4. Is it possible to overflow to the menu item the text like this:
Or flowing new line in content.

Add display:inline to your settings class
.settings{
display:inline;
}
DEMO
UPDATE
You have a typo in writing a class below div.settings. It is as below:
<div class="show-settings pull-rigth">
<!--^^^^^-->
It should have been
<div class="show-settings pull-right">
May be its in fiddle but still a point to note.

I have modified your structure a bit. try the below code, you can even fine tune it.
Html
<div class="panel panel-primary" style="width:300px">
<div class="panel-heading"> Menu Items</div>
<div class="panel-body">
<ul>
<li>
<div class="content">
<button class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-th" ></span>
</button>
<span class="title">A Long Menu Item Name A Long Menu Item Name</span>
<div class="settings">
<button class="btn btn-xs btn-default pull-right">
<span class="glyphicon glyphicon-cog"></span>
</button>
<div class="show-settings pull-rigth">
<button class="btn btn-xs btn-info pull-right">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<button class="btn btn-xs btn-info pull-right">
<span class="glyphicon glyphicon-eye-close"></span>
</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
CSS
ul, li {
list-style: none; margin: 0; padding: 0;
}
ul { padding-left: 1em; }
li { padding-left: 0; }
.show-settings{
display: none;
}
.settings{
position: absolute;
top: 8px;
right: 9px;
width: 75px;
}
.settings:hover .show-settings{
display : block;
}
.content{
position: relative;
padding: .4em .4em .4em 0.2em;
*padding: .4em;
margin: .5em 0;
background: #D9EDF7 ;
color: #444;
text-decoration: none;
border-radius: .3em;
position: relative;
}
span.title {
display: inline-block;
width: 70%;
padding-left: 3px;
}
.btn-default{
vertical-align: top;
}

Try using this.
in css -
.settings { display: inline-block; white-space: nowrap; vertical-align: middle; }
.menu-label { display: inline-block; vertical-align: middle; }
in html -
change this
</button>
A Long Menu Item Name
<div class="settings">
to this
</button>
<span class="menu-label">A Long Menu Item Name</span>
<div class="settings">

You can use float:right; margin-top:3px; to the .settings class.

bootstrap modal overflow issue

I have a Bootstrap modal with a button. When I click the button it shows a right under the button. The contains a ul list with anchor links in it.
The problem is that if I don't set the height to a higher value then that inside the modal the last items is not visislbe because the div is outside the modal.
I don't want to use overflow because i don't want it to scroll. The inside the modal is a dropdown menu which i made my self.
The CSS for the :
.wrapper-for-dropdown {
width: 300px;
z-index:9999;
color: #333;
background-color: #fff;
position: absolute;
display: none;
border: solid;
border-width: 1px;
border-radius: 4px;
border-color: #ccc;
z-index:32432423432;
overflow-wrap:normal;
}
.wrapper-for-dropdown:hover {
border: solid;
border-width: 1px;
border-color: #ccc;
}
.dropdown-ul {
list-style-type: none;
-moz-st color: white;
text-align: left;
padding-left: 10px;
overflow-y: visible;
}
.dropdown-ul li {
float: left;
display: inline-block;
height: auto;
width: 250px;
}
.dropdown-ul li:hover {
}
.dropdown-ul li a {
color: #38546d;
display: block;
float: left;
}
.dropdown-ul li a:hover {
color: black;
display: block;
float: left;
}
HTML:
<!-- Modal -->
<div class="modal" id="modalCreateNewManualResync" tabindex="-1" role="dialog" aria-labelledby="modalCreateNewManualResyncLabel" aria-hidden="true">
<div class="modal-dialog" id="createNewSyncDialog">
<div class="modal-content" style="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalCreateNewManualResyncLabel">Create New Resync
</h4>
</div>
<!-- Model Body -->
<div class="modal-body" >
<div class="container-fluid">
<div class="modal-content-div">
<label>Company:</label>
<label>Sync Reason:</label>
</div>
<div class="modal-content-div-data">
<button class="btn btn-default" id="buttonCompaniesList" onclick="listCompaniesToogle();" type="button" style="display: inline-block; width: 180px;">Select Company<span id="spanArrowIndicator" style="margin-left: 10px; margin-right: 10px;" class="caret"></span></button>
<div id="wraptest" class="wrapper-for-dropdown">
<ul id="ulcompanies" class="dropdown-ul">
</ul>
</div>
<input type="text" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close<span style="margin-left: 10px;" class="glyphicon glyphicon-remove"></span></button>
<button type="button" class="btn btn-default">Create<span style="margin-left: 10px;" class="glyphicon glyphicon-ok"></span></button>
</div>
</div>
</div>
<!--End Of Modal Body -->
</div>
</div>
![Current example of the GUI. Italy and International is not clickable.][1]
[1]Italy and International is not clickable: http://i.stack.imgur.com/uVcLj.jpg

Adding
.modal {overflow: visible}
Solved the issue. Do not add anything else to .model-body.
Also removing some other style on my own div solved the issue. Setting the height to auto as well.
Thanks.

Categories