I have the following page, which is behaving exactly how I want it to.
However, I know the page can be written more efficiently in two ways:
First and most importantly, I am repeating a javascript function. This is to denote which text should be expanded when its specific button is clicked, but I know the two can be written as one since they share the same type of functionality.
Second, the css is clumsy. I've used !important to override whether text is shown or hidden.
Can someone please suggest the most eloquent rendition of this page?
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.expand-button {
background-color: #1860ac;
color: white;
border-radius: 5px;
height: 30px;
margin: 15px auto 40px auto;
display: block;
font-family: 'Cabin', sans-serif;
font-size: 1em;
}
.hidden {
display: none;
}
.very-hidden {
display: none!important;
}
.mystyle {
display: block!important;
}
</style>
</head>
<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand1()">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand2()">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
<script type="text/javascript">
function expand1() {
var element = document.getElementById("myDIV1");
element.classList.toggle("mystyle");
var element = document.getElementById("b1");
element.classList.toggle("very-hidden");
}
function expand2() {
var element = document.getElementById("myDIV2");
element.classList.toggle("mystyle");
var element = document.getElementById("b2");
element.classList.toggle("very-hidden");
}
</script>
</body>
Try this:
Use the same class to hidde the elements, and use the same function passing a variable with the number of the div you are clicking, so you can so you can build the id name of the button and the div.
function expand(number) {
var id = 'myDIV'+ number
var divElement = document.getElementById(id);
divElement.classList.toggle("mystyle");
var idButton = 'b'+ number
var button = document.getElementById(idButton);
button.classList.toggle("hidden");
}
.expand-button {
background-color: #1860ac;
color: white;
border-radius: 5px;
height: 30px;
margin: 15px auto 40px auto;
display: block;
font-family: 'Cabin', sans-serif;
font-size: 1em;
}
.hidden {
display: none;
}
.mystyle {
display: block;
}
<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand('1')">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand('2')">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
</body>
Hope this help you :)
Related
I have a save setting button for a profile edit web page. The page is long and I want the save setting button fixed at bottom of the page. On scrolling down it take her normal position. I can make it fixed at bottom on scrolling but I can't make it stick on the normal position when scrolling.
The design on small height mobile screen
And on scrolling down, I expect to stick before the footer
I add this css to the bottom container save-setting but this style make it fixed at the bottom all the time.
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
I think this question is similar to my question but I can't understand because the website example isn't working anymore. So anybody can help me in more details.
Edit
This is a example code for what I expect
.header {
height: 100px;
background-color: green;
}
.page-holder {
height: 600px;
background-color: red;
}
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
button.primary-btn {
padding: 12px 20px;
border-radius: 10px;
color: #fcfcfc;
font-size: 14px;
line-height: 21px;
font-weight: 600;
background: linear-gradient(100.96deg, #15c077 8.41%, #2dc015 88.4%);
border: 0;
width: 100%;
}
.footer {
height: 300px;
background-color: orange;
}
<div class="header">
<h2>Header</h2>
</div>
<div class="page-holder">
<h1>Main Content</h1>
<div class="save-settings">
<button class="primary-btn">Save Setting</button>
</div>
</div>
<div class="footer">
<h2>footer</h2>
</div>
So I want the save-settings at the bottom page but on scrolling it stick before the footer on his normal DOM position.
You can use position: sticky to fix the footer to the bottom, you can then place content below it, to have it stick to it.
.wrapper {
height: 100vh;
position: relative;
}
.content {
background: green;
}
.save-settings {
box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
padding: 14px 24px;
position: sticky;
left: 0;
bottom: 0;
width: 100%;
background-color: #fcfcfc;
z-index: 100;
}
.under-settings {
background: blue;
}
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
<br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
dictum.
<br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
<br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
Nulla non posuere arcu, ut molestie lectus.
<br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
</div>
<div class="save-settings">
Save Settings
</div>
<div class="under-settings">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
<br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
dictum.
<br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
<br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
Nulla non posuere arcu, ut molestie lectus.
<br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
</div>
</div>
Following your case in details, it turns out that your HTML structure needs some tweaking:
.page-holder {
height: 100vh;
}
.save-settings {
text-align: center;
border-top: 1px solid black;
padding: 20px;
position: sticky;
bottom: 0;
right: 0;
left: 0;
}
<div class="header">
<h2>Header</h2>
</div>
<div class="page-holder">
<h1>Main Content</h1>
</div>
<div class="save-settings">
<button class="primary-btn">Save Setting</button>
</div>
<div class="footer">
<h2>footer</h2>
</div>
Make the .save-settings element a direct child of the body element.
In this case, the position: sticky; will work without adding any additional position property.
I am quite nascent with JavaScript and stuck with a bit complex problem.
I want to call "Read more" if body/container has "overflow-text" or "height > given height of "body".
else { hide "Read more" }
not able to do it on my own.
I am pasting my sample of simple read more / read less here.
Request you to please help me improvise it.
const readMoreBtn = document.querySelector('.read-more-btn');
const text = document.querySelector('.text');
readMoreBtn.addEventListener('click',(e)=>{
text.classList.toggle('show-more');
if(readMoreBtn.innerText === 'Read more'){
readMoreBtn.innerText = 'Read less';
}
else{
readMoreBtn.innerText = 'Read more';
}
});
<style>
body{
font-family: Arial;
text-align: justify;
max-width: 600px;
padding: 20px;
background-color: #f0f0f0;
}
.moreText{
display:none;
}
.read-more-btn{
padding: 15px 60px;
border: 1 px solid #828282;
outline: none;
cursor:pointer;
}
.text.show-more .moreText{
display:inline;
}
</style>
<body>
<h1>Hello World</h1>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.<span class="moreText"> Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="read-more-btn">Read more</button>
</body>
Use the overflow: hidden; attribute in a div (text-wrapper) that contains the <p> to hide overflowed text, then, just toggle classes when press read-more or read-less.
On read more, put the div height on height: auto;, so the div will adjust to the content height.
const readMoreBtn = document.querySelector('.read-more-btn');
const text = document.querySelector('.text-wrapper');
readMoreBtn.addEventListener('click', (e) => {
text.classList.toggle('show-more');
text.classList.toggle('show-less');
if (readMoreBtn.innerText === 'Read more') {
readMoreBtn.innerText = 'Read less';
} else {
readMoreBtn.innerText = 'Read more';
}
});
body {
font-family: Arial;
text-align: justify;
max-width: 600px;
padding: 20px;
background-color: #f0f0f0;
}
.read-more-btn {
outline: none;
cursor: pointer;
}
.show-less {
height: 200px;
overflow: hidden;
}
.show-more {
height: auto;
}
<body>
<h1>Hello World</h1>
<div class="text-wrapper show-less">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor.
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
</div>
<br>
<a class="read-more-btn" href="#">Read more</a>
</body>
I have the following code:
.aligned {
display: flex;
align-items: top;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
img {
display: block;
margin: 0 auto;
max-width: 80%;
height: auto;
}
#media all and (min-width: 768px) {
img {
float: left;
height: 200px; /* image height for larger screen only */
}
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
So when you run the above code, open it on a new page, you can see the alignment to be like this:
On my end, it looks like that but when I zoom out on my website, this is the output I get:
Sorry for the blurred photo
That is what my output looks like when I zoom out. I do not want that, is there a way to make it static, meaning even if I zoom out, the output of the above code I sent does not change?
Even if you run the above code, open it on a new page, and zoom out, you can see the text and the image to change its position. However, I want them to be static, meaning not change at all. Any suggestions?
Update
For a better understanding of what I am looking for, then this is the output I get when I zoom out my page at 33%:
As you can see, the text and image are moved towards the left, which is not what I want. I want them to stay where they were before.
Try wrapping everything inside a dedicated parent div like so:
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</div>
</div>
If this won't work, please make a JSFiddle that illustrates the problem, or share your website address.
This is my current code. It can show where you are viewing like when you are reading "SEC 1" part, the "SEC 1" on the navigation bar gets highlighted. When you click the "SEC 2" on the navigation bar, it should jump to "SEC 2" part. Now the problem is when you click the one you want to go, the previous one gets highlighted. For example, if you click "SEC 2", the "SEC 1" on the navigation bar gets highlighted. As I don't know whats wrong with the code I paste it down here.
If you don't know what's the problem: Run the first code snippet, click the SEC 4 on the navigation bar, and then you know what's the problem: jump to SEC 4 part but highlight the SEC 3 on the navigation bar. (latest Chrome and latest Windows 10)
The function I need:
Highlight the SEC- I'm currently reading on the navigation bar
Jump to the SEC- I clicked
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>TEST</title>
<style type="text/css">
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
header {
padding: 1em;
}
nav {
position: sticky;
top: 0;
color: #000;
background-color: yellow;
border-bottom: 2px solid yellow;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em 1em 1em 0;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline;
color: #000;
text-decoration: none;
padding: 1em;
}
nav ul li a.current {
border-bottom: 2px solid blue;
}
main {
}
section {
padding: 5em 1em 1em 1em;
}
footer {
background-color: #000;
color: #fff;
margin-top: 5em;
padding: 1em;
}
</style>
</head>
<body>
<header> Header here </header>
<nav>
<ul>
<li>SEC 1</li>
<li>SEC 2</li>
<li>SEC 3</li>
<li>SEC 4</li>
</ul>
</nav>
<main>
<section id="section-1">
<h3>SEC 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum sit amet justo donec enim diam vulputate ut pharetra. Et ultrices neque ornare aenean. Vulputate mi sit amet mauris commodo. Pulvinar mattis nunc sed blandit. Aliquam ut porttitor leo a diam sollicitudin tempor. Dolor purus non enim praesent elementum facilisis leo. Consequat semper viverra nam libero justo laoreet sit amet. Ornare suspendisse sed nisi lacus. Sed viverra tellus in hac habitasse. Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed adipiscing diam donec adipiscing tristique risus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Pretium aenean pharetra magna ac placerat. Tellus integer feugiat scelerisque varius.</section>
<section id="section-2">
<h3>SEC 2</h3>
Duis tristique sollicitudin nibh sit amet. Facilisis leo vel fringilla est. Erat nam at lectus urna. Ut sem viverra aliquet eget sit amet tellus. Vulputate sapien nec sagittis aliquam. Tortor condimentum lacinia quis vel. Eget magna fermentum iaculis eu. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Velit laoreet id donec ultrices tincidunt. Facilisi nullam vehicula ipsum a arcu. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Vitae purus faucibus ornare suspendisse sed nisi lacus. A arcu cursus vitae congue mauris rhoncus aenean.</section>
<section id="section-3">
<h3>SEC 3</h3>
Aliquam sem et tortor consequat. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Vel eros donec ac odio tempor orci dapibus ultrices. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. At auctor urna nunc id cursus metus aliquam eleifend. Consequat mauris nunc congue nisi vitae. In massa tempor nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Et leo duis ut diam quam. Convallis tellus id interdum velit. Pretium fusce id velit ut tortor. Aliquam malesuada bibendum arcu vitae elementum curabitur. Elementum integer enim neque volutpat ac tincidunt vitae. Nulla porttitor massa id neque aliquam. Quisque id diam vel quam elementum pulvinar. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi.</section>
<section id="section-4">
<h3>SEC 4</h3>
Tortor pretium viverra suspendisse potenti. Iaculis eu non diam phasellus. Nulla pharetra diam sit amet nisl. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Cras adipiscing enim eu turpis egestas pretium. Tellus mauris a diam maecenas sed enim ut sem. Amet est placerat in egestas. Volutpat lacus laoreet non curabitur. Eget nullam non nisi est sit amet. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Massa massa ultricies mi quis. Volutpat sed cras ornare arcu. Varius duis at consectetur lorem. Odio euismod lacinia at quis risus.</section>
</main>
<footer>Footer here</footer>
<script>
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
</script>
</body>
</html>
Solution by Tore Brandtzæg (Thanks! But "Currently at SEC-" function is lost)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>TEST</title>
<style type="text/css">
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
header {
padding: 1em;
}
nav {
position: sticky;
top: 0;
color: #000;
background-color: yellow;
border-bottom: 2px solid yellow;
}
nav ul {
list-style: none;
margin: 0;
padding: 1em 1em 1em 0;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline;
color: #000;
text-decoration: none;
padding: 1em;
}
nav ul li a.current {
border-bottom: 2px solid blue;
}
main {
}
section {
padding: 5em 1em 1em 1em;
}
footer {
background-color: #000;
color: #fff;
margin-top: 5em;
padding: 1em;
}
</style>
</head>
<body>
<header> Header here </header>
<nav>
<ul>
<li>SEC 1</li>
<li>SEC 2</li>
<li>SEC 3</li>
<li>SEC 4</li>
</ul>
</nav>
<main>
<section id="section-1">
<h3>SEC 1</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum sit amet justo donec enim diam vulputate ut pharetra. Et ultrices neque ornare aenean. Vulputate mi sit amet mauris commodo. Pulvinar mattis nunc sed blandit. Aliquam ut porttitor leo a diam sollicitudin tempor. Dolor purus non enim praesent elementum facilisis leo. Consequat semper viverra nam libero justo laoreet sit amet. Ornare suspendisse sed nisi lacus. Sed viverra tellus in hac habitasse. Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed adipiscing diam donec adipiscing tristique risus. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Pretium aenean pharetra magna ac placerat. Tellus integer feugiat scelerisque varius.</section>
<section id="section-2">
<h3>SEC 2</h3>
Duis tristique sollicitudin nibh sit amet. Facilisis leo vel fringilla est. Erat nam at lectus urna. Ut sem viverra aliquet eget sit amet tellus. Vulputate sapien nec sagittis aliquam. Tortor condimentum lacinia quis vel. Eget magna fermentum iaculis eu. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Sollicitudin tempor id eu nisl nunc. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Velit laoreet id donec ultrices tincidunt. Facilisi nullam vehicula ipsum a arcu. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Vitae purus faucibus ornare suspendisse sed nisi lacus. A arcu cursus vitae congue mauris rhoncus aenean.</section>
<section id="section-3">
<h3>SEC 3</h3>
Aliquam sem et tortor consequat. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. Vel eros donec ac odio tempor orci dapibus ultrices. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. At auctor urna nunc id cursus metus aliquam eleifend. Consequat mauris nunc congue nisi vitae. In massa tempor nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Et leo duis ut diam quam. Convallis tellus id interdum velit. Pretium fusce id velit ut tortor. Aliquam malesuada bibendum arcu vitae elementum curabitur. Elementum integer enim neque volutpat ac tincidunt vitae. Nulla porttitor massa id neque aliquam. Quisque id diam vel quam elementum pulvinar. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi.</section>
<section id="section-4">
<h3>SEC 4</h3>
Mauris rhoncus aenean vel elit scelerisque. Auctor elit sed vulputate mi sit amet mauris commodo quis. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. In fermentum posuere urna nec tincidunt. Condimentum lacinia quis vel eros donec ac. Mattis rhoncus urna neque viverra justo. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. In pellentesque massa placerat duis ultricies. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Ipsum dolor sit amet consectetur adipiscing elit duis. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Ut porttitor leo a diam sollicitudin. Ut etiam sit amet nisl purus in mollis nunc sed. Habitant morbi tristique senectus et netus. Laoreet sit amet cursus sit amet dictum sit amet. Natoque penatibus et magnis dis parturient montes nascetur. Nulla pellentesque dignissim enim sit amet venenatis urna.<br>
Cras semper auctor neque vitae tempus quam pellentesque nec nam. Sodales ut etiam sit amet nisl. Ut consequat semper viverra nam libero justo laoreet sit. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Ipsum dolor sit amet consectetur adipiscing elit duis. Nunc congue nisi vitae suscipit tellus mauris. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Commodo odio aenean sed adipiscing diam. Nisi lacus sed viverra tellus in hac habitasse. Arcu cursus vitae congue mauris rhoncus aenean. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Proin sed libero enim sed faucibus. Libero volutpat sed cras ornare. Ornare arcu odio ut sem nulla pharetra diam sit. Praesent tristique magna sit amet.<br>
Porta non pulvinar neque laoreet suspendisse interdum consectetur. Cras fermentum odio eu feugiat pretium nibh. Purus gravida quis blandit turpis cursus. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Ut placerat orci nulla pellentesque dignissim enim sit amet. Leo duis ut diam quam nulla porttitor massa id neque. Dignissim convallis aenean et tortor at. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Sit amet porttitor eget dolor morbi non arcu risus. Mi sit amet mauris commodo.</section>
</main>
<footer>Footer here</footer>
<script>
let mainNavLinks = document.querySelectorAll("nav ul li a");
let clickEventListener = event => {
mainNavLinks.forEach(link => link.classList.remove("current"));
event.target.classList.add("current");
};
mainNavLinks.forEach(link => link.addEventListener('click', clickEventListener));
</script>
</body>
</html>
Not sure if this fits your requirements, but an alternative solution is to add a click event listener to each nav link, which deselects all other nav links and selects the one that was clicked.
This could be done by replacing the script part with something like the following:
let mainNavLinks = document.querySelectorAll("nav ul li a");
let clickEventListener = event => {
mainNavLinks.forEach(link => link.classList.remove("current"));
event.target.classList.add("current");
};
mainNavLinks.forEach(link => link.addEventListener('click', clickEventListener));
At least for me, this seems to resolve the issues when clicking the links.
Edit: Just realized that you probably want the scroll functionality as well, which this solution does not include.
I am trying to set vertical scroll bar to the div2 to replace the default browser vertical scroll bar.
.div1 {
height: 200px;
}
.div2 {
overflow-y: auto;
height: 500px;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>
With the above style, document is left with blank space at the bottom since height of div2 is not exactly occupying the entire document height. How do I fix that?
The steps to achieve what you want are:
Set both html's and body's margin and padding to 0.
Set the header's height to the fixed height you want: in your case, 200px.
Set the .main's height to 100% of the viewport less the header height: calc(100vh - 200px).
Set the .main's overflow-y to auto.
Create a section into the .main, and set the margin you want to show your content (optional).
And then, we're done! Take a look at the example below (if you want to test it in a better way, click on the Full Page button, and then play with your window's resizing etc):
html,
body {
overflow: hidden;
padding: 0;
margin: 0;
}
header {
height: 120px;
background-color: blue;
}
div.main {
height: calc(100vh - 120px);
background-color: red;
overflow-y: auto;
}
div.main > section {
margin: 10px;
}
div.main > div > p {
text-align: justify;
}
<header>
</header>
<div class="main">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt enim sit amet diam bibendum, ut rhoncus est molestie. Ut vulputate egestas mauris, eget ultricies tellus aliquet nec. Mauris nec neque et lorem volutpat feugiat eget sit amet
erat. Nullam luctus ultricies augue ut cursus. Mauris pulvinar velit at venenatis semper. Quisque non dolor ante. Nulla tempus id turpis et placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum justo elit, rhoncus vitae
massa non, condimentum ornare quam. Duis sit amet orci a risus mollis gravida et quis augue. Donec sed felis ante. Vestibulum rutrum non dolor quis finibus. Vestibulum ultricies leo eget mi elementum, vel vestibulum felis maximus. Donec congue lorem
vel ante mattis, eu luctus magna finibus. Donec sit amet dui quam.
</p>
<p>
In ullamcorper, nibh eget venenatis imperdiet, augue ante porttitor mauris, nec scelerisque tortor nisi eu arcu. Phasellus libero ligula, eleifend a lobortis in, cursus in tellus. Morbi volutpat, sem a dignissim venenatis, velit nulla vehicula sem, ut
fermentum augue eros sit amet nisi. Vivamus eget ex id turpis scelerisque lobortis sed sed arcu. Nulla facilisi. Curabitur hendrerit iaculis justo, at iaculis est facilisis sit amet. Donec sem tellus, posuere et metus id, consectetur vehicula sapien.
Ut eros quam, tempor vitae quam sed, efficitur faucibus sapien. Mauris varius velit orci, sit amet fermentum neque auctor ac. Nullam pretium sed urna et pellentesque.
</p>
<p>
Nunc id odio ligula. Sed ut dolor vitae sem fringilla condimentum. Sed venenatis lacus a magna egestas, nec volutpat quam ullamcorper. Maecenas volutpat eu magna nec ultrices. In egestas, risus id porta condimentum, odio urna ultricies mi, ut elementum
magna tortor quis eros. Sed a hendrerit felis. Curabitur id sem consectetur, luctus velit in, sollicitudin elit. Proin ac commodo tortor. Proin imperdiet id massa at sollicitudin. Pellentesque enim arcu, venenatis ut dictum et, ornare at tortor.
Donec et urna nec metus rhoncus auctor. Nunc id nisi nec sem condimentum vehicula a in arcu.
</p>
<p>
Proin eleifend sem massa, at auctor eros porta congue. Aliquam nec aliquet justo, at cursus ipsum. Cras justo leo, varius vel accumsan eget, sagittis sit amet lorem. Donec pulvinar ante ut efficitur eleifend. Duis tincidunt metus non nunc accumsan, vel
accumsan velit rhoncus. Nunc arcu magna, sollicitudin non urna in, pellentesque dignissim eros. Nam placerat sodales rutrum. Sed quis placerat leo. Nunc porttitor nisi nunc, in feugiat dolor accumsan nec. Aliquam gravida diam ac tempor sodales.
Ut in sapien gravida odio molestie vehicula sed vel nulla. Integer sed ipsum semper, auctor massa eget, viverra justo. Nullam mattis suscipit lorem vel mattis. Morbi non aliquet nunc. In hac habitasse platea dictumst.
</p>
<p>
Pellentesque dapibus sapien quis congue porta. Maecenas faucibus ex nisi, in varius risus imperdiet ac. Aliquam tristique egestas ligula, sed vestibulum lacus mollis vel. Nunc non ante ut quam placerat suscipit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In a viverra augue, a dignissim justo. Aliquam volutpat nibh ut tellus interdum suscipit. Praesent mi sem, mollis in libero vel, pretium accumsan ex. Nullam gravida diam quis semper faucibus. Nullam cursus felis dolor, sed egestas
ex lobortis et. Vivamus at maximus felis, vel posuere purus. Quisque pellentesque risus nec posuere suscipit. Aliquam eleifend tempus ante, vel vehicula nunc facilisis quis. Mauris lacinia, felis at ultrices luctus, lacus nisl molestie neque, et
varius urna velit at massa. Nulla facilisi.
</p>
</section>
</div>
I'm not absolutely sure what you're trying to do but try adding this to your css and see if it fixes it.
html, body { height: 100%; }
Try this. The border on div1 and div2 is just to show the height of the div. Feel free to remove it ;)
#container {
height: 100%;
position: absolute;
}
.div1 {
height: 200px;
position: relative;
border: 2px solid yellow;
}
.div2 {
overflow-y: auto;
position: relative;
height: 100%;
border: 2px solid red;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>