I have this icon for exiting modal which stays perfectly fixed when scrolling down on Chrome, but I noticed it doesn't work in other browsers like Firefox and Safari.
I also notited that the icon is little off in the right corner but after split second it reposition itself where it should be. Any ideas what's causing this? Is it because the parent which is the modal is of position fixed and you can't have fixed position inside fixed container? I'm still learning HTML.
.outer {
position: fixed;
top: 0;
width: 70px;
cursor: pointer;
z-index: 3;
right: 0;
margin: 20px 20px 0px 0px;
}
.inner {
width: inherit;
text-align: center;
}
.inner::before, .inner::after {
position: absolute;
content: '';
height: 1px;
width: inherit;
background: #FFC107;
left: 0;
transition: all .3s ease-in;
#animatedModal3 {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow-y: auto;
z-index: 9999;
opacity: 1;
animation-duration: 0.6s;
}
.inner::after {
bottom: 50%;
transform: rotate(-45deg);
}
.inner::before {
top: 50%;
transform: rotate(-45deg);
}
<div id="animatedModal3" class="bg-black">
<div class="close-animatedModal3 py-3 bg-black">
<div class="outer">
<div class="inner">
<label class="label2">Back</label>
</div>
</div>
</div>
</div>
You have a bracket that is not closed here .inner::before, .inner::after {...
Related
So I have this hamburger menu on the right side of the navbar which when clicked should pop open overlay and be full screen black and un-scrollable(just the overlay) but right now when it's clicked is scrollable and not full screen black, I don't know what went wrong, any help would be really appreciated, thanx!
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.5);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: black;
color: white;
height: 100%;
width: 100%;
position: fixed;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
Home
About
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
See adjustments to the CSS inline below, but here are the major points:
The overlay should not be using Flexbox. If you want the layout within the overlay to use Flexbox, then set that up on the elements it contains.
The element itself should not be in the HTML as a child of the main content if you are going to size it using percents, because then it will only be as big as the parent. Instead, use vh and vw (Viewport Height and Viewport Width) units.
Set the top and left CSS properties to position the overlay at the top-left of the screen.
Don't use visibility to hide the overlay, use display:none and then display:block to bring it back.
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
color: white;
}
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.5);
}
.menu.open .menu-circle {
transform: scale(60);
}
<div class="menu-overlay">
Home
About
</div>
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Thanks to #Scott Marcus for fixing the layout but the overflow was still not working so I added a toggle-class in js, It works just fine but lemme know otherwise if it contains any DOM errors. Cheers!
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.no-scroll{
overflow: hidden;
}
I found a nav layout I would like to use but I seem to have run into 2 problems.
problem #1 the transitions in the css do not seem to be transitioning smooth when scrolling up or down.
problem #2 if the scroll position is not zero I do not want mainnav to shrink and i want the top nav to show or hide when i scroll up or down.. thats hard to word so what I am trying to accomplish exactly is the following
https://www.battlefield.com/games/battlefield-4/classes
now when you scroll down it hides the top nav but if you scroll just a little each way it will show or hide thats what I am trying to do.. but I dont want the 2nd nav to scale down unless the top is 0
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition-duration: .4s;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: transform .3s, width .3s;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: transform .3s, width .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>
Demo
http://jsfiddle.net/gos4hwp9/52/
Explanation
Added transition: all ease-in-out .4s for smooth transitions of all properties
If scrollTop > 0 added margin: 0px and border-radius: 0px to bottom (primary) nav, Else made margin and border-radius same as initial state
If scrollDir == "down" added translateY(-50px) to header, Else removed translateY
Moving the whole header will move both navs which is nice as compared to moving them individually
I've slightly changed your transitions and added transitions to the classes which you toggle.
body {
margin: 0px;
}
.hwrap {
display: block;
position: fixed;
width: 100%;
}
.netnav {
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
z-index: 1;
transition: .3s all;
}
.netnav.show-nav {
top: 0;
transition: .3s all;
}
.netnav.hide-nav {
transform: translate3d(0, -40px, 0);
transition: .3s all;
}
.mainnav {
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: .3s all;
width: calc(100% - 60px);
}
.mainnav.scrolled {
top: 0;
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
transition: .3s all;
}
I followed the link you provided and edit the JavaScript and CSS.
Fixed the transitions in the CSS that does not seem smooth in transitioning when scrolling up or down using JavaScript.
You may visit this pen that I edited based on your snippet, and play around with it.
$(window).scroll(function(){
if ($(this).scrollTop() > 15) {
$('.netnav').addClass('hide-nav');
$('.netnav').removeClass('show-nav');
$('.mainnav').addClass('RemoveTop');
}
else {
$('.netnav').addClass('show-nav');
$('.netnav').removeClass('hide-nav');
$('.mainnav').removeClass('RemoveTop');
$('.mainnav').removeClass('scrolled');
}
});
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.mainnav').addClass('scrolled');
}
else {
$('.netnav').removeClass('scrolled');
}
});
body {
margin: 0px;
}
.hwrap{
display:block;
position: fixed;
width: 100%;
}
.netnav{
position: fixed;
height: 40px;
width: 100%;
margin: 0;
padding: 0;
background-color: blue;
transition: all .3s;
z-index: 1;
}
.netnav.show-nav {
top: 0;
transition-duration: .4s;
}
.netnav.hide-nav {
transform: translate3d(0,-40px,0);
transition-duration: .4s;
}
.mainnav{
position: fixed;
height: 68px;
z-index: 3;
background: blue;
}
.mainnav {
border-radius: 4px;
left: auto;
margin: 0 auto;
top: 50px;
position: relative;
transform: translateY(15px);
transition: all .3s,width .3s;
width: calc(100% - 60px);
}
.mainnav.RemoveTop {
top: 0px;
}
.mainnav.scrolled {
height: 60px;
border-radius: 0;
transform: translateY(0);
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
<div class="netnav">net nav</div>
<div class="mainnav">main nav</div>
</header>
<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>
I created a popup window using CSS. It is working fine in google chrome; however, it is not displaying in Safari as expected. Above photo is in Safari and the bottom photo is in chrome.
The following code is what I used to create the popup window:
.modal-container {
position: fixed;
background-color: #fff;
left: 50%;
width: 80%;
height: 620px;
max-width: 900px;
padding: 20px;
border-radius: 5px;
-webkit-transform: translate(-50%, -200%);
-ms-transform: translate(-50%, -200%);
transform: translate(-50%, -200%);
-webkit-transition: transform 500ms ease-out;
transition: transform 500ms ease-out;
}
.modal:before {
content: "";
position: fixed;
display: none;
background-color: rgba(0,0,0,.8);
top: 0;
left: 0;
height: 100%;
width: 100%;
}
And this following code is what I used to create my header
.box {
position: fixed;
top:0px;
left: 0;
width: 100%;
padding-top: 20px;
background-color: #fff;
overflow: hidden;
display: block;
z-index: 900;
}
Does anyone have an explanation why in chrome everything looks fine, but in safari not ?
Thanks
here is my CodePen demo or you can run the snippet below.
In the original script, the front face of the cube is a slider, and when I hover my 'info-box' it shows the right side of it with some description (<p> an <a>).
The expected behavior is that as long as the user stays on the description, the element keeps having the .hover class given in the $('#info-box').hover() function
All was working fine until i tested it on chrome :(...
From what I understand, it seems to fires multiples mouseOver/mouseOut events when hovering and it messes and flicker everything up.
Should I use a setTimeout ?
$('.slide-info').click(function() {
$(this).parent().toggleClass('hover');
})
.hover(function() {
$(this).parent().addClass('hover');
},
function() {
$(this).parent().removeClass('hover');
});
$('.right').hover(function() {
$(this).parent().parent().addClass('hover');
},
function() {
$(this).parent().parent().removeClass('hover');
});
h1 {
text-align: center;
}
body {
background-color: #333;
}
.Cube-container {
width: 500px;
top: 20px;
height: 150px;
perspective: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
transform-origin: 50% 50% -250px;
}
.Cube {
transition: all .5s ease-out;
transform-style: preserve-3d;
backface-visibility:hidden;
}
.front,
.right {
height: 150%;
text-align: center;
padding-top: 10px;
backface-visibility: hidden;
}
.Cube-container.hover .Cube {
transform: rotateY(90deg);
transform-origin: 50% 50% -250px;
}
.front {
transform-style: preserve-3d;
transition: all .5s ease-out;
background-color: #fc8;
position: relative;
}
.right {
background-color: #8cf;
position: absolute;
top: 0px;
left: 0px;
height: calc(100% - 10px);
/* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/
width: 100%;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: 0 0;
}
.ol
/* OverLay */
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide-info {
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 15px;
cursor: pointer;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cube-container">
<div class="ol Cube">
<div class="ol right">
<h2>Right side</h2>
<p>While we hover that side, parent element keeps having the .hover class, making it visible</p>
</div>
<div class="ol front">
<h2>Front</h2>
<p>Hover the info box please :)</p>
</div>
</div>
<div class="ol slide-info">
<h3>INFO</h3>
</div>
</div>http://stackoverflow.com/questions/ask#
The problem was that I used backface-visibility: hidden on parent element. (see commented line in snippet)
Crazy but that solved my problem on Chrome browser, now everything works fine.
$('.slide-info').click(function() {
$(this).parent().toggleClass('hover');
})
.hover(function() {
$(this).parent().addClass('hover');
},
function() {
$(this).parent().removeClass('hover');
});
$('.right').hover(function() {
$(this).parent().parent().addClass('hover');
},
function() {
$(this).parent().parent().removeClass('hover');
});
h1 {
text-align: center;
}
body {
background-color: #333;
}
.Cube-container {
width: 500px;
top: 20px;
height: 150px;
perspective: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
transform-origin: 50% 50% -250px;
}
.Cube {
transition: all .5s ease-out;
transform-style: preserve-3d;
/*backface-visibility:hidden; <-- Causing the problem */
}
.front,
.right {
height: 150%;
text-align: center;
padding-top: 10px;
backface-visibility: hidden;
}
.Cube-container.hover .Cube {
transform: rotateY(90deg);
transform-origin: 50% 50% -250px;
}
.front {
transform-style: preserve-3d;
transition: all .5s ease-out;
background-color: #fc8;
position: relative;
}
.right {
background-color: #8cf;
position: absolute;
top: 0px;
left: 0px;
height: calc(100% - 10px);
/* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/
width: 100%;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: 0 0;
}
.ol
/* OverLay */
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide-info {
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 15px;
cursor: pointer;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cube-container">
<div class="ol Cube">
<div class="ol right">
<h2>Right side</h2>
<p>While we hover that side, parent element keeps having the .hover class, making it visible</p>
</div>
<div class="ol front">
<h2>Front</h2>
<p>Hover the info box please :)</p>
</div>
</div>
<div class="ol slide-info">
<h3>INFO</h3>
</div>
</div>http://stackoverflow.com/questions/ask#
here I am trying to move a div left to right with jquery. The js I have written is partially working. I can move the div as intended (left to right) in some pages in Chrome, Opera and Yandex browser, but it does not work at all in firefox, so I believe the implementation is not up to the par and there must be some more concrete and efficient ways of doing it. With the following code snippet, a div (a fb like pop-up) shows up followed by page load a few seconds later and the effect is sliding the div from left to right. There is a close button. Upon clicking the close button, the div shrinks back (now right to left effect). I have given full code with style for the ease of full understanding. Any insights you offer to me will be of great help. Thank you. (the js code is given at the end)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class = "modal-prompt modal-prompt-shown" id = "fb_like" style = "display: none; z-index: 10000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
<style>
.modal-overlay {
/* overflow-y: scroll; */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.5);
/* dim the background */
cursor: pointer;
}
.modal-close-half-page {
background: none;
color: white;
font-weight: bold;
position: fixed;
right: 50px;
font-size: 14px;
}
.modal-prompt-half-page {
display: block;
height: 100%;
position: fixed;
width: 50%;
background-color: #1fc2ff;
top: 0;
left: 0;
z-index: 1000000;
}
.modal-prompt-half-page-arrow {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #1fc2ff;
position: absolute;
top: 50%;
right: -30px;
margin-top: -30px;
}
.modal-prompt-half-page-header {
font-weight: bold;
font-size: 57px;
padding: 0 40px;
text-align: right;
line-height: 58px;
color: white;
text-transform: inherit;
top: 50%;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-bottom: 0;
}
.social-prompt-button-facebook {
width: 101px;
height: 101px;
-moz-border-radius: 101px;
-webkit-border-radius: 101px;
border-radius: 101px;
background-color: white;
position: absolute;
left: 110%;
top: 50%;
margin-top: -51px;
}
.social-prompt-button-facebook .fb-like {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -24px;
}
.modal-prompt-half-page {
left: calc(-40% - 30px);
transition: left 0.4s ease;
width: 40%;
min-width: 450px;
}
.modal-overlay {
opacity: 0;
transition: opacity 0.4s ease;
top: 0;
}
.social-prompt-button-facebook {
overflow: hidden;
position: fixed;
top: 0;
bottom: 0;
left: calc(40% + 60px);
margin: auto 0;
width: 101px;
height: 101px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
transition: height 0.4s ease, width 0.4s ease, transform 0.4s ease;
}
.modal-copy-container{
font-size: 5vw;
line-height: 5vw;
margin-top: 0;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.modal-prompt-shown .modal-overlay {
opacity: 1;
}
.modal-prompt-shown .social-prompt-button-facebook {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#media (max-width: 1125px) {
.modal-prompt-half-page {
width: 450px;
left: -480px;
}
.modal-prompt-shown .modal-prompt-half-page {
left: 0;
}
.social-prompt-button-facebook {
left: 510px;
}
.modal-copy-container {
font-size: 800 normal 3.125rem / 3.125rem WorkSans, sans-serif;
/* line-height: 56px; */
}
}
</style>
<div class = "modal-overlay"></div>
<div class = "modal-prompt-half-page">
<div class = "modal-close modal-close-half-page" onclick = "closeFB();">Close</div>
<h6 class = "modal-prompt-half-page-header modal-copy-container">If you liked reading this story, then Like our page!</h6>
<div class = "modal-prompt-half-page-arrow"></div>
<div class = "modal-prompt-half-page-cont clearfix">
<div class = "social-prompt-button-facebook">
<div class = "fb-like fb_iframe_widget" data-href = "#" data-layout = "button" data-action = "like" data-show-faces = "false" data-callback-id = "genmodalfb" data-keen-tracking-name = "newUserModalV1" data-keen-social-channel = "facebook" data-keen-custom = "Halfpage 1.32" fb-xfbml-state = "rendered" fb-iframe-plugin-query = "action=like&app_id=141861192518680&container_width=0&href=https%3A%2F%2Fwww.facebook.com%2FMicMedia&layout=button&locale=en_US&sdk=joey&show_faces=false">
<span style = "vertical-align: bottom; width: 49px; height: 20px;">
<iframe name = "f1be53ad29d6424" width = "1000px" height = "1000px" frameborder = "0" allowtransparency = "true" allowfullscreen = "true" scrolling = "no" title = "fb:like Facebook Social Plugin" src = "#" class = "" style = "border: none; visibility: visible; width: 49px; height: 20px;"></iframe>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
// $('.modal-prompt').css('display', 'block').fadeIn("slow", function () {});
$('.modal-prompt').animate({width: 'show'});
}, 5000);
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".modal-close").click(function () {
$(".modal-prompt").animate({
width: "hide"
});
});
});
</script>
Toggling 'hide' defaults to right-to-left
It doesn't work at all. I'm not sure why you're using so much code, but all you have to do for sliding to the left is use the JQuery animate function, like so:
$('#elementId').animate({
left: '50%',
}, 500 );
You can do this in sequence as to make it left to right and vice versa. No CSS is needed for animations or anything, just the basic stylings.