Angularjs : how to write options code for quiz pallet? - javascript

In the process of making a quiz website, I have prepared a Question pallet of 25.In that, if I select option 1 on a question and moving to another it seems to be option 1 for rest of the questions.I used radio buttons for the options but I can't figure it out how to prepare answers to individual questions.I used angular js for this and bootstrap also.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
<title>quizzzzzz</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: khaki;
}
.navbar-custom {
background-color: black;
padding: 0px;
}
.navbar-custom .navbar-brand {
font-family: Geneva;
font-size: 30pt;
color: white;
}
.toggleButton {
width: 160px;
height: 60px;
line-height: 60px;
margin: 0 auto;
background: #D35400;
color: #fff;
border: 3px solid rgba(255, 255, 255, 0.5);
text-align: center;
cursor: pointer;
user-select: none;
text-transform: uppercase;
}
</style>
</head>
<body ng-app="mainModule">
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="ex.html">Quiz</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<form class="navbar-form navbar-right">
</form>
</div>
</div>
</nav>
<div ng-hide="p1">
<div class="input-field col s12 m6 14">
<center>
<i class="fa fa-search"></i>
<input id="search" type="text" style="width:350px" ng-model='search'>
<label for="search">Search</label>
</center>
</div>
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
Please Read The Following Instruction Carefully
</div>
</div>
</div>
</div>
</div>
</section>
<section class="technologies" ng-controller="techlistcon">
<center><button class="btn btn-primary" ng-click="fun()">START</button></center>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" ng-repeat="tech in techlist|filter:search">
<div class="box box-block bg-white tile tile-1 mb-2">
<div class="t-content">
<h1 class="mb-1">{{tech.name}}</h1>
More>>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{tech_full.name}}</h4>
</div>
<table class="table">
<tr>
<td><img ng-src="{{tech_full.img}}" width="100"></td>
<td>{{tech_full.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div ng-show="p1">
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
Online Exam : You Can Test Your Skills
</div>
</div>
</div>
</div>
</div>
</section>
<section class="questions" ng-controller="questionlistcon">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="q-box">
<div class="question">
<h4>{{currentIndex+1}}.{{currentque.question}}</h4>
</div>
<div class="options">
<ul>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o1}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o2}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o3}}</li>
<li><input type="radio" name="{{$index+1}}" value="{{$currentIndex+1}}">{{currentque.o4}}</li><br>
</ul>
<button class="btn btn-warning" ng-hide="b" ng-click="next()">Next</button>
<button class="btn btn-warning" ng-hide="b" ng-click="prev()">prev</button>
<button class="btn btn-warning" ng-show="b">Finish</button>
</div>
</div>
</div>
<div class="col-md-5">
<div class="q-box">
<h4>Question Palette</h4>
<div id="main_right">
<div class="questionpallat">
<ul>
<li ng-repeat="x in questions">
<a class="btn btn-danger buttons" ng-click="currentq($index)" style="width:35px">{{$index+1}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="pannel-1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default p1">
<div class="panel-body">
<center> Here comes your RESULT>>>>>>>>>>>>></center>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/techlist.js"></script>
</body>
</html>
Javascript :
var vm=angular.module("quizApp",[]);
vm.controller("technologies",function($scope){
$scope.technologyar=["HTML5","PHP"];
});
vm.controller("questions",function($scope){
var index=0;
$scope.questionar=[
{
question:'What does HTML stand for?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'PHP is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'Java is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
},
{
question:'css is?',
o1:'client side',
o2:'serverside',
o3:'database',
o4:'none'
}
];
$scope.currentque=$scope.questionar[index];
$scope.next=function(){
if(index<$scope.questionar.length-1){
index++;
$scope.currentque=$scope.questionar[index];
}
}
$scope.prev=function(){
if(index>0){
index--;
$scope.currentque=$scope.questionar[index];
}
}
$scope.currentq=function(code){
index=code;
$scope.currentque=$scope.questionar[index];
}
});

Related

how to connect a navigation bar (<nav>) with HTML files in google appscript?

I am developing a code where I have different option levels and I want one of those options to display a nav bar with two tabs: one to search customers and the other to add customers, I already have the loadView, loadCustomersView and loadAddCustomerView function in my clients.html doc, but it does not display the content when I click on the tabs.
How can I make the navigation bar with the search and add clients options show me what is in search.html and addcustomer.html? (see image 3)
step 1, click in opcion1
step 2, click in opcion 1.1
step3, have a nav bar with 2 options: search and add customers
here is a copy of all my files.
codigo.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getOpcion1() {
var html = HtmlService.createHtmlOutputFromFile('opcion1').getContent();
return html
}
function getObtenerClientes() {
var html = HtmlService.createHtmlOutputFromFile('clientes').getContent();
return html
}
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView() {
return loadPartialHTML_("search");
}
function loadAddCustomersView() {
return loadPartialHTML_("addcustomer");
}
Index.html
<!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">
<title>Gestor Virtual de Talento 1.0</title>
<style>
.nav-link {
cursor:pointer;
}
#loading {
position:fixed;
top:0;
left:0;
x-index:10000;
width:100vw;
height:100vh;
background-color: rgba(255,255,255,0.9);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-primary static-top mb-5" style="background-color: #072146;">
<div class="container-fluid" style="height:67.33px; background-color: #072146">
<div class="d-flex justify-content-end">
<a class="badge badge-info" href="javascript:ventanaSecundaria('https://docs.google.com')" style="text-align: center;">Guía de usuario</a>
</div>
</div>
</nav>
<div class="container">
<h3>Bienvenidos </h3>
<h6>Selecciona una opción</h6>
<P></P>
</div>
<div class="card-group">
<div class="card">
<div style="text-align: center;" >
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1eBB_kiCc6FDkbDZwkKueZho-yDFeBOHU" alt="Card image cap" alt="" >
<div class="card-body">
<input type="button" value="Opcion 1" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion1()" />
<P></P>
<p class="card-text">Conoce opcion 1</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1osgZRT_0ahKHXGyNbasbx_xaBr2_2orx" alt="Card image cap">
<div class="card-body">
<input type="button" value="Opcion 2" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion2()" />
<P></P>
<p class="card-text">Conoce opcion 2</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1Hmxvyc9gM9KEpdQUalaNCvsPFJV8VYfJ" alt="Card image cap" >
<div class="card-body">
<input type="button" value="Opcion 3" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getPagina3()" />
<P></P>
<p class="card-text">conoce pagina 3</p>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div id="resultado" class="container">
</div>
<P></P>
<script>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=1400,height=700,scrollbars=NO")
}
function actualizarDiv(html, button) {
var div = document.getElementById('resultado');
div.innerHTML = html;
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
opcion1.html
<P></P>
<br>
<div class="container">
<div class="d-flex justify-content-center">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=19CbMDqXEmgtPemrwiAlsaRyZmdMPrZqA" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.1</h5>
<p class="card-text">conoce opcion 1.1</p>
<input type="button" value="Accede aquí" class="btn btn-info"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getObtenerClientes()" />
</div>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=14_9fglXHnJhb4U4Xyy6XApBJ8KEerDd_" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.2</h5>
<p class="card-text">conoce opcion 1.2</p>
<a class="btn btn-info" href="javascript:ventanaSecundaria('https://google.com/')" style="text-align: center;">Accede aquí</a>
</div>
</div>
</div>
</div>
</div>
</div>
clientes.html
<P></P>
<div class="d-flex justify-content-center">
<div class="card mb-5" style="width: 18rem;">
<img src="http://drive.google.com/uc?export=view&id=13n5Nl3nZzL8GRJkG8EeNSPJi-vobrjw_" width="286px" height="180px" class="mx-auto">
<h5 class="text-center">Validación Clientes</h5>
</div>
</div>
<div class="container">
<h6>Selecciona clientes y valídalos.</h6>
<P></P>
</div>
<div class="container">
<nav id="navigation" class="mb-3">
<ul class="nav nav-tabs main-nav">
<li class="nav-item">
<div class="nav-link active" id="search-link">Encontrar cliente</div>
</li>
<li class="nav-item">
<div class="nav-link" id="add-customer-link">Aniadir cliente</div>
</li>
</ul>
</nav>
</div>
<div id="app"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script>
function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html){
document.getElementById(id).innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function loadSearchView(){
loadView({func:"loadSearchView"});
}
function loadAddCustomerView(){
loadView({func:"loadAddCustomersView"});
}
document.getElementById("search-link").addEventListener("click",loadSearchView);
document.getElementById("add-customer-link").addEventListener("click",loadAddCustomerView);
</script>
search.html
<h4>Search</h4>
<div class="mb-3">
<input type="text" class="form-control" id="searchInput" placeholder="search...">
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col" class="text-right">#</th>
<th scope="col">ID</th>
<th scope="col">Nombre</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
</table>
addcustomer.html
<h4>Add a Customer</h4>
<div class="add-customer-form">
<div class="mb-3">
<label for="first-name" class="form-label">Nombre</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="mb-3">
<label for="last-name" class="form-label">Apellido</label>
<input type="text" class="form-control" id="last-name">
</div>
<button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
New customer Added!
</div>

Content is not sized correctly for the viewport

I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit. It is tell me that the "The viewport size of 373px does not match the window size of 360px". I have validated my HTML and CSS but have not found the specific error. I am not sure if it is in the .style.width of my side nav bars.
Javascript:
function openNav() {
document.getElementById("mySidenav").style.width = "150px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "150px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
function openNav3() {
document.getElementById("mySidenav3").style.width = "150px";
}
function closeNav3() {
document.getElementById("mySidenav3").style.width = "0";
}
CSS
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.imgHoover:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.imgHoover {
padding: 10px 16px;
margin: 10px 0;
/*box-shadow: 2px 2px grey;*/
border-bottom: 1px solid #fafafa;
/*border: 5px solid #fab95b;*/
}
#form1 {
padding: 10px;
border: 1px solid #666;
background: #fff;
display: none;
justify-content: center;
}
#form2 {
padding: 10px;
border: 1px solid #666;
background: #fff;
justify-content: center;
}
/* card center */
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
/*box-shadow: 5px 5px grey*/
}
.card:hover {
box-shadow: 4px 8px 12px rgba(0,0,0,0.1);
}
/* side-nav */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #818181;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
html{overflow-x: hidden;}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="manifest" href="manifest.json">
<!-- ios support -->
<link rel="apple-touch-icon" href="images/logo/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#292927">
<meta name="theme-color" content="#292927">
<title>Home-Online Supplements</title>
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #b8dff0;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo/logo.png" alt="" width="30" height="24" class="d-inline-block align-top">
NextGen-Fitness</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" id="formButton">Login</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Protein</a></li>
<li><a class="dropdown-item" href="#">Vitamins</a></li>
<li><a class="dropdown-item" href="#">Preworkout</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" tabindex="-1" >Contact Us</a>
</li>
</ul>
<a class="nav-link text-left" href="#" id="userRegistered" style="color:black;" ></a>
<!-- <form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form> -->
</div>
</div>
</nav>
<div class="center-block">
<form id="form1">
<input type="text" name="firstName" placeholder="First Name" id="fname">
<br><br>
<input type="text" name="lastName" placeholder="Last Name" id="lname">
<br><br>
<input type="text" name="email" placeholder="Email" id="email">
<br><br>
<button type="button" class="btn btn-dark" id="btnUser" onclick="funcUser()">Login</button>
</form>
</div>
<!--Side Navbar #1 -->
<div id="mySidenav" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/fatburner-logo2.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #2 -->
<div id="mySidenav2" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/preworkout-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #3 -->
<div id="mySidenav3" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>-->
<div class="bg-light">
<div class="container">
<div class="row align-items-center no-gutter">
<div class="col-xl-5 col-lg-6 col-md-12">
<div class="py-5 py-lg-0">
<a class="btn btn-ligth" style="background-color: #fab95b;" href="products.html">Browse all Products</a>
<!--<a class="btn btn-light" style="background-color: #fab95b;">Are you a Store Owner?</a>-->
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/gym-page.jpg" alt class="img-fluid">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-logo2.png" alt="fatBurner" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav()">Fatburner</a>
</div>
<div class="column">
<img src="images/preworkout-logo.png" alt="preWorkout" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav2()">Preworkout</a>
</div>
<div class="column">
<img src="images/protein-logo2.png" alt="protein" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav3()">Protein</a>
</div>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/supplement-frontpage.jpg" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
" Hand-picked ingredients and expertly crafted products,
designed for the modern athletes and trainers."
</p>
</div>
<br>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-frontpage.png" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
Benefits Of Protein Supplementation<br>
1.Fast digesting and more easily absorbed than other protein sources<br>
2.Increased muscle mass, especially when taken post-workout<br>
3.Improved appetite control, and greater feelings of fullness when dieting<br>
</p>
</div>
<div class="footer">
<div class="container">
<div class="row align-items-center no-gutters border-top py-2">
<div class="col-md-6 col-12">
<span> 2021 NextGen. All Rights Reserved</span>
</div>
<div class="col-12 col-md-6">
<nav class="nav justify-content-center justify-content-md-end">
<a class="nav-link active pl-0" href="#!">Privacy</a>
<a class="nav-link" href="#!">Terms</a>
<a class="nav-link" href="#!">Feedback</a>
</nav>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/scripts.js" ></script>
</body>
</html>

