collapsing bottom bar with Javascript - javascript

I have a fixed bottom bar that can be collapsed on scroll, and right now to collapse it down I use :
$(".Bar").animate({
height: 0
}, 700);
$(".Bar").animate({
height: originalBuyBarHeight
}, 700);
So I change his height, which looks not good.
How would I simply slide it down outside of the screen(with all its content), then slide it up back to the original position ?
CSS:
.Bar {
position: fixed;
bottom: 0;
width: 100%;
height: 12vh;
}

you can change the bottom value
$(".Bar").animate({
bottom: 0
}, 700);
$(".Bar").animate({
bottom: '-12vh'
}, 700);

Use a class and achieve this effect with CSS:
.bar {
position: relative;
transform: translateY(0);
transition: transform .7s ease-in-out; /* you can change the time and easing */
}
.bar.moveOffscreen {
transform: translateY(110%);
}
And apply it with JS, instead of your original code:
/* code to hide it */
$(".bar").addClass('moveOffscreen');
/* code to reveal it */
$(".bar").removeClass('moveOffscreen');
Achieve this with vanilla JS, without JQuery:
/* code to hide it */
document.getElementById(".bar").classList.add('moveOffscreen');
/* code to reveal it */
document.getElementById(".bar").classList.remove('moveOffscreen');
PS: don't use capital letters at the start of your class names => Change .Bar to .bar

Related

How to manipulate CSS #keyframes through JavaScript?

I have a simple CSS animation:
<div id="saved-test">
<style type="text/css">
#saved-test {
width: 40px; height: 40px;
background: red;
position: fixed;
top: 0; left: 0;
animation-name: move-to-bottom;
animation-duration: 5s;
z-index: 1000;
}
#keyframes move-to-bottom {
to {
left: 400px;
top: 500px;
}
}
</style>
This works, and it moves as I want nicely. The issue I have, is that I want to set the destination of this element to be different. It will be "moving" to a bottom nav bar, which means the destination left/top positions will vary depending on screen size.
Is it possible to modify the left and top value in the keyframe via Javascript, so it goes to a set position that I set dynamically?
You can write the keyframe entirely with JavaScript as below, which gives you the ability to use dynamic values.
The Element interface's animate() method is a shortcut method which creates a new Animation, applies it to the element, then plays the animation. It returns the created Animation object instance. More and MDN's doc.
document.getElementById("saved-test").animate(
[
// étapes/keyframes
{
left: "0px",
top: "0px"
},
{
left: 400 + "px", // you can set it dynamically
top: 500 +"px" // you can set it dynamically
}
],
{
duration: 5000,
iterations: Infinity
}
);
#saved-test {
width: 40px;
height: 40px;
background: red;
position: fixed;
z-index: 1000;
}
<div id="saved-test">

How to change value of CSS pseudoelement property using JavaScript in scrollspy?

I'm looking for a relatively simple and standard way of changing CSS pseudoelement property value by JS Scrollspy.
The parent element (section of a landpage) should change grayscale, while scrolled, and its child should have position:fixed.
As it turns out, it's impossible to make it in an easy way, because any filter is removing position:fixed by definition. More about this: CSS-Filter on parent breaks child positioning
Moving that background-image to a pseudoelement creates another problem: manipulation of the pseudoelement's properties by JS.
The expected result: I wanted to make a section of a landing page, having grayscale filter for background image. That's the easy part. But it should has less grayscale, while moving upward (the more picture user see, the more color it has), and centered content element shuffles up from previous section, and later hiding under next one.
So basically I need two things:
filter grayscaled background image, with dynamically changing value of a grayscale, relative to distance to the top of the window (JS scrollspy)
position:fixed central content element visible only in that section
Illustration (with background-picture in pseudoelement) is here: https://codepen.io/tdudkowski/pen/MLyMyG
HTML
<section class="one">
</section>
<section class="two">
<div><p>DIV with a position:fixed</p></div>
</section>
<section class="three"></section>
CSS
section {
position: relative;
max-width: 1000px;
height: 70vh;
background-color: #eee;
margin: 0 auto;
overflow: hidden;
}
.two {
background-color: transparent;
/* Try to uncomment rule below */
/* filter: grayscale(50%); */
}
.two div {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 10rem;
background-color: #f00;
z-index: 1;
}
.one,
.three {
z-index: 100;
}
/* background of section */
section.two::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(https://picsum.photos/1000/200);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
/* filter: grayscale(50%); */
}

Moving the whole page to left and then right

