How can I select specific strings and some with jQuery? - javascript

I'm creating a Chrome Extension that will scan through web pages looking for email addresses with a specific domain. In this example, we will use #xyz.com as the domain.
In my content script script.jsand hard coded HMTL page index.html I have the following:
$(document).ready(function() {
$('body:contains("#xyz.com")').css("text-decoration", "underline");
});
.container {
margin: 0 auto;
display: block;
padding: 10px 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<meta charset="utf-8">
<title>my page</title>
</head>
<body>
<div class="container">
<h1>Welcome!</h1>
<br>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum JohnJones.#xyz.com
, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo,
aliquam SarahBrown.#xyz.com tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>
</div>
</div>
</body>
</html>
I'm trying to select only the email addresses but this clearly doesn't work since it selects everything.
How can I select text matching my keyword (domain) and then further select characters to the left of it to capture the name until it hits a space or an illegal character an email address couldn't use?
This is problematic because this Extension will run on different pages so it's impossible to tell what element text will be nested in for 100% success rate.


Regex is confusing at first but it is the best option for something like this.
Here is the regex I use for detecting emails
[\w|._%+-]*#xyz.com
To break it down, "\w" matches any word character. "|" means "or" and "._%+-" are other characters that could be used in an email. "*" after brackets means any number of characters that match the contents of the brackets. The rest is exactly what it looks like.
Regex code is designated by putting a "/" before and after the code and the "g" at the end tells it to match multiple values.
You can find out more about how the replace command works here.
See a working example using your code below:
var emailPattern = new RegExp(/[\w|._%+-]*#xyz.com/g);
var el = document.getElementsByTagName("p")[0];
el.innerHTML = el.innerHTML.replace(emailPattern, "<u>$&</u>");
.container {
margin: 0 auto;
display: block;
padding: 10px 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<meta charset="utf-8">
<title>my page</title>
</head>
<body>
<div class="container">
<h1>Welcome!</h1>
<br>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum JohnJones.#xyz.com
, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo,
aliquam SarahBrown.#xyz.com tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>
</div>
</div>
</body>
</html>
If you need to match other domain's emails you can use this Regex instead:
[\w|.%+-]*#\w*.[\w|.%+-]*\b

Related

Javascript Auto-scroll Appears Jittery on Safari IOS

The Objective
I am trying to make an auto-scrolling feature for an online ebook reader website. The user must be able to press a button and have the page scroll automatically.
The problem
Every solution I have found so far uses either setTimeout or setInterval to scroll the page with window.scrollBy(0, 1), and this works great on chrome, however when I test this on Safari IOS, the page does not scroll smoothly at all. It appears very jittery, to the point that the text is no longer legible.
Here is a video demonstrating the problem. (Please watch in 1080p60, since the jitter is more apparent at 60fps)
The code
Here is a simple HTML document to demonstrate my current method of auto scrolling.
let scrollTimeout;
function pageScroll() {
scrollTimeout = setTimeout(() => {
window.scrollBy(0, 1);
pageScroll();
}, 10);
}
function startScroll() {
pageScroll();
}
function stopScroll() {
clearTimeout(scrollTimeout);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Auto-scroll</title>
</head>
<body>
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
ducimus, totam debitis sint modi inventore explicabo iusto
assumenda vitae vero porro aperiam aut reiciendis nam culpa quia
in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Impedit sunt vitae saepe recusandae voluptatibus nihil enim,
sequi rerum quibusdam nisi provident! Autem aliquid
reprehenderit doloremque inventore quasi dolore fugit tempora.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
molestias consectetur molestiae labore totam ex et eum nulla
officia, minima excepturi voluptates, consequatur amet modi!
Molestiae autem illum ullam accusantium.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
</main>
</body>
</html>

Apple throttles their devices to give supposedly battery performance. But there are other reasons like Background App Refresh, Low Battery More, and many more. The easily visible reason is Low Power Mode on you will not get the same performance as Low Power More off.
With your snippet, you can clearly judge the performance difference between Low Power Mode on and Low Power Mode off.
Also, performance can be affected by the display refresh rate. You can manage it with requestAnimationFrame, where you can somewhat control fps.
The below example could help you with requestAnimationFrame.
let scrollAnimationFrame;
let prevtimeStamp = 0;
let deltaTime = 0;
let functionTiming = 10;
let counter = 0;
let reachedBottom = false;
function animateScroll(timestamp) {
const deltaTime = timestamp - prevtimeStamp;
prevtimeStamp = timestamp;
const scrollY = window.scrollY;
if(counter > functionTiming){
window.scrollBy(0, 1);
counter = 0;
if(scrollY === window.scrollY)
reachedBottom = true;
}else{
counter += deltaTime;
}
if(reachedBottom)
cancelAnimationFrame(scrollAnimationFrame);
else
scrollAnimationFrame = requestAnimationFrame(animateScroll);
}
function startScroll() {
if(!scrollAnimationFrame)
animateScroll(0);
}
function stopScroll() {
if(scrollAnimationFrame)
cancelAnimationFrame(scrollAnimationFrame);
scrollAnimationFrame = 0;
}
document.getElementById('functionTimingControl').addEventListener('change', function(e){
functionTiming = e.target.value;
});
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
<input type='number' min='1' max='1000' value='10' id='functionTimingControl' />
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
</main>

How to go down to different sections in the same page and go all the way up using buttons?

I am fairly new to javascript. I am stuck on this code.
I'm trying to create a button to navigate between top and bottom of a web page. Initially, the scroll to bottom works, but once I click on the back to top button, the scroll down logic breaks. I'm unable to figure out where I'm applying the incorrect logic. Thanks in advance
https://jsfiddle.net/riodahamster/9vtxh0aL/9/
var i = 1;
$(".scroll-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
window.icount = 0;
});
var icount = 0
$('.down-btn').on('click', function(e) {
e.preventDefault();
window.icount++;
var offset = $("div.next-section").eq(icount).offset().top;
$('html, body').stop().animate({
scrollTop: offset
}, 400);
});

You can Scroll Into an element using vanilla JavaScript. Just follow the tricks.
The scrollIntoView scroll the page to view the element. For that purpose here I've created two empty elements #top-view and #bottom-view at the top and the bottom of the HTML respectively.
After that when you click on Go Bottom and Go Up buttons then it brings you to the #bottom-view and #top-view elements.
const bottomBtn = document.querySelector('#go-bottom');
const upBtn = document.querySelector('#go-up');
const topView = document.querySelector('#top-view');
const bottomView = document.querySelector('#bottom-view');
bottomBtn.addEventListener('click', (evt) => {
evt.preventDefault();
bottomView.scrollIntoView({behavior: 'smooth'});
});
upBtn.addEventListener('click', (evt) => {
evt.preventDefault();
topView.scrollIntoView({behavior: 'smooth'});
});
#page-1 {
background: yellow;
color: #222;
}
#page-2 {
background: red;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- empty element for scrolling into it -->
<div id="top-view"></div>
<button id="go-bottom">Go Bottom</button>
<section id="page-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
</p>
</section>
<section id="page-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
</p>
</section>
<button id="go-up">Go Up</button>
<!-- empty element for scrolling into it -->
<div id="bottom-view"></div>
</body>
</html>

The code works fine. The issue is you havent added Jquery!
Also you have to target the bottom div to get the down function to move you to the bottom of the page. In this case, yello class div!
var i = 1;
$(".scroll-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
window.icount = 0;
});
var icount = 0
$('.down-btn').on('click', function(e) {
e.preventDefault();
window.icount++;
var offset = $("div.next-section.yellow").eq(icount).offset().top;
$('html, body').stop().animate({
scrollTop: offset
}, 400);
});

How to hide single div at a time without flashing rather setting visibility hidden

i want to hide a single div at a time so that below flashing can be avoided(shown in image)
NOTE: i cannot use visibility:hidden or visibility:show or $sel.css('visibility','hidden'); or $sel.css('visibility','show');
My Expectation: when I do $content.hide(); in the DOM see html area in image provided by me where style="display:none"/style="display:block" is happening for every element, rather I want to hide that particular element at a time (so no multiple display/hide at a time, only one display/hide) similar to #snippet2, #snippet1 should work (but hidden element should not contain any width/height)
below is my code which should work with display:none or $el.hide()/$el.show():
#Snippet1
$(function() {
var pos = 1;
var ii = 0;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
$('.contents').hide();
var intId = setInterval(function() {
ii++;
pos = -ii;
//console.log(pos);
//if (pos )
$('.contents').each(function() {
var $content = $(this);
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
$content.hide();
//console.log($content.position().top, centerbandTop, contentBottom);
if (centerbandBottom > contentTop && centerbandTop < contentBottom)
$content.show();
});
$('.container').css({
// '-webkit-transform' : 'translate(0,' + pos + ')',
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
.container{
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents{
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
visibility: hidden;
}
.center-band{
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper{
position: relative;
}
.over{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div class="center-band"> </div>
</div>
Question: Above snippet(#snippet1) should work as same as below(#snippet2) one but without using visibility(#snippet2 Working without flashing)
#snippet2
$(function() {
var pos = 1;
var ii = 0;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
var intId = setInterval(function() {
ii++;
pos = -ii;
//console.log(pos);
//if (pos )
$('.contents').each(function() {
var $content = $(this);
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
$content.css('visibility', 'hidden');
//console.log($content.position().top, centerbandTop, contentBottom);
if (centerbandBottom > contentTop && centerbandTop < contentBottom)
$content.css('visibility', 'visible');
});
$('.container').css({
// '-webkit-transform' : 'translate(0,' + pos + ')',
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
/* Styles go here */
.container{
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents{
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
visibility: hidden;
}
.center-band{
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper{
position: relative;
}
.over{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div class="center-band"> </div>
</div>
Please help me thanks in advance!!!

It is hard to understand your question, but from the code snippets you provided it looks like you need to fundamentally rethink your approach.
Your code moves the "container" div up and then computes the positions of the contained elements, but the problem is that when you hide or show an element all the other elements move in response. So when "contents 1" gets above the center band and you hide it, it stops taking up space and "contents 2" moves to where "contents 1" was. However, since "contents 1" was above the center band, now "contents 2" is above the center band and you are going to hide that, too. And so in your code, as soon as "contents 1" gets above the center band, all the contents will be hidden.
There are many ways to handle this, and the best way for your situation will probably depend on details of what you are truly trying to accomplish and which are not clear from your question. Using CSS overflow: hidden is probably the most efficient and you do not really explain what is wrong with that solution.
Another option is to adjust the position of the container to compensate for hiding the element. You also have to have some way to figure out when to show items that enter the box, which you cannot do from their position, because they are hidden. This snippet is not ideal, and there are some glitches because of margins, but it shows the concept.
$(function() {
var pos = 0;
var showNext = false;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
var scroll = function() {
pos--; // move the list up one pixel
$('.contents').each(function() {
var $content = $(this);
// If the previous "contents" moved up enough
// to make room for this hidden element, show it.
if (showNext) {
$content.show();
showNext = false;
} else if ($content.is(':hidden')) // nothing to do
return;
// We have to wait until after we have shown
// the element to compute its position.
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
if (contentBottom < centerbandTop) {
// If the element has exited the top of the
// band, hide it, and move the container
// down to compensate for removing this
// element.
pos = pos + $content.outerHeight(true);
$content.hide();
} else if (contentTop > centerbandBottom) {
// If the element is below the band,
// hide it. Really this only needs to
// be done the first time through.
$content.hide();
}
// If there is room in the center band
// below this element, show the next one
showNext = contentBottom < centerbandBottom;
$('.container').css({
transform: 'translateY(' + pos + 'px)'
});
});
}
// We start with the contents "visibility: hidden"
// and all the elements displayed so we do not
// see them but still can compute their positions.
// One pass through scroll() then hides everything
// that needs to be hidden.
scroll();
// Now we can make everthing visible
$('.contents').css('visibility', 'visible');
// And now we set up the scrolling timer
var intId = setInterval(scroll, 100);
});
/* Styles go here */
.container {
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents {
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
visibility: hidden;
}
.center-band {
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div class="center-band"> </div>
</div>

Initially calculate the vertical beginning/ending values of all divs and store this data independently. Make all divs visible (display !== 'none')in the DOM very briefly, while using opacity to hide them, in order to calculate their heights (no way to calculate div height without attaching it to the DOM).
Also need to make all scrollable items position: absolute so that their removal doesn't reflow the items beneath them. This means javascript also needs to calculate top positions for items.
Then, whenever things change (whenever new items potentially need to be shown/hidden) check all independently stored position data against the position of the "hot zone" (the zone with which contact causes visibility).
window.onload = () => {
let positions = []; // Independently store positional data for text items
// Keep references to some useful DOM elements
let hotZone = document.getElementsByClassName('hot-zone')[0];
let scroller = document.getElementsByClassName('scroller')[0];
let scrollerHeight = scroller.getElementsByClassName('height')[0];
let items = document.getElementsByClassName('item');
let totalHeight = 0; // We'll track total height of items as we go
for (let i = 0; i < items.length; i++) {
let { height } = items[i].getBoundingClientRect();
items[i].style.top = `${Math.round(totalHeight)}px`;
items[i].style.display = 'none';
positions.push([ totalHeight, height ]);
totalHeight += height;
}
// Make sure the scroller doesn't shrink when we remove its children
scrollerHeight.style.height = `${Math.round(totalHeight)}px`;
let reevaluate = () => {
let hotRect = hotZone.getBoundingClientRect();
let scrollRect = scroller.getBoundingClientRect();
for (let i = 0; i < items.length; i++) {
let [ itemTop, itemHeight ] = positions[i];
itemTop += scrollRect.top; // Make relative to scroller
itemTop -= scroller.scrollTop; // Make relative to scroll amt
let tooHigh = itemTop + itemHeight < hotRect.top;
let tooLow = itemTop > hotRect.bottom;
let disp = (tooHigh || tooLow) ? 'none' : 'block';
if (disp !== items[i].style.display) items[i].style.display = disp;
}
};
// Immediately call `reevaluate` to initially show items
reevaluate();
// Now everything is nice so make the scroller completely opaque
document.getElementsByClassName('scroller')[0].style.opacity = '1';
// Setup listeners to call `reevaluate` when there's a possibility
// new items need to show. E.g., the "hot zone" has moved, the items
// have moved, scrolls have happened, etc.
scroller.addEventListener('scroll', reevaluate);
};
.contain {
position: fixed;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: #000000;
}
.scroller {
position: relative;
left: 0; top: 0;
width: 100%; height: 100%;
overflow-x: hidden;
overflow-y: scroll;
color: #ffffff;
opacity: 0; /* Initially invisible (to avoid 1-frame flicker) */
}
.scroller > .height {
position: relative;
width: 0; height: 0; /* Invisible; lends the scroller its height */
}
.scroller > .item {
position: absolute;
left: 0; top: 0;
width: 100%;
outline: 1px solid rgba(255, 0, 0, 0.8);
}
.hot-zone {
position: absolute;
left: 0; top: 30%;
width: 100%; height: 20%;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
z-index: 2;
pointer-events: none;
}
<div class="contain">
<div class="hot-zone"></div>
<div class="scroller">
<div class="height"></div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Not too much here :)</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">THIS<br/>ONE<br/>IS<br/>REALLY<br/>QUITE<br/>LONG<br/>INDEED<br/>GOOD<br/>SIR</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
</div>
</div>

So you said in your comment that
but my requirement is whichever content touches that gray band should
be shown otherwise it has to be hidden holding no width and height
From this I understand that you need a vertical text scroller. Why don't you use the gray band div as a container, with overflow hidden, and then scroll the content through it?
$(function() {
var pos = 1;
var ii = 0;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
//$('.contents').hide();
var intId = setInterval(function() {
ii++;
pos = -ii;
//console.log(pos);
//if (pos )
$('.contents').each(function() {
var $content = $(this);
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
//$content.hide();
//console.log($content.position().top, centerbandTop, contentBottom);
//if (centerbandBottom > contentTop && centerbandTop < contentBottom)
//$content.show();
});
$('.container').css({
// '-webkit-transform' : 'translate(0,' + pos + ')',
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
.container{
width: 100%;
/*height: 100%;*/
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents{
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
/*visibility: hidden;*/
}
.center-band{
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: relative;
/*top: 50%;*/
overflow: hidden;
}
.wrapper{
position: relative;
}
.over{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
some static text above
</div>
<div class="center-band">
<div class="container">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
</div>
<div>
some static text below
</div>
</div>

How to go to next and previous and loop them

i have a situation where i need to go to next and previous div content
for example:
if user clicks CTRL + n or next then it should go to (1st time run)
first div content (if cliked CTRL + n)
second div content (if cliked CTRL + n)
third div content
so on .....
for previous this pattern will continue
below is my whole code:
$(function(){
// CTRL + n ===> Next
//CTRL + p ===> Previous
var index = 0;
$('#next').on('click',function(){
});
$('#previous').on('click',function(){
});
// window.location = '#third' should change dynamically
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#first">
first
</a>
<a href="#second">
second
</a>
<a href="#third">
third
</a>
<a href="#fourth">
fourth
</a>
<div id="first">
<hr>
First
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae provident quibusdam maiores laudantium rem quas doloremque expedita tempora omnis, accusantium vel, consectetur eos ratione modi alias obcaecati numquam sapiente temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quam ipsam voluptates sit minus minima quas quasi itaque error natus, exercitationem, praesentium, laudantium voluptas ut quidem dolore? Rem, id quasi.
</div>
<div id="second">
<hr>
Second
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus illo harum, numquam optio iure quae ducimus ipsam velit corporis quidem omnis fugiat expedita autem vitae magni molestiae doloribus, ullam mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, asperiores eum rem, nostrum provident qui sunt ut neque, consequatur quaerat repellendus error? Aliquam deleniti cum et error in, at voluptate.
</div>
<div id="third">
<hr>
Third
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, officia? Id voluptatem voluptas similique, reprehenderit odit ab! Laboriosam deserunt illo est obcaecati quaerat, consequuntur, maxime quia quisquam corrupti recusandae, voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repellendus laborum molestiae asperiores necessitatibus repellat eveniet, obcaecati blanditiis numquam aut soluta veritatis unde, quis, dicta illo dolorem, consectetur temporibus molestias!
</div>
<div id="fourth">
<hr>
Fourth
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut ea tempore corrupti, hic vitae repudiandae quod cumque fugiat iste qui accusantium ipsam amet inventore, dignissimos magnam? Ipsam error eaque inventore!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsa itaque eius accusantium. Necessitatibus fugiat dolorum rerum, quam praesentium, aliquam sapiente molestias maiores molestiae. Facilis officia cupiditate quae nisi animi.
</div>
Next |
Previous
Here is jsfiddle: https://jsfiddle.net/jLqt2d1g/9/

See the JS fiddle link JSFiddle(next and previous function)
$(function(){
// CTRL + n ===> Next
//CTRL + p ===> Previous
var id_arr=["first","second","third","fourth"];
var index = 0;
$('#next').on('click',function(){
index++;
var div_id = id_arr[index];
if(index>5){
alert('No More div in this Page');
}else{
alert(div_id);
//based on div_id show the div in page
}
});
$('#previous').on('click',function(){
index--;
var div_id = id_arr[index];
if(index<0){
alert('No More div in this Page');
}else{
alert(div_id);
//based on div_id show the div in page
}
});
// window.location = '#third' should change dynamically
});
i am updated code in the JSfiddle refer that code
In that code in next and previous function you will get the div_id's based on the div'id show div in page

Buttons width to fill up window width

The App will start with 2 buttons in the footer initially.
Depending on user interaction with the app, a third button may need to be inserted/shown. And later it may need to be hidden/removed depending on some user selections form other parts of the app.
Button text is to be centred horizontally inside each button and the footer will need to be fully covered by the buttons except the tiny vertical division for spacing.
The footer in my code has an undesired blank space on the right.
What is the best way to solve this?, hopefully with as much css as possible and the rest with javaScript "I a guessing". Thanks
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
margin-top: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
header, footer {
background-color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>

Is this what your looking for?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
margin-top: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
footer > button {
display: inline-block;
font-size: 1em;
padding: 0.5em 1em;
}
header, footer {
background-color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>

If you mean that you want all three buttons to take up the same space then this will work for you:
footer > button {
padding: 0.5em 1em;
width: 31.33%;
margin: 0 1%;
float: left;
box-sizing: border-box;
}

Categories

Resources