You could try docking the devtools at the bottom, or in a different window, as in this answer. Sadly, this is still an issue in 2021.

How to change CSS on click?

I have 4 cards which contain data. I want when first header text card is clicked, it expand upward, and info I displayed and when clicked the same card it hide the body but the rest card stays the same,
Here is visual of what I want.
UPDATE
Here is JSFiddle with all four cards: http://jsfiddle.net/Mwanitete/rzjxkv8e/2/
Here is HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="data">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
</div>
Here is JavaScript
$('.card-header').click(function(){
$('.card').toggleClass('.card-size')
})
Here is CSS
.data{
display: flex;
}
.card-size{
height: 224px;
}

Here's a JSFiddle with a working solution.
I've stripped out the collapse attributes and pulled it down to barebones.
http://jsfiddle.net/9musLxy4/88/
HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="data">
<div class='card-container' data-card-id='1'>
<div class='card-header' data-card-id='1'>
Header
</div>
<div class='card-body collapse' data-card-id='1'>
<div class='data'>
Body 1
</div>
</div>
</div>
<div class='card-container' data-card-id='2'>
<div class='card-header' data-card-id='2'>
Header
</div>
<div class='card-body collapse' data-card-id='2'>
<div class='data'>
Body 2
</div>
</div>
</div>
<div class='card-container' data-card-id='3'>
<div class='card-header' data-card-id='3'>
Header
</div>
<div class='card-body collapse' data-card-id='3'>
<div class='data'>
Body 3
</div>
</div>
</div>
<div class='card-container' data-card-id='4'>
<div class='card-header' data-card-id='4'>
Header
</div>
<div class='card-body collapse' data-card-id='4'>
<div class='data'>
Body 4
</div>
</div>
</div>
</div>
CSS:
.data{
display: flex;
}
.card-body {
border: 1px solid black;
}
JS:
$('.card-container').on('click', function(event) {
var id = $(this).data('card-id')
$('.card-body[data-card-id="' + id + '"]').toggle()
})