i am looking for this kind of template . Moving the page to left and then page to right. Can anyone tell me how can i make this or is there any javascript example similar to this.
Create two <div>s, put them next to each other, make them take up the whole window, and change them as needed.
HTML:
<div class="left">left</div>
<div class="right">right</div>
CSS:
body {
margin: 0;
}
.left {
background-color: green;
bottom: 0;
left: 0;
position: fixed;
top: 0;
transition: width 1s;
width: 0;
}
.left.active {
width: 200px;
}
.right {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: left 1s;
}
.right.active {
left: 200px;
}
JS (width jQuery):
$('.right').on('click', function() {
$('.left').toggleClass('active');
$('.right').toggleClass('active');
});
And here's a fiddle.
Using .toggle(effect,options,duration) method to moving the page to left to right.
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#Id').toggle(effect, options, duration);
Taken via this link
If you want it to animate smooth on all devices you should use css transitions and transforms. Hiding and showing would be as basic as toggling a class then.
The example in jsfiddle
<style media="screen">
.wrapper {
width: 100%;
overflow: hidden;
}
.menu {
height: 100vh;
width: 100px;
background: #ABC;
color: white;
position: absolute;
left:0;
transition: transform 0.3s;
transform: translateX(-100px);
}
.content {
transition: transform 0.3s;
}
.active .menu {
transform: translateX(0);
}
.active .content {
transform: translateX(100px);
}
</style>
<button class="toggle">Toggle</button>
<div class="wrapper">
<div class="menu">
My menu
</div>
<div class="content">
My content
</div>
</div>
<script type="text/javascript">
document.querySelector('.toggle').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.wrapper').classList.toggle("active");
});
</script>
NB! Supported from IE10. IE 9 will support without the animation and you probably should add the needed -ms-, -webkit-, -moz-, etc prefixes to support the older browsers if needed for transition and transform properties.
Also I advise not animating body or html with this method and put the content of page in the wrapper (in .content in the examples case). Moving body and html directly may lead to unpleasant surprises later.

How to align a div at the center of a page using Jquery?

Iam positioning my div at the center of the page using below css code :
.content{
width:1000px;
height:600px;
margin:auto;
margin-top:auto;
}
My Requirement :
I would like to implement the above in $(document).ready(function () {} using JQuery. Initially i will assign the div negative position and hide it. Then in document.ready i want to show it and animate the div assigning the above properties.
I tried to implement the same. I am able to assign width and height but margin:auto and margin-top:auto; is not working.
It will be very helpful if somebody can guide me..!!
This is what i am doing:
http://jsfiddle.net/rgd9mwjz/
I need to see the animation of div moving from -5550px to center of div. How to achieve this?
You don't need jQuery to center the item, I've used it to add a class on the div in my example, making it come from left to right :
$(function() {
$("div").addClass("shown");
});
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
div
{
top: 50%;
left: -50%;
background: darkred;
width: 100px;
height: 100px;
position: relative;
transform: translate(-50%, -50%);
-moz-transition: .5s ease;
-webkit-transition: .5s ease;
}
div.shown
{
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I've found a interesting reply on this post Using jQuery to center a DIV on the screen
Hope it helps you!
Check this DEMO:
http://jsfiddle.net/60c977nf/
$(document).ready(function()
{
$('.content').css('display','block');
$('.content').addClass('other_properties');
});
I have added a new class to the div .content on document ready state and specified the new styles in the css files. That would make it easier for you to write new styles using the css file itself.
If you want to add styles using jQuery itself then use .css() property itself.

Fullscreen black bg with opacity fadeIn/fadeOut

I´m trying to make a full screen black bg with opacity, it appears smoothly when the mouse enters to the body and fade out smoothly when the user leaves the body of the page (which is the whole nav content screen).
I´m trying doing it with this script:
$("body").bind('mouseover', function() {
$("#bg_black").fadeIn("slow", 0.33);
});
$("body").bind('mouseleave', function() {
$("#bg_black").fadeOut();
});
with this css:
#bg_black{
position: absolute;
z-index: 1;
background: black;
opacity: 0.5;
width: 100%;
height: 100%;
display: none;
}
But the fadeout doesn´t works and also the fadeIn is very quickly and heavy.
Any ideas to achieve it, to make it also IE compatible? (not using css3)
I got this working by adding a div to body.
<div id="bg"></div>
styled it with css
#bg {
// so if user scrolls it doesn't matter
position: fixed;
background-color: black;
// expand to height & width
height: 100%;
width: 100%;
margin: 0;
padding:0;
// hidden initially
opacity: 0;
}
body {
background-color: white;
}
javascript to fadeIn and fadeOut
$("#bg").hover(function() {
// should user hover in and out quickly stop animations
$(this).stop().animate({ opacity: 1 }, 1000);
}, function( ) {
// should user hover in and out quickly stop animations
$(this).stop().animate({ opacity: 0 }, 1000);
});
Demo here
Try with this one:
$(function(){
$("body").hover(function() {
$("#bg_black").fadeIn("slow");
},function(){
$("#bg_black").fadeOut("slow");
});
});

Categories