I've been asked to create a web page which has a fixed header (just a standard header bar, about 80px high, which stays in place when the page scrolls). At the top of the page is a hero image, and when it's visible, the header should have a gradient background, (black at the top, transparent at the bottom).
Once the user has scrolled on down past the hero image, the header background should change to black.
I've seen it done, so I know it's possible, but I'm just not sure how it works and I haven't been able to figure it out. Can anyone point me in the right direction?
The HTML is:
<div id="body">
<div id="header">
... header contents (basically a logo and some navigation) ...
</div>
<div id="pageContent">
<div id="heroImage">
<img src="/path/to/image" />
</div>
<div id="about">
... About ...
</div>
... more sections
</div>
and currently the header CSS is:
#header {
background: linear-gradient(to bottom, rgba(0,0,0,255) 0%, rgba(0,0,0,255) 17%, rgba(0,0,0,0) 78%, rgba(0,0,0,0) 100%);
position: fixed;
width: '100%';
z-index: 1000;
}
You would have to do this kind of stuff in JavaScript, since you can't really do this with css only.
In this snippet you can see how you can change the styling of the Header after scroling. You would need to check the Position of your Hero and if the Window is scrolled past this point, you can change the styling with css-classes.
Here is a similar question, for more information.
var navbar = document.getElementById("navbar");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
// placeholder.classList.add("display");
nav.classList.add("shrink");
} else {
navbar.classList.remove("sticky");
// placeholder.classList.remove("display");
nav.classList.remove("shrink");
}
}
const options = {threshold: 0.5};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
:root{
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: var(--background-color);
}
nav{
height: var(--navbar-height);
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
transition-property: height;
transition-duration: 0.5s;
}
.navbar {
position:absolute;
left:0;
right:0;
top:0;
}
.navbar-placeholder {
position:relative;
height:80px;
transition: height 0.5s;
}
.text1{
padding: 30px;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}
.disappear {
opacity: 0%;
transition-duration: 0.5s;
}
.shrink {
height: 40px;
transition-property: height;
transition-duration: 0.5s;
}
.display {
display: block;
height: var(--navbar-height);
}
h1, p{
font-size: 50px;
color: white;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
border: 5px solid white;
}
.hidden {
opacity: 0;
transition: all 1s;
}
.show {
opacity: 1;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WeSoDev</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar_placeholder" class="navbar-placeholder">
<div id="navbar">
<nav id="nav">
<h2 id="header">header</h2>
</nav>
</div>
</div>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<script src="index.js"></script>
</body>
</html>
Related
I have been trying to find a workaround to overflow:hidden not applying to fixed elements, and I came across clip and clip-path. As clip is deprecated, I am trying to use clip-path to create the desired effect. I have successfully created the effect I am looking for in both Firefox and Safari, but the clip-path function does not appear to be working in Chrome.
I've included the current HTML and CSS below; the desired effect is for each title and subtitle to only be visible when their respective parent element is in view. If you are viewing on Firefox or Safari this should be working appropriately. However, if viewing on Chrome you should see that the clip-path function is not applying and therefore you can see both titles and subtitles at the same time when viewing the first parent element (the turquoise rectangle).
As you can see in the code, I am using clip-path: fill-box which works in both Firefox and Safari, but not Chrome. I've also tried inset(0), which still works in FF/Safari but it too fails in Chrome.
* {
padding: 0;
margin: 0;
border: none;
}
html {
background-color: black;
}
.info {
list-style-type: none;
margin-left: 13vw;
padding: 0;
overflow: hidden;
position: fixed;
color: white;
z-index: -1;
top: 80vh;
}
.container {
width: 100%;
height: 110vh;
}
.parent {
position: absolute;
width: 100%;
height: 110vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
clip-path: fill-box;
}
.parent_1 {
background-color: turquoise;
}
.parent_2 {
background-color: tomato;
}
.parent_3 {
background-color: purple;
}
.subchild {
position: fixed;
color: white;
width: 60vw;
left: 14vw;
}
.p1, .p3 {
top: 40vh;
}
.p2 {
top: 45vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="css/clip.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="container container_1">
<Div class="parent parent_1">
<Div class="child child_1">
<p class="subchild p1">
First Title
</p>
<p class="subchild p2">
First Subtitle
</p>
</Div>
</Div>
</section>
<section class="container container_2">
<Div class="parent parent_2">
<Div class="child child_2">
<p class="subchild p3">
Second Title
</p>
<p class="subchild p2">
Second Subtitle
</p>
</Div>
</Div>
</section>
</body>
</html>
I decided to play a little with Javascript. I've changed a little the HTML and the CSS. The subchilds are positioned top: 150px;.
function getY(element) {
var rect = element.getBoundingClientRect();
return rect.bottom;
}
let container1 = document.querySelector(".container_1");
let container2 = document.querySelector(".container_2");
let container3 = document.querySelector(".container_3");
let subchild1 = document.querySelector(".container_1 .subchild");
let subchild2 = document.querySelector(".container_2 .subchild");
let subchild3 = document.querySelector(".container_3 .subchild");
document.addEventListener('scroll', function() {
let bottom1 = getY(container1);
let bottom2 = getY(container2);
let bottom3 = getY(container3);
if ((bottom1 > 166) && (bottom2 > 166) && (bottom3 > 166)) {
subchild1.style.display = "block";
}
else {
subchild1.style.display = "none";
}
//
if ((bottom1 < 166) && (bottom2 > 166) && (bottom3 > 166)) {
subchild2.style.display = "block";
}
else {
subchild2.style.display = "none";
}
//
if ((bottom1 < 166) && (bottom2 < 166) && (bottom3 > 166)) {
subchild3.style.display = "block";
}
else {
subchild3.style.display = "none";
}
});
* {
padding: 0;
margin: 0;
border: none;
}
html {
background-color: black;
}
.info {
list-style-type: none;
margin-left: 13vw;
padding: 0;
overflow: hidden;
position: fixed;
color: white;
z-index: -1;
top: 80vh;
}
.container {
width: 100%;
height: 110vh;
}
.parent {
position: absolute;
width: 100%;
height: 110vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
}
.parent_1 {
background-color: turquoise;
}
.parent_2 {
background-color: tomato;
}
.parent_3 {
background-color: purple;
}
.subchild {
position: fixed;
color: white;
width: 60vw;
left: 14vw;
top: 150px;
}
.container_1 .subchild {
display: block;
}
.container_2 .subchild {
display: none;
}
.container_3 .subchild {
display: none;
}
<section class="container container_1">
<Div class="parent parent_1">
<Div class="child child_1">
<p class="subchild">
First Title
</p>
</Div>
</Div>
</section>
<section class="container container_2">
<Div class="parent parent_2">
<Div class="child child_2">
<p class="subchild">
Second Title
</p>
</Div>
</Div>
</section>
<section class="container container_3">
<Div class="parent parent_3">
<Div class="child child_3">
<p class="subchild">
Third Title
</p>
</Div>
</Div>
</section>
I'm trying to make a menu button that is an image with text at the bottom, like so:
jsfiddle
On jsfiddle it works fine, but when I load my page "title" element instead of being at the bottom of the parent is on top of it (outside of its parents border): bad
In my code I have a-tags instead of divs, because on jsfiddle it didn't look correct with a-tag, but I don't think it is a problem, because I tried with divs in my code, and the "bug" is still present and the apperance does not change:
<a class="menu-item" href="#">
<p>Title</p>
</a>
After toggling one of titles properties in inspect mode (text-align, width, bottom or margin) off and then on it is now as it should be: good What? Why?
While trying to fix this I found out that when I remove "margin: auto" from .menu-item it no longer happens, but it's obviously not a solution, because now my buttons are not centered.
.menu-item {
margin: auto;
}
I'm a newb in CSS, so only solution that comes to my mind is to toggle one of the properties with JS, but that seems a bit hacky and I'm sure there is a better way. I tried chaning order of styles in .css file, but it did nothing.
So my question is: Why is this happening (not changing anything in css styles, just toggling off and on, changes apperance) and what can I do to fix this?
Edit:
My local files:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="center">
<div class="menu">
<div id="left-mi" class="menu-item" href="#">
<p class="mi-title">Title</p>
</div>
<a id="middle-mi" class="menu-item" href="#"></a>
<a id="right-mi" class="menu-item" href="#"></a>
</div>
</div>
<div class="right"></div>
</div>
<div class="middle">
<div class="left"></div>
<div class="center">
</div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
styles.css
body {
width: 100%;
margin: 0;
background: steelblue;
}
.left, .center, .right {
height: 100%;
display: table-cell;
}
.left, .right {
width: auto;
}
.center {
width: 50%;
margin: auto;
}
.top, .middle, .bottom {
display: table;
width: 100%;
}
.mi-title {
text-align: center;
background: rgba(0, 0, 0, 0.5);
width: 100%;
position: absolute;
bottom: 0;
margin: 0;
}
.menu-item {
height: 80%;
display: block;
margin: auto;
width: 30%;
position: relative;
}
.menu {
margin: auto;
width: 80%;
height: 100%;
background: magenta;
display: flex;
}
/*#region Heights*/
.top {
height: 200px;
}
.middle {
height: 300px;
}
.bottom {
height: 100px;
}
/*#endregion*/
/*#region Borders*/
.top .center, .bottom .center, .middle > div {
border: 1px solid black;
}
.top .center, .bottom .center {
border-top: 0;
border-bottom: 0;
}
.middle .left, .middle .right {
border-left: 0;
border-right: 0;
}
/*#endregion*/
/*#region Debug Colors*/
#left-mi {
background: red;
}
#middle-mi {
background: green;
}
#right-mi {
background: blue;
}
.top .left {
background: rgb(80, 0, 0);
}
.top .center {
background: rgb(160, 0, 0);
}
.top .right {
background: rgb(250, 0, 0);
}
.middle .left {
background: rgb(0, 80, 0);
}
.middle .center {
background: rgb(0, 160, 0);
}
.middle .right {
background: rgb(0, 250, 0);
}
.bottom .left {
background: rgb(0, 0, 80);
}
.bottom .center {
background: rgb(0, 0, 160);
}
.bottom .right {
background: rgb(0, 0, 250);
}
/*#endregion*/
You can do something like this. Keep adjusting the left until you have the button centered. There may be a better solution but I think this works fine.
<a class="menu-item" href="#">
<p>Title</p>
</a>
And the corresponding CSS can be
.menu-item {
width: 100px;
height: 100px;
background: red;
margin: none;
left:43%;
position: relative;
}
I hope this helps
Question
Is it possible for a feature detector such as Modernizr to break a page rendering upon script load if the page contains css transformations?
Abstract
I am trying to create an animation using css transform where an arrow is moving downwards along an invisible line. Things work great until I load the modernizr library. At this point all elements are rotated 45 degrees and stripped to a thin line (most likely the elements gets hooked to the angle of the animated arrow) like this.
If I remove the script call to modernizr the page renders correctly like this.
The animation works flawless regardless if modernizr is loaded or not - it's only the presentation of the page that seems to break up. Modernizr as script seems to load without errors by the way - it only messes with the visual output.
Note: Trying these following lines of code in a snippet viewer seem to render everything as it should, but the images above proves something different. The visible texts are different from the images, but all code is identical.
The animated css looks like this (credit to Joshua MacDonald for the inspiration - https://codepen.io/JoshMac/pen/MaYEmJ).
$(document).ready(function() {
var config = {
elements: {
navheader: "header",
navheadstyle: "header h1"
},
identifiers: {},
classes: {
parallaxtop: ".parallax-1"
}
};
$(function() {
$(config.elements.navheader).data("size", "big");
});
$(window).scroll(function() {
if ($(document).scrollTop() > 0) {
if ($(config.elements.navheader).data("size") === "big") {
$(config.elements.navheader).data("size", "small");
$(config.elements.navheadstyle).stop().animate({
"font-size": "2.0em"
},
200
);
}
} else {
if ($(config.elements.navheader).data("size") === "small") {
$(config.elements.navheader).data("size", "big");
$(config.elements.navheadstyle).stop().animate({
"font-size": "2.5em"
},
200
);
}
}
});
(function() {
var parallax = document.querySelectorAll(".parallax"),
speed = 0.5;
$(window).scroll(function() {
[].slice.call(parallax).forEach(function(el, i) {
var windowYOffset = window.pageYOffset,
elBackgrounPos = "0 " + windowYOffset * speed + "px";
el.style.backgroundPosition = elBackgrounPos;
});
});
})();
});
/*! HTML5 CSS3 Styles v1.0.0 */
html,
body,
ol,
ul,
li,
p {
font: normal normal normal 15px/normal 'Titillium Web', 'Montserrat', 'Raleway', 'Gudea', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: left;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 8px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.15);
}
body {
background: #fff;
color: #606060;
}
nav {
background: rgb( 255, 255, 255);
/* Fall-back for browsers that don't
support rgba */
background: rgba(255, 255, 255, 0.9);
}
/* Desktop styles */
#media (min-width: 300px) {
header nav li:first-child {
display: none;
}
header.wrapper {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
header nav ul {
margin: 10px auto;
width: 100%;
text-align: center;
}
header nav li {
display: inline-block;
list-style-type: none;
font-weight: bold;
padding: 0 10px;
}
header .container h1 {
font: normal normal normal 2.5em/normal 'Gudea', Helvetica, Arial, sans-serif;
}
header .container>div {
padding: 10px;
text-align: center;
text-transform: uppercase;
}
nav .floatright {
/* This should be replaced with something more convenient. Mobiles don't use this - better remove it from the code stack. */
float: right;
}
}
header:after,
nav:after,
.floatright:after,
.arrowcontainer>div:after {
content: '';
display: block;
clear: both;
}
/* ============================================================
SECTIONS
============================================================ */
section.module:last-child {
margin-bottom: 0;
}
section.module h2 {
font-family: 'Playfair Display', serif;
width: 25%;
margin: 0 auto 40px auto;
font-size: 2.8em;
text-align: center;
}
section.module p {
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 40px;
font-weight: 300;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
padding: 40px 0;
}
section.module.parallax {
padding: 0;
background-position: 0 0;
}
section.module.parallax h1 {
font-family: 'Playfair Display', serif;
width: 50%;
margin: 0 auto;
font-size: 4em;
text-align: center;
}
section.module.parallax-1 {
background: #c0c0c0;
}
footer.module.parallax-2 {
background: #555;
}
section.module.parallax-3 {
background: #0000ff;
}
#media all and (min-width: 600px) {
section.module h2 {}
section.module p {}
section.module.parallax {
padding: 350px 0;
}
section.module.parallax h1 {}
}
#media all and (min-width: 960px) {
section.module.parallax h1 {}
}
.arrowcontainer {
position: relative;
width: 100%;
bottom: -5em;
text-align: center;
}
.arrowtext {
font-weight: bold;
}
.arrow,
.arrow:before {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}
.arrow {
fill: none;
width: 20px;
height: 20px;
top: 20%;
left: 50%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-left: none;
border-top: none;
border-right: 1px transparent solid;
border-bottom: 1px transparent solid;
}
.arrow:before {
content: '';
width: 20px;
height: 20px;
top: 50%;
border-left: none;
border-top: none;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
/*-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;*/
-webkit-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: none;
-ms-animation-fill-mode: none;
animation-fill-mode: none;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: arrow;
-ms-animation-name: arrow;
animation-name: arrow;
}
#keyframes arrow {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate(40px, 40px);
-ms-transform: translate(40px, 40px);
transform: translate(40px, 40px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.gisslen.net/framework/core/client/modernizr-3.5.0-custom.min.js"></script>
<header class="wrapper">
<nav>
<div class="container">
<!-- Start: Navigation -->
<div>
<h1>Main title</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<!-- End: Navigation -->
</div>
</nav>
</header>
<!-- Start: Page content -->
<main>
<section class="module parallax parallax-1">
<div class="container">
<h1>Block title</h1>
<div class="arrowcontainer">
<div class="arrowtext">Supportive text</div>
<div class="arrow"></div>
</div>
</div>
</section>
<section class="module content">
<a name="concept"></a>
<div class="container">
<h2>Block subtitle</h2>
</div>
</section>
<section class="module content">
<a name="news"></a>
<div class="container">
<h2>Block subtitle</h2>
</div>
</section>
</main>
<!-- End: Page content -->
<!-- Start: Footer -->
<footer class="module parallax parallax-2">
<div class="container">
<div class="footer-bottom">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</footer>
<footer class="wrapper">
Last updated span
</footer>
<!-- End: Footer -->
The HTML-snippet above is surrounded by these lines of code (as they shouldn't be added in the snippets texteditor).
<!DOCTYPE html>
<html class="no-js">
<head id="Head1">
<meta charset="utf-8" />
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<form name="form1" method="post" action="./" id="form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxMw9kFgJmD2QWAgIDD2QWAgIDDw8WAh4EVGV4dAUVcmV2aXNlZCAxNjAxLjEuMS4wMTAwZGRkfaEsWaMfAzoF2J+iiXEZuLql9BHgAUKPamIAH6P8sG0=" />
<div>
</div>
The snippet above...
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
</div>
</form>
</body>
</html>
I am using modernizr-3.5.0-custom.min.js with all features and options checked and jquery-3.2.1.min.js (the newest jQuery version avaliable in the snippet viewer is 2.1.1, but they work all the same in this particular matter).
The issue your having is due to the .arrow class. What modernizr does is it adds classes to your html tag. These classes are meant to be used by you in CSS code, so you can add fallback styles in case a feature is unsupported in the browser.
Run the page then please inspect the html classes that are being added by modernizr in google dev tools and if you find the keyword arrow then you will find that a class is being added of the same name arrow in the html tag as you are using the same class name for your arrow. This applies all the animation classes to the html tag as well and hence it renders with the effects of the arrow animation.
In order to fix this, either change your .arrow class name to some other name like .arrow-animation or try having all the classes used in the .arrowcontainer to be declared as nested under the parent classes as follows:
.arrowcontainer .arrowtext {...}
.arrowcontainer .arrow,
.arrowcontainer .arrow:before {...}
.arrowcontainer .arrow {...}
.arrowcontainer .arrow:before {...}
This will fix the rendering issue your having.
Hope this explains the issue and helps you to proceed.
Happy coding :)
I have a box with a background, which is dimmed when hovered on. There is also a text, which is uncolored (transparent color), I'm trying to set its color to white when parent element is hovered on.
I know this should work:
#someDiv:hover > .someClass {
color: white;
}
But in my code it doesn't. Can anyone point me to the mistake?
jsfiddle here.
HTML:
<div class="row">
<div class="box" style="background:url('http://images6.fanpop.com/image/photos/34000000/Sandor-Clegane-sandor-clegane-34035068-960-640.jpg')">
<div id="overlay"></div>
<div class="hashContainer"><span class="tru">123</span></div>
</div>
CSS:
.box {
display: inline-block;
width: 300px;
margin: 40px;
height: 300px;
background-size: cover;
z-index: -1;
}
.hashContainer {
pointer-events: none;
position: relative;
top: 22%;
}
#overlay {
height: 300px;
width: 300px;
position: absolute;
}
#overlay:after {
content: "";
display: block;
height: inherit;
width: inherit;
opacity: 0;
background: rgba(0, 0, 0, .5);
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
#overlay:hover:after {
opacity: 1;
}
.tru {
font-size: 70px;
color: transparent;
font-weight: 900;
transition: all 1s;
}
/* not working */
#overlay:hover > .tru {
color: white;
}
/* not working */
.box > .tru {
color: white;
}
In my case, I'm trying to apply color change to the tru class span, while box \ overlay divs are hovered.
The [#overlay] is a sibling of[+] [.hashcontainer and .hashcontainer] the parent of[>] [.tru]
CSS
#overlay:hover + .hashContainer > .tru {
color: white;
}
HTML
<div id="overlay"></div><!----------------[#overlay isn't a parent of .hashContainer but an actual sibling]-->
<div class="hashContainer"><!-------------[.hashContainer is the parent of .tru]-->
<span class="tru">123</span>
</div>
http://plnkr.co/edit/H2Up3Y2YD6fl5uiwQky4?p=preview
Consider the following HTML document:
<html>
<head>
<style>
.someClass:hover { //mention in this manner
background: blue;
}
</style>
</head>
<body>
<div id="id1" class="someClass" >
<h1 id="id2" > HELLO MAN </h1>
</div>
</body>
</html>
The above code works. Color changes to blue when you hover over <div>.
Code can be found there http://codepen.io/kongakong/pen/wMQrBR
Javascript:
$(document).ready(function () {
init();
});
function init() {
$('#test').on('click', function () {
$('.answer').animate({width: "hide"}, 1000, 'swing');
});
}
css:
.row {
position: relative;
overflow-x: hidden;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
}
html
<div class="contrainer">
<div>
<input id='test' type='button' value="test"></input>
</div>
<div class="row">
<div class="answer-new">Under
</div>
<div class="answer">Top
</div>
</div>
<div class="row">
<div class="answer-new">Under1
</div>
<div class="answer">Top1
</div>
</div>
</div>
Here is a screenshot of the page before animation starts
When the button is clicked, the animation is executed as expected. I expect div's of css class answer-new stay visible. However at the end all the div disappeared.
I tried to use '0' instead of 'hidden'. In this case, the text of div answer stays visible. Not completely hidden.
Why this behaviour?
It is because your .row div have overflow-x: hidden; and when .answer div width become hidden then there no any div other than .answer-new.
And .answer-new is position:absolute So, it count not width/height. And it will hide all element overflow the .row.
To. Make it working add padding to .row So, it count some spacing.
like her in example i add padding: 25px 0;. and i have give top value to absolute div. top: 0; to give it's position.
And added margin: -25px 0; to .answer to display it proper from top as padding added to parent div.
CSS:
.row {
position: relative;
overflow-x: hidden;
padding: 25px 0;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
margin: -25px 0;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
top:0;
}
Working Fiddle
That is because your container div .row has no dimension (width nor height) of its own, and the other child div .answer-row has absolute positioning and only width dimension. So when the child div .answer gets hidden, the parent loses its height dimension, and effectively becomes invisible.
If you give the parent div .row a height, when the child div .answer gets hidden, the parent stays visible. Consequently the other child div .answer-row stays visible, considering its style.
See this fiddle wherein I added height to .row.
While I can't exactly explain the behavior this myself, I took the liberty of limiting the width to 1 px and removing the opacity that fixed the issue
function init() {
$('#test').on('click', function() {
$('.answer').animate({
width: '1px',
opacity: 0
}, 2000, "swing");
});
}
Updated Fork
hope this will help to you,I used online jquery.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.row {
position: relative;
overflow-x: hidden;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
}
</style>
<body>
<div class="container">
<div>
<input class="btn btn-default" id='test' type='button' value="test"></input>
</div>
<div class="row">
<div class="answer-new">Under
</div>
<div class="answer">Top
</div>
</div>
<div class="row">
<div class="answer-new">Under1
</div>
<div class="answer">Top1
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(){
$(".answer").animate({width:0,opacity:0},1000);
});
});
</script>
</body>
</html>
IMHO I don't like using jquery/js to animate things, I would do it with css classes
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
transition: 0.5s;
overflow: hidden;
}
.answer.minimized{
width: 0px;
}
in your js
$('#test').on('click', function () {
$('.answer').addClass('minimized');
});
Here's the demo