So i've been trying to replicate the functionality of the How it works button of airbnb. I'm new to stackoverflow, so I don't know the policies to link the website.
What I have tried:
My HTML mockup
<div class="how-it-works">
<div class="container">
<div class="row">
<div class="col-lg-12">
<span class="pull-right">
<span class="glyphicon glyphicon-remove" ng-click="hideHowItWorks()"></span>
</span>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">
<div class="hiw-container hiw-step-one"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-two"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-three"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-four"></div>
</div>
</div>
</div>
</div>
</div>
<div class="main-class">
...some content....
</div>
My CSS:
.how-it-works{
position: absolute
width: 100%
top: -663px
padding-top: 40px
min-height: 663px
}
I'm using JQuery to slide the entire div down instead of using the standard slideDown procedure.
$('.btn').on('click', function(){
$('.how-it-works').css('height', $(window).height());
$('.how-it-works').animate({top: '0px'});
$('.main-class').animate({marginTop: '663px'});
})
If I use this method or the method of slideDown, the frame while sliding, stutters and gives an effect thats far from pleasing. How do I make the effect that's similar to the above mentioned website?
Slide an overlay on canvas from the top. This uses vanilla javascript and css animations. jQuery animations always seems jerky in my opinion.
var overlay = document.getElementById('overlay');
document.getElementById('open').onclick = function() {
overlay.style.top = 0;
}
document.getElementById('close').onclick = function() {
overlay.style.top = '-100%';
}
html, body {
height: 100%;
margin: 0;
}
#overlay {
background: red;
height: 100%;
width: 100%;
position: absolute;
top: -100%;
transition: top 1s ease-in-out;
}
<div id="overlay">
close
</div>
Open
Related
I'm struggling with an overlay with JS + CSS.
I have 4 boxes and 1 overlay. If I hover with my mouse over one box the overlay is sliding in, and cover all 4 boxes. If I move my mouse out of the overlay, it disappears. This all works well but...
If I add any element to my overlay (text etc), then onmouseout is detecting all element, as I left the overlay, and the overlay disappear.
I tried to change many things in CSS but couldn't find out the solution. Also, i read many questions similar to this, but couldn't find the proper one.
Here is my code:
function on() {
document.getElementById("overlay").style.display = "block";
document.getElementById('overlay').classList.add('mst-popupbox-full-slidein');
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.box {
background: red;
}
.overlay1 {
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
display: none;
z-index: 5;
cursor: pointer;
color: white;
}
.inner {
position: relative;
}
.mst-popupbox-full-slidein {
animation: slide-in-sm;
animation-duration: .5s;
}
#keyframes slide-in-sm {
0% {
left: -100%;
}
100% {
left: 0;
}
}
.mst-popupbox-orig {
position: relative;
display: block;
opacity: 1;
overflow: hidden;
font-family: 'Libre-Baskerville-Bold' !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="container bg-light">
<div class="row">
<div class="col-6">
<div class="row inner p-0 ">
<div id="overlay" class="overlay1 bg-dark p-0 " onmouseout="off()">
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</div>
<div class="col-6 inner p-0">
<div class="p-5 box" onmouseover="on()">
<div class="mst-popupbox-orig">
<h1>1</h1>
</div>
</div>
<div class="p-5">2</div>
</div>
<div class="col-6 p-0">
<div class="p-5 bg-danger">3</div>
<div class="p-5">4</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If anyone could help me out with this, would be glad.
Best Regards:
In this case,to achieve pupose you can use onmouseleave instead of onmouseout:
<div id="overlay" class="overlay1 bg-dark p-0 " onmouseleave="off()">
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</div>
And onmouseenter instead of onmouseover:
<div class="col-6 inner p-0">
<div class="p-5 box" onmouseenter="on()">
<div class="mst-popupbox-orig">
<h1>1</h1>
</div>
</div>
<div class="p-5">2</div>
</div>
Because of the onmouseout, onmouseover will trigger when the mouse pointer is moved out of an element, or out of one of its children.
Key to research: bubble (propagate up the document hierarchy)
I want to create a web site that contains a network graph. I used vis.js for this. If you hover over an image of a person the image should flip and show some information on the background. I created a JavaScript file that creates a tree out of a json file dynamically. Here is a picture of the result:
As you can see the images are visible outside the box which should not be the case. They should not be displayed outside of the borders.
Here is my html-code:
<div id="fullpage">
<div class="section " id="section0">
...
</div>
<div class="section" id="section1">
...
</div>
<div class="section" id="section2">
<div class="intro">
...
</div>
<div id="media">
...
</div>
</div>
<div class="section active" id="section3">
<div class="slide" id="slide1">
<div id="network_container_1">
<div id="network"></div>
</div>
</div>
<div class="slide active" id="slide2">
<div id="network_container_2">
</div>
</div>
</div>
Here is the CSS:
#network{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#network_container_bewohner{
width: 100%;
height: 100%;
left: 0;
top: 0;
border:1px black solid;
}
#network_container_freunde{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.overlay {
position: absolute;
padding: 4px;
z-index: 0;
}
#slide1{
z-index:0;
}
#slide2{
z-index:1;
}
The images are located as #block1, #block2, #block3, etc. as class overlay inside of #network_container_1.
As you can see I tried to mess around with the z-index but it doesn't work.
Okay I found the solution. The problem was the absolute position.
See here: Position absolute and overflow hidden
I am trying to have the image to scroll up and down within div.
Position sticky works when using chrome but not on IE, Edge, or firefox.
html
<section class="container">
<div class="row">
<div id="stamp-img" class="col-md-6">
<img src="">
</div>
<div class="col-md-6">
</div>
</div>
</section>
css
#stamp-img {
position: sticky;
top: 35%;
img {
margin: 50px 0px;
}
}
Why not use fixed? Sticky has cross browser compatibility issues as stated in the other answer.
#stamp-img {
/* changed to fixed */
position: fixed;
top: 35%;
/* new */
height: 100px;
overflow: auto;
/* end new */
img {
margin: 50px 0px;
}
}
<section class="container">
<div class="row">
<div id="stamp-img" class="col-md-6">
<img src="https://placehold.it/500x500">
</div>
<div class="col-md-6">
</div>
</div>
</section>
"the sticky property is an experimental API that should not be used in production code"
=> https://developer.mozilla.org/en-US/docs/Web/CSS/position
I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.
If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
I am using the fullPage plugin and everything worked like expected, but then I realized, when I resize the window, there is an unwanted animation. The div container is moving and after a delay it´s getting in the desired position.
Here is my Code:
//HTML structure
<div id="fullpage">
<div class="section">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
<div class="slide active">
<div class="slide-container"></div>
<div class ="slide-container skills"></div>
</div>
</div>
</div>
//CSS
.section {
text-align:center;
}
.slide-container {
float: left;
display: inline-block;
width: 50%;
height: 100%;
}
.skills {
background-color: #CDFF00;
}
I haven't made changes to the fullpage plugin except loopHorizontal: false.
Example on jsfiddle:
http://jsfiddle.net/oodLzLwv/1/