I want to create a simple basic jquery slider with just fade effect. Here is my html & css. I would be much appreciate if you can solve the javascript code for me :) Thanks in advance !
.wrapper {width: 1200px;margin: 70px auto;}
.text_slider {overflow: hidden;display: block;width: 700px;height: 100px;border: 2px solid #42474D;position: absolute;}
.basic_content_slider {position: absolute;overflow: hidden;}
.basic_content_slider p {padding: 20px 70px;display: inline-block;color: #252a30;}
#btn1 {display: block}
#btn2 {display: none;}
#btn3 {display: none;}
#btn4 {display: none;}
#btn5 {display: none;}
.next, .prev {width: 40px;height: 40px;position: absolute;top: 30px;opacity: 0.2;}
.next {background: url(images/next.png) no-repeat;right: 0;}
.prev {background: url(images/prev.png) no-repeat;left: 0;}
<div class="wrapper">
<div class="text_slider">
<div class="basic_content_slider">
<p class="panel_switch" id="btn1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, aspernatur, impedit, facilis voluptate quam ab esse nam cumque non vel rem nesciunt fugiat corporis repellat similique! Obcaecati, adipisci quos dolore.</p>
<p class="panel_switch" id="btn2">Impedit, facilis voluptate quam ab esse nam cumque non vel rem nesciunt fugiat corporis repellat similique! Obcaecati, adipisci quos dolore.</p>
<p class="panel_switch" id="btn3">Psum dolor sit amet, consectetur adipisicing elit. Eum, placeat, impedit, blanditiis, reprehenderit laboriosam officia a dolore illo quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
<p class="panel_switch" id="btn4">quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
<p class="panel_switch" id="btn5">Henderit laboriosam officia a dolore illo quaerat quam alias perspiciatis dignissimos dolores minima ullam libero nemo odio inventore!</p>
</div>
<div class="next"></div>
<div class="prev"></div>
</div>
</div>
Add to your css:
.panel_switch { opacity: 0; transition: opacity 0.5s; }
.panel_switch_active { opacity: 1; }
Add the panel_switch_active class to the first slide
Add following javascript (and include jQuery):
$(function(){
$(".prev").click(function(){
$(".panel_switch_active").removeClass("panel_switch_active").prev().addClass("panel_switch_active");
});
$(".next").click(function(){
$(".panel_switch_active").removeClass("panel_switch_active").next().addClass("panel_switch_active");
});
});
This is pretty basic though. You might want to read up on javascript and jQuery or look for a suitable plugin.
Edit: I've created a jsfiddle with a fully working version: https://jsfiddle.net/1pp92v1u/
Related
I have three different divisions in a single container. div toolbar, div one and div two. I am trying to make toolbar, div one stick to the same place of the screen. and I also want to make sticky the div.fixed-header, only the contents inside div.fixed-header-contents should
be scrollable and shouldn't go behind the divisons above it. I have tried postion sticky and fixed but the div.fixed-header-contents overlaping the previous divisions.
Here's the example :
.toolbar{
border : 1px solid;
position : sticky;
z-index : 1000;
top: 0;
}
.fixed-header{
border-top : 1px solid;
border-bottom : 1px solid;
}
/* .one{
position : fixed
} */
<body>
<div class="toolbar"> // I want this div to be stick to the current position
<h4>
toolbar
</h4>
</div>
<div class="one"> //I want this div to be stick to the current position
<h3>
some images
</h3>
<h3>
some buttons
</h3>
<h3>
some contents
</h3>
</div>
<div class="two">
<div class="fixed-header"> //I want this div to be stick to the current position
<h4>
fixed header items
</h4>
</div>
<div class="fixed-header-contents"> //this div should be scrollable but should not overlap the previous screen
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
</body>
To solve this problem you need to know .toolbar and .one height. You can set to the top property as an absolute value in the CSS, or if don't know to use Javascript to get height of elements.
For the scrollable container (fixed-header-contents) we need to add an extra wrapper, since we restrict viewport then overflow the child element with the min-height: 100%.
document.addEventListener('DOMContentLoaded', function() {
const toolbar = document.querySelector('.toolbar');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const toolbarHeight = toolbar.getBoundingClientRect().height;
const oneHeight = one.getBoundingClientRect().height;
one.setAttribute('style', `--toolbar-height: ${toolbarHeight}px`);
two.setAttribute('style', `--one-height: ${toolbarHeight + oneHeight}px`);
});
.toolbar,
.one,
.two {
position: sticky;
z-index: 1000;
}
.toolbar {
border: 1px solid;
top: 0;
}
.one {
top: var(--toolbar-height);
}
.two {
top: var(--one-height);
}
.fixed-header {
border-top: 1px solid;
border-bottom: 1px solid;
}
/* for scrollable */
.fixed-header-contents {
overflow: hidden;
height: 5rem;
display: flex;
}
/* for scrollable */
.scrollable {
min-height: 100%;
overflow-y: auto;
}
/* not important */
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="toolbar">
// I want this div to be stick to the current position
<h4>toolbar</h4>
</div>
<div class="one">
//I want this div to be stick to the current position
<h3>some images</h3>
<h3>some buttons</h3>
<h3>some contents</h3>
</div>
<div class="two">
<div class="fixed-header">
//I want this div to be stick to the current position
<h4>fixed header items</h4>
</div>
<div class="fixed-header-contents">
<div class="scrollable">
//this div should be scrollable but should not overlap the previous screen "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
</div>
<section>
<h1>section 1</h1>
</section>
<section>
<h1>section 2</h1>
</section>
I am working on a blog layout which have its content on the left side and a 'table of contents' sidebar on the right. The sidebar is fixed with a full viewport height but scrollable incase the items inside are too many.
It is also worth noting that the active state changes on the links in the sidebar based on their corresponding content in the viewport. What I mean to say is that whenever a blog post is in the viewport, its link gets active state in the sidebar. And it is done by Intersection Observer API.
Now the core functionality works fine except there is one issue.
When there are a lot of blog posts, there will be a lot of links on the sidebar. So naturally the bottom links are not visible on the sidebar as they are at the bottom and can't be seen until the scrollbar is pulled down. Therefore, the active state is not visible as well.
Suppose a user tries to read blog post Text 8, the corresponding Text 8 link should've been visible on the sidebar but it is not. Only upto Text 7 is visible in the demo (based on my viewport).
What I wanted to achieve is how can I move the scrollbar up and down based on which blog posts the user is reading? I mean if the user is reading Text 8 then the sidebar will scroll downward and show Text 8 link. If he is reading Text 9, it will scroll to Text 9 link. Now if he decides to read Text 7 from Text 9 then the scrollbar will move upward two places and display Text 7 link.
I don't know if I could explain it properly but this is the best I could write.
It would be a great help if you could help me with this.
Here's the codepen.
Here's the snippet:
const asideContent = $('#aside-content .aside-content');
const asideContentItem = $('#aside-content a');
const callback = (entries, observer) => {
$(entries).each((idx, item) => {
const navItem = $('#' + item.target.id);
if (item.isIntersecting) {
$(asideContentItem).each((i, eachLink) => {
if ($(eachLink).attr("href") === ('#' + $(navItem).attr('id'))) {
$(eachLink).addClass('active');
} else {
$(eachLink).removeClass('active');
}
})
}
})
};
const options = {
threshold: 0.2
};
const observer = new IntersectionObserver(callback, options);
const container = $('#main');
const targetElements = $('.main-content .inner-container');
$(targetElements).each((idx, item) => {
observer.observe(item);
});
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
#main {
margin: 20px auto;
}
.main-content {
background-color: cyan;
}
#aside-content {
position: sticky;
top: 0;
align-self: flex-start;
background-color: red;
height: 100vh;
overflow-y: auto;
}
#aside-content a {
display: block;
margin: 40px auto;
text-decoration: none;
}
#aside-content a.active {
background-color: rgba(0, 255, 0, 0.5);
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
<section class="container">
<div class="row">
<div class="col-md-12">
<div class="header-content">
<h3>header content</h3>
</div>
</div>
</div>
</section>
<section class="container" id="main">
<div class="row">
<div class="col-8">
<div class="main-content">
<div id="text1" class="inner-container">
<h2>Text 1</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit.
</div>
<div id="text2" class="inner-container">
<h2>Text 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harumti aspernatur delectus mollitia libero similique assumenda quos sequi eligendi?
</div>
<div id="text3" class="inner-container">
<h2>Text 3</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi, maxime repellat aperiam labore exercitationem enim possimus. Suscipit facilis debitis quidem excepturi?
</div>
<div id="text4" class="inner-container">
<h2>Text 4</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text5" class="inner-container">
<h2>Text 5</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text6" class="inner-container">
<h2>Text 6</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text7" class="inner-container">
<h2>Text 7</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text8" class="inner-container">
<h2>Text 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text9" class="inner-container">
<h2>Text 9</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
</div>
</div>
<div class="col-4" id="aside-content">
<div class="aside-content">
<h3>Table of Contents</h3>
<div>
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
</div>
</div>
</div>
</section>
<footer>
<h3>footer</h3>
</footer>
You can solve this by setting the scrollbar position to the specific offset as the active class changes. This could be achieved by editing your JS and adding the scrolling logic to the add addClass('active') section.
Basically you have to update the scrollbar position as the active class is added to any link.
document.querySelector("#aside-content").scrollTo(0,position)
And the position to which the scrollbar has to be set, can be fetched from the current active element's/link's offset.
document.querySelector("#aside-content > div > div > a.active").offsetTop
Therefore just after adding class the above stated steps can be done
$(eachLink).addClass('active');
var position = document.querySelector("#aside-content > div > div > a.active").offsetTop;
document.querySelector("#aside-content").scrollTo(0,position);
But, the above code will always set the position, and due to which at first link will set the scrolling to itself and not let "table of contents" text to be visible ever. To fix this situation, updating logic can be made conditional by checking if the active element is first child of the scrolling div.
So, the overall working code should be as follow:
const asideContent = $('#aside-content .aside-content');
const asideContentItem = $('#aside-content a');
const callback = (entries, observer) => {
$(entries).each((idx, item) => {
const navItem = $('#' + item.target.id);
if (item.isIntersecting) {
$(asideContentItem).each((i, eachLink) => {
if ($(eachLink).attr("href") === ('#' + $(navItem).attr('id'))) {
$(eachLink).addClass('active');
if (document.querySelector("#aside-content > div > div > a.active").parentNode.firstElementChild != document.querySelector("#aside-content > div > div > a.active")) {
document.querySelector("#aside-content").scrollTo(0, document.querySelector("#aside-content > div > div > a.active").offsetTop);
} else {
document.querySelector("#aside-content").scrollTo(0, 0);
}
} else {
$(eachLink).removeClass('active');
}
})
}
})
};
const options = {
threshold: 0.2
};
const observer = new IntersectionObserver(callback, options);
const container = $('#main');
const targetElements = $('.main-content .inner-container');
$(targetElements).each((idx, item) => {
observer.observe(item);
});
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
#main {
margin: 20px auto;
}
.main-content {
background-color: cyan;
}
#aside-content {
position: sticky;
top: 0;
align-self: flex-start;
background-color: red;
height: 100vh;
overflow-y: auto;
}
#aside-content a {
display: block;
margin: 40px auto;
text-decoration: none;
}
#aside-content a.active {
background-color: rgba(0, 255, 0, 0.5);
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
<section class="container">
<div class="row">
<div class="col-md-12">
<div class="header-content">
<h3>header content</h3>
</div>
</div>
</div>
</section>
<section class="container" id="main">
<div class="row">
<div class="col-8">
<div class="main-content">
<div id="text1" class="inner-container">
<h2>Text 1</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit.
</div>
<div id="text2" class="inner-container">
<h2>Text 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harumti aspernatur delectus mollitia libero similique assumenda quos sequi eligendi?
</div>
<div id="text3" class="inner-container">
<h2>Text 3</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi, maxime repellat aperiam labore exercitationem enim possimus. Suscipit facilis debitis quidem excepturi?
</div>
<div id="text4" class="inner-container">
<h2>Text 4</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text5" class="inner-container">
<h2>Text 5</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text6" class="inner-container">
<h2>Text 6</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text7" class="inner-container">
<h2>Text 7</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text8" class="inner-container">
<h2>Text 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text9" class="inner-container">
<h2>Text 9</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
</div>
</div>
<div class="col-4" id="aside-content">
<div class="aside-content">
<h3>Table of Contents</h3>
<div>
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
</div>
</div>
</div>
</section>
<footer>
<h3>footer</h3>
</footer>
I came across this accordion I would like to use for my site:
http://jsfiddle.net/subhranild/u5d35La7/1/
<div class="accordion">
<div class="accorfion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
$(document).ready(function(){
$('.accordion-section-title').click(function(e){
var currentAttrvalue = $(this).attr('href');
if($(e.target).is('.active')){
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
});
however, whenever one of the headers is opened, the scroll moves to have the opened content at the top of the page. How can I edit this code to disable the auto-scroll?
I've seen some people online saying change the href to equal #, but when I do that the accordion no longer works.
Thanks.
Just by adding e.preventDefault(); on the click function in your Javascript as below working example.
$(document).ready(function() {
$('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrvalue = $(this).attr('href');
if($(e.target).is('.active')) {
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
});
.wrapper {
height: 100%;
}
.accordion
{
overflow:hidden;
border-radius:4px;
background:#f7f7f7;
}
.accordion-section-title
{
width:100%;
padding:15px;
}
.accordion-section-title
{
width: 100%;
padding: 15px;
display: inline-block;
background-color: #333;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration:none;
}
.accordion-section-title.active
{
background-color:#4c4c4c;
text-decoration:none;
}
.accordion-section-title:hover
{
background-color:grey;
text-decoration:none;
}
.accordion-section:last-child .accordion-section-title
{
border-bottom:none;
}
.accordion-section-content
{
padding:15px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam, ex temporibus neque aspernatur similique eligendi est harum obcaecati, ipsam velit, quis doloremque expedita, hic! Soluta, omnis itaque optio, inventore, assumenda totam adipisci vel eius, distinctio amet dolorem tempore sit. Accusamus, voluptas! Quam animi, esse soluta porro nesciunt incidunt nisi autem distinctio corrupti, dolores impedit obcaecati. Sequi sit facilis, accusamus neque quod tempore, amet ratione, veritatis commodi, velit necessitatibus dolorum maxime. Facere qui esse, rerum quo nihil, accusamus sint assumenda. Eaque asperiores recusandae, dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime.
</p>
<div class="accordion">
<div class="accorfion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam, ex temporibus neque aspernatur similique eligendi est harum obcaecati, ipsam velit, quis doloremque expedita, hic! Soluta, omnis itaque optio, inventore, assumenda totam adipisci vel eius, distinctio amet dolorem tempore sit. Accusamus, voluptas! Quam animi, esse soluta porro nesciunt incidunt nisi autem distinctio corrupti, dolores impedit obcaecati. Sequi sit facilis, accusamus neque quod tempore, amet ratione, veritatis commodi, velit necessitatibus dolorum maxime. Facere qui esse, rerum quo nihil, accusamus sint assumenda. Eaque asperiores recusandae, dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime.
</p>
</div>
I have a HTML-Document which is structured as shown in the following figure:
The red blocks which represent the text of the sidenotes are placed relatively to the footnote numbers in the text using CSS. If the text has many sidenotes and/or the texts of the sidenotes are long, the sidenotes overlap. To prevent such a behaviour I am using JavaScript to set the top margin of these elements in order to shift them downwards.
To prevent that the website is not usable without JavaScript enabled, I would like to hardcode the top margin value of the elements that need shifting down in the CSS-file. To take into account the different screen resolutions, I thought of using the CSS #media-query to set different top margins for other screen resolutions.
Example:
#media(min-width: 80em) {
.container { width: 40em; }
#sidenote-45 { margin-top: 15px; }
[...]
}
#media(min-width: 60em) {
.container { width: 30em; }
#sidenote-56 { margin-top: 28px; }
#sidenote-89 { margin-top: 12px; }
[...]
}
[maybe more #media-queries for other screen sizes]
What do you think about this approach?
You can use absolute position relative to the container to place the notes at the left or right of the div and if you don't set top property the box maintains in its position aligned with the number. Something like this:
.container {
border: solid 2px black;
background: white;
width: 30%;
margin: 20px auto;
position: relative;
}
sup {
color: red;
}
.notes {
position: absolute;
left: -220px;
color: black;
display: block;
background: #8ac88a;
width: 200px;
font-size: 14px;
padding: 5px;
margin-top: -10px;
}
.right {
left: auto;
right: -220px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dolorum voluptate provident doloremque aperiam laboriosam ea, vel nihil illum, beatae nemo mollitia possimus, velit<sup>1<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> sapiente nobis! Expedita possimus incidunt nam laudantium corrupti eaque, eveniet fuga perferendis, enim praesentium vero voluptatibus adipisci, dicta blanditiis aliquid asperiores accusantium. Provident voluptate explicabo necessitatibus eos sequi
modi non in nesciunt, debitis alias architecto doloremque sed<sup>2<span class="notes right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> quam voluptatem aut dolorem officia ipsa eum dicta optio delectus ullam
aliquam! Dicta rerum praesentium, laudantium suscipit earum, voluptates placeat totam aperiam non atque consequatur cupiditate neque! Reiciendis consectetur quo, alias facilis officia totam illo minus? Vitae distinctio culpa nesciunt voluptate tempore!
Error enim aperiam odio debitis culpa excepturi, minus molestias inventore amet recusandae<sup>3<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> fugit sit quasi qui ipsum. Aperiam quaerat tenetur,
voluptatibus eaque. Voluptatum veniam, nihil accusamus nesciunt nobis dolore cumque amet asperiores qui, ducimus iusto voluptatibus.
When i use an other div to do it, it will not affect other dom classes, so i have to modify each dom class when i want the whole page to get darker.
Is there a way to overlap the whole document with a gray transparent plane?
There is a codepen ilustrating your needs. (creating a dismissable popup and dimming the view)
HTML:
<div class="wrapper">
<button class="btn btn-success dim">Dim the page!</button>
<div class="dimmer">
<span class="exit">×</span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
</div>
</div>
CSS:
.wrapper {
padding: 2.5em;
margin: 0 auto;
width: 80%;
}
.dimmer {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.dim {
display: block;
margin: 2em auto;
z-index: 200;
}
.exit {
font-size: 100px;
color: red;
position: absolute;
top: 2px;
left: 2px;
opacity: 1;
cursor: pointer;
}
Javascript:
$(function() {
var dimmerButton = $('.dim');
var dimmer = $('.dimmer');
var exit = $('.exit');
dimmerButton.on('click', function() {
dimmer.show();
});
exit.on('click', function() {
dimmer.hide();
});
});
Note: The author of this is #srikarg
You will need to show an overlay div
<div id="overlay"></div>
Make it position fixed
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
and make it visible when you want to darken the page, here is how you do it
$(function(){
//Am hiding the overlay after 2 sec
$("#overlay").delay(3000).hide(200);
})
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="overlay"></div>
<h1>My Awesome Page</h1>
</body>
You can add a background-color to your body with css:
#overlay {
background-color: rgba(0,0,0,0.5); /* your color */
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
Demo: http://jsfiddle.net/6gahqaej/2