I am trying to make a slide(up/down) system for my collapse components (like bootstrap) but I can't get the height of the elements to animate(without height there is no possible way to animate the element I think so- if this is wrong, then how can I animate the element?)!
NOTE: [I want to use pure javascript]
document.getElementById('btn').addEventListener('click', function(){
this.nextElementSibling.classList.toggle('active');
})
body{
font-family: Segoe UI;
font-size: 1rem;
line-height: 1.5;
}
.collapse{
border: 1px solid #e7e7e7;
border-radius: .25rem;
overflow: hidden;
}
#btn{
padding: .75rem 1.25rem;
width: 100%;
border: none;
font-size: inherit;
background-color: #fff;
cursor: pointer;
}
#btn:focus{
outline: 0;
}
.collapse-content{
font-size: 95%;
padding: .75rem .75rem;
display: none;
}
.collapse-content.active{
display: block;
}
<div class="collapse">
<button id="btn"> Click Me </button>
<div class="collapse-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
</div>
</div>
Bare-bones vanilla javascript implementation that'll account for any internal height (with consistent transition speed) can be achieved with some minor changes to the markup.
<div class="collapse">
<button id="btn"> Click Me </button>
<div class="collapse-wrapper">
<div class="collapse-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
</div>
</div>
</div>
Note the addition of the collapse-wrapper div. This'll allow you to render the content and measure its height without actually displaying the content. Then it's just a simple case of showing/hiding the content on click:
* {
box-sizing: border-box;
}
.collapse-wrapper {
overflow: hidden;
transition: all 300ms ease-in;
}
const wrapper = document.querySelector('.collapse-wrapper')
const content = document.querySelector('.collapse-content')
const button = document.getElementById('btn')
let open = true
// Set initial height to content height, if shown by default
if (open) {
wrapper.style.height = `${content.getBoundingClientRect().height}px`
}
function toggleOpen () {
if (open) {
wrapper.style.height = '0px'
open = false
} else {
const height = content.getBoundingClientRect().height
wrapper.style.height = `${height}px`;
open = true
}
}
button.addEventListener('click', toggleOpen)
Here's a fiddle
You need to use max-height. Yes, it's nasty, since it means you need to set some arbitrary max height that may need to be adjusted later if the content grows. However, you cannot animate height in this situation because the height is not defined before the content opens.
Something like:
.collapse-content{
font-size: 95%;
padding: .75rem .75rem;
max-height: 0;
transition: max-height .3s;
}
.collapse-content.active{
max-height: 200px; //something bigger than what you need
}
function slide(){
document.getElementById("sliding").style.maxHeight = "1000px";
}
#sliding{
transition: 0.5s;
max-height: 0px;
overflow: hidden;
}
<button onclick ="slide();">Slide it</button>
<div id = "sliding">
<h1>It works</h1>
<p>Hello there</p>
</div>
This is sort of hacky because you have to set maxHeight to the largest you think your content will get.
Source: How can I transition height: 0; to height: auto; using CSS?
Related
I'm basically trying to implement a popup that blurs the background and makes it so that the user can't touch the buttons and other components in the background.
You can disable the whole div by using css.
#div-id{
pointer-events: none;
}
This will disable all the elements inside the div.
If you want the blur effect you can add opacity: 0.2; to the div css.
You can add this class on your main element container to blur the whole background
.blured {
filter: blur(2px);
-webkit-filter: blur(2px);
}
And add pointer-events: none; on your modal or popup
By using css backdrop-filter property and pointer-events you can achieve what u need .. see example below
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
}
body {
margin: 0;
padding: 0;
}
.disabled{
pointer-events: none;
color : grey;
}
.modal {
position: fixed;
inset: 0;
isolation: isolate;
background-color: rgba(19, 128, 119, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.popup {
position: absolute;
z-index: 1;
width: 400px;
background-color: black;
color: white;
padding: 1rem;
}
.blur{
position: absolute;
inset: 0;
z-index: -1;
backdrop-filter: blur(0.2rem);
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorum illo, non incidunt earum natus neque architecto a autem maxime voluptatibus tempora minima, provident expedita quidem cumque ab. Error, tenetur?
</div>
<div class="modal">
<div class="blur"></div>
<div class="popup">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quam architecto minima nihil aliquid quis unde
illo mollitia iure. Quia.
<br /> <br /> <br />
<a href="#" class="disabled">
I am a disabled link !
</a>
</div>
</div>
References : pointer-events and backdrop-filter.
Note: Also remember using pointer events doesn't means you can't use keyboard to focus.. To prevent keyboard tab focus you might need to use tabindex attribute on the link
body{
position:relative;
///rest of your style
}
.backdrop {//create a div inside body // <div class".backdrop"></div>
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
backdrop-filter: blur(5px);
}
.backdrop:enabled { //here we have disable all pevnts
pointer-events: none;
}
I have a block when clicked it opens when clicked again closes I want to apply an animation to this block, I want to apply an animation like this
<template>
<div>
<button #click="show = !show">Click me</button>
<div v-show="show" class="anim-block"></div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
};
</script>
<style scoped>
.anim-block {
margin: 30px auto;
width: 280px;
height: 300px;
background: red;
}
</style>
You can also look at my code in codesandbox
You can do this with just a bit of CSS.
Essentially just use your parent anim-block as a mask and add a child div containing your content.
Child
position: absolute = So that it doesn't move with the parent animation
left: 50%; transform: translateX(-50%); = To center it within the page (according to your current code sandbox layout)
width: 280px; height: 300px; = Set the dimensions of the window
Parent
position: relative = To keep the child on the parent, not the page (absolute positioned elements get their origin from the closest relative positioned parent)
overflow: hidden = To mask out everything outside it while it animates
width: 0; height: 0; opacity: 0; = Set the starting state of the animation
transition: all 0.3s; = Transition the width and height when they change (can also set width and height independently but "all" is nice and succinct
Vue Component
Lastly, just add a dynamic class on your parent component when show = true.
<div :class="`anim-block ${show && 'open'}`">
With the final state of your animation in the .open class:
.open {
width: 280px;
height: 300px;
opacity: 1;
}
Final Result
Template:
<template>
<div>
<button #click="show = !show">Click me</button>
<div :class="`anim-block ${show && 'open'}`">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque
beatae, recusandae laborum nihil, natus placeat aut facere reiciendis
esse cumque dicta quas possimus qui maxime asperiores sed a
repudiandae praesentium.
</p>
</div>
</div>
</div>
</template>
CSS:
<style scoped>
.anim-block {
position: relative;
width: 0;
height: 0;
background-color: rgb(194, 209, 223);
opacity: 0;
overflow: hidden;
transition: all 0.3s;
}
.anim-block.open {
width: 280px;
height: 300px;
opacity: 1;
}
.anim-block .content {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 300px;
padding: 30px auto;
}
.anim-block .content p {
color: rgb(34, 39, 53);
}
</style>
Side note: this is my first post, so sorry if my explanation is unclear. If you have any questions, feel free to ask!
I am using jQuery 3.x. I am trying to append a dynamically created element before and after an element using insertBefore() and insertAfter(). However, only insertBefore() is working, and another one is ignored. When I am commenting one then other is working. why?
p = $("<p></p>").text("This is a dynamicly created element");
p.insertAfter($('nav'));
p.insertBefore($('nav'));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
}
header,
nav,
main,
aside,
footer {
padding: 10px 15px;
border: 1px solid mediumseagreen;
text-align: center;
}
header {
background: dodgerBlue;
}
nav {
background: mediumSeaGreen;
}
main {
background: #d3d3d3;
}
main,
aside {
height: 1200px;
}
main {
width: 80%;
float: left;
}
aside {
width: 20%;
float: right;
}
div::after {
content: " ";
float: none;
clear: both;
display: table;
}
main {
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
This is header
</header>
<nav>
This is navbar
</nav>
<main>
<article>
<h2>This is heading</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum atque fuga, eos neque ipsum enim id inventore necessitatibus laboriosam quo nobis, repellendus maxime veritatis error ut expedita, velit aspernatur asperiores!
</p>
</article>
</main>
<aside>
This is side bar
</aside>
<div></div>
<footer>
This is footer
</footer>
The issue is because the p references only a single element. You insert it in to the DOM in the insertAfter() call, then move the same element to a new location using insertBefore().
To do what you require you can clone() the element before the second insertion. Also note that you don't need to create an entire jQuery object to select nav, you can just pass the selector as a string. Try this:
let p = $("<p />", {
text: "This is a dynamicly created element"
});
p.insertAfter('nav');
p.clone().insertBefore('nav');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
}
header,
nav,
main,
aside,
footer {
padding: 10px 15px;
border: 1px solid mediumseagreen;
text-align: center;
}
header {
background: dodgerBlue;
}
nav {
background: mediumSeaGreen;
}
main {
background: #d3d3d3;
}
main,
aside {
height: 1200px;
}
main {
width: 80%;
float: left;
}
aside {
width: 20%;
float: right;
}
div::after {
content: " ";
float: none;
clear: both;
display: table;
}
main {
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>This is header</header>
<nav>This is navbar</nav>
<main>
<article>
<h2>This is heading</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum atque fuga, eos neque ipsum enim id inventore necessitatibus laboriosam quo nobis, repellendus maxime veritatis error ut expedita, velit aspernatur asperiores!
</p>
</article>
</main>
<aside>This is side bar</aside>
<div></div>
<footer>This is footer</footer>
One other thing to mention, I would suggest researching flexbox layouts. They're a much more modern and extensible technique than forcing display: table on a div to create a multi-column layout.
I am enabling an overlay upon clicking on button, then when user minimizes the screen overlay is not covering full page. User able to click on buttons when minimizes the screen.
I am setting the screen.height & screen.width to overlay div. But upon minimizes to certain level again buttons are visible.
id1 is a id of overlay division
document.getElementById("id1").style.height=screen.height;
document.getElementById("id1").style.width=screen.width;
i want overlay to display over complete web page
Ok, Here is what we do to create Overlays..
You should have a parent div like
<div class="body_wrapper">
<div class="overlay"></div>
<div class="page_content">
<-- You Page Content -->
</div>
</div>
Here inside <body> tag you got a body_wrapper and inside that you got overlay and page__content. Now in your style sheet:
.body_wrapper {
position: relative;
}
.overlay {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
}
The screen.height doesn't always return the valid screen height,
check this for more information.
Your task can be achieved by CSS and a little bit of JavaScript.
The CSS has two units that are likely the keys to your issue : the vw and the vh units. Check this MDN article for more information.
So, here's a demo that shows how you can achieve your task by the help of CSS and some JavaScript for the event handling.
let trigger = document.getElementById('trigger'),
triggersClose = document.querySelectorAll('.trigger-close'),
fullScreen = document.getElementById('fullscreen');
/** click event listener for the button to show the overlay **/
trigger.addEventListener('click', e => {
e.preventDefault();
fullScreen.classList.add('visible'); /** add .visible class so the overlay is shown **/
});
/** cycle through the buttons that can hide the overlay and add a click event for them **/
triggersClose.forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
fullScreen.classList.remove('visible'); /** remove .visible class so the overlay becomes hidden **/
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.overlay {
display: none; /** the overlay is initially hidden **/
position: fixed; /** stays on the same place even when scrolling in the background **/
width: 100vw; /** vw : viewport width = 1% of the viewport's width. It changes accordingly when zooming (responsive) **/
height: 100vh; /** vh : viewport height = 1% of the viewport's height. It changes accordingly when zooming (responsive) **/
top: 0;
left: 0;
justify-content: center; /** center the content horizontally **/
align-items: center; /** center the content vertically **/
padding: 15px;
background: rgba(24, 24, 24, .6);
z-index: 999; /** stays on top **/
}
.overlay.visible {
/** this class is used by JavaScript to show the overlay **/
display: flex; /** flex makes our life easier ! **/
}
.overlay .overlay-wrapper {
display: flex;
flex-direction: column;
width: 65%;
max-height: 100%;
overflow-y: auto; /** adds scrollbars when the content is too much **/
background-color: #fff;
}
.overlay .overlay-wrapper .overlay-header {
position: relative;
background-color: #1548a6;
}
.overlay .overlay-wrapper .overlay-header>.text,
.overlay .overlay-wrapper .overlay-body {
padding: 15px 5px;
}
.overlay .overlay-wrapper .overlay-header>.trigger-close {
position: absolute;
width: 45px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 1.1rem;
font-weight: bold;
border: 0;
color: #fff;
background-color: #dc3545;
cursor: pointer;
border-top-right-radius: 4px
}
.overlay .overlay-wrapper .overlay-footer>.trigger-close {
float: right;
margin-bottom: 5px;
margin-right: 5px;
padding: 8px 15px;
color: #fff;
background-color: #007bff;
border: 0;
border-radius: 4px;
}
<button id="trigger">click me !</button>
<div id="fullscreen" class="overlay">
<div class="overlay-wrapper">
<div class="overlay-header">
<h3 class="text">Message heading</h3>
<button class="trigger-close">×</button>
</div>
<div class="overlay-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In facere fugiat aperiam officiis debitis voluptas soluta assumenda cumque reiciendis blanditiis nostrum, consequuntur vero corporis doloribus! Expedita voluptatem illum maiores culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ex temporibus, possimus commodi, obcaecati nostrum maiores cupiditate voluptas voluptate unde qui quasi accusantium earum dolores pariatur fuga. Optio, officia praesentium.</p>
</div>
<div class="overlay-footer"><button class="trigger-close">close</button></div>
</div>
</div>
Learn more about flexbox (display: flex).
Hope I pushed you further.
I am trying to place a sidebar right next to the 960px wide Skeleton container. I have successfully done that, but I am looking for a better way to do that, while keeping the container centered on the screen.
https://jsfiddle.net/dgujg9xb/
aside {
width: 250px;
float: left;
margin-left: -170px;
}
By giving it a negative margin, I can float it outside the container it is inside (#holder). However, that is extremely bad and doesn't work that well. By resizing the screen, I want the sidebar to cut so it sits on top instead (like on a phone using media queries), but that seems impossible this way.
Is there a better way to structure this? I am willing to use a JavaScript library as long as it works very well.
I've made a Codepen of something that may be of use, you can alter the content and styling in there and see. The content container has a fixed width, then collapses when things don't fit neatly. I've also popped in the Sass and HTML here. This should just be an example of how it could be achieved, in the real thing you're probably better off using percentages for obvious responsivity reasons.
http://codepen.io/BlitZ_UK/pen/GrEExr
The styling is done in Sass;
.page-container {
background: #607D8B;
min-height: 100vh;
}
.content {
padding: 10px 20px
}
.sidebar {
background: #009688;
}
.inner-wrapper {
background: #00bcd4;
margin: 0 auto;
max-width: 960px;
position: relative;
}
#media all and (min-width: 1362px) {
.sidebar {
width: 200px;
position: absolute;
left: 0;
transform: translateX(-100%);
}
}
And the HTML;
<div class="page-container">
<div class="inner-wrapper">
<div class="sidebar">
<ol>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor.</li>
</ol>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt facere expedita voluptatem reprehenderit, asperiores architecto magni laborum repellat perferendis voluptas alias autem cumque iste dignissimos ab officiis totam blanditiis ratione.</p>
</div>
</div>
</div>
Hope it helped.
Make the sidebar absolute and place it independent and above with z-index from the rest of the layout.
Note I commented 960px width from #holder just for demonstration (since snippet viewport is smaller it would overflow otherwise), also added sidebar jQuery toggle for the same purpose.
Your fiddle:
My fiddle:
External Fiddle if you wish to resize
Snippet below:
$(".container").on("click", function() {
$("aside").toggleClass("showAside");
});
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
#holder {
/* width: 960px; */
position: relative;
margin: 0 auto;
height: 100%;
}
aside {
width: 250px;
background: black;
color: white;
position: absolute;
top: 0;
left: -170px;
z-index: 1;
transition: all .4s ease-in;
}
.showAside {
left: 0;
}
.container {
border: 1px solid black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<aside>
Sidebar goes here
</aside>
<div class="container">
Hello - click to show/hide sidebar
</div>
</div>