I am trying to move in text from bottom of the div that is a red tile on hover , but when i hover the text is visible from outside the tile ,and moves in , what i want is for it to seem like it moved in from bottom of the tile.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tile">
<div class="front">
</div>
<div class="back"></div>
</div>
</body>
</html>
CSS:
body{
background-color: black;
}
.tile{
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
z-index:-1;
}
.tile:HOVER {
transform: rotateY(360deg);
z-index:-1;
}
.back{
top: 100px;
position: absolute;
}
Jquery:
$(document).ready(function(){
$(".tile").hover(function(){
$(".front").hide().empty();
$(".back")
$(".back").show().append("<h3>Welcome</h3>" +
"<p>This is th content being changed</p>");
$(".back").animate({top:'-=100px',opacity:"1"},"slow");
},function(){
$(".back").animate( {top:"+=100px",opacity:"0"},"fast").hide().empty();
$(".front").show().append("<h3>Hello<h3>");
});
});
.tile {
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
overflow: hidden; // add this line
z-index: -1;
}
overflow: hidden;
Content is clipped if necessary to fit the padding box. No scrollbars
are provided.
which means the text outside the range of .tile will be invisible.
See MDN
$(document).ready(function() {
$(".tile").hover(function() {
$(".front").hide().empty();
$(".back")
$(".back").show().append("<h3>Welcome</h3>" +
"<p>This is th content being changed</p>");
$(".back").animate({
top: '-=100px',
opacity: "1"
}, "slow");
}, function() {
$(".back").animate({
top: "+=100px",
opacity: "0"
}, "fast").hide().empty();
$(".front").show().append("<h3>Hello<h3>");
});
});
body {
background-color: black;
}
.tile {
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
overflow: hidden;
z-index: -1;
}
.tile:HOVER {
transform: rotateY(360deg);
z-index: -1;
}
.back {
top: 100px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile">
<div class="front">
</div>
<div class="back"></div>
</div>
Related
Button show has position: fixed property only inside the second div. When I scroll to the first or last div, button should not be fixed on them, which means the button should be visible only inside the second div, how can I do that?
.one{
height:600px;
width: 100%;
background-color: red;
}
.two{
height:600px;
width: 100%;
background-color: yellow;
}
.three{
height:600px;
width: 100%;
background-color: pink;
}
.mybutton{
width:80px;
height: 20px;
position: fixed;
right:10px;
top:100px;
}
<html>
<head>
<body>
<div class="one">
<button class="mybutton">Click</button>
</div>
<div class="two"></div>
<div class="three"></div>
</body>
</head>
</html>
Here's one way, though I don't know if it's the one you're looking for. Use position:sticky on the button, and position:relative on the container (.two)
.one {
height: 600px;
width: 100%;
background-color: red;
}
.two {
height: 600px;
width: 100%;
background-color: yellow;
position: relative;
}
.three {
height: 600px;
width: 100%;
background-color: pink;
}
.mybutton {
width: 80px;
height: 20px;
position: sticky;
right: 10px;
top: 100px;
}
<div class="one"></div>
<div class="two"><button class="mybutton">Click</button></div>
<div class="three"></div>
Position: fixed places an element relative to the view port. If you want to place an element relative to a parent element, place it inside the parent element with Position:relative
.one{
height:600px;
width: 100%;
background-color: red;
}
.two{
height:600px;
width: 100%;
background-color: yellow;
}
.three{
height:600px;
width: 100%;
background-color: pink;
}
.mybutton{
width:80px;
height: 20px;
position: relative;
right:10px;
top:100px;
}
<html>
<head>
<body>
<div class="one"></div>
<div class="two">
<button class="mybutton">Click</button>
</div>
<div class="three"></div>
</body>
</head>
</html>
You should try to use
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
With window.scroll() you can attach event on the scroll of the page like eg:
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('.mybutton').css("position": "fixed");
}else if ($(window).scrollTop() > 200 || $(window).scrollTop() < 100){
$('.mybutton').css("position": "static");
}
})`
I created a web page that scrolls horizontally when you scroll vertical. And I want the scrolled value on scrolling. Here is what I have done
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
I tried using window.addEventListener('scroll') but not getting any scrolled value. I tried debugging Js code in chrome but function is not even invoking on scrolling.
window.addEventListener('scroll', () => {
console.log(Scrolled);
});
You need to set addEventListener on scroll of div.outer-wrapper and get scrollTop
document.getElementsByClassName("outer-wrapper")[0].addEventListener('scroll', function(e) {
var div = document.getElementsByClassName("outer-wrapper")[0].scrollTop;
console.log(div);
});
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.
I am trying to create a loader for my website using css and javascript and it has to look something like
so far i am able to create the slider but I am unable to put the box behind the slider. what should I do.
Edit- Sorry if was not clear but I want the orange slider as an animated loader
HTML -
<div style="margin-left:400px; margin-right:400px " class="progress-wrap
progress" data-progress-percent="20">
<div class="progress-bar progress"></div>
</div>
CSS -
#import "compass/css3";
.red{
background:black;
margin-left:300px;
top:100px;
}
.box{
width:100px !important;
height:100px !important;
z-index:-1;
}
.progress {
width: 100%;
height: 10px;
}
.progress-wrap {
background: #f80;
margin: 200px 0;
overflow: hidden;
position: relative;
.progress-bar {
background: white;
left: 0;
position: absolute;
top: 0;
}
}
Javascript-
moveProgressBar();
$(window).load(function() {
moveProgressBar();
});
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 6500;
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
So far I am able to create the slider but I am unable to put the box behind the slider. What should I do?
One solution is to set the progress bar to position: absolute and position it over the boxes.
As for the progress percent. You're updating a data attribute so you can just set the width of the bar based on that value. The animation can be handled by a CSS transition transition: width 1s.
Live demo: http://jsfiddle.net/rg0bq23p/45/
Javascript
var progress = document.getElementById('progress');
var bar = progress.querySelector('.bar');
bar.style.width = progress.dataset.progress + '%';
HTML
<div class="wrapper">
<div id="progress" class="progress" data-progress="20">
<div class="bar"></div>
</div>
<div class="box dark-gray"></div>
<div class="box gray"></div>
</div>
SCSS
.wrapper {
width: 400px;
margin: 0 auto;
display: flex;
position: relative;
.progress {
position: absolute;
top: 150px;
left: -100px;
z-index: 1;
width: 90%;
background-color: #fff3e2;
.bar {
width: 0;
height: 15px;
background-color: #ffa41c;
transition: width 1s;
}
}
.box {
width: 200px;
height: 200px;
&.gray {
background-color: #bbb;
}
&.dark-gray {
background-color: #888;
}
}
}
I solved the problem using only HTML and CSS:
The result will be exactly as you want in the example you mentioned
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 268px;
height: 11px;
background: #f26522;
}
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>
For animation, you can use a setInterval to increase the width of the progress bar every 200 milliseconds.
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
width: 100%;
border: 1px solid black;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 5%;
height: 11px;
background: #f26522;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
<script>
var width = 5;
var progress;
progress= setInterval(function(){
$('.progress-bar').css("width", width + "%");
width += 5;
if(width>=105){
clearInterval(progress);
}
}, 200);
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/21jdo8q7/1/
I have the vertical label "PINK" aligned in the middle of a section.
When I scroll down to the next section the "PINK" is being covered by the next section which is having an higher z-index.
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1 {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="text1">PINK</div>
<div class="back1"></div>
<div class="back2"></div>
</body>
</html>
I would like to have a second title "BLUE" in the second section to appear as shown in the following mockup.
Is it possible to arrange the z-indexes to achieve this result?
Is there another better way to clip the labels, keeping their alignment at 50% of the viewport?
Thanks a lot in advance for any contribution!
Try this code
since you tagged jquery,i used it to add class fixed
$(document).ready(function(){
$('.blue-text').hide();
$(window).scroll(function() {
if ($('.blue').offset().top <= $('.pink-text').offset().top + 40)
{
$('.blue-text').show();
if($('.blue').offset().top <= $('.pink-text').offset().top){
$('.blue-text').addClass('fixed');
}
}
else{
$('.blue-text').removeClass('fixed');
$('.blue-text').hide();
}
});
});
div.back1 {
background-color: #FF00FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 10;
}
div.text1.fixed {
transform: rotate(-90deg);
position: fixed;
top: 50%;
background-color: #FFFFFF;
z-index: 20;
}
div.back2 {
background-color: #0000FF;
position: relative;
width: 100%;
height: 2000px;
z-index: 30;
}
.blue,.pink {
position: relative;
}
.text1 {
position: absolute;
top: 10px;
z-index: 31;
transform: rotate(-90deg);
background-color: #FFFFFF;
}
.text1.blue-text.fixed{
z-index: 31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="color">
<div class="pink">
<div class="text1 pink-text fixed">PINK</div>
<div class="back1"></div>
</div>
<div class="blue">
<div class="text1 blue-text">BLUE</div>
<div class="back2"></div>
</div>
</div>
My goal is to have five or so divs inside a parent div. When a div is clicked it should expand over the other divs. What confuses me is how to get said div to expand above the other divs so when the reset/back/close button is clicked all of the divs are shown once again.
When hovered, the div should expand slightly.
The parent container is 1900 by 500.
My code:
.one {
height: 100%;
width: 20%;
background-color: #ffccaa;
float: left;
}
.two {
height: 100%;
width: 20%;
background-color: #ffffcc;
float: left;
}
.three {
height: 100%;
width: 20%;
background-color: #aabbcc;
float: left;
}
.four {
height: 100%;
width: 20%;
background-color: #cccccc;
float: left;
}
.five {
height: 100%;
width: 20%;
background-color: #ff11bb;
float: left;
}
* {margin: 0; padding: 0;}
.header {height: 50vh; width: 100vw; background-color: #000;}
.navi {height: 100px; width: 100%; background-color: #fccaab; margin-top: 5px;}
.logo {height: 100%; width: 500px; background-color: #ccc; align:center; margin: auto;}
.content {height: auto; width: 100%; background-color: #ccffca; margin-top: 5px;}
.footer {height: 10vh; width: 100%; background-color: #abcdef; margin-top: 5px;}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/file.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<div class="navi">
<div class="logo"></div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
In this example the clicked div is given 100% width and its siblings have their width removed. The transition gives a smooth animation.
Create the hover with the :hover pseudo class on the div. In this example, the div is scaled slightly using the transform scale property like this:
body > div:hover {
transform: scale(1.05);
cursor: pointer;
}
The scale is removed when selected with .selected:hover { transform: scale(1) }
Working Example
Note: I have changed all the ids to classes and condensed all the duplicate styles into body > div; all the direct div children of body have the same width, height, transition, and are floated to the left.
$('body > div').on('click', function() {
$(this).toggleClass('selected').siblings().toggleClass('hide');
});
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body > div {
transition: all 0.3s;
float: left;
height: 100%;
width: 20%;
}
body > div:hover {
transform: scale(1.05);
cursor: pointer;
}
.one {
background-color: #ffccaa;
}
.two {
background-color: #ffffcc;
}
.three {
background-color: #aabbcc;
}
.four {
background-color: #cccccc;
}
.five {
background-color: #ff11bb;
}
.selected {
width: 100%;
}
.selected:hover {
transform: scale(1);
}
.hide {
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>