Make the paragraphs random when displaying Using Javascript - Vanilla Javascript - javascript

I have 3 paragraphs, using Javascript I have made the paragraph replicate once I hit a button as many times as possible.
I need the replicated paragraphs to be randomized at every hit of the button.
NOTE: I only need to add the Js code that makes the paragraph appear in randomized order. What you see is that the paragraphs appear correctly. I need it to appear randomly.
Here is my code.
const element = document.getElementsByTagName("p");
function myFunction() {
document.getElementById("demo").innerHTML += element[0].innerHTML + "<br>" + "<br>" + element[1].innerHTML + "<br>" + "<hr>" + element[2].innerHTML + "<br>" + "<br>";
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, world</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lbrt. Maecenas faucibus mollis interdum. <img src="test.jpeg" width="300" height="auto"> bibendum nulla sed consectetur. Praesent <code><b>commodo cursus magna, vel scelerisque nisl consectetur et.</b></code></p>
<p id="demo"></p>
<p id="demo"></p>
<p id="demo"></p>
<button onclick="myFunction()">Hit me</button>


We can get the paragraphs and store then in an array then shuffle them and add them back to the html
there are more details in the code comments below
var pElements = [];
document.querySelectorAll("p").forEach(
p => { pElements.push(p.innerHTML);
});
function shuffle(array) {
let currentIndex = array.length, randomIndex;
// While there remain elements to shuffle...
while (currentIndex != 0) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
// And swap it with the current element.
[array[currentIndex], array[randomIndex]] = [
array[randomIndex], array[currentIndex]];
}
return array;
}
function myFunction() {
var shuffledArray = shuffle(pElements);
var newDiv = "<div class='pOrder'";
for(var i = 0; i < shuffledArray.length; i++){
newDiv += "<p>" + shuffledArray[i] + "</p>";
}
newDiv += "</div><br><br>";
document.getElementById("content").innerHTML += newDiv;
}
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros
</p>
<p>
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</p>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lbrt. Maecenas faucibus mollis interdum. <img src="test.jpeg" width="300" height="auto" /> bibendum nulla sed consectetur. Praesent <code><b>commodo cursus magna, vel scelerisque nisl consectetur et.</b></code>
</p>
<br>
<br>
<div id="content">
</div>
<button onclick="myFunction()">Hit me</button>

Related

jQuery to Javascript/Vue

I want to create a custom search box that can jump to its matches using mark.js mark.js web page.
They do have an example here:
https://jsfiddle.net/julmot/973gdh8g/
But it is written using jQuery.
I tried converting it to JS/Vue (using Quasar), but now I couldn't get it to work.
No errors, but also no highlights.
I have updated jQuery lines like:
$prevBtn = $("button[data-search='prev']")
to:
prevBtn = document.querySelector('#prev')
And these, I dont know how to convert the others, such as:
$nextBtn.add($prevBtn).on("click", function() {})
Here is my fiddle (simplified version, but not completely done yet, also make sure to click "Search" after input):
https://codepen.io/keechan/pen/JjWEYmP?editors=1111
What am I missing? Help please!

