I have code for mega dropdown menu on click. It works fine but code is Substandard, wrong. Is it possible to simplify it as anything? Here i writed the same action code for others
Look at the code:
$('.main-nav .first').click(function () {
$('.drop-down-container').toggleClass('visible');
});
$('.main-nav .sec').click(function () {
$('.drop-down-container-sec').toggleClass('visible')
});
$('.main-nav .rd').click(function () {
$('.drop-down-container-rd').toggleClass('visible');
});
$('.main-nav .fth').click(function () {
$('.drop-down-container-fth').toggleClass('visible');
});
$('.main-nav .fvth').click(function () {
$('.drop-down-container-fvth').toggleClass('visible');
});
HTML:
<li class="nav-item sec ">JAMOA VA O`QITUVCHILARGA<i class="fa fa-angle-down"></i>
<div class="drop-down-container-sec d-n" style="margin-left: -13em;">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 left " style="height: 510px;">
<h4 style="color: white">Tezkor menyu</h4>
<ul class="list-menu">
<li>Dars ishlanmalari</li>
<li>Ilg`or texnologiyalar</li>
<li>Tajriba sinovlari</li>
<li>Kasaba uyushmamiz</li>
<li>Moddiy-texnika bazamiz</li>
<li>Davlat dasturlari ijrosi</li>
<li>Me`yoriy hujjatlar</li>
<li>Maktab konsepsiyasi</li>
<li>Ustozlarimiz</li>
<li>Maktab rahbariyati</li>
<li>Kadrlar salohiyati</li>
<li>Hisobot o`rnida</li>
<li>Doimiy komissiyalar</li>
<li>Homiylarimiz</li>
<li>Hamkorlik</li>
<li>Ijodkor o`qituvchilar</li>
<li>Yilning eng yaxshi fan o`qituvchisi</li>
<li>Attestasiya materiallari</li>
<li>O`quv rejalari</li>
</ul>
<p class="all">
Umumiy yig'inda
</p>
</div>
<div class="col-md-8 col-sm-8 col-xs-12 right">
<li class="nav-item rd ">MAKTAB VA TA`LIM<i class="fa fa-angle-down"></i>
<div class="drop-down-container-rd d-n" style="margin-left: -28em">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12 left">
<h4 style="color: white">Elektron kutubxona</h4>
<ul class="list-menu">
<li>Bitiruvchilar vinetkalari</li>
<li>Maktab Nizomi</li>
<li>Maktabimiz pasporti</li>
<li>Ichki tartib-qoidalar</li>
<li>Ona-vatan madhi</li>
<li>Alifbe bayramlari</li>
<li>To`garaklarimiz</li>
<li>"Bilimlar bellashuvi" akademiya klublari</li>
<li>Fotoalbom</li>
<li>Videolavhalar</li>
<li>Tibbiy xizmat</li>
<li>Ogohlik va xavfsizlik</li>
</ul>
<p class="all">
Barcha darsliklar
</p>
</div>
<div class="col-md-8 col-sm-8 col-xs-12 right">
<div class="row">
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5><a href="#">
Imtihonlar jadvali
</a></h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<h5><a href="#">
Imtihonlar jadvali
</a></h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
</div>
</div>
</div>
</div>
</li>
So dropdown menu is huge
Guys if it possible to Simplify and fix this code please help me! I just hate that kind of code.
Well, your HTML code does not contain any element with the class main-nav. But you can short your code down to something like the following.
$('.main-nav .first, .main-nav .sec, .main-nav .rd, .main-nav .fth, .main-nav .fvth').click(function() {
var s = $(this).attr("class") == "first" ? "" : "-" + $(this).attr("class")
console.log('.drop-down-container' + s)
$('.drop-down-container' + s).toggleClass('visible');
});
$('.main-nav .first, .main-nav .sec, .main-nav .rd, .main-nav .fth, .main-nav .fvth').click(function() {
var s = $(this).attr("class") == "first" ? "" : "-" + $(this).attr("class")
console.log('.drop-down-container' + s)
$('.drop-down-container' + s).toggleClass('visible');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<div class="first">first
</div>
<div class="sec">sec
</div>
<div class="rd">rd
</div>
<div class="fth">fth
</div>
<div class="fvth">fvth
</div>
</div>
Let me simplify your code. Instead of handling each and every block separately with individual class names, change them to have common class names. Now you can easily do the toggling with any number of elements.
$('.nav-item .dropdown-toggle').click(function(){
$(this).closest('.nav-item').find('.drop-down-container').toggle('slow');
$('.navigation-tabs .dropdown-toggle').not(this).closest('.nav-item').find('.drop-down-container').hide('slow');
});
.drop-down-container {display: none;}
.navigation-tabs {padding: 0;}
.nav-item {display: block; border: 1px solid #ccc; padding: 5px; margin: 5px;}
.nav-item a {display: block; text-decoration: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="navigation-tabs">
<li class="nav-item">
<a class="dropdown-toggle" href="#">
JAMOA VA O`QITUVCHILARGA<i class="fa fa-angle-down"></i>
</a>
<div class="drop-down-container">First container</div>
</li>
<li class="nav-item">
<a class="dropdown-toggle" href="#">
MAKTAB VA TA`LIM<i class="fa fa-angle-down"></i>
</a>
<div class="drop-down-container">Second container</div>
</li>
</ul>
You can use a code like the following.
const array = ['first', 'sec', 'rd', 'fth', 'fvth'];
array.forEach(x => {
$(`.main-nav .${x}`).click(() => $(`.drop-down-container${x === 'first' ? '' : '-'+x}`).toggleClass('visible') );
});
it will iterate the array and add the click function for .main-val .YourClass that will toggle the class for .drop-down-container-YourClass
Related
I created an input field to search for words or their partial matches. In this example, I'm using the word cool.
The issue is that after 1st found match, I'm seeing matches from the HTML code and can't figure it out why. If I'm trying to find matches for the 3rd time, everything gets stuck.
Can someone help me understand why it's happening this?
Is there a way to write this part of code differently?
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
document.addEventListener("DOMContentLoaded", function() {
let btn = document.querySelector('#findWord');
btn.addEventListener('click', function(){
let occurrences = [];
$('.timeline-type__content ul > li > a > .reports-list-item__title--compendium').each(function (i) {
// create a regexp from our term
const word = document.getElementById("searchedWord").value; // Eg: "cool"
const allCharacters = word.split(""); // ["c", "o", "o", "l"]
// Optional: remove duplicate characters:
const characterSet = new Set(allCharacters);
const uniqueCharacters = [...characterSet]; // ["c", "o", "l"]
const pattern = `(${uniqueCharacters.join("|")})`; // c|o|l
const r = new RegExp(pattern, "ig"); // /(c|o|l)/ig
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
});
let lengthOccurrences = occurrences.length;
console.log('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 in document';
// set number of matches found
let count = document.querySelector('#count');
count.textContent = insertNbrOcc;
// console.log(count);
// set number of currently viewed match
let nbrViewMatch = document.querySelector('#current');
nbrViewMatch.textContent = currViewMatch;
// console.log(insertTxtViewMatch);
if(currViewMatch != 0){
// open the section holding the currently viewed match using the indexes we stored earlier
$('.timeline-compendium__content').eq(occurrences[currViewMatch - 1]).collapse('show');
$('.timeline-type .timeline-type__content').eq(occurrences[currViewMatch - 1]).collapse('show');
}
});
});
.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[type=text]:focus {
outline: 3px solid rgb(87, 163, 214);
} */
input#findWord {
background-color: rgb(248, 211, 3);
/* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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>
<!-- HTML CODE -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- <form id="searchForm" name="searchForm"> -->
<label for="searchedWord">Search</label>
<div>
<input type="text" id="searchedWord" placeholder="search.." aria-labelledby="searchedWord"/>
<button type="submit" id="findWord" value="Find">Find</button>
</div>
<!-- </form> -->
</div>
<div class="col-sm-6">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<span id="message"></span>
</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">Foreword</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">Foreword</div>
<div class="col timeline-type__title">Foreword</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__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>Foreword
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Foreword 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">Title A</div>
<div class="col"><span>SUMMARY</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">A</div>
<div class="col timeline-type__title">Summary</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="/en/secgen/courtsecretariat/Decisions/sommaire_en.pdf?d=wd815d51ad20c480292bc796688fd10d2&csf=1&e=XIu0Q9"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>A
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Summary not 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">Title B</div>
<div class="col"><span>The Institution, the Court, operational procedures, the Members</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">Chapter B 0</div>
<div class="col timeline-type__title">Treaties on European Union</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 reports-list-item__chapter">B 0</div>
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">
Treaties on European Union
</div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b01.pdf?d=wa9cc5281eeb347718865a52bf6c67efb&csf=1&e=zyPEtD"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Status of the Court / Revision of Article 4 of the EEC Treaty"
data-delay="400" aria-hidden="true"></em>B 0.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Status of the Court / Revision of Article 4 of the EEC Treaty 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="/en/secgen/courtsecretariat/Decisions/b02.pdf?d=w93c3d23dbdc04bcda16c5be9151c183a&csf=1&e=yaoQwr"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Obligations deriving from the Treaty on European Union" data-delay="400"
aria-hidden="true"></em>B 0.2
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Obligations deriving from the Treaty on European Union
</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="/en/secgen/courtsecretariat/Decisions/b03.pdf?d=w56410e2b1b9f4ee2af9278081fc1d2c6&csf=1&e=BXz2wy"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip" title="The Court's name"
data-delay="400" aria-hidden="true"></em>B 0.3
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
The Court's name
</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="#chapterB1" role="button" aria-expanded="false"
aria-controls="chapterB1" 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">Chapter B 1</div>
<div class="col timeline-type__title">The Court's operational procedures
</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="chapterB1">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 1.0</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">The
Court's structure
</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">Chapter B 2</div>
<div class="col timeline-type__title">Members of the Court
</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-auto reports-list-item__chapter">B 2.1</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">Code
of conduct for the members and former members of the Court
</div>
</a>
</li>
<li><a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Code of conduct for the Members and former Members of the Court"
data-delay="400" aria-hidden="true"></em>B 2.1.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Code of conduct for the Members and former Members of the Court - 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>
</div>
</div>
</div>
(This was too long for a comment, maybe already helps you solve the issue)
You call $(this).html().match(r); to find matching words. Of course this will match occurences in the HTML. If you search for example "class" or "section". The HTML itself is matched there.
You should loop through HTML elements which are text nodes and call your .match(r) on each of them. Otherwise it will find tags, attributes and values in the attributes as well.
Taken from this answer: How do I select text nodes with jQuery:
$(elem).contents().filter(function() { return this.nodeType == Node.TEXT_NODE; });
In the code which replaces matches, you write $(this).html($(this).html().replace( ... - you can change this to $(this).html($(this).text().replace( ... if you only go through the text nodes and be safe there is no HTML there.
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.
i am making a application layout.
my vertical panel loads in expanded format i want to load as collapsed vertical panel like-
here is my codepen link for code -https://codepen.io/anuj53214/pen/abNRrGO
vertical menu should look like this on load
(i tried with on load jquery event that is written in on click but this worked like first expand then collapse on page laod)
In order to get your result it is enough to trigger the click event at the end of its definition:
$(".rad-toggle-btn").on('click', function() {
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
}).trigger('click');
^^^^^^^^^^^^^^^^^^
$(".rad-toggle-btn").on('click', function() {
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
}).trigger('click');
*{box-sizing:border-box}body{background:#f3f3f4;line-height:normal;font-size:16px;font-family:sans-serif}body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}body::-webkit-scrollbar{width:10px;background-color:#407396}body::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#407396}a{text-decoration:none}a:hover{text-decoration:none}.rad-navigation{position:fixed;left:0;right:0;top:0;height:50px;box-shadow:0 0 9px 4px rgba(0,0,0,.1),0 -5px 2px 2px rgba(0,0,0,.1);background:#fff;z-index:10000}.links{margin-right:30px;position:relative}.links li{list-style:none;position:relative;margin:10px;display:inline-block}.rad-dropmenu-item.active{display:block;-webkit-animation:flipInX .3s ease}.rad-logo-container{width:225px;text-align:center;height:50px;float:left;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-top-nav-container{float:right;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-logo,.rad-toggle-btn{text-decoration:none;position:relative;height:50px;line-height:50px;padding:0 15px;font-size:22px;font-weight:900;text-transform:uppercase;text-decoration:none;color:#222533;display:inline-block}.rad-toggle-btn:hover{background:#9494b8}.rad-menu-item{position:relative;padding:0 10px;line-height:30px;height:30px;color:#89949b;z-index:5}.rad-menu-badge{position:absolute;min-width:20px;min-height:20px;line-height:20px;font-weight:700;color:#fff;border-radius:100%;font-size:12px;background:#e94b3b;box-shadow:.5px .2px 1px rgba(0,0,0,.5);display:inline-block;text-align:center;top:-10px;z-index:1}.rad-dropmenu-item{position:absolute;right:0;top:40px;min-width:250px;background:#fff;border-top:5px solid #2f4050;border-radius:2px;box-shadow:0 0 5px rgba(0,0,0,.15);display:none}.rad-dropmenu-item:before{content:"";position:absolute;border-width:0 10px 10px 10px;border-style:solid;border-color:#2f4050 transparent;top:-14px;right:8px}.rad-dropmenu-footer,.rad-dropmenu-header{display:block!important;background:#f9fafb;text-transform:uppercase;font-weight:700;font-size:12px;margin:0!important;padding:6px;text-align:center}.rad-dropmenu-footer>a{color:#98a0a3;line-height:12px;text-decoration:none}.rad-dropmenu-header{border-bottom:1px solid #f2f2f2}.rad-dropmenu-header>a{color:#98a0a3;line-height:12px;text-decoration:none}.rad-dropmenu-footer{border-top:1px solid #f2f2f2}.rad-sidebar{z-index:9999;position:fixed;background:#2f4050;width:225px;height:100vh;top:50px;left:0;box-shadow:0 0 4px rgba(0,0,0,.14),2px 4px 8px rgba(0,0,0,.28);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-sidebar li{text-align:left;height:50px}.rad-sidebar li a{text-decoration:none;height:50px;display:block;color:#fff}.rad-sidebar li a i{position:relative;width:50px;height:50px;line-height:50px;text-align:center}.rad-sidebar li a i:before{z-index:10;position:relative}.rad-sidebar li a>span{display:inline-block;padding-left:10px;-webkit-transition:all .2s ease-in-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.rad-sidebar li:hover{background:#263340}.rad-sidebar li:hover .icon-bg{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.icon-bg{position:absolute;left:0;top:0;bottom:0;z-index:1;width:100%;-webkit-transform:translate3d(-47px,0,0);transform:translate3d(-47px,0,0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-bg-primary{background:#1c7ebb}.rad-bg-success{background:#23ae89}.rad-bg-danger{background:#e94b3b}.rad-bg-warning{background:#f98e33}.rad-bg-violet{background:#6a55c2}.rad-sidebar.rad-nav-min{width:50px!important}.rad-sidebar.rad-nav-min .rad-sidebar-item{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}.rad-sidebar.rad-nav-min .icon-bg{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.rad-sidebar.rad-nav-min .icon-bg:hover{opacity:.4}.rad-body-wrapper{position:absolute;left:250px;top:75px;width:auto;right:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-body-wrapper.rad-nav-min{left:50px}.rad-chart{height:250px}#-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}#media screen and (max-width:850px){.rad-navigation{height:100px}.rad-logo-container{display:block;float:none;width:100%;border-bottom:1px solid #f2f2f2}.rad-top-nav-container{display:block;float:none;height:50px;font-size:12px;background:#fff}.rad-menu-badge{font-size:10px;min-width:15px;min-height:15px;line-height:15px}.links{float:right}.rad-sidebar{top:100px}.rad-sidebar.rad-nav-min{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}.rad-body-wrapper{top:125px;position:relative}.rad-body-wrapper.rad-nav-min{left:0}}.panel{box-shadow:0 2px 5px 0 rgba(0,0,0,.26);border-radius:0!important}.panel-heading{background:#2f4050!important;border-radius:0;padding:15px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}.panel-heading .panel-title{text-transform:uppercase;font-weight:600;font-size:12px;color:#dce0f3}#areaChart path[AttributesStyle]{fill:#39c7aa;stroke:none;fill-opacity:1}.menu{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;justify-content:space-around;max-width:700px;margin-left:auto;margin-right:auto}.menu a{color:#fff;margin:10px;padding:20px;text-align:center;font-size:14px;text-decoration:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);border-radius:0!important;background-color:#2f4050!important;-webkit-transition:all ease-in-out 350ms;transition:all ease-in-out 350ms}.menu a:hover{color:#9ab9ce;background-color:#4b667f!important}.overlay{height:0%;width:100%;position:fixed;z-index:1;top:0;left:0;background-color:#000;background-color:rgba(0,0,0,.99);overflow-y:scroll;-webkit-transition:.5s;transition:.5s}.overlay::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}.overlay::-webkit-scrollbar{width:10px;background-color:#407396}.overlay::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#407396}.overlay-content{position:relative;top:25%;width:100%;text-align:center;margin-top:30px}.overlay a{padding:8px;text-decoration:none;font-size:36px;color:#818181;display:block;-webkit-transition:.3s;transition:.3s}.overlay a:focus,.overlay a:hover{color:#f1f1f1}.overlay .closebtn{position:absolute;top:100px;right:45px;font-size:60px}.overlay-c{max-width:300px;margin-left:auto;margin-right:auto}.field-container{-webkit-box-flex:1;flex:1 100%;margin-bottom:20px;margin-top:-1px;border-width:0 0 1px 0;border-style:solid;border-color:#407396}.field-container .input{width:100%;margin:0;padding:0 6px;border:none;outline:0;background:0 0;color:#fff}.field-container .text-area{min-height:38px;height:50px;margin:2px 0 3px;overflow-y:scroll;resize:none;-webkit-transition:height .1s;transition:height .1s}.field-container :-moz-placeholder,.field-container :-ms-placeholder,.field-container ::-webkit-input-placeholder{color:#407396}.button-container{display:-webkit-box;display:flex;margin:10px}.button-container a:hover{color:#fff}.button-container a{color:#407396;margin:5px;margin-right:40px;font-size:20px;text-decoration:none;-webkit-transition:all ease-in-out 350ms;transition:all ease-in-out 350ms}p{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;color:#fff;font-size:40px;padding-bottom:50px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container"><a class="rad-logo" href="#">p.m.s</a><a class="rad-toggle-btn pull-right" href="#"><i class="fa fa-bars"></i></a></div>
<div class="rad-top-nav-container">
<ul class="links">
<li><a class="rad-menu-item" href="#"><i class="fa fa-comment-o"> </i></a></li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-envelope-o"><span class="rad-menu-badge">3</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header">Your Notifications</li>
<li class="rad-notification-item"><a class="rad-notification-content" href="#"></a></li>
<li class="rad-dropmenu-footer">See all notifications</li>
</ul>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-bell-o"><span class="rad-menu-badge">49</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header">Your Alerts</li>
<li class="rad-notification-item"><a class="rad-notification-content" href="#"></a></li>
<li class="rad-dropmenu-footer">See all alerts</li>
</ul>
</li>
<li><a class="rad-menu-item" href="#"><i class="fa fa-sign-out"> </i></a></li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar">
<ul>
<li><a class="inbox" href="#"><i class="fa fa-dashboard"><span class="icon-bg rad-bg-success"></span></i><span class="rad-sidebar-item">Dashboard</span></a></li>
<li><i class="fa fa-wrench"><span class="icon-bg rad-bg-violet"></span></i><span class="rad-sidebar-item">Settings</span></li>
</ul>
</nav>
</aside>
<main>
<section>
<div class="rad-body-wrapper">
<div class="container-fluid">
<div class="menu">ADD TEAM MEMBERCREATE PROJECTSET TASK</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">team members</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">projects</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">event notification</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">project task progress</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="areaChart"></div>
</div>
</div>
</div>
<!-- here-->
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">number of project</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="donutChart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">project stage</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="barChart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
Is there any way possible to apply animation effect to images in my about section,here is the code:
<div id="about" class="row section bgimg3">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
Here is my link to code pen: https://codepen.io/saisree/pen/WjVjMW
What i want to do is there are three images in my about section,i don't want to display all the three images at a time,i want to appear one by one when i click on about section in header!I want to use animation for this!
I recommend this library https://github.com/michalsnik/aos . Is very simple the implementation and you can get delay for any class.
Example: https://michalsnik.github.io/aos/
there are different ways to implement it, since you are using jQuery, you can try fade in effects, like the example https://codepen.io/RACCH/pen/bRbpwM
adding this event to your about tab, and hiding the circled images
$(".img-circle").hide();
var iteration=1;
$(".1").click(function() {
$('html,body').animate({
scrollTop: $("#about").offset().top},
'slow');
$(".img-circle").hide();
$('#'+iteration+'-img-circle').fadeIn(2000);
if(iteration==3) iteration=1;
else iteration++;
});
Add the following jQuery:
$(".1").click(function() {
$(".col-sm-4.pull-right img:nth-child(1)").hide();
$(".col-sm-4.pull-right img:nth-child(2)").hide();
$(".col-sm-4.pull-right img:nth-child(3)").hide();
$(".col-sm-4.pull-right img:nth-child(1)").fadeIn(2000);
$(".col-sm-4.pull-right img:nth-child(2)").fadeIn(4000);
$(".col-sm-4.pull-right img:nth-child(3)").fadeIn(6000);
});
Add below code.
$('.img-circle').mouseenter(function(){
$(this).animate({
'border-radius': '40%'},
'slow',
function(){
$(this).animate({
'border-radius': '50%'},
'fast');
});
})
This working code will help you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$().ready(function () {
$(".0").click(function () {
$('html,body').animate({
scrollTop: $("#home").offset().top
},
'slow');
});
$(".1").click(function () {
$('html,body').animate({
scrollTop: $("#about").offset().top
},
'slow');
});
$('.img-circle').mouseenter(function () {
$(this).animate({
'border-radius': '40%'
},
'slow',
function () {
$(this).animate({
'border-radius': '50%'
},
'fast');
});
})
$(".2").click(function () {
$('html,body').animate({
scrollTop: $("#family").offset().top
},
'slow');
});
$(".3").click(function () {
$('html,body').animate({
scrollTop: $("#blog").offset().top
},
'slow');
});
$(".4").click(function () {
$('html,body').animate({
scrollTop: $("#testimonial").offset().top
},
'slow');
});
$(".5").click(function () {
$('html,body').animate({
scrollTop: $("#spec").offset().top
},
'slow');
});
$(".6").click(function () {
$('html,body').animate({
scrollTop: $("#contact").offset().top
},
'slow');
});
$(".overlay + img").each(function () {
var w = $(this).css("width");
$(this).prev(".overlay").css("width", w);
});
});
</script>
<style>
#blog a {
color: Bisque;
text-decoration: underline;
}
.bgimg {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A");
background-position: center;
background-size: cover;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3 {
text-color: black;
}
#family h2 {
color: black;
text-decoration: none;
}
#Nav h3 {
color: black;
text-decoration: none;
}
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(255, 255, 255, 0.48);
/* background-color: white; */
overflow: hidden;
height: 0;
transition: .5s ease;
}
.ovparent:hover .overlay {
height: 100%;
}
.ovparent {
position: relative;
}
#over {
text-align: center;
}
.bgimg1 {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJRGtOjps8wjohBoCFu3oDrwu4O6RakP9KgUbbBHPdoFb_MuUs");
background-position: center;
background-size: cover;
}
.bgimg2 {
background-image: url("data:image/jpeg;base64,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");
background-position: center;
background-size: cover;
}
.well.first {
background-color: Bisque;
}
.well.second {
background-color: LightGoldenRodYellow;
}
.well.third {
background-color: Thistle;
}
.well.fourth {
background-color: Pink;
}
</style>
</head>
<body>
<div id="Nav" class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="https://codepen.io/saisree/full/WjVjMW/">Anand Reddy</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" ">
<li class="active"><a class="0" href="#home">Home</a></li>
<li><a class="1" href="#about">About</a></li>
<li><a class="2" href="#family" >Meet the family</a></li>
<li>Blog</li>
<li >Testimonials</li>
<li >Specialization</li>
<li ><a class="6" href="#contact">contact</a></li>
</ul>
</div>
<div class="jumbotron myjumbotron ">
<section class="bgimg" id="home">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1 style="color:white;" class="text-center">ANAND REDDY</h1>
<h3 style="color:white;" class="text-center">A WONDERFUL SERENITY HAS TAKEN POSSESSION OF MY ENTIRE SOUL, LIKE THESE
SWEET MORNINGS OF SPRING WHICH I ENJOY WITH MY WHOLE HEART
</h3>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
<hr style="border: 1px solid black" />
<div id="about" class="row section">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="family" class="gray-bg">
<section class="container section team-3col ">
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
</section>
</div>
<hr style="border: 1px solid black" />
<div id="blog" class="section bgimg1">
<p> </p>
<h1 style="color:Bisque;" class="text-center">Welcome to my Blog</h1>
<h2 style="color:Bisque;" class="text-center">"Man must explore, and this is exploration at its greatest"</br>
Problems look mighty small from 150 miles up
</h2>
<p> </p>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2 >
Know about my backgound
<h2>
</div>
<div class="col-md-5 col-md-offset-1"> <h2> Know about my specialization</h2></div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1"><h2> Contact My Firm</h2></div>
<div class="col-md-5 col-md-offset-1">
<h2 class="text-center"> Visit my portfolio</h2></div>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="testimonial" class="section">
<div class="section-header">
<h2 style="color:white"; class="text-center">Testimonials</h2>
<h4 style="color:white"; class="text-center">
We have worked with hundreds of clients. Check what our awesome happy clients saying about us.
</h4>
</div>
<p> </p>
<div class="row">
<div class="well first col-md-3 ">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span>
</div>
<div class="well second col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well third col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well fourth col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
</div> </div>
<hr style="border: 1px solid black" />
<div id="spec" class="section bgimg2">
<p> </p>
<h2 style="color:black" class="text-center">So, what will I actually be doing?</h2>
<h3 style="color:SlateGrey" class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Attending court hearings (and doing the preparation beforehand)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Drawing up contracts and other legal documents </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Negotiating (not all cases will end up in court)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Explaining the law and giving general legal advice </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Settling disputes and supervising any agreements </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Researching and gathering evidence</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Analysing legal documents</h2>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Supervising legal assistants.</h3>
<p> </p>
</div>
<hr style="border: 1px solid black" />
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading" style="color:black">Let's Get In Touch!</h2>
<hr class="primary">
<h3 style="color:black">Ready to discuss your next case with me? That's great! Give me a call or send an email and I will get back to you as soon as possible!</h3>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<h3><span class="glyphicon glyphicon-earphone">986-60-32199</span></h3>
</div>
<div class="col-lg-4 text-center">
<h3><span class="glyphicon glyphicon-envelope">anandreddyv.25#gmail.com</span></h3>
</div>
</div>
</div>
</section>
<hr style="border: 1px solid black " />
</div>
</div>
</div>
<footer class="text-center ">
<p>Copyrights © <span class="text-primary">anand reddy vennapusa.</span> All Right Reserved.</p>
<p>Developed By : saisree vennapusa</p>
</footer>
</body>
</html>
Hello I work on create bootstrap testimonials using bootstrap carousel, so I Divided every item into 3 boxes and it's work well but the problem will be appear in responsive media screen that the section height will be not proper:
so my Idea is the JQuery code will check If the window width is less than 767px then will cut the .col-xs-12:eq(1) and append it after .item then wrap it in row Div then Wrap it in .item Div:
Here a simple example:
Before:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
After: the code will check if the window width is less than 767px then will do this actions:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
Here my snippet:
; (function ($) {
"use strict";
var $windowWidth = $(window).width();
if ($windowWidth < 767) {
$('#pencil-testimonials_2 .item').each(function (index, element) {
$(this).find(".col-xs-12:eq(1)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
$(this).find(".col-xs-12:eq(2)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
});
}
})(jQuery);
#pencil-testimonials_2 {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
#pencil-testimonials_2 .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
#pencil-testimonials_2 .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#pencil-testimonials_2 .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
#pencil-testimonials_2 .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_2" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of First Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Second Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Third Slide -->
</div>
</div>
</div>
Here's what you can do:
.carousel.slide {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
.carousel.slide .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
.carousel.slide .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.carousel.slide .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
.carousel.slide .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_1" class="carousel slide hidden-xs hidden-sm" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_1" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="2">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 1
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 2
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 4
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 5
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 7
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 8
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pencil-testimonials_2" class="carousel slide hidden-md hidden-lg" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="6">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="7">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="8">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 1
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 2
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 4
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 5
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 7
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 8
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Basically, you just create two carousels and hide the one you don't want using Bootstrap's utility classes: hidden-xs, hidden-sm, hidden-md and hidden-lg. If you need more control, you can always create a third one for tablets.