$('.card-header').click(function(){
$(this).toggleClass('.card-size');
$(this).parent().find('#test-block').toggleClass('show')
})
Use this

Are you just trying to change the size of the card in general when it is expanded? If so, lose the JQuery, you just need a CSS style:
#test-block .card-body {
height: 224px;
}
If you want to the card size to remain the same after you open it, then you would not want to toggle the size class, but simply add it.
$('.card-header').click(function(){
$(this).closest('.card').addClass('card-size');
})
http://jsfiddle.net/9musLxy4/74/

How to set alignment of sidebar

I attach my code and output view. Can anyone help me out how to set alignment for sidebar. Thanks in advance.
sidebar.blade.php
<!-- Sidebar Widgets Column -->
<div class="col-md-4 container">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Laravel
</li>
<li>
PHP
</li>
<li>
HTML
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Web Design
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Stats</h5>
<div class="card-body">
You can put anything
</div>
</div>
</div>
Master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>myblog</title>
<!-- Custom styles for this template -->
<link href="/public/css/blog-post.css" rel="stylesheet">
</head>
<body style="background-color: #e9ecef;">
#include('partials.nav')
#include('partials.jumbotron')
<!-- Page Content -->
<div class="container">
<div class="row">
#yield('content')
</div>
<!-- /.row -->
#include('partials.sidebar')
</div>
<!-- /.container -->
#include('partials.footer')
</body>
<style type="text/css">
.pagination {
margin-bottom: 20px;
padding-right: 500px;
width: 300px;
height: 23px;
font-size: 25px;
color: red;
padding-left: 500px;
}
</style>
</html>
Output:

