I need to make a floating div that appears to be almost hidden and if I click in the tab it appears to the left. Floating over the rest of the site. I don't know if I made myself clear, so I put here two images, how it should look hidden and visible. But I couldn't figure it out yet how to make it. Any help will be appreciated.
I work with VueJS.
This is a vanilla js implementation that uses fixed position, the css transition property for animation, and a class that is toggled when the handle is clicked to change the position.
const slideout = document.querySelector('.slideout')
const handle = slideout.querySelector('.handle')
handle.onclick = function() {
slideout.classList.toggle('active');
}
.slideout {
position: fixed;
width: 80%;
height: 80%;
left: 100%;
top: 10%;
transition: left .3s ease-out;
}
.slideout.active {
left: 10%;
}
.handle {
position: absolute;
top: 10px;
left: -20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: darkred;
cursor: pointer;
}
.body {
position: absolute;
background: red;
width: 100%;
height: 100%;
border-radius: 8px;
}
<div class="slideout">
<div class="handle"></div>
<div class="body"></div>
</div>
Related
This question already has answers here:
CSS Animation onClick
(9 answers)
Closed 6 months ago.
So I've created this form where there is a bar at the top and you answer a question, and when you do, the bar increases in width and goes to the next question. I looked at another StackOverflow post with a similar issue, but I was too dumb to understand any of the answers. So I thought to ask myself.
1.
There Is A next button, and when you click the button the bar should increase but I have no idea how to make it do that
Here is the Code:
.next {
width: 150px;
height: 35px;
background-color: var(--main-solid);
border: none;
border-radius: 80px;
left: 45vw;
position: absolute;
top: 80%;
outline: 3px white solid;
cursor: pointer;
transition: .5s;
}
.loading .line {
height: 4px;
border-radius: 20px;
background: var(--main-solid);
position: absolute;
left: 0%;
top: 48%;
width: 17.6%;
animation: loading 1s forwards cubic-bezier(0,0,0,0);
}
#keyframes loading {
0%{
width: 0%;
}
100%{
width: 17.6%;
}
}
<div class="navbar">
<div class="loading">
<div class="line">
</div>
</div>
</div>
<button class="next">Next</button>
So yeah I have made the form itself, I just have no idea how to trigger the animation with the keyframes when you click the next button, and how to stop it from triggering on a reload of the page.
2.
In the HTML, I have 2 divs, Form1 and Form2. Form 1 is what I want to be on the first screen, and then when you click the next button, it would also hide all the elements in form 1, and show all the ones in form 2, hopefully in a smooth transition.
(If possible)
I'd like to store the data collected in the inputs when you move on so I could calculate some things in JavaScript but I also have no idea how to do that
I hope someone could help with this,
Thank you
Maybe you should use transition and use javascript to change the progress bar width.
The below code is how to make it without external libs. But I recommand using libaries like react, vue, etc. They will make it more easy.
const progressBar = document.getElementById("progressBar");
const nextButton = document.getElementById("nextBtn");
nextButton.addEventListener("click", () => {
let progress = parseInt(progressBar.style.width) || 0;
progress = Math.min(progress + 10, 100);
progressBar.style.width = `${progress}%`;
});
.progress-bar {
display: inline-block;
width: 200px;
height: 10px;
line-height: 10px;
background-color: gray;
}
.progress-inner {
display: inline-block;
width: 0%;
height: 100%;
background-color: red;
transition: width 300ms;
}
<div class="progress-bar">
<div id="progressBar" class="progress-inner" style="width: 0%;"></div>
</div>
<div>
<button id="nextBtn" type="button">Next</button>
</div>
You can just use css sibling combinator to start the animation.
But your button must be before the navbar in the markup.
.next {
width: 150px;
height: 35px;
background-color: red;
border: none;
border-radius: 80px;
left: 45vw;
position: absolute;
top: 80%;
outline: 3px white solid;
cursor: pointer;
transition: 0.5s;
}
.loading .line {
height: 4px;
border-radius: 20px;
background: red;
position: absolute;
left: 0%;
top: 48%;
width: 0%;
}
.next:focus + .navbar .loading .line {
animation: loading 1s forwards cubic-bezier(0, 0, 0, 0);
}
#keyframes loading {
0% {
width: 0%;
}
100% {
width: 17.6%;
}
}
<button class="next">Next</button>
<div class="navbar">
<div class="loading">
<div class="line"></div>
</div>
</div>
I created my custom modal with position: fixed and use this modal into content but it's not applied with respect to screen its shows position: fixed with respect to content How can I make modal in the center with respect to screen center?
modal is imported into the content.
where nav position is fixed
sidebar position is fixed
content position is relative
and modal position is already fixed but this fixed position of modal take w.r.t its parent not with body
Problem: Modal takes the fixed position with respect to its parent but I need to apply modal with respect to HTML body tag. Is there any way to apply this?
Can't put modal directly to body because it's created in such a way that where it'll put, it'll automatically used to draw w.r.to body
Also use parent selector
.overlay{
animation: ${fadeIn} 200ms ease-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: ${(props) => props.theme.palette.greyScale[9]};
}
body < parent(body) {
position:relative;
}
does not work.
Here is the structure:
I think the layout is not correct. I suggest the following layout and style.
Put everything inside a container. I have created a jsfiddle with sample layout. Please have a look. Let me know if any queries
.container {
background: lightgray;
width: 100vw;
height: 100vh;
float: left;
display: block;
position: relative;
}
.nav-bar {
widows: 100%;
height:20%;
background: gray;
}
.side-bar {
width:20%;
height: calc(100% - 20%);
float: left;
background: lightblue;
}
.content {
width: calc(100% - 20%);
background: red;
float: left;
height: calc(100% - 20%);
}
.modal {
position: fixed;
width: 200px;
height: 150px;
background: green;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
<div class="container">
<div class="nav-bar">
NavBar
</div>
<div class="side-bar">Side Bar</div>
<div class="content">
Content
<div class="modal">
Modal
</div>
</div>
</div>
I'm new to the html/css/jquery languages, so please pardon me if my question seems too obvious.
My aim is to make a fullscreen overlay div appear when clicking on a div (this step actually worked with the toggle function) and then make this same div disappear by just clicking on it.
I've browsed many related topics but I can't seem to find a way to resolve my issue. How can I make the full screen div disappear by clicking anywhere on it (clicking back on the first div is not an option since it's intentionally hidden)?
Here's my code so far:
JavaScript (jQuery):
$(function() {
$("#bandeau").click(function() {
$("#full_screen").toggle();
});
});
HTML:
<div id="bandeau">content</div>
<div id="full_screen">
<div class="info_visible" id="about">content</div>
</div>
CSS:
#bandeau {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 57px;
z-index: 1000;
position: fixed;
}
#full_screen {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
display: none;
margin: 0px;
padding: 0px;
}
.info_visible {
width: 100%;
height: auto;
color: white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
position: fixed;
}
Pure CSS solution with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 0;
left: 0;
display: inline-block;
height: 100%;
width: 100%;
background: url('http://i.imgur.com/bv80Nb7.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.item {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
#warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>CLICK HERE</b></p>
<div id=target><h1 id=warning>FULLSCREEN CONTENT</h1></div>
</label>
This will toggle full screen on or off
https://jsfiddle.net/42atLz1g/1/
$("#bandeau, #full_screen").click(function(){
$("#full_screen").toggle();
});
Below is a simple and easy way to do it with one command and full explination. Enjoy and welcome to website development!
Note: scroll to end of answer to see a short list of helpful links
// this is simply jQuery shorthand for document.ready = function ...
$(function(){
// this is how to dynamically assign events
// why is this important? let's say, in the future,
// you decide to add elements after the page is loaded,
// this allows the NEW elements to still use the same events you've assigned
$(document)
// .on and .off are as simple as they appear,
// on adds an event to a group of elements and off removes
// as you'll notice, I assign just one method to both elements
// the reason is this move is extremely simple
// all you need is to have one element hide or show, based on
// clicking one of the divs
.on('click', '#bandeau, #full_screen', function(e) {
// .toggle accepts a booleen argument
// if true = show, if false = hide
// thus i simply test the id name within the parameter!
$('#full_screen').toggle(this.id == 'bandeau');
})
});
#bandeau{
background-color: black;
color: green;
overflow: hidden;
cursor: crosshair;
width:100%;
height: 57px;
z-index: 1000;
position: fixed;
}
#full_screen {
background-color: black;
overflow: hidden;
cursor: crosshair;
width: 100%;
height: 100%;
z-index: 1000;
position: fixed;
display: none;
margin: 0px;
padding: 0px;
}
.info_visible {
width:100%;
height: auto;
color:white;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bandeau">content</div>
<div id="full_screen">
<div class="info_visible" id="about">tnetnoc</div>
</div>
See more about jQuery Dynamic Events here (.on) && here (.off)
More you should read about dynamic entry
.toggle()
Try to replace your jQuery code with this
$(function(){
$("#bandeau").click(function(){
$("#full_screen").show();
});
$("#full_screen").click(function(){
$(this).hide();
});
});
I looked for hours on the internet but didn't find anything about starting css transition without using trigger events.. I'm not using it for a website but for a kind of advertisement.
this is what i got: [(jsfiddle)][1]
body{
width:1920px;
height:1080px;
margin:0;
padding:0;
background: #FFF;
}
#box{
position: absolute ;
left: 0px;
top: 0px;
width: 800px;
height: 140px;
border:solid 5px #000;
transition: width 5s linear 2s;
overflow:hidden;
}
#box:hover{
left: 0px;
height: 140px;
width: 0px;
}
img{
display: inline-block;
left: 100px;
margin-top: 20px;
width: 100px;
height: 100px;
position: absolute
}
.song1{
position: absolute;
left: 250px;
margin-top: 20px;
display: inline-block;
font-size: 20px;
width: 260px;
height: 120px;
}
.song2{
position: absolute;
left: 350px;
margin-top: 40px;
display: inline-block;
font-size: 20px;
width: 260px;
height: 120px;
}
</style>
<script>
</script>
</head>
<body>
<div id="box">
<img src="/Users/ts/Desktop/1.png" class="album">
<div class="song1">NOW --> </div>
<div class="song2">NEXT --></div>
</div>
</body>
</html>
Hope someone can help me
You can replicate your width animation using keyframes. The animation would still start on page load (or other trigger, like adding a class, which is something you want to avoid), but the difference is that with keyframes you can completely control when the actual visible animation starts.
For example, you can set a 15 second animation, and set the keyframes from 0% to 66% to be the same (static) and only do the width animation between 67% and 100% (which equals to 10-15 seconds).
Helpful resources:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
No. In programming, you have to have a trigger to do something. Now, that trigger can be a set amount of time, which would not require a click, scroll, etc. There is a good question about timing here.
I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }