my content is working fine in desktop and other small devices but in iPad landscape view ( screen size 1024pX768) I'm facing issue, when I clicked on the menu sidebar toggle it's overlapping on the existing content. we're using bootstap 3
I don't want overlap the div content its there in the area when menu toggle clicked.
In the first image, it looks fine when clicked on the toggle menu button it will be overlapped.
My HTML code is:
<div class="row">
<div class="box-hseader">
<div class="col-md-6 col-sm-6">
<div class="col-md-3" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="totalComplaints()">
<div class="col-mds-3">
<span>Total: {{commonareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat" ng-click="isSolved()">
<div class="col-mds-3">
<span>Solved: {{commonareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{commonareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{commoncanceled||0}}</span>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="form-group form-inline pull-right rghtFlt">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All">All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success pull-right iPhn5cbtn" data-toggle="modal"
data-whatever="#getbootstrap" data-target="#exportComplaintsId"
ng-click="getComplaintId(1)" data-keyboard="false">Export
</button>
</div>
</div>
</div>
My CSS code is:
#media only screen and (max-width: 320px){
.rghtFlt{
float: none !important;
}
}
#media only screen and (max-width: 568px) {
.rghtFlt{
float: none !important;
}
}
#media only screen and (max-width: 640px) {
.rghtFlt{
float: none !important;
}
}
.boxFlat {
position: relative;
border-radius: 3px;
background: #ffffff;
margin-bottom: 20px;
width: 100%;
box-shadow: 5px 5px 5px 6px rgba(0, 9, 0, 0.1);
}
Toggle Navigation JS Script:
// toggle nav bar
function openNav() {
var marginLeftContent = document.getElementById("user_name");
if (marginLeftContent.style.display === 'none') {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'inline-block';
}
document.getElementById("sidebar-left").style.width = "230px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "block";
document.getElementById("main-header").style.marginLeft = "228px";
document.getElementById("main-footer").style.marginLeft = "230px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '230px';
} else {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
document.getElementById("sidebar-left").style.width = "70px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "none";
document.getElementById("main-header").style.marginLeft = "70px";
document.getElementById("main-footer").style.marginLeft = "70px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '69px';
}
}
Finally achieved my self what I'm expecting the result, I created the custom column width code instead of bootstrap width class after that it is working
My CSS code:
.col-md-1-complnts {
width: 12.29%;
}
.col-md-1-complnts-four {
width: 5%;
}
.col-md-4-complnts-search {
width: 41% ;
}
My HTML code:
<div class="row">
<div class="col-md-1-complnts-four col-xs-2 " style="position: initial !important;">
<button type="button" class="btn btn-info " ng-click="backtodashboard()"><i
class="fa fa-reply"></i></button>
</div>
<div class="col-md-2 col-xs-6" style="position: initial !important; margin-top: 0px !important; margin-bottom: 15px;">
<button type="button" class="btn btn-success" data-toggle="modal" style="width: 100%"
data-target="#complaisntsmodel" data-whatever="#getbootstrap" ng-click="complaints();complaintsresp();setFormPristine()"
data-keyboard="false">
<i class="fa fa-plus-circle"></i>
Rise Complaint
</button>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat" ng-click="totalPlayComplaints()">
<div class="col-mds-3">
<span>Total:Play {{playareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat" ng-click="isPlaySolved()">
<div class="col-mds-3">
<span>Solved: {{playareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="isPlayUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{playareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="isPlayCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{playAreacanceled||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-10 " style="position: initial !important;" >
<div class="form-group form-inline ">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter" style="width: 100%"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All" >All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-4-complnts-search col-xs-12 " style="position: initial !important; margin-bottom: 10px; ">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1-complnts col-xs-6" style="position: initial !important; margin-top: 0px !important; margin-bottom: 15px;" >
<button type="button" class="btn btn-success " style="width: 100% !important" data-toggle="modal" data-whatever="#getbootstrap" data-target="#exportComplaintsId" ng-click="getComplaintId(2)" data-keyboard="false">Export
</button>
</div>
</div>
Nothing changed anything in toggle navigation JS
Related
I made a voting application that when selected 13 candidates were immediately printed, but when it was printed only half whose data was printed
this is part of the print view
<div id="view" style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; visibility: hidden;">
<div id="page" style="background-color: rgb(223, 223, 223); padding: 50px;">
</div>
</div>
this is part of the form view of the options
<div id="daftar" class="content content--top-navs">
<form action="/pilihCalon" method="POST" class="grid grid-cols-8 gap-4 mt-5">
#csrf
#foreach ($calon as $item)
<div class="col-span-1">
<input type="hidden" name="id" value="{{$pemilih->id}}">
<div class="file box rounded-md pt-8 pb-5 px-3 sm:px-5 relative zoom-in">
<div class="absolute left-0 top-0 mt-3 ml-3">
<input onchange="inputPilihan('{{$item->id}}', '{{$item->nama}}', '{{$item->jabatanSebelum}}', '{{$item->daerahAsal}}', '{{$item->noCalon}}')" class="form-check-input border border-gray-500 oop" type="checkbox" name="daftar_calon_id[]" value="{{$item->id}}">
</div>
<div class="w-10/12 mx-auto">
<img src="{{ asset('storage/daftarCalon/'.$item->foto) }}">
</div>
<div class="block font-medium mt-4 text-center truncate">{{$item->nama}}</div>
</div>
</div>
#endforeach
<button id="btn" onclick="cetak();" class="btn btn-primary text-white w-40 h-12 mt-5 hidden" type="submit">Selesai</button>
</form>
</div>
this is part of the print function
`
var pilihan = [];
function inputPilihan (id, nama, jabatanSebelum, daerahAsal, noCalon) {
// pilihan[id] = [nama, jabatanSebelum, daerahAsal, noCalon];
pilihan[id] = {nm : nama, jabatan : jabatanSebelum, daerah : daerahAsal, no : noCalon};
}
function cetak() {
document.getElementById('daftar').style.visibility = "hidden";
document.getElementById('view').style.visibility = "visible";
document.getElementById('page').innerHTML = '';
pilihan.forEach(element => {
document.getElementById('page').innerHTML += '<div style="display: inline-flex;"><div><p style="text-align: center;">'+element.nm+'</p>';
document.getElementById('page').innerHTML += "<p>"+element.jabatan+"</p>";
document.getElementById('page').innerHTML += "<p>"+element.daerah+"</p></div>";
document.getElementById('page').innerHTML += "<div style='text-align: right; style='font-size: 64px; font-weight: 800; padding: 10px; background-color: rgb(235, 235, 235); margin: 0px 0px 20px 30px;'>"+element.no+"</div></div>";
});
print(document.getElementById('page').innerHTML);
}
</script>
`
hopefully find a solution to the problem
try to delete the position fixed section, top = 0, left = 0 and the height so the value is 0.
like this
<div id="view" style="width: 100%; height: 0; visibility: hidden;">
<div id="page" style="padding: 50px;">
</div>
</div>
add this in the print function
document.getElementById('daftar').style.height = "100%";
In my code I have an input field with a 'Clear' button and a 'Search' button.
The Clear button removes the counters, empties the input field, remove highlights and hides showed collapsed items but does not reinitialize the search.
The problem is that I need to check if the input value is the same as before, otherwise I should start a new search.
How can I achieve this?
$(document).ready(function() {
// console.log(occurrences);
$(document).on("click", "#findWord", function(e) {
let occurrences = [];
e.preventDefault();
// clear();
let x = document.querySelector("#searchedWord").value;
let error = document.querySelector("#message");
if (x == "") {
error.style.display = "block";
error.style.color = "red";
} else {
error.style.display = "none";
highlightWord();
displayOcc();
}
// let clickInput = document.querySelector('#searchedWord');
let clickClear = document.querySelector("#clear");
// Make clear button to appear on input field click
// clickInput.addEventListener('input', function(){
// clickClear.style.display = 'block';
// });
clickClear.addEventListener("click", clear);
function clear() {
// get the search term from the input
let clickInput = document.querySelector("#searchedWord");
clickInput.value = "";
var spans = $(".reports-list-item__title--compendium > mark");
// console.log(spans);
spans.each(function() {
spans.contents().unwrap();
});
occurrences.splice(0, occurrences.length);
// reset our labels
$("#count").html("");
$("#current").html("");
$(".timeline-compendium__content").collapse("hide");
$(".timeline-type .timeline-type__content").collapse("hide");
}
function highlightWord() {
// create a regex from our term
const word = document.getElementById("searchedWord").value;
const r = new RegExp("(" + word + ")", "ig");
$(".reports-list-item__title--compendium").each(function(i) {
if ($(this).text().match(r)) {
// console.log($(this).text().match(r));
// get all the matches
var matches = $(this).text().match(r);
// console.log(matches);
// loop through them
$.each(matches, function() {
// push the index of this section onto the array
occurrences.push(i);
// console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).text().replace(r, "<mark>$&</mark>"));
$(this).closest(".timeline-compendium__content").collapse("show");
// scroll to highlighted word(s)
// $(this).closest(".timeline-compendium__content")[0].scrollIntoView();
$(this).closest('.timeline-type .timeline-type__content').collapse('show');
}
});
}
function displayOcc() {
let lengthOccurrences = occurrences.length;
console.log('Length (number) of occurrences is:' + ' ' + lengthOccurrences);
let currViewMatch = Number(document.querySelector("#current").textContent);
console.log('Number of current viewed match is:' + ' ' + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch = currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc = lengthOccurrences > 0 ? " of " + lengthOccurrences : " matches found";
// // set number of matches found
let count = document.querySelector("#count");
count.textContent = insertNbrOcc;
// // set number of currently viewed match
let nbrViewMatch = document.querySelector("#current");
nbrViewMatch.textContent = currViewMatch;
}
});
$("#btnNext").click(test);
var i = 0;
function test() {
var pickHighlights = document.querySelectorAll("mark");
var viewportOffset = pickHighlights[i].getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
window.scrollTo(0, top);
i++;
if (i >= pickHighlights.length) {
i = 0;
}
}
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input#findWord {
background-color: rgb(248, 211, 3);
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clear {
width: 25px;
height: 25px;
position: absolute;
top: 20px;
right: 150px;
line-height: 25px;
font-size: 14px;
padding-left: 8px;
font-weight: bold;
cursor: pointer;
color: #fff;
background-color: red;
border: none;
border-radius: 50%;
}
#message {
display: none;
font-size: 1em;
}
#btnNext {
margin-left: 0.5rem;
}
mark {
background-color: yellow !important;
}
.stickyBar {
position: sticky;
top: 0;
z-index: 1;
background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row stickyBar">
<div class="col-sm-12 mb-2">
<div id="searchForm" class="d-flex flex-column">
<label for="searchedWord">Search... </label>
<div class="col-sm-12 p-0 d-flex ">
<input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="cool" class="form-control form-control-lg" />
<button type="submit" id="findWord" class="btn btn-primary">Search</button>
<input type="button" id="btnNext" value="next" />
<div id="clear" role="button">X</div>
</div>
</div>
</div>
<div class="col-sm-6 mb-2">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">1<sup>st</sup> collapsible item</div>
<div class="col"><span></span></div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">1</div>
<div class="col timeline-type__title">First nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">2<sup>nd</sup></div>
<div class="col"><span>collapsible item</span></div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type">
<a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">2</div>
<div class="col timeline-type__title">Second nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">3<sup>rd</sup></div>
<div class="col"><span>collapsible item</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type">
<a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">3</div>
<div class="col timeline-type__title">Third nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li>
<a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
</a>
</li>
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type">
<a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">4</div>
<div class="col timeline-type__title">Fourth nested collapsible
</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li>
<a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
</a>
</li>
<li>
<a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
You can clear the old mark and reset the i index when you click the Search button in the click handler of findword button. I added the code below.
//clear old marks
var spans = $(".reports-list-item__title--compendium > mark");
// console.log(spans);
spans.each(function () {
spans.contents().unwrap();
});
//reset i
i = 0;
$(document).ready(function () {
// console.log(occurrences);
var i = 0;
$(document).on("click", "#findWord", function (e) {
let occurrences = [];
e.preventDefault();
//clear old marks
var spans = $(".reports-list-item__title--compendium > mark");
// console.log(spans);
spans.each(function () {
spans.contents().unwrap();
});
//reset i
i = 0;
let x = document.querySelector("#searchedWord").value;
let error = document.querySelector("#message");
if (x == "") {
error.style.display = "block";
error.style.color = "red";
} else {
error.style.display = "none";
highlightWord();
displayOcc();
}
// let clickInput = document.querySelector('#searchedWord');
let clickClear = document.querySelector("#clear");
// Make clear button to appear on input field click
// clickInput.addEventListener('input', function(){
// clickClear.style.display = 'block';
// });
clickClear.addEventListener("click", clear);
function clear() {
// get the search term from the input
let clickInput = document.querySelector("#searchedWord");
clickInput.value = "";
var spans = $(".reports-list-item__title--compendium > mark");
// console.log(spans);
spans.each(function () {
spans.contents().unwrap();
});
occurrences.splice(0, occurrences.length);
// reset our labels
$("#count").html("");
$("#current").html("");
$(".timeline-compendium__content").collapse("hide");
$(".timeline-type .timeline-type__content").collapse("hide");
}
function highlightWord() {
// create a regex from our term
const word = document.getElementById("searchedWord").value;
const r = new RegExp("(" + word + ")", "ig");
$(".reports-list-item__title--compendium").each(function (i) {
if ($(this).text().match(r)) {
// console.log($(this).text().match(r));
// get all the matches
var matches = $(this).text().match(r);
// console.log(matches);
// loop through them
$.each(matches, function () {
// push the index of this section onto the array
occurrences.push(i);
// console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).text().replace(r, "<mark>$&</mark>"));
$(this).closest(".timeline-compendium__content").collapse("show");
// scroll to highlighted word(s)
// $(this).closest(".timeline-compendium__content")[0].scrollIntoView();
$(this)
.closest(".timeline-type .timeline-type__content")
.collapse("show");
}
});
}
function displayOcc() {
let lengthOccurrences = occurrences.length;
console.log(
"Length (number) of occurrences is:" + " " + lengthOccurrences
);
let currViewMatch = Number(
document.querySelector("#current").textContent
);
console.log("Number of current viewed match is:" + " " + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch =
currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc =
lengthOccurrences > 0 ? " of " + lengthOccurrences : " matches found";
// // set number of matches found
let count = document.querySelector("#count");
count.textContent = insertNbrOcc;
// // set number of currently viewed match
let nbrViewMatch = document.querySelector("#current");
nbrViewMatch.textContent = currViewMatch;
}
});
$("#btnNext").click(test);
function test() {
console.log(i);
var pickHighlights = document.querySelectorAll("mark");
var viewportOffset = pickHighlights[i].getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
window.scrollTo(0, top);
i++;
if (i >= pickHighlights.length) {
i = 0;
}
}
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input#findWord {
background-color: rgb(248, 211, 3);
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clear {
width: 25px;
height: 25px;
position: absolute;
top: 20px;
right: 150px;
line-height: 25px;
font-size: 14px;
padding-left: 8px;
font-weight: bold;
cursor: pointer;
color: #fff;
background-color: red;
border: none;
border-radius: 50%;
}
#message {
display: none;
font-size: 1em;
}
#btnNext {
margin-left: 0.5rem;
}
mark {
background-color: yellow !important;
}
.stickyBar {
position: sticky;
top: 0;
z-index: 1;
background-color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row stickyBar">
<div class="col-sm-12 mb-2">
<div id="searchForm" class="d-flex flex-column">
<label for="searchedWord">Search... </label>
<div class="col-sm-12 p-0 d-flex ">
<input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="cool" class="form-control form-control-lg" />
<button type="submit" id="findWord" class="btn btn-primary">Search</button>
<input type="button" id="btnNext" value="next" />
<div id="clear" role="button">X</div>
</div>
</div>
</div>
<div class="col-sm-6 mb-2">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<small role="alert" id="message" aria-hidden="true">Please enter a word to start searching</small>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">1<sup>st</sup> collapsible item</div>
<div class="col"><span></span></div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">1</div>
<div class="col timeline-type__title">First nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">First cool</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button" aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">2<sup>nd</sup></div>
<div class="col"><span>collapsible item</span></div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type">
<a class="accordion" data-toggle="collapse" href="#summary" role="button" aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">2</div>
<div class="col timeline-type__title">Second nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">Second cool</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">3<sup>rd</sup></div>
<div class="col"><span>collapsible item</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type">
<a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false" aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">3</div>
<div class="col timeline-type__title">Third nested collapsible</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li>
<a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">No link</div>
</a>
</li>
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type">
<a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false" aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">4</div>
<div class="col timeline-type__title">Fourth nested collapsible
</div>
<div class="col-auto">
<em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand" data-delay="400" aria-hidden="true"></em>
<span class="sr-only">Collapse/expand this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li>
<a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__title reports-list-item__title--nolink">No link</div>
</a>
</li>
<li>
<a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Some content with link
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link" data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
Hello I am trying to make a toggle for multiple elements in jQuery but it not working the plus button when click does not slide toggle the element please help here is the link
HTML
<!-post begin-- post 4 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
hello this is a test caption
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
</div>
<div class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
10 likes</span>
</div>
</div>
<!-post end for post 4-->
<!-post begin-- post 5 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
This is a test comment
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
</div>
<div id="post-info" class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
13 likes</span>
</div>
</div>
<!-post end for post 5-->
CSS
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
jQuery
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).siblings(".post-info").slideToggle();
});
});
Totally wrong selector post-info is an id not a class, then post-info not siblings of post-btn11 but it's parent siblings, so the selector should like this:
$(".post-btn11").click(function(){
$(this).parent().siblings('#post-info').slideToggle();
});
But better use class because it should repeat and not unique. Also add this class to first one too.
$(".post-btn11").click(function(){
$(this).parent().siblings('.post-info').slideToggle();
});
JSFiddle
Here is the correction to your code. I have also updated your fiddle so go check it out. You had a problem with giving your post-info element an ID. In corrected version I simply add post-info as a class name. And also the .sublings() function will not work, since you applied it to your button element and it will not find any nested elements in it. So I needed to find a button's parent element first to get on the "same level" with your next post-info element and then simply use .next() function
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).parent(".col-xs-2").next(".post-info").slideToggle();
});
});
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-post end for post 3-->
<!-post begin-- post 4 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
hello this is a test caption
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
</div>
<div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
10 likes</span>
</div>
</div>
<!-post end for post 4-->
<!-post begin-- post 5 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
This is a test comment
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
</div>
<div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
13 likes</span>
</div>
</div>
<!-post end for post 5-->
I have a div with some text and another one that I'm filling it with a list of photos and a footer div. The footer div should be below photos div but it gets under it. This is my code:
div.gallery {
margin: 5px;
border: 2px solid #ccc;
float: left;
width: 280px;
}
div.gallery:hover {
border: 2px solid #777;
}
div.gallery img {
width: 80%;
height: auto;
margin: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
<div id="footer" style="background:blue;height:100px;width:100%">
<div style="background:blue;height:200px;width:100%"></div>
</div>
Ans here is a screenshot of it
How can i fix it?
Issue may be because of the floats. Try using Clearfix
Try adding this class to comments.
(Modified Some HTML)
Give this a try.
HTML
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments" class="clearfix">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
</div>
<div id="footer" style="background:blue;width:100%">
<div style="background:blue;width:100%"> footer div here</div>
</div>
CSS
.clearfix::after {
content: "";
display: table;
width: 100%;
clear: both;
}
div.gallery {
margin: 5px;
border: 2px solid #ccc;
float: left;
width: 280px;
}
div.gallery:hover {
border: 2px solid #777;
}
div.gallery img {
width: 80%;
height: auto;
margin: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
.clearfix::after {
content: "";
width: 100%;
display: table;
clear: both;
}
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments" class="clearfix">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
</div>
<div id="footer" style="background:blue;width:100%">
<div style="background:blue;width:100%"> footer div here</div>
</div>
Link for reference
Hope this helps…
UPDATED Your floats are not cleared. Use #Chandras example or you can add a CSS ID #footer { clear:both; } and call on it in your footer div as you have in your example already. <div id=footer">.
Bonus, add your style="width:100%; height:200px; background:blue; color:#FFF;" line to your css file and remove the style attr from your div footer tag all together.
In your example snipit, I used a class with clear in your footers ID.
Check it:
div.gallery {
margin: 5px;
border: 2px solid #ccc;
float: left;
width: 280px;
}
div.gallery:hover {
border: 2px solid #777;
}
div.gallery img {
width: 80%;
height: auto;
margin: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
#footer {
clear:both;
width:100%;
height:200px;
background:blue;
color:#FFF;
}
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
<div id="footer">Footer
</div>
FYI
Bootstrap V3 soon to release v4.
CDN: Bootstrap CDN link
BS V3 Grid System: specific grid layout system
Bootstrap is an open source plugin that uses a standardized set of css and js rules already coded for you.
Among the many other awesome css and js additions, float your html tags using a standardized set of classes known as cols. These are used with media short cuts: xs, sm, md, lg, then add a division of 12, so you get something like. <div class="gallery col-xs-12 col-sm-12 col-md-4 col-lg-4"> (col-md-4 means you are using up 4 of the 12 increments for a single div. You have 3 gallery divs, so 3 X 4 = 12 = col-md-4) These validate for different screen size media.
Here is the layout from bootstrap grid per media:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
// Extra small devices Phones (<768px) = .col-xs
// Small devices Tablets (≥768px) = .col-sm
// Medium devices Desktops (≥992px) = .col-md
// Large devices Desktops (≥1200px) = .col-lg
So by looking at my example, class="col-xs-12" on phones we would get one div that would be width=100%;. Where as "col-md-4" on lap tops and desk tops with resolution of any media larger than 992px we would get the divs stacked side by side at width=33.33%;
Best to just read up on bootstrap as it is a bit to get into in one of these forums. It is actually very simple to add and use if you read up on it and how it works.
There is also Bootply -> Bootstrap online editor, there are some amazing tools there to help you get started using bootstrap!
Hope this helps...
Remember that float are removed from normal document flow. You should clear floats when using them.
But I suggest you to rewrite your float code using flexbox. In this case you can remove floats because they will be ignores. Demo:
#comments {
/* specify element as flex-container */
/* its children will be treated as flex items */
display: flex;
/* allow moving elements to next line */
flex-wrap: wrap;
}
div.gallery {
margin: 5px;
border: 2px solid #ccc;
width: 280px;
}
div.gallery:hover {
border: 2px solid #777;
}
div.gallery img {
width: 80%;
height: auto;
margin: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
<div id="footer" style="background:blue;height:100px;width:100%">
<div style="background:blue;heoght:200px;width:100%"></div>
</div>
</div>
You can replace This Code.
<div style="background:blue;height:200px;width:100%"></div>
Your issue that your comments container height is not correct, it is is not considering the inner nodes size.
So give comments overflow:hidden; or a fixed height or minheight
#footer {
float:left;
width:100%;
}
I am making a website for education purpose as well, but I got some error that I cant figure out by myself.
I wrote a template like:
<div class="row" style="height: 75%;" align="center" id="room-list">
<template id="room-template" class="slide">
<div class="col-md-4" id="left-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
<div class="col-md-4" id="center-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;"></div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
<div class="col-md-4" id="right-item">
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<span id="room-type"></span>
</div>
<div class="panel-body">
<div>
<img id="thumbnail" class="thumbnail" style="width: 300px; height: 300px;">
</div>
<div id="utility">
Utilities:
</div>
<div id="price">
Price:
<span id="sale" class="sale"><i class="fa fa-usd" aria-hidden="true"></i></span>
<span id="original" class="original"><i class="fa fa-usd" aria-hidden="true"></i></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default btn-primary" style="width: 100%;">Book now!</button>
</div>
</div>
</div>
</template>
</div>
And I use jquery to add that template to a append a lot of divs by using template.
var roomList = document.querySelector('template# room-list').content;
for (var i = 0; i < roomEntities.length; i++) {
var room = roomEntities[i];
var price = priceEntities[i];
var type = room.type;
var thumbnail = room.thumbnail;
var sale = price.sale;
var original = price.original;
for (var i = 0; i < 3; i++) {
var slt = "#center-item";
if (i == 0) {
slt = "#left-item";
}
else
slt = "#right-item";
var tpl = document.getElementById('room-template');
tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type;
tpl.querySelector(slt + '.panel-body #thumbnail').attr('src') = thumbnail;
tpl.querySelector(slt + '.panel-body #sale').innerText = sale;
tpl.querySelector(slt +'.panel-body #original').innerText = original;
roomList.appendChild(tpl.content.cloneNode(true));
}
}
But it always returns error at tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type; it said Cannot set property innerText of null, it mean cannot find the element in template.
Any advice or recommended. Please help. Many thanks
Change all Selectors in your Code
tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText
tpl.querySelector(slt + ' .panel-default .panel-heading #room-type').innerText