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>
Related
I am trying to create something similar to the example, where the angle of the clip path needs to remain the same on resizing. Both on height and width changes to the viewport. I have tried using calc(100% - 6vw) (as an example) but this doesn't maintain the exact angle.
The reason for this is I will have multiple elements that are required to have mirroring angles in a responsive environment.
Can this be achieved using CSS and calc alone, or is there a JS-based math solution to resolve it? I guess this is where trigonometry comes in and I believe what I need is the opposite side length being relative to the height of the adjacent/height of the content area (however, I failed maths...) to maintain the same angle.
Some work that I have done based on a mock-up I am working from. The angle (I think) I need to find is 14deg. I've based this on the adjacent being 899px and the opposite 229px.
Any help is much appreciated.
body {
margin: 0;
}
.slide {
background-color: red;
height: 100vh;
position: relative;
}
.slide_content {
background-color: blue;
padding: 50px 30px;
color: #fff;
position: absolute;
width: 70%;
left: 0;
bottom: 0;
clip-path: polygon(0 0, 90% 0, 102% 100%, 0% 100%);
}
.slide_content-top {
background-color: orange;
padding: 50px 30px;
color: #fff;
position: absolute;
width: 70%;
right: 0;
top: 0;
padding-left: 100px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}
<div class="slide">
<div class="slide_content-top">
<h2>More content here</h2>
</div>
<div class="slide_content">
<h2>Some text goes here</h2>
</div>
</div>
Another Example
So how I would apply this is as follows - The shape in red is where text content would be placed. The area in blue is the right-angle triangle I need to create. The triangle would need to maintain it's ratio as the content area grows or shrinks. The base of this triangle (width: 85px in this example) would need to resize in proportion to the height of the content area (currently height: 200px).
The only values I would know are the acute angle between the hypotenuse and the adjacent (14deg), and the length of the adjacent would be calculated by getting it from the content area's current height.
.shape {
width: 400px;
height: 200px;
background-color: red;
position: relative;
}
.shape:after {
content: '';
position: absolute;
width: 85px;
height: 200px;
background-color: blue;
top: 0;
bottom: 0;
right: -85px;
clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
}
<div class="shape"></div>
A further update
This is what I have achieved so far. Which I think does part of what I am looking for. Creates a right-angle that maintains to same ratio on resizing. However, I'm not entirely sure how robust this particular snippet I've created is.
function getTanFromDegrees(degrees) {
return Math.tan(degrees * Math.PI / 180);
}
function createRightAngleTriangle() {
const shapes = document.querySelectorAll('.shape');
shapes.forEach(shape => {
const shapeContent = shape.querySelector('.shape-content');
const shapeTri = shape.querySelector('.shape-tri');
const shapeHeight = shapeContent.offsetHeight;
const tan = getTanFromDegrees(14);
const getLength = Math.floor(tan * shapeHeight);
shapeTri.style.height = shapeHeight + 'px';
shapeTri.style.width = getLength + 'px';
})
}
window.addEventListener('load', createRightAngleTriangle);
window.addEventListener('resize', createRightAngleTriangle);
.shape {
display: flex;
align-items: flex-start;
}
.shape-content {
padding: 20px;
font-size: 22px;
}
.shape-tri {
background-color:green;
clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
}
.shape-1 .shape-content {
background-color: red;
}
.shape-2 .shape-content {
background-color: blue;
}
<div class="shape shape-1">
<div class="shape-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aut deleniti dolor doloremque, nesciunt minus voluptatem! Voluptas odio obcaecati vitae?
</div>
<div class="shape-tri"></div>
</div>
<div class="shape shape-2">
<div class="shape-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aut deleniti dolor doloremque, nesciunt minus voluptatem! Voluptas odio obcaecati vitae? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, eos.
</div>
<div class="shape-tri"></div>
</div>
You can try like below. the value 0.25 is tan(14deg)
body {
margin: 0;
}
.slide {
background-color: red;
min-height: 100vh;
display:grid;
grid-auto-rows:1fr;
color: #fff;
}
.slide_content {
background: blue;
box-shadow: 200px 0 blue;
padding: 30px;
width: 70%;
margin-top:auto;
clip-path: polygon(0 0, 100% 0, calc(100% + 0.25*100vmax) 100vmax, 0 100vmax);
}
.slide_content-top {
background-color: orange;
box-shadow: -200px 0 orange;
padding: 30px;
width: 70%;
margin-left: auto;
margin-bottom:auto;
clip-path: polygon(calc(-0.25*100vmax) -100vmax ,100% -100vmax, 100% 100%, 0 100%);
}
<div class="slide">
<div class="slide_content-top">
<h2>More content here</h2>
</div>
<div class="slide_content">
<h2>Some text <br> goes here</h2>
</div>
</div>
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 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?
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.