I rewrote their jQuery example using pure JavaScript.
You should be able to compare the two examples to see how the various jQuery functions translate to JavaScript and then implement them into your Vue project.
https://jsfiddle.net/75qyu3j8/
I tried to keep the variable names the same so it is easier to understand.
document.body.onload = function() {
// the input field
var $input = document.querySelector("input[type='search']"),
// clear button
$clearBtn = document.querySelector("button[data-search='clear']"),
// prev button
$prevBtn = document.querySelector("button[data-search='prev']"),
// next button
$nextBtn = document.querySelector("button[data-search='next']"),
// the context where to search
$content = document.querySelector(".content"),
$contentMark = new Mark($content),
// jQuery object to save <mark> elements
$results,
// the class that will be appended to the current
// focused element
currentClass = "current",
// top offset for the jump (the search bar)
offsetTop = 50,
// the current index of the focused element
currentIndex = 0;
/**
* Jumps to the element matching the currentIndex
*/
function jumpTo() {
if ($results.length) {
var position,
$current = $results[currentIndex];
$results.forEach($result => $result.classList.remove(currentClass));
if ($current) {
$current.classList.add(currentClass);
position = $current.offsetTop - offsetTop;
window.scrollTo(0, position);
}
}
}
/**
* Searches for the entered keyword in the
* specified context on input
*/
$input.addEventListener("input", function() {
var searchVal = this.value;
$contentMark.unmark({
done: function() {
$contentMark.mark(searchVal, {
separateWordSearch: true,
done: function() {
$results = $content.querySelectorAll("mark");
currentIndex = 0;
jumpTo();
}
});
}
});
});
/**
* Clears the search
*/
$clearBtn.addEventListener("click", function() {
$contentMark.unmark();
$input.value = ""
$input.focus();
});
/**
* Next and previous search jump to
*/
$nextBtn.after($prevBtn);
function prevNextHandler() {
if ($results.length) {
currentIndex += (this.dataset.search === "prev" ? -1 : 1);
if (currentIndex < 0) {
currentIndex = $results.length - 1;
}
if (currentIndex > $results.length - 1) {
currentIndex = 0;
}
jumpTo();
}
}
$nextBtn.addEventListener("click", prevNextHandler);
$prevBtn.addEventListener("click", prevNextHandler);
};
mark {
background: yellow;
}
mark.current {
background: orange;
}
.header {
padding: 10px;
width: 100%;
background: #eee;
position: fixed;
top: 0;
left: 0;
}
.content {
margin-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="header">
Search:
<input type="search" placeholder="Lorem">
<button data-search="next">↓</button>
<button data-search="prev">↑</button>
<button data-search="clear">✖</button>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ullamcorper orci, eget porttitor justo. Aliquam id sollicitudin elit. Nulla in sodales ipsum. Donec vulputate venenatis magna. Vestibulum sit amet leo lacinia, cursus lectus in, gravida
metus. In ultricies sed tortor non pellentesque. Mauris quis tempor neque. Donec nec sagittis magna. Integer fringilla posuere metus eu mollis. Ut ac porta metus. Duis sed lacinia metus. Nunc malesuada iaculis risus vitae bibendum.
</p>
<p>
Vivamus posuere condimentum leo eu hendrerit. Pellentesque placerat iaculis ante a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu ipsum ac magna congue congue sed maximus tortor. Vivamus id odio elementum, vehicula nunc
ut, efficitur felis. Nullam hendrerit velit libero, gravida porttitor tortor ullamcorper eu. Ut ut lectus non enim sagittis aliquam quis in orci. Donec a arcu eu eros cursus cursus. Donec dictum dignissim tellus, dictum egestas purus pellentesque
sed.
</p>
<p>
Vestibulum eu ornare urna, nec aliquam lectus. Phasellus eu odio sapien. Vestibulum eu turpis at lorem sagittis posuere. Quisque tellus nunc, facilisis id lacus nec, ornare rhoncus elit. Vivamus vehicula eros a condimentum venenatis. Sed orci massa, pulvinar
sed erat nec, pellentesque suscipit leo. Mauris lobortis tincidunt nunc, sed tempus ex congue vitae. Curabitur lobortis mauris in ex malesuada, quis vehicula neque lobortis. Curabitur aliquam porttitor tellus eget tempus. Donec maximus tempus tristique.
Aliquam tincidunt odio dictum, scelerisque ipsum ut, facilisis quam. Ut nec malesuada neque.
</p>
<p>
Proin felis eros, tincidunt vitae scelerisque sit amet, dictum nec ante. Praesent tincidunt ac lacus nec elementum. Vivamus sed gravida purus, sed efficitur tortor. Nulla non molestie arcu. Sed tincidunt consectetur ligula sed lobortis. In non sapien
ac urna lacinia placerat sed nec lacus. Aenean lobortis tincidunt sapien a hendrerit. Quisque eu turpis accumsan nisl blandit efficitur.
</p>
<p>
Nam sit amet pellentesque est. Sed ligula turpis, ultricies sit amet mattis elementum, tristique non risus. Phasellus at congue ex. Proin nisi leo, vestibulum vitae accumsan in, imperdiet id dolor. Quisque at blandit nisl. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eget metus augue. Morbi faucibus venenatis sapien, fermentum porttitor felis pharetra a. Nam interdum nibh tortor, quis maximus turpis blandit eget. Praesent in feugiat neque, sed
vulputate quam. Curabitur erat quam, efficitur et congue quis, iaculis euismod libero. Quisque odio sapien, efficitur non mauris ac, tincidunt condimentum turpis.
</p>
<p>
Maecenas dapibus aliquam vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis viverra leo quis porta. Sed sit amet porttitor quam. Fusce nec risus non augue consectetur ultricies. Aliquam
elit lorem, tincidunt ac dolor vel, vulputate consectetur ex. In hac habitasse platea dictumst. Sed eget nisl aliquam, cursus odio nec, commodo lorem. Nulla mollis tortor eu odio rutrum vulputate. Donec condimentum molestie mauris, nec sodales nisi
volutpat aliquam. Nulla mollis libero sed nibh volutpat, ac mollis elit tincidunt. Vestibulum cursus velit vitae felis aliquam ultricies. Donec vehicula dictum feugiat. Vestibulum volutpat sollicitudin sagittis.
</p>
<p>
Aliquam consequat, diam eu ullamcorper porta, diam eros rhoncus turpis, in rutrum sem diam a risus. Duis lacinia velit sed ante feugiat venenatis. Aenean orci leo, dictum non finibus nec, dignissim quis eros. Nullam sit amet orci ac purus blandit commodo
sit amet eget neque. Sed pellentesque dictum tortor. Ut dui erat, tempus in odio in, aliquet convallis mi. Morbi efficitur justo ante, quis ultricies turpis suscipit ac. Sed sit amet nisl rutrum, laoreet mauris id, ullamcorper orci. In facilisis nisi
eget fringilla imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ut ultricies dui. Pellentesque elit urna, imperdiet sed congue eget, hendrerit sed urna.
</p>
<p>
Proin vel hendrerit nulla. Vivamus vehicula nibh nec lorem blandit, quis aliquam ipsum suscipit. Nulla at vestibulum felis. Aenean ac nibh eget enim molestie pulvinar. Duis nulla justo, tristique id nulla nec, faucibus imperdiet arcu. In vel pretium dui,
at lobortis sapien. Phasellus ullamcorper id enim eget dictum. Ut imperdiet rutrum est a rutrum. Curabitur eget dignissim tellus. Fusce tempus leo nisl, vitae auctor diam feugiat sit amet. Vestibulum accumsan justo eget odio imperdiet, consectetur
efficitur ex dapibus.
</p>
<p>
Sed pharetra odio a nibh pharetra rutrum. Suspendisse ut ullamcorper lectus. Donec ipsum mauris, congue et lobortis sit amet, ultricies ac tellus. Sed nisi risus, condimentum at varius quis, condimentum ac velit. In condimentum, magna sed ornare eleifend,
dolor nulla mollis felis, quis feugiat elit turpis non ipsum. Etiam aliquam est imperdiet dolor rutrum, at varius leo sodales. Morbi quis iaculis metus.
</p>
<p>
Maecenas auctor nec ligula ac luctus. Nam sit amet euismod mauris. Donec et diam sit amet eros efficitur tempor. Mauris non erat sit amet nunc interdum pulvinar. Sed luctus hendrerit justo eget pulvinar. Cras non arcu sed ligula faucibus pulvinar. Sed
egestas risus nisl. Duis quis arcu tempus, cursus erat ac, gravida enim. Cras et condimentum ante. Nullam eleifend egestas velit, quis semper est imperdiet non. Donec quis purus varius, placerat mi et, dictum lorem. Sed quis finibus nisi, vitae molestie
metus. Donec lobortis eros quis vestibulum vulputate.
</p>
</div>

Wrap a div around multiple paragraph elements of certain height/lines

I have a div of a fixed width: 580px which can contain paragraph elements of different counts (can be 10, can be 100). Each paragraph will have contents/text of a few hundred words.
What I want to achieve is to wrap the p elements around a div (with a class) after certain lines of text. Here is what I have done so far and cannot figure out a way to identify the start/end of the wrap.
It would also help if there is a way to count lines that are "not" in p elements. For example, the div lipsum has an additional span or other divs, what will be an approach to handle that?
function Wrap() {
var heightCount = 0;
$("#lipsum p").each(function() {
heightCount += $(this).height();
if (heightCount > 500) {
console.log('reached 500');
//wrap code here for e.g.
//<div class="test">...[p elements with proper closing tags that are under 500 in line]...</div>
heightCount = 0;
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" onclick="Wrap()">Test</button>
<div id="lipsum" style="width:580px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed risus at orci elementum consequat. Suspendisse laoreet rhoncus dignissim. Aliquam a ultrices orci, in elementum nibh. Aliquam mollis erat at vehicula pellentesque. Nunc suscipit, leo
at convallis lobortis, odio ipsum euismod sapien, auctor accumsan velit eros non risus. Cras sagittis nisi non orci finibus porta. Sed finibus ac eros eu tincidunt. Nam viverra egestas augue vestibulum elementum. Suspendisse convallis felis sodales,
ornare neque ut, elementum dui. Mauris ac orci mattis, tristique nisi quis, ultricies urna. In tincidunt, dolor vitae euismod mattis, lorem arcu placerat velit, quis auctor est est et sem. Aenean convallis finibus posuere. Sed feugiat orci a lacinia
efficitur. Ut semper, purus quis convallis vehicula, mi risus rhoncus arcu, et feugiat neque turpis non tellus.
</p>
<p>
Mauris dapibus felis leo, vitae vestibulum purus feugiat sit amet. Fusce ac dapibus nunc. Etiam congue mi neque. Maecenas eget blandit turpis. Suspendisse volutpat, urna eu facilisis congue, elit felis faucibus velit, venenatis semper sem sem ut ante.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent blandit congue sapien. Curabitur non fermentum felis, sit amet auctor nunc. Cras id tellus nunc.
</p>
<p>
In lacinia lectus nec quam dapibus eleifend. Phasellus iaculis eget massa non aliquam. Cras interdum gravida hendrerit. Suspendisse rhoncus pretium erat non malesuada. Fusce sit amet finibus est. Phasellus quis dapibus orci. Nunc iaculis felis odio, et
dictum leo mollis sed. Morbi ultrices turpis at mi pellentesque, sit amet consectetur tortor volutpat. Mauris ac nunc ac nunc pellentesque lacinia. Duis at ligula tristique, maximus sapien sit amet, pulvinar neque.
</p>
<p>
Nulla efficitur bibendum nunc, in efficitur nisi vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque purus purus, molestie id dignissim id, consequat a diam. Aliquam dictum eget purus et lobortis.
Vivamus vitae blandit quam. Suspendisse quis enim posuere leo aliquam faucibus in quis diam. Nullam efficitur aliquam velit vel feugiat. Aenean at porttitor neque. Nam egestas ullamcorper nisl, quis aliquam ligula convallis sed. Donec et dui lectus.
Ut dictum sapien nec dolor convallis tincidunt. Vivamus ut neque sed ligula lacinia mollis. Integer turpis dolor, fringilla quis orci at, finibus lacinia urna. Morbi rutrum lobortis finibus. Cras fringilla scelerisque elit vitae vehicula.
</p>
<p>
Cras dignissim mollis magna, a viverra ante dignissim et. Vivamus malesuada neque eget arcu ultricies, non feugiat metus laoreet. Praesent rutrum gravida dolor sed fringilla. Sed at orci nec neque bibendum feugiat. Vivamus tincidunt ex nunc, ac efficitur
nibh pharetra placerat. Vestibulum mi lorem, imperdiet vitae dictum tincidunt, pellentesque a diam. Etiam vestibulum dolor sit amet gravida elementum. Duis consectetur nunc lectus.
</p>
<p>
Maecenas mi elit, lobortis nec lectus nec, accumsan pulvinar est. Duis metus ipsum, fermentum a tortor nec, lobortis commodo est. Ut lacinia magna a tellus feugiat, ac tincidunt ligula ultricies. Nam congue turpis et leo laoreet porttitor. Donec luctus
eget nibh vel ultricies. Aliquam erat volutpat. Mauris vitae sapien id massa faucibus venenatis ac porttitor quam. Morbi eu ligula nec felis pharetra tempor.
</p>
<p>
Vivamus ultrices vel augue sed aliquet. Praesent egestas nulla vel bibendum auctor. Vivamus varius nunc in metus aliquet, sit amet fermentum dui rutrum. Pellentesque volutpat quis nulla ut sodales. Duis eu pulvinar leo. Nam venenatis aliquam orci ac accumsan.
Vivamus sollicitudin a nulla in facilisis. Pellentesque eget lectus gravida tortor porta molestie in et ligula. Phasellus sed lacus nisi.
</p>
<p>
Nulla augue sem, tempor quis mauris vel, accumsan accumsan odio. Aliquam faucibus pharetra velit aliquet placerat. Mauris posuere suscipit quam non venenatis. Sed hendrerit dolor sit amet ligula consequat tempor. Sed vel luctus magna. Duis bibendum ex
in odio aliquam, mattis consequat mi sodales. Morbi iaculis placerat purus, eu tincidunt purus gravida ac. Fusce sed mi lectus. Nulla orci quam, elementum vitae lacus eleifend, vulputate vehicula purus. Integer metus erat, imperdiet vitae viverra
nec, ultricies et est. Vestibulum auctor leo at euismod ullamcorper. Sed feugiat justo vel ipsum molestie, at sagittis lectus finibus. Morbi a augue turpis. Vestibulum nec erat nec eros vehicula tincidunt.
</p>
<p>
Proin iaculis, lectus elementum ornare tempor, metus turpis fringilla metus, eu bibendum ligula sapien eget ligula. Etiam sit amet laoreet velit. Phasellus et imperdiet orci. Sed vestibulum dictum tellus vitae ultrices. Suspendisse varius nulla eu mi
semper, vitae molestie nunc auctor. Ut tempus tincidunt luctus. Sed tempus metus odio, ut eleifend magna venenatis nec. Quisque aliquet diam mi, vel porttitor tortor congue eget. Proin elementum felis id risus maximus finibus. Fusce sed volutpat risus.
Nunc ornare laoreet dolor at vulputate. Ut mauris sapien, aliquam commodo metus et, accumsan varius erat. Nunc condimentum tortor at velit interdum, et iaculis neque vulputate.
</p>
<p>
Aliquam non consectetur risus. Integer quis quam id eros malesuada pulvinar. Sed vitae orci auctor, aliquet odio sit amet, ornare risus. In hac habitasse platea dictumst. Pellentesque dapibus semper ipsum, eget cursus arcu iaculis in. Quisque efficitur
nunc dui. Sed posuere sodales mauris, ac iaculis sem malesuada ut. Vivamus quis magna in libero suscipit scelerisque pellentesque commodo urna. Pellentesque quis purus maximus, scelerisque lacus vitae, facilisis urna. In hac habitasse platea dictumst.
Suspendisse quis aliquam arcu. Vivamus maximus pulvinar lacus vitae suscipit. Donec iaculis dictum ante, ut scelerisque enim pulvinar ac. Curabitur egestas eget elit ac sagittis. Nunc nec enim viverra, lobortis nunc non, pellentesque mauris.
</p>
</div>
UPDATE:
With the help of solution provided by #ControlAltDel I was able to modify the original Wrap function to fulfill my requirements by using wrapAll in the following two ways:
function Wrap() {
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var startHeight = 0;
//var firstDivP = 0;
const pageHeight = 200;
for (var i = 0; i < p.length; i++) {
$(p[i]).addClass("wrapthis");
if ($(p[i]).offset().top > startHeight + pageHeight) {
$(".wrapthis").wrapAll("<div class='main'></div>")
//lastDivP = i;
startHeight = $(p[i]).offset().top;
$(p).removeClass("wrapthis");
}
}
}
And:
function Wrap() {
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var heightCount = 0;
for (var i = 0; i < p.length; i++) {
$(p[i]).addClass("wrapthis");
heightCount += $(p[i]).height();
if (heightCount > 230) {
$(".wrapthis").wrapAll("<div class='main'></div>")
$(p).removeClass("wrapthis");
heightCount = 0;
}
}
}
I think this can further be improved but I got the results that I wanted.

Like I said, height is much easier. You can just get the offsets of your p's
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var startHeight = 0;
var firstDivP = 0;
const pageHeight = ...;
for (var i = 0; i < p.length; i++) {
if ($(p[i]).offset().top > startHeight + pageHeight) {
//put a div around the preceeding paragraphs. this means from firstDivP to i - 1
firstDivP = i;
startHeight = $(p[i]).offset().top;
}
}
This is actually much better than counting lines (in my opinion :)), as you cannot put half of a paragraph in a div.

Action when an element from collection get scrolled by

I have an unknown number of section blocks.
I use the titles of these automaticaly generated sections to populate the "tabs" container who follow the scroll (using sticky position).
What I need, is when I pass by one of the title contained in the sections, the same title from the "tabs" bar get the class "selected"so I indicate where the user is.
But what I've tried so far is only working partialy.
Here's a working example:
let titles = [];
$.each($('section>h3'),function(){
titles.push($(this).offset().top);
});
$(document).on('mousewheel DOMMouseScroll',function(e){
let winscrollpos = $(window).scrollTop();
$.each(titles,function(i,v){
if(winscrollpos >= v && winscrollpos < v+100) {
$('.deco-tab-title').eq(i).add('.selected').toggleClass('selected');
}
});
});
.filler {
height:800px;
}
.selected {
color:red;
}
.tabs {
background-color:#eee;
position:sticky;
top:0;
}
p {
width:200px
}
.tabs h3 {
display:inline;
margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class='filler'>
</div>
<div class='wrapper'>
<div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><h3 class='deco-tab-title'></h3><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
<div class='core'>
<section>
<h3 class='deco-tab-title'>title1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
</div>
</div>
</div>
as you can see, the first title lose the class if you scroll to the end. But nothing else. And when you go back, the second title get the class. And overall, it doesn't work so well.

You might want to use the scroll event, which also captures using the scroll bar.
Scrolling height depends on the user agent. You should compare
[offset of current tab] < winscrollpos < offset[next tab] instead of [offset of current tab] < winscrollpos < offset[current tab] + 100.
Here's a working demo:
let titles = [];
$.each($('section>h3'), function () {
titles.push($(this).offset().top);
});
$(document).on('scroll', function (e) {
// 50 for the tab title height
let winscrollpos = $(window).scrollTop() + 50;
let titleElements = $('.deco-tab-title');
$.each(titles, function (i, v) {
if (winscrollpos >= v && (i === titles.length - 1 || winscrollpos < titles[i + 1])) {
titleElements.eq(i).addClass('selected');
} else {
titleElements.eq(i).removeClass('selected');
}
});
});
.filler {
height:800px;
}
.selected {
color:red;
}
.tabs {
background-color:#eee;
position:sticky;
top:0;
}
p {
width:200px
}
.tabs h3 {
display:inline;
margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class='filler'>
</div>
<div class='wrapper'>
<div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
<div class='core'>
<section>
<h3 class='deco-tab-title'>title1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
</div>
</div>
</div>

I have made the following fixes in your code:
add('.selected').toggleClass('selected'): chaining both functions this way cannot work. That's the reason why your titles were somehow blinking when selected. I've replaced this with the use of this version of toggleClass
I've added another list, nextTitlePos, in order to store, for each title, the position of the next one. For the last one, you can use any value greater than the end of your container (I've used Number.MAX_VALUE here to keep it simple, but if needed, you can use the end of the container as well.)
In the HTML code, there was also an extra <h3> tag, which was empty. This one was preventing title2 from being highlighted properly.
EDIT: I've replaced the event mousewheel with scroll as well (as mentioned by Shridhar Sharma in a comment below - thanks)
let titles = [];
$.each($('section>h3'),function(){
titles.push($(this).offset().top);
});
let nextTitlePos = [];
$.each(titles, function(i, v) {
if(i != 0) {
nextTitlePos.push(v);
}
});
nextTitlePos.push(Number.MAX_VALUE);
$(document).on('scroll DOMMouseScroll',function(e){
let winscrollpos = $(window).scrollTop();
$.each(titles,function(i,v){
let isSelected = winscrollpos >= v && winscrollpos < nextTitlePos[i];
$('div.tabs>h3.deco-tab-title').eq(i).toggleClass('selected', isSelected);
});
});
.filler {
height:800px;
}
.selected {
color:red;
}
.tabs {
background-color:#eee;
position:sticky;
top:0;
}
p {
width:200px
}
.tabs h3 {
display:inline;
margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
<div class='filler'>
</div>
<div class='wrapper'>
<div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><!-- REMOVED <h3 class='deco-tab-title'></h3> --><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
<div class='core'>
<section>
<h3 class='deco-tab-title'>title1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
<section>
<h3 class='deco-tab-title'>title4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
</section>
</div>
</div>
</div>

How to make a search through H2 tags only

I have a single page with lots of H2 and paragraphs.
How to make a javascript/ajax (or other) search bar to search only through the H2 tags with dropdown suggestion and with no database?

You can use jQuery to search for occurrences with :contains(). The script also looks for the anchors (id) of the <h2> to link them.
// Make :contains() case insensitive
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function(elem) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
// Search on type
var result;
$('#search').on('keyup', function() {
result = '';
// Search h2 caontaining search term
$('h2:contains("' + $('#search').val() + '")').each(function(index) {
result += '<li>' + $(this).text() + '</li>';
});
// Show results
$('#searchResults').html('<ul>' + result + '</ul>');
});
#searchResults {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Search titles:
<input id="search" />
<div id="searchResults"></div>
<h2 id="1">Lorem ipsum dolor sit amet</h2>
<p>consectetur adipiscing elit.<br/>Ut venenatis, diam nec laoreet rutrum, est dolor vehicula leo, eu euismod ex risus id felis.<br/>Nam non odio eget libero commodo iaculis ac sed leo.<br/>Sed velit ex, elementum et lobortis id, porta nec nunc.<br/>Curabitur gravida risus in blandit cursus.<br/>onec fermentum nulla sem, et interdum lectus tincidunt id.<br/>Sed pharetra odio arcu.<br/> Interdum et malesuada fames ac ante ipsum primis in faucibus.<br/>Vestibulum semper lorem leo, sed congue massa posuere et.<br/>Proin porta lorem eu metus ultricies dictum.<br/>Cras sit amet molestie nisi.<br/>Phasellus eu congue ipsum, id tristique urna.<br/>Quisque in leo vel nisi rutrum auctor ut ac mauris.<br/>Maecenas consectetur ipsum ultricies orci egestas fringilla.<br/>Suspendisse ac rhoncus massa, eget fermentum augue.<br/> Proin eleifend laoreet velit, sit amet finibus sem volutpat pharetra.<br/>Phasellus feugiat risus in tortor pulvinar aliquam.
</p>
<h2 id="2">Etiam tincidunt nulla vel justo suscipit</h2>
<p>eget interdum nisi suscipit.<br/>Phasellus in tempor mi.<br/>Phasellus venenatis justo mollis suscipit iaculis.<br/>Donec interdum congue lorem.<br/>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eget massa id neque vehicula accumsan eu non sem.<br/>Cras pretium lobortis quam, ullamcorper tempus eros viverra non.<br/>Morbi id scelerisque est.<br/>Praesent dictum turpis quam, nec maximus quam cursus ac.<br/>Nam porta quam sit amet velit imperdiet elementum.<br/>Curabitur at orci condimentum, porta enim quis, fermentum orci.<br/>Mauris arcu mauris, tempor at blandit nec, dictum sed augue.<br/>Sed convallis orci vitae lectus commodo posuere.<br/>Aliquam erat volutpat.<br/>Integer sed gravida felis.
</p>
<h2 id="3">Praesent eu sem ex</h2>
<p>In hac habitasse platea dictumst.<br/>Duis interdum turpis sit amet libero consequat, a efficitur turpis vulputate.<br/>Sed non diam malesuada, dignissim leo ut, vulputate nulla.<br/>Quisque tincidunt arcu sed dapibus fermentum.<br/>Vestibulum vitae ultrices velit, ac posuere quam.<br/>Praesent ac ex vitae nisl rhoncus faucibus in at justo.<br/>Pellentesque malesuada imperdiet finibus.<br/>Nunc at aliquam enim, dictum ultricies lectus.<br/>Nam posuere nulla elementum augue fermentum tincidunt.<br/>Sed a tortor non turpis tristique viverra.<br/>Nulla sagittis, sapien vel mollis porttitor, diam felis tempus mi, sit amet scelerisque libero quam sed justo.
</p>
<h2 id="4">
Nam non odio viverra mauris
</h2>
<p>
aliquam consectetur vel sit amet nisl.<br/>Nam scelerisque turpis ut mattis consectetur.<br/>Donec ut sem iaculis, hendrerit sem at, scelerisque lacus.<br/>Cras sit amet quam bibendum, rutrum nibh vitae, eleifend neque.<br/>Curabitur tincidunt fermentum nibh nec viverra.<br/>Proin tincidunt, tortor vitae sollicitudin commodo, tellus felis commodo felis, nec dictum tellus lorem in nibh.<br/>Cras congue justo at ultrices bibendum.
</p>
<h2 id="5">
Praesent facilisis dapibus ante,
</h2>
<p>
at consectetur risus dictum et.<br/>Vestibulum ut quam turpis.<br/>Maecenas eu eleifend purus.<br/>Morbi risus mi, feugiat eget auctor eu, convallis in sapien.<br/>Sed egestas vitae lacus sit amet aliquam.<br/>Nullam ullamcorper vulputate ligula sed pulvinar.<br/>Curabitur condimentum mi quis nulla commodo, vitae laoreet magna vulputate.<br/>Ut ultricies ex sit amet eros mattis, vitae faucibus elit blandit.
</p>
<h2 id="6">Mauris ac augue imperdiet</h2>
<p>
volutpat quam non, cursus leo.<br/>Sed imperdiet semper interdum.<br/>Vivamus blandit est sem, eget facilisis turpis accumsan at.<br/>Duis blandit nisi in mattis pellentesque.<br/>Mauris vitae turpis ullamcorper, tempor nunc et, commodo tellus.<br/>Quisque quis scelerisque ex, quis tincidunt sapien.<br/>Curabitur erat urna, fringilla eget velit in, efficitur venenatis nisi.<br/>Nullam facilisis elit velit, ut maximus libero imperdiet quis.
</p>

Non-blocking script with timers

I'm doing a test to perform a non-bloking script in order to render a large jQuery-UI accordion, so instead of using a loop, which will always block the browser until done, I'm trying with timers to render each part separately, but it seems to create an infinite loop (not sure why since it should reach the exit condition):
(function(){
var accordion = $('.accordion').accordion({collapsible: true});
var source = $('.source');
var sourceCopy, timerCount = 0, times = 100;
var createNewTab = function(i) {
sourceCopy = source.children().clone();
sourceCopy.filter('h3').text('Title ' + i).end().appendTo(accordion);
accordion.accordion('refresh');
};
(function run(){
var timer;
createNewTab(timerCount);
timerCount++;
/*while (timerCount < times) { // commented out to avoid endless loop
timer = setTimeout(run, 0);
}*/
// OLD BROWSER-BLOCKING VERSION WITH LOOP. IT WORKS BUT BLOCKS BROWSER UNTIL DONE
/*for (var i = 0; i < times; i++) {
createNewTab(i);
}*/
})();
})();
The HTML:
<div class="source">
<h3>title</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum malesuada molestie. Duis sem massa, mollis eget lacinia sit amet, blandit a tortor. Etiam ultrices facilisis tempor. Ut sagittis, nisi nec vestibulum condimentum, dolor urna gravida dui, nec posuere nibh nibh a dui. Nunc eleifend convallis varius. Nulla facilisi. Nullam ut quam sed augue commodo fermentum quis nec turpis. In interdum aliquet mi, a placerat orci sagittis sed. Sed fermentum urna eu arcu consequat, vel egestas enim eleifend. Proin augue tellus, hendrerit nec quam vitae, placerat malesuada ligula. Integer faucibus ullamcorper odio sagittis dapibus. Nam sed ex vel metus bibendum aliquam vel sit amet ante. Maecenas ultrices sem sagittis est finibus, id fermentum dolor molestie.
<p>Donec ipsum ipsum, pharetra eu arcu eu, lobortis convallis augue. Morbi sit amet tortor dui. Nam eget lacinia turpis. Quisque efficitur vulputate sapien, non dignissim dolor malesuada ut. Integer non diam et magna maximus tincidunt quis viverra tortor. Ut ut mauris ut tortor faucibus pellentesque. Nunc iaculis, elit luctus malesuada lobortis, tellus elit egestas orci, at cursus tellus nisl molestie neque. Pellentesque convallis nisi ut purus dignissim, a vestibulum libero condimentum. Sed congue leo eget condimentum vulputate. Nunc accumsan massa id tempor luctus. Vivamus orci lectus, ornare vestibulum arcu eget, egestas luctus ipsum. Maecenas sodales, mi eu volutpat tempor, justo mi laoreet lacus, vel viverra lacus augue ut felis. Aenean ullamcorper risus eget ante venenatis viverra. Morbi malesuada erat ante, quis egestas lacus tristique sed.
</div>
</div>
<div class="accordion"></div>
The source code here
How could I work it out?

Replace while with if. Your setTimeout already does the looping by calling the function over and over until timerCount == times.
(function(){
var accordion = $('.accordion').accordion({collapsible: true});
var source = $('.source');
var sourceCopy, timerCount = 0, times = 100;
var createNewTab = function(i) {
sourceCopy = source.children().clone();
sourceCopy.filter('h3').text('Title ' + i).end().appendTo(accordion);
accordion.accordion('refresh');
};
(function run(){
var timer;
createNewTab(timerCount);
timerCount++;
if (timerCount < times) {
timer = setTimeout(run, 0);
}
})();
})();
.source {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="source">
<h3>title</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum malesuada molestie. Duis sem massa, mollis eget lacinia sit amet, blandit a tortor. Etiam ultrices facilisis tempor. Ut sagittis, nisi nec vestibulum condimentum, dolor urna gravida dui, nec posuere nibh nibh a dui. Nunc eleifend convallis varius. Nulla facilisi. Nullam ut quam sed augue commodo fermentum quis nec turpis. In interdum aliquet mi, a placerat orci sagittis sed. Sed fermentum urna eu arcu consequat, vel egestas enim eleifend. Proin augue tellus, hendrerit nec quam vitae, placerat malesuada ligula. Integer faucibus ullamcorper odio sagittis dapibus. Nam sed ex vel metus bibendum aliquam vel sit amet ante. Maecenas ultrices sem sagittis est finibus, id fermentum dolor molestie.
<p>Donec ipsum ipsum, pharetra eu arcu eu, lobortis convallis augue. Morbi sit amet tortor dui. Nam eget lacinia turpis. Quisque efficitur vulputate sapien, non dignissim dolor malesuada ut. Integer non diam et magna maximus tincidunt quis viverra tortor. Ut ut mauris ut tortor faucibus pellentesque. Nunc iaculis, elit luctus malesuada lobortis, tellus elit egestas orci, at cursus tellus nisl molestie neque. Pellentesque convallis nisi ut purus dignissim, a vestibulum libero condimentum. Sed congue leo eget condimentum vulputate. Nunc accumsan massa id tempor luctus. Vivamus orci lectus, ornare vestibulum arcu eget, egestas luctus ipsum. Maecenas sodales, mi eu volutpat tempor, justo mi laoreet lacus, vel viverra lacus augue ut felis. Aenean ullamcorper risus eget ante venenatis viverra. Morbi malesuada erat ante, quis egestas lacus tristique sed.
</div>
</div>
<div class="accordion">
</div>
Fixed JS Fiddle

Categories