Angular Add button not working - javascript

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

Related

My page is not scrolling even after applying all the methods I could find on web

I want to scroll to the bottom of the page when I click contacts on the navbar
I have tried
1. windows.scrollTo()
2. windows.scrollBy()
3. element.scrollIntoView();
4. And all other methods that I could find
but the page does not scroll.
Here is my fiddle
https://jsfiddle.net/bvuayks8/1/
I have kept some content on the page so that it can be scrolled.
Here is the code
// ------------------------------Getting the ids-----------------------------------------
var questionid = document.getElementById('question');
var contact = document.getElementById('contact');
// window.scrollTo(0,2000);
// ------------------------------Clear the browser storage--------------------------------
//localStorage.clear();
//sessionStorage.clear();
questionid.focus();
contact.addEventListener('click', function() {
window.scrollTo(0, 1500);
//alert('asdf');
})
body {
background-image: url(../images/images/documentbackground.jpg);
background-repeat: no-repeat;
background-size: cover;
}
/*-------------------------------------Main head------------------------------------------- */
.jumbotron {
margin: 0;
background: url(../images/a2.jpg) no-repeat;
}
.mainHead a {
display: block;
width: 7%;
color: white;
background-color: #3BF44F;
text-decoration: none;
transition: background-color .7s;
}
.mainHead a:hover {
background-color: #08B81B;
}
/*-----------------------------------------------------NavBar--------------------------------------*/
.navbar {}
ul {
list-style: none;
}
li {
float: left;
}
.navbar a {
color: white;
padding: 0 75px;
text-decoration: none;
transition: background-color 0.7s;
}
.navbar a:hover {
background-color: #0bbc08;
color: white;
}
/*----------------------------------------------------------Login------------------------------------*/
.login {
height: 200px;
background: url(../images/images/back1.jpg);
background-size: cover;
background-position: 0 -45%;
/*transition: all 1s;*/
}
/*.login:hover{
transition: all 1s;
background-size: 150%;
}*/
.login h3 {
text-align: center;
color: white;
margin-top: 2%;
}
.login .question {
position: relative;
width: 50%;
margin: 0 auto;
}
.login .question input {
width: 100%;
}
.login .button {
position: absolute;
left: 50%;
}
/*----------------------------------------Menu--------------------------------------------------*/
.menu {
overflow: hidden;
text-align: center;
background: url(../images/how.jpg);
}
.menu button {
transition: all .5s;
}
.menu .graduated:hover {
transform: scale(1.1);
}
.menu .interview:hover {
transform: scale(1.1);
}
.menu .tenthpass:hover {
transform: scale(1.1);
}
.menu .questions:hover {
transform: scale(1.1);
}
.menu .twpass:hover {
transform: scale(1.1);
}
.menu .register:hover {
transform: scale(1.1);
}
/*-------------------------------------------CareerCounsellor---------------------------------------*/
.careerCounselor {
text-align: center;
background: url(../images/a6.jpg);
background-size: cover;
}
.careerCounselor .heading,
.careerCounselor .examples {
color: white;
font-size: 30px;
}
.careerCounselor .row1 img {
width: 55%;
height: 25%;
margin-bottom: 3px;
border-radius: 3px;
}
.careerCounselor .name {
color: white;
}
.careerCounselor .post {
color: #cbbf5a;
}
.careerCounselor .exp {
color: white;
}
/*-----------------------------------------------Examples------------------------------------------*/
/*-------------------------------------------questionGuide---------------------------------------*/
.questionGuide {
text-align: center;
background: url(../images/a2.jpg);
}
/*-------------------------------------------Videos---------------------------------------*/
/*-------------------------------------------Footer---------------------------------------*/
.footer {
background-color: #91FB9D;
text-align: center;
}
.footernav {
width: 100%;
}
.footer .row {
padding: 1% 10% 0 10%;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="homePagecss.css">
<title>Career Guide</title>
</head>
<body>
<div class="container">
<ul class="m-0 p-0 bg-success navbar">
<li class="p-1">About</li>
<li class="p-1">Interview</li>
<li class="p-1">Registration</li>
<li class="p-1">Terms</li>
<li class="p-1" id="contact">Contact</li>
</ul>
<div class="login pt-2">
<h3 class="mt-3">Your Career Is Your Life</h3>
<div class="mt-4 question">
<input id="question" type="text" class="rounded" name="question" placeholder="Type your question">
<button id="askbtn" type="button" class="btn mt-1 btn-success button">ASK!</button>
</div>
</div>
<div class="menu container">
<div class="menuHeading">
<h3 class="mt-3">How to choose your career</h3>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 tenthpass">10th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 twpass">12th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 graduated">Graduated</button>
</div>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 register">Register</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 interview">Interview</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 questions">Questions</button>
</div>
</div>
</div>
<div class="examples p-2 mt-3 font-weight-bold">HOW CAREER GUIDE CHANGING THE LIVES</div>
<div class="row" style="display: flex;">
<div class="col-sm">
<p class="">Career Guidence made course choice simple and easy. I am happy i could make it to IIM-Indore</p>
<img src="../images/a.jpg">
</div>
<div class="col-sm ">
<p class="">Career guidence towards food technology made mahima an example for her friends they can now look beyond the medicine</p>
<img src="../images/b.jpg">
</div>
<div class="col-sm ">
<p class=""> Me and my dad found selection of stream after 10th very scientific and efficient Thenks to CareerGuide</p>
<img src="../images/c.jpg" style="height: 60%;">
</div>
</div>
</div>
<div class="row row2 w-100 p-3 mt-4 container">
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/yIW6eTU2oXY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/FTiKWY2AbEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/R7iN71uJcG0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="footer pt-3 rounded">
<div class="footernav">
<button type="button" class="btn btn-success btn-outline-light mr-3">About</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Contact Us</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Terms and Conditions</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Login</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Registration</button>
</div>
<div class="phone mt-3">
<img src="../images/phone.png" width="20px" height="20px">
<p class="d-inline-block">+919610085083</p>
</div>
<div class="links">
<img src="../images/twitter.png" width="20px" height="20px" class="mr-1" >
<img src="../images/g+.png" width="20px" height="20px" class="mr-1" >
<img src="../images/facebook.png" width="20px" height="20px" class="mr-1" >
<img src="../images/img2.png" width="20px" height="20px" class="mr-1" >
</div>
<div class="row">
<div class="col-sm">
<p>1105<br>Career Experts</p>
</div>
<div class="col-sm">
<p>551<br>Career Topics</p>
</div>
<div class="col-sm">
<p>1199<br>Career Questions</p>
</div>
<div class="col-sm">
<p>345,123<br>Students Impacted</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="homePage.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

You really don't need JavaScript for this , you can add one id in footer and simply call it on click of contact button as follow.
body {
background-image: url(../images/images/documentbackground.jpg);
background-repeat: no-repeat;
background-size: cover;
}
/*-------------------------------------Main head------------------------------------------- */
.jumbotron {
margin: 0;
background: url(../images/a2.jpg) no-repeat;
}
.mainHead a {
display: block;
width: 7%;
color: white;
background-color: #3BF44F;
text-decoration: none;
transition: background-color .7s;
}
.mainHead a:hover {
background-color: #08B81B;
}
/*-----------------------------------------------------NavBar--------------------------------------*/
.navbar {}
ul {
list-style: none;
}
li {
float: left;
}
.navbar a {
color: white;
padding: 0 75px;
text-decoration: none;
transition: background-color 0.7s;
}
.navbar a:hover {
background-color: #0bbc08;
color: white;
}
/*----------------------------------------------------------Login------------------------------------*/
.login {
height: 200px;
background: url(../images/images/back1.jpg);
background-size: cover;
background-position: 0 -45%;
/*transition: all 1s;*/
}
/*.login:hover{
transition: all 1s;
background-size: 150%;
}*/
.login h3 {
text-align: center;
color: white;
margin-top: 2%;
}
.login .question {
position: relative;
width: 50%;
margin: 0 auto;
}
.login .question input {
width: 100%;
}
.login .button {
position: absolute;
left: 50%;
}
/*----------------------------------------Menu--------------------------------------------------*/
.menu {
overflow: hidden;
text-align: center;
background: url(../images/how.jpg);
}
.menu button {
transition: all .5s;
}
.menu .graduated:hover {
transform: scale(1.1);
}
.menu .interview:hover {
transform: scale(1.1);
}
.menu .tenthpass:hover {
transform: scale(1.1);
}
.menu .questions:hover {
transform: scale(1.1);
}
.menu .twpass:hover {
transform: scale(1.1);
}
.menu .register:hover {
transform: scale(1.1);
}
/*-------------------------------------------CareerCounsellor---------------------------------------*/
.careerCounselor {
text-align: center;
background: url(../images/a6.jpg);
background-size: cover;
}
.careerCounselor .heading,
.careerCounselor .examples {
color: white;
font-size: 30px;
}
.careerCounselor .row1 img {
width: 55%;
height: 25%;
margin-bottom: 3px;
border-radius: 3px;
}
.careerCounselor .name {
color: white;
}
.careerCounselor .post {
color: #cbbf5a;
}
.careerCounselor .exp {
color: white;
}
/*-----------------------------------------------Examples------------------------------------------*/
/*-------------------------------------------questionGuide---------------------------------------*/
.questionGuide {
text-align: center;
background: url(../images/a2.jpg);
}
/*-------------------------------------------Videos---------------------------------------*/
/*-------------------------------------------Footer---------------------------------------*/
.footer {
background-color: #91FB9D;
text-align: center;
}
.footernav {
width: 100%;
}
.footer .row {
padding: 1% 10% 0 10%;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="homePagecss.css">
<title>Career Guide</title>
</head>
<body>
<div class="container">
<ul class="m-0 p-0 bg-success navbar">
<li class="p-1">About</li>
<li class="p-1">Interview</li>
<li class="p-1">Registration</li>
<li class="p-1">Terms</li>
<li class="p-1" id="contact">Contact</li>
</ul>
<div class="login pt-2">
<h3 class="mt-3">Your Career Is Your Life</h3>
<div class="mt-4 question">
<input id="question" type="text" class="rounded" name="question" placeholder="Type your question">
<button id="askbtn" type="button" class="btn mt-1 btn-success button">ASK!</button>
</div>
</div>
<div class="menu container">
<div class="menuHeading">
<h3 class="mt-3">How to choose your career</h3>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 tenthpass">10th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 twpass">12th pass</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 graduated">Graduated</button>
</div>
</div>
<div class="row">
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 register">Register</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 interview">Interview</button>
</div>
<div class="col-sm">
<button class="btn btn-primary btn-lg my-5 questions">Questions</button>
</div>
</div>
</div>
<div class="examples p-2 mt-3 font-weight-bold">HOW CAREER GUIDE CHANGING THE LIVES</div>
<div class="row" style="display: flex;">
<div class="col-sm">
<p class="">Career Guidence made course choice simple and easy. I am happy i could make it to IIM-Indore</p>
<img src="../images/a.jpg">
</div>
<div class="col-sm ">
<p class="">Career guidence towards food technology made mahima an example for her friends they can now look beyond the medicine</p>
<img src="../images/b.jpg">
</div>
<div class="col-sm ">
<p class=""> Me and my dad found selection of stream after 10th very scientific and efficient Thenks to CareerGuide</p>
<img src="../images/c.jpg" style="height: 60%;">
</div>
</div>
</div>
<div class="row row2 w-100 p-3 mt-4 container">
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/yIW6eTU2oXY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/FTiKWY2AbEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-sm">
<iframe style="border-width: 10px;" src="https://www.youtube.com/embed/R7iN71uJcG0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="footer" class="footer pt-3 rounded">
<div class="footernav">
<button type="button" class="btn btn-success btn-outline-light mr-3">About</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Contact Us</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Terms and Conditions</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Login</button>
<button type="button" class="btn btn-success btn-outline-light mr-3">Registration</button>
</div>
<div class="phone mt-3">
<img src="../images/phone.png" width="20px" height="20px">
<p class="d-inline-block">+919610085083</p>
</div>
<div class="links">
<img src="../images/twitter.png" width="20px" height="20px" class="mr-1" >
<img src="../images/g+.png" width="20px" height="20px" class="mr-1" >
<img src="../images/facebook.png" width="20px" height="20px" class="mr-1" >
<img src="../images/img2.png" width="20px" height="20px" class="mr-1" >
</div>
<div class="row">
<div class="col-sm">
<p>1105<br>Career Experts</p>
</div>
<div class="col-sm">
<p>551<br>Career Topics</p>
</div>
<div class="col-sm">
<p>1199<br>Career Questions</p>
</div>
<div class="col-sm">
<p>345,123<br>Students Impacted</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="homePage.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

If you want this using javascript than just add settimeout before call scroll function
contact.addEventListener('click', function() {
setTimeout(function(){
window.scrollTo(0, 1500);
},0)
//alert('asdf');
})

Bootstrap linking to DOM element working on one button but not another

First question here!
Basically I'm using Bootstrap, trying to use a button to link to another element on the page. I use it on one button and it works, but I use a Google Maps InfoWindow to create a new button that doesn't work. I have no idea what the difference is (other than one being added on top of the map using JQuery, but this one also changes the URL of the page!)
EDIT: The button on the InfoWindow shows up correctly and everything.
Here's the code!
JQUERY
var contentString = '<a class="portfolio-item d-block mx-auto" href="#create-report">\n' +
' <button type="button" class="btn btn-primary btn-xl">\n' +
' Reportar ocorrência\n' +
' </button>\n' +
' </a>';
var latLng = e.latLng;
if(infowindow != null)
infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
position: latLng
});
HTML
<div class="portfolio-modal mfp-hide" id="create-report">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-secondary text-uppercase mb-0">Reportar Ocorrência</h2>
<hr class="star-dark mb-5">
<form name="newReport" id="reportForm" novalidate="novalidate">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Nome da Ocorrência</label>
<input class="form-control" id="reportName" type="text" placeholder="Nome da Ocorrência*" required="required"
data-validation-required-message="Insira o nome da ocorrência.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Localização</label>
<input class="form-control" id="reportAddress" type="text"
placeholder="Localização (morada, por exemplo)*" required="required"
data-validation-required-message="Insira a localização da ocorrência.">
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Descrição</label>
<input class="form-control" id="reportDescription" type="text" placeholder="Descrição*"
required="required" data-validation-required-message="Insira a descrição da ocorrência.">
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="successReport"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-xl" id="reportBtn">Reportar</button>
</div>
</form>
<br>
<a id="closeFormBtn" class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
<i class="fa fa-close"></i>Fechar
</a>
</div>
</div>
</div>
</div>
CSS
.portfolio {
margin-bottom: -15px;
}
.portfolio .portfolio-item {
position: relative;
display: block;
max-width: 25rem;
margin-bottom: 15px;
}
.portfolio .portfolio-item .portfolio-item-caption {
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
opacity: 0;
background-color: rgba(175, 49, 16, 0.8);
}
.portfolio .portfolio-item .portfolio-item-caption:hover {
opacity: 1;
}
.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content {
font-size: 1.5rem;
}
#media (min-width: 576px) {
.portfolio {
margin-bottom: -30px;
}
.portfolio .portfolio-item {
margin-bottom: 30px;
}
}
.portfolio-modal .portfolio-modal-dialog {
padding: 3rem 1rem;
height: calc(100vh - 6rem);
min-height: 850px;
margin: 1rem calc(1rem - 8px);
position: relative;
z-index: 2;
-moz-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
}
.portfolio-modal .portfolio-modal-dialog .close-button {
position: absolute;
top: 2rem;
right: 2rem;
}
.portfolio-modal .portfolio-modal-dialog .close-button i {
line-height: 38px;
}
.portfolio-modal .portfolio-modal-dialog h2 {
font-size: 2rem;
}
#media (min-width: 768px) {
.portfolio-modal .portfolio-modal-dialog {
height: calc(100vh - 6rem);
min-height: 850px;
padding: 5rem;
margin: 3rem calc(3rem - 8px);
}
.portfolio-modal .portfolio-modal-dialog h2 {
font-size: 3rem;
}
}

So Instead of
'\n' + ' \n' + ' Reportar ocorrência\n' + ' \n'
You need to use that style for the modal button trigger
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>
And that for the div for the modl
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

What am i doing wrong in my toggle visibility

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.

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

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>

iPad and iPhone not scrolling to anchored div

I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<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 topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!

Categories