I have a map section with html as follows,
<div id="map-section" class="map-section">
<!-- map opener -->
<div id="map-opener" class="map-mask" style="opacity:0.5;">
<div class="map-opener">
<div class="font-second">locate us on the map<i class="ci-icon-uniE930"></i></div>
<div class="font-second">close the map<i class="ci-icon-uniE92F"></i></div>
</div>
</div>
<!--/ End map opener -->
<div id="map-container">
</div>
</div>
<!--/ End Map Section -->
and the css was,
.map-section {
height: 150px;
overflow: hidden;
position: relative;
-webkit-transition: height 0.2s ease-out;
transition: height 0.2s ease-out;
}
.map-mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
z-index: 4;
}
.map-mask .row {
position: relative;
}
.map-mask .row > div {
position: relative;
top: 50%;
}
.map-opener {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -200px;
width: 400px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-align: center;
font-weight: 400;
}
.map-opener div {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
}
.map-opener div:first-child {
opacity: 1;
}
.map-opener div:nth-child(2) {
margin-top: -50px;
opacity: 0;
}
.map-opener i {
font-size: 28px;
vertical-align: middle;
}
.map-opener i:before {
display: inline;
}
.map-opened {
height: 450px;
}
.map-opened .map-mask {
height: 100px;
}
.map-opened .map-opener div:first-child {
opacity: 0;
}
.map-opened .map-opener div:nth-child(2) {
opacity: 1;
}
But this html won't give you full description about my problem and hence i am explaining here regarding it..
In a website i am using a map section in which at initial stage i have map with height of 150px; , and a text named "Locate us on map".. When we click the text, the map with a height of 450px; gets opened, here comes the issue the opened map was not scrolling down to full height and there is a need of manual scroll down to look at the full map.. How could i do it (i.e, if we click on "Locate us on map", the map container should move to full height without manual scroll down"..
The link of the site was http://dev.seyali.com/seyalitechv3/ and look at the footer of this site..
This link will clears you my issue..
Your div height of the map is changing and thus changing the height of the window but the window scroll position is not changing, you need to scroll the window on change of the div height.
To scroll the window you can add a click listener to the map mask as shown below and animate to the bottom of the page usng jQuery.
Add this JS code to your javascript file.
$('.map-mask').on('click',function(){
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});
Related
So here is a simple fiddle (http://jsfiddle.net/t1xywroc/2/) I created to show you the animation I'm trying to replicate (from this website: https://paperpillar.com/).
I'm still fairly new to Javascript/Jquery and have only been doing HTML and CSS for a couple months.
The problem about my animation is that (as far I know) there is no transition from an absolute position to a fixed position, which I believe causes that small jump, right after triggering the animation (or transition if you will). The second problem is, that the content of the ::before element can't be transitioned either. How can I fix these things using jQuery?
I tried to get it work by using mostly CSS but I keep coming across new problems. I guess it's inevitable to use JavaScript, which is what I need help with. I'd really appreciate it.
Note: not a native speaker.
HTML
<div class="section">
<div class="button"></div>
</div>
CSS
.section {
height: 2000px;
width: auto;
}
.button {
position: absolute;
transform: translateX(50%);
right: 50%;
display: inline-block;
color: white;
line-height: 60px;
height: 60px;
width: auto;
padding-left: 25px;
padding-right: 25px;
background-color: blue;
border-radius: 25px;
vertical-align: middle;
top: 15rem;
}
.button::before{
content: 'Button Text';
}
.floating {
padding-left: 0px;
padding-right: 0px;
position: fixed;
right: 15px;
top: calc(100vh - 120px);
transform: none;
height: 80px;
width: 80px;
transition: all 1.5s ease-in-out;
background-color: red !important;
border: none;
border-radius: 50%;
justify-content: center;
text-align: center;
}
.floating::before{
content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
}
JS
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).width() <= 768) {
var scrollTop = $(this).scrollTop();
$('.button').each(function() {
var topDistance = $(this).offset().top;
if ((topDistance - 30) < scrollTop) {
$(this).addClass('floating');
// Haven't put much thought into this part yet
} else if ((topDistance - 30) >= scrollTop){
}
});
}
});
});
A couple of problems have been highlighted in the question: the 'jump' when the transition moves between absolute and fixed and the fact that pseudo elements' content can not be transitioned.
To get round the absolute to fixed jump problem we can set the button to fixed as soon as the transition is to start and then transition. This is possible by introducing CSS animations rather than transitions.
To appear to transition between content we use before pseudo element to hold the initial text (as in the code given) and introduce an after pseudo element that holds the svg. To give the appearance of transitioning between the two we animate opacity.
Note: in the website which is to be emulated the button initially has a white background over the page's white background. This means the change in shape as the initial button fades away is less obvious. With a contrasting blue background the change in shape is much more obvious. That may or may not be the effect required.
Here's a snippet with animations instead of transitions and moving to fixed immediately the animation starts.
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).width() <= 2500) {
var scrollTop = $(this).scrollTop();
$('.button').each(function() {
var topDistance = $(this).offset().top;
if ((topDistance - 30) < scrollTop) {
$(this).addClass('floating');
} else if ((topDistance - 100) >= scrollTop){
}
});
}
});
});
.section {
height: 2000px;
width: auto;
position: relative;
}
.button, .button::before, .button::after {
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
position: absolute;
}
.button {
transform: translateX(50%);
right: 50%;
line-height: 60px;
height: 60px;
width: auto;
color: transparent; /* do this to ensure the button has dimensions so it can be clicked */
display: inline-block;
vertical-align: middle;
top: 15rem;
}
.button.floating {
position: fixed;
top: 30px;
animation-name: floatdown;
}
.button::before {
content: 'Button\00a0 Text';
opacity: 1;
color: white;
line-height: 60px;
height: 60px;
width: auto;
padding-left: 25px;
padding-right: 25px;
background-color: blue;
border-radius: 25px;
}
.button::after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
opacity: 0;
padding-left: 0px;
padding-right: 0px;
height: 80px;
width: 80px;
margin-left: -50%;
background-color: red;
border: none;
border-radius: 50%;
justify-content: center;
text-align: center;
}
div.button.floating::before {
animation-name: fadeout;
}
div.button.floating::after {
animation-name: fadein;
}
#keyframes fadeout {
100% {
opacity: 0;
}
}
#keyframes fadein {
100% {
opacity: 1;
}
}
#keyframes floatdown {
100% {
top: calc(100vh - 120px);
right: 95px; /* 80+15px */
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="button">Button text</div>
</div>
Note also that if you want the downarrow to fill the circle more you could put it as a background-image with size contain rather than as content.
A client has very specifically requested that their project page has a similar feel to this. Whereby, you click a '+' button to display project information, in what I would say is a full-screen overlay window.
I'm familiar with HTML / CSS & while I have dabbled with PHP I have never touched JS. And I'm pretty sure that is what the developer of the above site has used here.
So, my questions are:
How do I achieve this outcome (or something very close to it)? Note - the site is being developed on WP. I'm not sure if that changes anything.
Once it is done, how do I add Project Information to the overlay?
On button click add class active to .element and thats it
.element {
bottom: 0;
height: 100%;
left: -100%;
position: fixed;
right: auto;
top: 0;
width: 100%;
transition: left .3s ease-in;
}
.element.active {
left: 0;
right: 0;
}
I created a small pen demonstrating how you can achieve this using CSS and very little plain Javascript:
https://codepen.io/Tauka/pen/OjEQzE
.overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: green;
transition: width 2s ease-out;
overflow-x:hidden;
}
Important moments:
.overlay must have width: 0 and position: fixed
.content must have width in absolute measure, i.e. px/rem/em
Hope it helps!
You can find a good example on the W3School web site.
Look at that https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp.
You can see on that site the almost exact same effect. I give the example code just here :
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
</script>
</body>
</html>
I saw this offer on a website which was being displayed above the navbar.
It looked like this once clicked on the arrow on the top right corner.
And how can I make it responsive?
Can anyone share how to implement such a solution? Are there any already existing solutions which I can reuse?
It is simple to make one by yourself.
The main steps are:
create a div element, fixed to the top, height zero
put a button to the top right corner
bind an event to the button, when clicked, toggle the height of the div.
Here's an example: http://codepen.io/SLRXXX/pen/YWVdJZ
$('.button').on('click', function () {
$('.top').toggleClass('active');
});
.top {
position: fixed;
top: 0;
left: 0;
height: 0;
width: 100%;
}
.strip {
height: 0;
background-color: yellow;
transition: height 0.5s;
line-height: 40px;
text-align: center;
overflow: hidden;
}
.top.active .strip{
height: 40px;
}
.button {
position: absolute;
top: 0;
right: 5px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
background-color: yellow;
color: #fff;
cursor: pointer;
}
.arrow-down {
transition: transform 0.5s;
}
.top.active .arrow-down{
transform: rotate(180deg)
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="top">
<div class="strip">
some content
</div>
<div class="button">
<i class="glyphicon glyphicon-chevron-down arrow-down"></i>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
I'd like to fix this jquery left to right div on hover: http://jsfiddle.net/PXLJG
HTML:
<div class="holdingbox">
<span class="rightbox">
<span class="content">Kenyér</span>
</span>
<span class="leftbox">></span>
jQuery:
$('.holdingbox').hover(function(){
$('.rightbox').animate({width: '90px'}, 1000)
}, function(){
$('.rightbox').animate({width: '-0'}, 1000)
});
CSS:
div {
display : inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: relative;
top: 0;
left: 0;
display: inline-block;
font-size: 24px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 30px;
vertical-align: top;
margin-right: 0;
}
.content{
width: 100px;
position: absolute;
background-color: #ac193d;
height: 29px;
left: 0;
top: 0;
right: 0;
color: #FFF;
padding-left: 5px;
}
For example: http://www.jamieoliver.com/ -> slider previous next arrow on hover (I need that!!)
My problem is when I trying to hover on the ">" (arrow) it is working sliding left to right. But when I hovering again and again and again while animate sliding to 'width:0' and I leave my mouse from the div the animate don't stop and still hovering left to right for X times I hovered on the div. Can anyone solve this how can I fix this problem?
P.S.: I guess this problem can be solved by .stop() function. How?
You can use .stop() to stop the current animation:
http://jsfiddle.net/PXLJG/2/
$('.rightbox').stop().animate({width: '-0'}, 1000)