How to change CSS on click? - javascript

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/

Related

Javascript, creating button that randomly selects links inside the page [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last year.
Improve this question
I'm trying to make it so when people select the button on top of the page one of the three links, which are ids inside the page, will be selected (they look like tabs with the jquery ui attachment but I couldn't get it on the pen), but despite my attemps I can't make it work by using a function and if staments, any advice on what I'm doing wrong? I never made something more than basic in javascript
Full code here, since due to character limit i can't put the full HTML and CSS on the post
Codepen: https://codepen.io/bladeranner5005/pen/GRMVGbR
HTML
<!doctype html>
<html lang="it" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<!--Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font links-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400&family=Libre+Franklin:wght#800&display=swap" rel="stylesheet">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Plugins -->
<link href="../external-files/jquery-ui-1.13.1.custom/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link href="../external-files/jquery-ui-1.13.1.custom/jquery-ui.theme.min.css" rel="stylesheet" type="text/css">
<script src="../external-files/jquery-ui-1.13.1.custom/external/jquery/jquery.js" type="text/javascript"></script>
<script src="../external-files/jquery-ui-1.13.1.custom/jquery-ui.min.js" type="text/javascript"></script>
<!--Custom css-->
<link href="../css/index-css.css" rel="stylesheet" type="text/css">
<link href="../css/content-css.css" rel="stylesheet" type="text/css">
<title>Andrea D'Angelo-Portfolio</title>
</head>
<body>
<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Home</a>
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Curriculum</a>
<a class="nav-item nav-link active nav-link-custom-1 nav-item-spacing" href="#">Portfolio</a>
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Contatti</a>
<!--Codice per il dropdown da: https://stackoverflow.com/questions/17904862/bootstrap-position-of-dropdown-menu-relative-to-navbar-item-->
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-link-custom-2 nav-item-spacing" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</li>-->
</div>
<!--Dropdown item end-->
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--Name--------------------------------------------------------------------------------------------------------------->
<section class="container-fluid">
<div class="row">
<div class="col-12 text-center background-black mb-5">
<h1 class="page-title-font">PORTFOLIO</h1>
</div>
</div>
</section>
<!--Random selector------------------------------------------------------------------------------------------------>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-4"></div>
<div class="col-8 col-md-4">
<button type="button" class="link-btn-light btn btn-light w-100" id="random-select">Selezione</button>
</div>
<div class="col-2 col-md-4"></div>
</div>
</div>
</div>
<!--CONTENT-------------------------------------------------------------------------------------------------------->
<section class="container-fluid me-0 ms-0">
<div class="row">
<div id="tabs">
<ul id="tab-id">
<li>Pastichair</li>
<li>Bella e brava</li>
<li>Personal space</li>
</ul>
<script type="text/javascript">
$( "#tabs").tabs();
</script>
</div>
</section>
<!--Footer start------------------------------------------------------------------------------------------------------->
<!--Red line-->
<div class="border-top border-5 border-danger" style="width: 100%"></div>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Home<br>page
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>curriculum
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
<!--ROW 2-->
<div class="row mb-5 mt-5">
<!--ROW 2-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>portfolio
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Full contacts<br>and info
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</footer>
</main>
<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>
<!-- My Javascript -->
<script src="../javascript/portfolio-javascript.js"></script>
</body>
</html>
Javascript
//Variable declaration
let button = document.getElementById("random-select");
let tab1 = document.getElementById("pastichair");
let tab2 = document.getElementById("bella-e-brava");
let tab3 = document.getElementById("personal-space");
//Array e function, così da creare un numero casuale tra 0 e 2
let array = ["headerA", "headerB", "headerC"];
button.addEventListener("click", tabRandom())
function tabRandom () {
let randomNumber = Math.floor(Math.random() * array.length);
//If statement per selezionare tab casuale
if (randomNumber === 0) {
tab1.addEventListener("click", function (){
document.getElementById("pastichair").click();
});
}
if (randomNumber === 1) {
tab2.addEventListener("click", function (){
document.getElementById("bella-e-brava").click();
});
}
if (randomNumber === 2) {
tab3.addEventListener("click", function (){
document.getElementById("personal-space").click();
});
}
}

There are two things you could do to make it works.
First, change the callback parameter:
// incorrect, this is you execute a function and pass its value as a callback
button.addEventListener("click", tabRandom());
// correct, this is you pass a function as a callback
button.addEventListener("click", tabRandom);
Then, inside the tabRandom(), you need to remove the addEventListener to make the trigger works:
// not work, this is you assign an event
tab1.addEventListener("click", function (){
document.getElementById("pastichair").click();
});
// trigger a click
document.getElementById("pastichair").click();
See codepen

