Slide div in from right - javascript

I have the following code in my Shopify Theme.
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('opensign').value=='Hide Layer'){
document.getElementById('opensign').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('opensign').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
</script>
Can I add so the boxes are slided in from right? Code for boxes is below:
<a href="#" id="opensign" onclick="setVisibility('sign');";>Sign In</a>
<div id="sign">
Blaslasd.
</div>

You can use a css class for hiding, which should be added from the beginning:
.hide {
left: 100%;
opacity: 0;
}
and a class for transitions:
.animated {
transition: left 1s;
-webkit-transition: left 1s;
}
Then in your javascript, add and remove the hide class.
You can see a demo on codepen here.

If you use shopify theme there will be jquery available.So if it is possible this will work for you :
http://jsfiddle.net/csdtesting/sy2upvjb/
JS
$('#sign').click(function () {
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide', {
direction: 'right'
}, 1000);
} else {
$('#userNav').hide('slide', {
direction: 'right'
}, 1000);
}
});
css
a {
color: #000;
cursor:pointer;
display:block;
}
#userNav {
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
<a id="sign">right-to-left</a>
<div id="userNav">Blaslasd</div>

Related

Sliding animation when hiding/showing a div

I have two divs, top and bottom. Both divs have dynamic height, the top div will show or hide depending on a variable.
I would like to add in a sliding animation to the top div when showing or hiding, but the bottom div should stick with the top div and slide with it too.
var hide = true;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");
trigger.addEventListener('click', function() {
if (hide) {
topdiv.classList.add('hide');
} else {
topdiv.classList.remove('hide');
}
hide = !hide;
});
div {
position: relative;
display: block;
width: 100%;
padding: 10px;
}
.top {
background: #999;
}
.body {
background: #555;
}
.hide {
display: none !important;
}
<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>
I tried adding transform animations, but the effect is only applied to the top div while the bottom div remains unanimated.
#keyframes topDivAnimate {
from {
transform: translateY(-100%);
}
to {
transform:translateY(0%);
}
}
Help is much appreciated.
I would use CSS transition rather than animation. I've found it easiest to do by animating the lower div rather than the upper one, and changing its position so that it covers the top one (or, of course, not). See demonstration below, I've made as minimal changes as I could to the CSS and JS:
var cover = true;
var trigger = document.getElementById("trigger");
var bottomdiv = document.getElementsByClassName("body")[0];
trigger.addEventListener('click', function() {
if (cover) {
bottomdiv.classList.add('cover');
} else {
bottomdiv.classList.remove('cover');
}
cover = !cover;
});
div {
position: relative;
display: block;
width: 100%;
padding: 10px;
}
.top {
background: #999;
}
.body {
background: #555;
transform: translateY(0%);
transition: transform 0.5s;
}
.cover {
transform: translateY(-100%);
}
<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>
Are you looking something like this? Then please try this:
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");
trigger.addEventListener('click', function() {
if ($('#topdiv').css('display') == 'none') {
$(topdiv).slideDown();
} else {
$(topdiv).slideUp();
}
});
div {
position: relative;
display: block;
width: 100%;
padding: 10px;
}
.top {
display: none;
background: #999;
}
.body {
background: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>
Try this code and see if that's the effect you wanted. It uses the Animate.css library so you'll need to link that in your <head></head>
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}
var hide = false;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");
trigger.addEventListener('click', function() {
if (!hide) {
topdiv.classList.remove('hide');
animateCSS('.body', 'slideInDown');
animateCSS('#topdiv', 'slideInDown');
} else {
animateCSS('#topdiv', 'slideOutUp', function() {
topdiv.classList.add('hide');
})
animateCSS('.body', 'slideOutUp');
}
hide = !hide;
});
Working Codepen demo of my solution
Here's some more explanation on how to use the Animate.css library.

Animate div on click to bottom and back to original position

