I have to create a webpage with black background color, and it should have a div of red color, and when we hover on that red div the height of the div should increase slowly to the top of the page and when you remove your mouse from the div the height should decrease with the same speed it increased.
below is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animate</title>
<script>
function changeHeight() {
$('#first').animate({height:500},500);
}
</script>
</head>
<body style="background-color: black">
<div id="first" style="background-color: red; width: 10%; height: 50px" onMouseOver="changeHeight();"></div>
</body>
</html>
Haha.
html,body
{
padding: 0;
background: black;
}
div
{
background: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20px;
transition: all linear 5s;
}
div:hover
{
height: 100%;
}
<div></div>
If you want to pretend to use JavaScript because the exercise demands it:
const div = document.querySelector("div");
div.addEventListener("mouseenter", () => div.classList.add("hover"));
div.addEventListener("mouseleave", () => div.classList.remove("hover"));
html,body
{
padding: 0;
background: black;
}
div
{
background: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20px;
transition: all linear 5s;
}
div.hover
{
height: 100%;
}
<div></div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I wanted to know how I can change the navbar after scrolling the page.
Starting situation, as soon as the user arrives on the site he finds a navbar, immediately as soon as he scrolls the page the other navbar appears as happens in this theme: https://kendall.qodeinteractive.com/manicure/
There are multiple methods to do this, but the simplest is to use two navbars.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<style>
*,
*:before,
*:after {
margin: 0;
font-family: sans-serif;
}
section {
width: 100%;
height: 2500px;
}
.header {
box-sizing: border-box;
position: absolute;
top: 0;
width: 100%;
height: 400px;
text-align: center;
background-color: #33f;
color: #fff;
}
.navigation {
box-sizing: border-box;
position: fixed;
width: 100%;
height: 60px;
background-color: #ff4d4d;
color: #fff;
padding: 20px 50px;
transition: all 0.5s ease;
transform: translateY(-100%);
z-index: 9999;
}
.navigation--relative {
position: relative;
top: 0px;
transform: translateY(0%);
}
.navigation.is-fixed {
position: fixed;
width: 100%;
transform: translateY(0%);
}
</style>
</head>
<body>
<section>
<nav class='navigation'>
<div class='navigation__title'><h1>Navbar 1</h1></div>
</nav>
<header class='header header-content'>
<nav class='navigation navigation--relative'>
<div class='navigation__title'><h1>Navbar 2</h1></div>
</nav>
<h1>Content</h1>
</header>
</section>
<script>
function stickyElement(e) {
var header = document.querySelector('.header');
var headerHeight = getComputedStyle(header).height.split('px')[0];
var navbar = document.querySelector('.navigation');
var scrollValue = window.scrollY;
if (scrollValue > headerHeight) {
navbar.classList.add('is-fixed');
} else if (scrollValue < headerHeight) {
navbar.classList.remove('is-fixed');
}
}
window.addEventListener('scroll', stickyElement);
</script>
</body>
</html>
JSFiddle demo
Here is a working example of what I think you are attempting to achieve. You were almost there other than some styling and a minor tweak to JS.
JSFiddle Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<style>
*,
*:before,
*:after {
margin: 0;
font-family: sans-serif;
}
body {
background-color: brown;
top: 0;
min-height: 100vh;
width: 100vw;
}
section {
width: 100%;
height: 2500px;
}
.header {
box-sizing: border-box;
position: absolute;
top: 20px;
width: 80%;
left: 10%;
height: auto;
text-align: center;
background-color: #33f;
color: #fff;
}
.navigation {
box-sizing: border-box;
position: fixed;
width: 100%;
height: 60px;
background-color: #ff4d4d;
color: #fff;
padding: 20px 50px;
transition: all 0.5s ease;
transform: translateY(-100%);
z-index: 9999;
}
.navigation--relative {
position: relative;
top: 0px;
transform: translateY(0%);
}
.content {
position: relative;
top: 100px;
width: 80%;
left: 10%;
height: 100%;
background-color: purple;
}
.navigation.is-scrolled {
position: fixed;
background-color: green;
width: 100%;
transform: translateY(0%);
}
</style>
</head>
<body>
<section>
<nav class='navigation'>
<div class='navigation__title'><h1>Navbar 2</h1></div>
</nav>
<header class='header header-content'>
<nav class='navigation navigation--relative'>
<div class='navigation__title'><h1>Navbar 1</h1></div>
</nav>
</header>
<div class="content">
<h1>Content</h1>
</div>
</section>
<script>
function stickyElement(e) {
var header = document.querySelector('.header');
var headerHeight = getComputedStyle(header).height.split('px')[0];
var navbar = document.querySelector('.navigation');
var scrollValue = window.scrollY;
if (scrollValue > 101) {
navbar.classList.add('is-scrolled');
} else if (scrollValue < 100) {
navbar.classList.remove('is-scrolled');
}
}
window.addEventListener('scroll', stickyElement);
</
script>
</body>
</html>
Actually this theme has 2 navbar, using ScrollTop in Jquery to catch event scroll then use hide the first navbar and show the 2 fixed navbar.
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>
I am working w/a slideshow that works similar to this: https://jsfiddle.net/trbwxyso/
<!doctype HTML>
<html>
<head>
<title></title>
<style>
* { margin: 0; padding: 0; }
body { background: #000; }
#wrapper { margin: 0 auto; width: 500px; }
#project_ctr { position: relative; width: 1500px; height: 576px; display: block; background: #000; overflow: hidden; }
.project { position: absolute; width: 500px; height: 576px; display: block; }
.ease { transition: 750ms ease all; }
</style>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="project_ctr">
<div class="project" style="background: #f00; left: 0;">
</div>
<div class="project" style="background: #fff; left: 500px;">
</div>
<div class="project" style="background: #00f; left: 1000px;">
</div>
</div>
</div>
<script>
$(document).ready(function() {
setTimeout(function() {
$('.project').addClass('ease').css({
'transform': 'translate3d(-500px, 0, 0)'
});
setTimeout(function() {
$('.project').addClass('ease').css({
'transform': 'translate3d(-1000px, 0, 0)'
});
}, 2000);
}, 2000);
});
</script>
</body>
</html>
In Safari (on OS X) if you resize your browser you will see a 1px shift and bleed of the previous background. I have tried every css trick to no avail. It appears to be a Safari only bug that's replicable and I can confirm it has been happening for at least two years.
Are there any workarounds?
currentColor to the rescue. I'm aware of how ugly this Safari-only CSS is:
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ #media {
.project:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: 0;
bottom: 0;
height: 100%;
width: 1px;
z-index: 999;
background: currentColor;
}
}
}
Here, the value currentColor set on background assumes whatever the current slide color is, making the fix scale pretty well.
https://jsfiddle.net/dgt4uqc4/2/
I am trying to place a ul list at the side of a div. The ul should begin at the right side and at the top of the div, and end on the bottom side of the div.
The problem is that it starts at the bottom of the div, not at the top of it. How can I fix it?
This is my code:
$(document).ready(function() {
$("#map").prepend('<img src="images/d2.png">');
var width = $("#map > img").attr("width");
$("#actions").css("width", width);
});
body {
margin: 0;
padding: 0;
}
nav {
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
position: fixed;
height: 100%;
width: 60px;
background: blue;
z-index: 1;
}
nav:hover {
width: 200px;
}
div#painel {
padding-left: 60px;
background: red;
width: calc(100%-60px);
display: block;
z-index: 0;
text-align: center;
}
div#map-container {
padding: 20px 0 20px;
width: 100%;
background: green;
text-align: center;
}
#map-interface,
div#map {
display: inline-block;
border: 0;
padding: 0;
margin: 0;
}
#map-interface {
background: gray;
list-style: none;
margin-left: -4px;
height: 488px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav>
</nav>
<div id="painel">
<div id="map-container">
<div id="map">
</div>
<ul id="map-interface">
<li>asda</li>
<li>asd</li>
<li>asdsad</li>
</ul>
</div>
</div>
<script src="jquery-1.11.2.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Inside the div#map, I have an image, and inside the list I will have a menu to interact with the image. The ul list should be a block with the same size as the image (or the div).
Try #map-interface { vertical-align:top; } to align inlined-block content to their tops.