Your sidebar is a sibling to the <div class="row">. It needs to be a child, instead.
Also, don't use the container class on your col-md-4
<div class="row">
#include('partials.sidebar')
#yield('content')
</div>
This will, of course, assume your content always has a <div class="col-md-8"> on it to compliment the <div class="col-md-4>" on your sidebar.

How to make 2 (frame?) using twitter bootstrap?

this is what I started to make in twitter bootstrap..
I am new using this.. Can you help me to make a 2 split page inside the html
that the menu in header when scrolled down will not disappear ..
I made html codes below Thanks!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Teacher</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">`
/* CSS used here will be applied after bootstrap.css */
body{
margin-top: 1px;
}
.divide-nav{
height: 80px;
background-color: #428bca;
}
.divide-text{
color:#fff;
line-height: 20px;
font-size:20px;
padding: 15px 0;
}
.affix {
top: 1px;
width:100%;
}
.filler{
min-height: 2000px;
}
.navbar-form {
padding-left: 0;
}
.navbar-collapse{
padding-left:0;
}
#footer {
height: 60px;
background-color: #f5f5f5;
}
</style>
<style type="text/css"></style>
</head>
<!-- HTML code from Bootply.com editor -->
<body>
<div class="divide-nav">
<div class="container">
<p class="divide-text"><img src ="musar-logo.png"></p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower affix-top" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<frameset cols="25%,*,25%">
<frame src="1.html">
<frame src="it.html">
<frame src="it.html">
</frameset>
<div class="container">
<div class="row">
<div class="filler"></div>
</div>
</div>
<div class="modal-body row">
<div class="col-md-6">
<!-- Your first column here -->
</div>
<div class="col-md-6">
<!-- Your second column here -->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- JavaScript jQuery code from Bootply.com editor -->
<script type="text/javascript">
$(document).ready(function() {
$('.navbar-lower').affix({
offset: {top: 50}
});
});
</script>
<div id="footer">
<div class="container">
<p class="text-muted credit">Footer Trial</a></p>
</div>
</div>
</body>
</html>