I am trying to move a div to a certain position. The following piece of code works fine:
$('#image1').click(function() {
$('#div1').animate({
'marginTop' : "+=160px"
});
});
However, I would like to animate the div to its original position once the image1 is clicked again. Does anybody have an easy to use idea for this? Thanks
Another way:
function firstClick() {
$('#div1').animate({
'marginTop' : "380px"
});
$(this).one("click", secondClick);
}
function secondClick() {
$('#div1').animate({
'marginTop' : "0px"
});
$(this).one("click", firstClick);
}
$("#image1").one("click", firstClick);
#div1 {
width: 200px;
height: 200px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image1">image1</div>
<div id="div1"></div>
You can use a class with css transition for this. Example code -
HTML
<div class="main">
Hello
</div>
CSS
.main {
background: green;
width: 100px;
height:100px;
margin-top:0px;
transition: margin-top 1s;
}
.set_margin {
margin-top:100px;
}
jQuery
$('.main').on('click', function() {
$(this).toggleClass('set_margin'); // toggle class on click event
})
You can implement it like -
$('#image1').click(function() {
$('#div1').toggleClass('set_margin');
});
Fiddle
You can add class to #img! its clicked first time, and remove on the second time, using is as an indicator of dive being clicked.
Example:
$('#image1').click(function() {
if($('#image1').hasClass("clicked")){
$('#div1').animate({
'marginTop' : "-=160px"
});
$('#image1').removeClass("clicked");
}
else{
$('#image1').addClass("clicked");
$('#div1').animate({
'marginTop' : "-=160px"
});
}
});
One more way
var toggle = true;
$('#image1').click(function() {
if (toggle) {
$('#div1').animate({
'marginTop': "+=160px"
});
toggle = false;
} else {
$('#div1').animate({
'marginTop': "-=160px"
});
toggle = true;
}
});
#div1 {
height: 50px;
width: 50px;
background: black;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="image1">Toggle</button>
<div id="div1"></div>
Here and example with codepen live editor
var move = true
$('#image1').click(function() {
if (move) {
$('#div1').animate({
'margin-left': "+=160px"
}, move = false);
} else {
$('#div1').animate({
'margin-left': "0px"
}, move = true);
}
});
#image1 {
width:100px;
height:100px;
background:red;
cursor:pointer
}
#div1 {
width:100px;
height:100px;
background:green;
margin-left:0px;
}
<div id="image1">ClickMe</div>
<div id="div1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
By using toggleClass we can achieve this animation.
<style type="text/css">
.animation{
margin-top:160px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#image1').click(function(){
$('#div1').toggleClass("animation");
})
})
</script>
Here is JsFiddle link animate

Second toggel should be close when i click back to the first toggle

I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle
You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example
I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>
hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)

How can I use easing effects to this div that expands onclick, as well as fade in effects on the elements inside it?

I have two problems,
1) I have a div that expands onclick, (.panel) how can I use easing on it so it opens in a smooth way?
2) how can I make the ul list within the expanding div (.panel) fade in a few mili seconds after the div has expanded?
<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
JS
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200);
});
});
.panel {
width: 30px;
height: 21px;
overflow: hidden;
color:white;
background-color: grey;
}
.panel ul {
margin-left:10%;
color:white;
}
.mores {
width: 210px;
height: 170px;
overflow: hidden;
}
here is the fiddle JSFiddle
Many Thanks
I tried something, tell me if that's what you expected. http://jsfiddle.net/z2p0r5s9/11/
<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
<ul style="display:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
CSS
.panel {
width: 30px;
height: 21px;
overflow: hidden;
color:white;
background-color: grey;
transition: all 2s ease;
}
JS
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
setTimeout(function(){
$('ul').fadeIn();
},2000);
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200);
});
});
is this what you pretend?
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200, function(){
setTimeout(function() {
$(".options").fadeIn()
}, 75);
});
});
});
http://jsfiddle.net/lycrest15/z2p0r5s9/2/
It is using default easing but you can change it to the proper way you want. Just see documentation here: http://api.jquery.com/animate/

How to Animate (slide) content adjacent to content with jquery toggle()

I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks
See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
​
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});​
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}​
The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});

Categories

Resources