How to make the width of stacked multiple div dynamicly adjust to the longest content among them?

I want to make the width of stacked multiple div adjust to the longest content dynamically like this:
I have googled it. inline-block is suggested. With bootstrap4, here is my first try:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
div.cls{
display: inline;
margin: 5px;
}
</style>
<div class="container">
<div class="row justify-content-start">
<div class="cls">
<b>aaaaaaaaaaaaaaa</b>
</div>
<div class="cls">
111
</div>
</div>
<div class="row justify-content-start">
<div class="cls">
<b>bbb</b>
</div>
<div class="cls">
222
</div>
</div>
<div class="row justify-content-start">
<div class="cls">
<b>ccccc</b>
</div>
<div class="cls">
33333333333
</div>
</div>
<div class="row justify-content-start">
<div class="cls">
<b>dddddddddd</b>
</div>
<div class="cls">
4
</div>
</div>
</div>
Regrettably, it does not work:
So I switched my idea. Why not use flex-grid row to hold 2 stacked div: abcs and 123s?
<div class="row justify-content-start">
<div>
<div>
<b>aaaaaaaaaaaaaaa</b>
</div>
<div>
<b>bbb</b>
</div>
</div>
<div>
<div>
111
</div>
<div>
222
</div>
</div>
</div>
Actually, it works.
What bothers me is that the implementation is kind of lengthy and jumbled. Is there a better way to achieve the goal?
Hope for your help. :-)

As commented, you need a table layout:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="d-table">
<div class="d-table-row ">
<div class="cls d-table-cell">
<b>aaaaaaaaaaaaaaa</b>
</div>
<div class="cls d-table-cell">
111
</div>
</div>
<div class="d-table-row">
<div class="cl d-table-cells">
<b>bbb</b>
</div>
<div class="cls d-table-cell">
222
</div>
</div>
<div class="d-table-row">
<div class="cls d-table-cell">
<b>ccccc</b>
</div>
<div class="cls d-table-cell">
33333333333
</div>
</div>
<div class="d-table-row">
<div class="cls d-table-cell">
<b>dddddddddd</b>
</div>
<div class="cls d-table-cell">
4
</div>
</div>
</div>

Width changing when switching from static positioning, to fixed positioning

When scrolling, I change my card from position:static;, to position:fixed;. When it changes to position:fixed;, the width gets insanely large rather than staying the same.
I've tried a variety of solutions, including all listed on a near duplicate post here: Is it possible to keep the width of the parent element when position: fixed is applied?
Just wondering if I'm being silly here. Any help would be greatly appreciated.
var elementPosition = $('#navigation').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#navigation').css('position', 'fixed').css('top', '0');
} else {
$('#navigation').css('position', 'static');
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></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="container-fluid mt-4">
<div class="row">
<div class="col-3">
<div class="card" id="navigation">
<div class="card-body">
<h3>txgrgrgr</h3>
<p>Hello and welcome to the online booking page forthghfg.</p>
<hr>
<h4 class="mt-4">Contact</h4>
<p>thghshg.co.uk</p>
<p>0123464</p>
<hr>
<h4 class="mt-4">Address</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
<hr>
<h4 class="mt-4">Opening Times</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
</div>
</div>
</div>
<div class="col-9" style="margin-bottom:1000px;">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
<div class="row">
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>

I have added position:sticky in both case. when its scroll or not. Pleas check below snippet its working fine.
var elementPosition = $('#navigation').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#navigation').css('position', 'sticky').css('top', '0');
} else {
$('#navigation').css('position', 'sticky');
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></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="container-fluid mt-4">
<div class="row">
<div class="col-3">
<div class="card" id="navigation">
<div class="card-body">
<h3>txgrgrgr</h3>
<p>Hello and welcome to the online booking page forthghfg.</p>
<hr>
<h4 class="mt-4">Contact</h4>
<p>thghshg.co.uk</p>
<p>0123464</p>
<hr>
<h4 class="mt-4">Address</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
<hr>
<h4 class="mt-4">Opening Times</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
</div>
</div>
</div>
<div class="col-9" style="margin-bottom:1000px;">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
<div class="row">
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>

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.

Angularjs : how to write options code for quiz pallet?

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

Categories

Resources