I want to give a sliding effect using left and right DIVs when user clicks in the middle DIV(blue). But it's not working.
The script code is not working. I think there is some error.
When I used hover in my stylesheet it also didn't work. I mean that I used hover on id inner/outer/power which will change css property of id left and right to create a sliding transition effect. But it didn't work. But when I used container to be hovered instead of the above ids then sliding effect was working. I'm totally depressed as it's not making any sense to me.
<script type="text/javascript" >
function slide()
{
document.getElementById("left").style.left = -100% ;
document.getElementById("right").style.right = -100% ;
}
</script>
html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
The value for your CSS effect needs to be in quotations.
function slide()
{
document.getElementById("left").style.left = "-100%";
document.getElementById("right").style.right = "-100%" ;
}
html,body{
height: 100%;
width: 100%;
margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
height: 100%;
width: 100%;
margin: 0;
position: absolute;
}
#left {
left: 0px;
margin-left: 0%;
position: absolute;
height: 100%;
width: 50%;
background-color: yellow;
transition: left ease-out 3s;
}
#right {
right: 0px;
margin-left: 50%;
position: absolute;
height: 100%;
width: 50%;
background-color: green;
transition: right ease-out 3s;
}
#outer{
z-index: 5;
margin-left: 47.5%;
margin-top: 25%;
width: 5%;
position: absolute;
}
#inner {
z-index: 5;
width: 100%;
height: 100%;
padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<title></title>
</head>
<body>
<div id="container">
<div id="outer">
<div id="inner" >
<a href="javascript:slide()">
<img id="power" src="off.png">
</a>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
As a side note, in code snippets, your JavaScript does not need to be inside of the script tag, as long as it is in the JavaScript section.
Try this:
document.getElementById("left").style.left = "-100px";
Related
JSFiddle link
z-index cannot be set to -1, positioning cannot be changed for first and second div.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first"></div>
<div class="second"></div>
Apply a transformation (without visible effects) on the second div e.g.
transform: scale(1);
https://jsfiddle.net/cbeaw84h/
Position your second div:
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
position: relative; // This
}
You should use position: relative and they'll overlay.
.second {
position: relative;
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
If you cannot touch the CSS code really, simply nest the second div inside the first.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first">
<div class="second"></div>
</div>
I'm working on a page where the user can scroll down. The scroll bar is hidden but functional (pushed to the side with inner&outer divs and "right: -17px;").
In this forum I saw some scroll-disappear solutions, but only in jQuery, but I want to learn pure/vanilla JavaScript before I use any library.
I tried to write my own simple JS code. It worked for the first when I haven't hide the scrollbar, seems I have to change something in the JS code.
Here is my code: (I also created a snippet below to simulate):
window.addEventListener("scroll", scrollEffectOne);
function scrollEffectOne()
{
var hidethis = document.getElementById("box");
hidethis.style.opacity = "0.1";
}
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#box
{
width: 350px;
height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: rgba(0,0,0,.3);
border-radius: 10px;
opacity: 1;
}
#box a
{
opacity: 1;
font-size: 15px;
color: white;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
}
#box b
{
color: rgba(255,255,255,.3);
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1">
<div id="box">
<a>Hide Me <b>while scrolling</b> !</a>
</div>
</div>
<div id="frame_2"></div>
<div id="frame_3"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="frame_1">
<div id="box">
<a>Hide Me <b>while scrolling</b> !</a>
</div>
</div>
<div id="frame_2"></div>
<div id="frame_3"></div>
</div>
</div>
</body>
<style>
*
{
margin: 0px;
padding: 0px;
font-family: Arial;
}
#outer
{
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
#inner
{
top: 0px;
right: -17px;
bottom: 0px;
left: 0px;
position: absolute;
overflow-x: hidden;
}
#frame_1
{
top: 0px;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
}
#frame_2
{
top: 100%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
}
#frame_3
{
top: 200%;
height: 100%;
width: 100%;
position: absolute;
background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
#box
{
width: 350px;
height: 100px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: rgba(0,0,0,.3);
border-radius: 10px;
opacity: 1;
}
#box a
{
opacity: 1;
font-size: 15px;
color: white;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
position: absolute;
}
#box b
{
color: rgba(255,255,255,.3);
}
</style>
<script>
window.addEventListener("scroll", scrollEffectOne);
function scrollEffectOne()
{
var hidethis = document.getElementById("box");
hidethis.style.opacity = "0.1";
}
</script>
</html>
Your code looks right but it didnt work until i changed the useCapture option to true. To be honest, I dont know why it has do be true.
window.addEventListener("scroll", scrollEffectOne, true);
Read more that about here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
I was wondering if someone would be willing to help me translate this pen I created into plain ol' JavaScript. I'm just learning JavaScript and would like to see what this same effect looks like in pure JavaScript instead of jQuery. Here is the jQuery:
$(document).scroll(function(){
var y = $(this).scrollTop();
if (y > 500 ){
$(".arrow-box").addClass("slide");
}
else{
$(".arrow-box").removeClass("slide");
}
});
See Pen Here.
let arrow = document.querySelector('.arrow-box');
document.addEventListener('scroll', () => {
if (window.scrollY > 500)
return arrow.classList.add('slide');
arrow.classList.remove('slide');
});
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 100px;
background-color: gray;
position: relative;
}
.container {
margin: 0 auto;
height: 500px;
width: 1200px;
background-color: lightblue;
margin-bottom: 100px;
}
img {
width: 50px;
height: auto;
}
.arrow_container {
left: 0;
right: 0;
bottom: 0px;
margin-left: auto;
margin-right: auto;
position: fixed;
height: auto;
height: 100px;
width: 100%;
max-width: 1400px;
background-color: #2d2d2d;
overflow: hidden;
}
.arrow-box {
transform: translateX(100%);
transition: transform: .3s ease-in-out;
-webkit-transition: -webkit-transform .3s ease-in-out;
position: absolute;
right: 0px;
padding: 25px;
height: 100px;
background-color: red;
}
.slide {
transform: translateX(0%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
<div class="arrow_container">
<div class="arrow-box">
<img src="http://cdns2.freepik.com/media/img/subscription_modal/rocket.svg" />
</div>
</div>
I have making a simple skills block on my website. I have skillsWheel class on parent div and then I have an inner div with h2 with a class of Skills. skillsWheel also includes 8 more divs with a class of skill. I have skills div and all the skill div centred inside the skillsWheel with only skills div showing and skill divs hide behind the skills div. I want the skill divs to show with animation on page load to make a circle around the skills div and then start rotating clock or anti clock wise or both. Any idea what I have to do to accomplish this? So far I have done this much.
.skillsWheel {
width: 500px;
height: 500px;
background: #d7d7d7;
box-sizing: border-box;
padding: 15px;
position: relative;
}
div {
color: #fff;
border-radius: 50%;
}
.skill{
height: 70px;
width: 70px;
background: crimson;
line-height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
z-index: -5;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.skill:nth-child(2) {
top: 15%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(3) {
top: 25%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(4) {
top: 70%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(5) {
top: 85%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(6) {
top: 70%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(7) {
top: 45%;
left: 85%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(8) {
top: 25%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(9) {
top: 45%;
left: 15%;
margin-left: -40px;
z-index: 1;
}
.skills-main {
width: 100px;
height: 100px;
background: #98bf21;
text-align: center;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.skills-main h5 {
font-size: 22px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="skillsWheel">
<div class="skills-main">
<h5> Skills </h5>
</div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">jQuery</div>
<div class="skill">Sass</div>
<div class="skill">BootStrap</div>
<div class="skill">Git</div>
<div class="skill">Photoshop</div>
</div>
</body>
</html>
Simply add a keyframe (ensure you use prefixes for cross compatibility)
#keyframes rotate{
from {
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}
create a div with class skill_container and add all skill container inside.
and add an animation rules to your container with skill class (prefix is also required)
animation-name:rotate;
animation-duration:1s;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
Snippet below
$(document).ready(function() {
$(".skill").css({
width: "70px",
height: "70px"
})
})
.skillsWheel {
width: 500px;
height: 500px;
background: #d7d7d7;
box-sizing: border-box;
padding: 15px;
position: relative;
}
div {
color: #fff;
border-radius: 50%;
}
.skill {
height: 70px;
width: 70px;
background: crimson;
line-height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
z-index: -5;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.skill:nth-child(2) {
top: 15%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(3) {
top: 25%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(4) {
top: 70%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(5) {
top: 85%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(6) {
top: 70%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill_container {
position: absolute;
width: 100%;
height: 100%;
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.skill:nth-child(7) {
top: 45%;
left: 85%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(8) {
top: 25%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(9) {
top: 45%;
left: 15%;
margin-left: -40px;
z-index: 1;
}
.skills-main {
width: 100px;
height: 100px;
background: #98bf21;
text-align: center;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.skills-main h5 {
font-size: 22px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="skillsWheel">
<div class="skills-main">
<h5> Skills </h5>
</div>
<div class="skill_container">
<div></div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">jQuery</div>
<div class="skill">Sass</div>
<div class="skill">BootStrap</div>
<div class="skill">Git</div>
<div class="skill">Photoshop</div>
</div>
</div>
</div>
</body>
</html>
How I can make a box to be fixed within a div with scroll?
I'm trying like this:
HTML:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
background: black;
}
But the box is going along with the page, not only within the div.
What am i doing wrong here??? Can someone show me the way?
Thank you guys.
EDIT
Example -> https://jsfiddle.net/kzhuh7sv/embedded/result/
Try this solution https://jsfiddle.net/yyt8eope/2/
I added a div that wraps both the container div and the class='test' div at the same level so the test div can be absolute inside the wrapper and be always at a fixed position
<div id="wrapper">
<div class="main">
<div class="scroll-container">
<div class="container">
<div class="container2">
</div>
</div>
<div class="test">Fixed inside scroll container</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.scroll-container{
position: relative;
height: 500px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 200px;
color: white;
position: absolute;
top:0;
left: 50%;
margin-left: -250px;
background: black;
z-index: 1;
}
Try getting rid of 'position: fixed;' and add this 'overflow: scroll;'.
JSFiddle.
EDIT
Changed the JSFiddle, has been updated.
You can't do it with position: fixed since it always ties to the viewport. You want it fixed within it's context.
http://jsfiddle.net/zq1m49wf/2/
The black box stays in place as container3 scrolls
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="container3"></div>
</div>
<div class="test"></div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.container {
position: relative;
height: 500px;
padding-top: 200px;
}
.container2 {
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container3 {
height: 1500px;
}
.test {
width: 500px;
height: 500px;
bottom: 0;
background-color: #000000;
position: absolute;
}