Expanding on the above answer, I put up a fiddle.
http://jsfiddle.net/w7s2o90e/1/
<title>Teacher</title>
<!-- HTML code from Bootply.com editor -->
<body>
<div class="divide-nav">
<div class="container">
<p class="divide-text"><img src ="musar-logo.png"></p>
</div>
</div>
<nav class="navbar navbar-default navbar-lower affix-top" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<form class="navbar-form navbar-left" role="search">
<button class="btn btn-success">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
<button class="btn btn-default">Button</button>
</form>
</div>
</div>
</nav>
<frameset cols="25%,*,25%">
<frame src="1.html">
<frame src="it.html">
<frame src="it.html">
</frameset>
<div class="row-fluid">
<div id="left" class="col-sm-4">
<div id="allYourContent" class= "col-sm-12">
</div>
</div>
<div id="right" class="col-sm-8">
<!--Body content-->
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Footer Trial</a></p>
</div>
</div>
</body>
If you want a fixed size and the left side to scroll use
overflow:scroll
in your css.
The two columns from above work, but until you add content or a size to them, they won't show up (see fiddle). I used
class="col-sm-4" & class="col-sm-8"
instead of "span" but it should be similar.
I didn't edit all of your code, but it looks generally like what you were trying to achieve.

You can make a two grid layout to achieve this.
You can find more documentation on this at
http://getbootstrap.com/2.3.2/scaffolding.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

Categories

Resources