I'm currently working on a website, and I got a navigation bar, which I placed at the bottom of the page, I want to make it so that when I click on one of my buttons, the navigation bar slides up to the top of my page, and when i click on that same button again, it goes back to its original position (bottom of the page).
Ive already got this piece of code written in JQuery to make my navigation bar slide up:
jQuery:
$(document).ready(function () {
$('.nav-top').click(function () {
$('#navigation').animate({ "top": "0" }, 500);
})
});
HTML:
<nav id="navigation">
<div class="logo">
<span class="color">B</span>AICA
</div>
<div id="menu">
<ul>
<li>
About me
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
CSS:
#navigation {
background-image: url('../images/header/navigation/bl-opacity50.png');
*background-image: url(../images/header/navigation/bl-opacity50.png);
background-repeat: repeat;
position: absolute;
width: 100%;
height: 100px;
z-index: 1000;
}
Do i have to write some kind of IF statement?
EDIT:
It all worked out fine, but when I try to make a second button, for making my navigation bar move back to the bottom of my page, its not doing anything, so what i want is a button for moving the navigation bar to the top of the page, and a button for moving it to the bottom of the page?
Use .toggleClass and keep the positioning in the CSS:
http://jsfiddle.net/WkFP2/
Yes, You have to write an if statement in your jquery code. The reason is , your jquery code will work only for the first time, where it moves the div from bottom to div. When you click it again, it will still make the element to move to top only. So you need an if statement which calculates the current position of your div and move it to either top or bottom.
$(document).ready(function () {
$('.nav-top').click(function () {
if($('#navigation').position.top()!=0)
$('#navigation').animate({ "top": "0" }, 500);
else
$('#navigation').animate({ "bottom": "0" }, 500);
})
});
You can add a css transition with a .toggleClass if you can set the height in the #navigation.top styling (using 85% as an example).
#navigation.top {
top: 85%;
}
The transitions
#navigation {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: absolute;
width: 100%;
height: 100px;
z-index: 1000;
top: 0;
border: 1px solid #333;
}
Here's a fiddle (forked from a previous answer).
http://jsfiddle.net/CmbPJ/
Related
I'm trying to use the same button to open and close a menu, I'm sure this is super simple but I'm new to the world of jQuery. I'm using the Wordpress builder 'Oxygen' if that helps. Here's my code:
The modal is an in-built feature in the website builder so I can't provide much code on that. It's basically set to trigger when element with class "open" is clicked, and close with element class "oxy-modal-close".
jQuery
jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('open oxy-modal-close');
});
HTML
<div id="toggle" class="open">
<img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>
CSS
#plus {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 0.3s;
width: 35px;
position: fixed;
top: 20px;
right: 20px;
}
.rotate {
transform: rotate(45deg);
}
Basically on the 2nd click, the class is re-adding the class "open", which is causing the menu to flicker as the two actions are conflicting with each other. Video here - https://gph.is/g/ZnNQddo
I have tried adding a delay to the class "open", but for some reason the delay is only working on the first click - on the second it's changing class instantly. This is the code I'm trying for that.
jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('oxy-modal-close');
var el = jQuery("#toggle");
window.setTimeout(function() {
el.toggleClass('open');
}, 500);
});
You are referencing the id again within the click - you need to reference $(this)... to toggle the class on the click
Also - you need to start with one of the states - that way it can toggle the class to the other state on each click as per the snippet (the cross icon is on the right of the snippet widow as per styling ) - now when you click it rotates as intended.
$("#toggle").click(function() {
$('#plus').toggleClass('rotate');
$(this).toggleClass('open oxy-modal-close');
});
#plus {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 0.3s;
width: 35px;
position: fixed;
top: 20px;
right: 20px;
}
.rotate {
transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle" class="open">
<img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>
Here's an example of what I am trying to recreate: https://www.hioscar.com/get-quote/
When a user has finished entering information into the input area or selected an option the current line will animate (using translate & opacity, I believe) and the next line will come into view.
I've started something very basic just to get a feel for how it's meant to work using on hover but I'm not sure on how to complete replicate this animation in my own form.
div {
margin-top: 500px;
}
div:hover {
transform: translate(0px, -300px);
opacity: 0.3;
transition: opacity 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
So you had several problems, you were only animating opacity and if you move the div from under the mouse cursor when you hover it, it won't work.
So I activated all transitions, not just opacity, made the div as tall as the browser, and used the div's internal padding.
body, html {
/* needed so that the div can also be 100% of window */
height: 100%;
}
div {
height: 100%;
padding-top: 500px;
}
div:hover {
padding-top: 300px;
transition: all 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>
I want to slide a menu bar from the left and at the same time slide the page to the right using CSS and jquery. I can do the sliding no problem but what is happening is the body slides left, then once that is complete the menu slides out
JS
$('body').toggleClass('slide-left', '');
$('.mid-side-menu').toggleClass('slide-out', '');
CSS
.slide-left {
position: fixed;
right: 300px;
transition: right 0.5s;
}
.slide-out {
transition: right 0.5s;
right: 0px;
}
How do I run the two commands at the same time?
I don't think you can accomplish what you want with your current implementation. You would need to add the same class to both items, but have the class act differently based on what it is applied to.
For example:
jQuery
$('.mid-side-menu, body').toggleClass('slide-out', '');
CSS
body.slide-out {
position: fixed;
right: 300px;
transition: right 0.5s;
}
.mid-side-menu.slide-out {
transition: right 0.5s;
right: 0px;
}
Edit: this is an example of what I'm trying to do: http://codepen.io/anon/pen/OVzOjW
(Note that the menu and nav don't perfectly align, as the nav transition is being controlled by the CSS, and the menu delay is being controlled by the JS.)
I'm trying to create a slideout menu that fires some JS during the slide animation.
On page load, nav is fixed hidden to the right of the viewport and menu is fixed to the top right of the viewport. nav is wider than menu. On menu click fires the slideout animation of nav. I want to add a namespace class to nav that changes the CSS properties of menu. I want to do this the moment the visible portion of the nav becomes equal in width to the width of the menu, at which point the menu will just become part of the nav for the rest of the slideout.
I need to do this with some combination of CSS3 and vanilla JS (jQuery is unavailable). I can do the nav animation with CSS or JS easy enough, but timing the CSS property changes on menu is what I can't figure out.
I've tried to write a loop that constantly evaluates the right property value of nav to see if it's >= the width of menu (using CSS to do the transition), but that seems to fire the entire loop right away.
I'm not picky over a CSS vs JS solution for the animation itself, but I'd prefer CSS as I feel it's easier to control the transition settings and it runs smoother.
Relevant code below. Any help would be greatly appreciated!
HTML:
<nav id="nav">
<a id="menu" href="#">Menu</a>
Foo
Foo
Foo
</nav>
CSS:
#nav {
position: fixed;
right: -100px;
top: 0;
width: 100px;
}
#nav.expanded-nav {
right: 0;
}
#nav.expanded-menu #menu {
position: absolute;
right: auto;
top: auto;
width: 100%;
}
#menu {
position: fixed;
right: 0;
top: 0;
width: 50px;
}
You can do that with CSS animation chaining or animation-delay or simple setTimeout of Vanilla JavaScript
Check out the below code for CSS way..
$("#go").click(function() {
$(".container").addClass("demo");
});
.container {position: relative;}
#nav, #menu {
height: 100px;
width: 100px;
position: absolute;
}
#nav {
top: 10px;
left:-100px;
background: #000;
}
#menu {
top: 150px;
left:200px;
background: #f00;
}
.demo #nav {
-webkit-animation: demo 1s, demo1 2s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-timing-function: ease-in-out;
}
.demo #menu {
-webkit-animation: demo1 2s;
-webkit-animation-delay: 1s;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes demo {
0% {
left: -100px;
}
100% {
left: 200px;
}
}
#-webkit-keyframes demo1 {
0% {
left: 200px;
}
100% {
left: 300px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go">Go</button>
<div class="container">
<div id="nav"></div>
<div id="menu"></div>
</div>
This was actually way easier than I initially thought. It can actually rather easily be solved by setting a min-width on menu and allowing it to "grow" to the full length of the parent `nav' when it slides out. Demo here: http://codepen.io/anon/pen/EjobEJ
I'm trying to have pre-built classes that I can swap in and out with jQuery, and thereby trigger animations with jQuery that are defined in the CSS. But for some reason, whenever I use addClass or removeClass such that it causes 'right' to go from -5% to 0%, there is no transition. The element's style immediately changes with no animation.
My HTML:
<body>
<ol style="list-style-type:none">
<li style="top: 20%;" id="about" class="pane closed hidden" onclick="function(event){}">about</li>
<li style="top: 25%;" id="education" class="pane closed hidden">education</li>
<li style="top: 30%;" id="experience" class="pane closed hidden">experience</li>
<li style="top: 35%;" id="contact" class="pane closed hidden">contact</li>
</ol>
</body>
My CSS:
.pane {
transition: opacity 400ms linear, width 80ms ease-in-out, right 200ms ease-out;
-webkit-transition: opacity 400ms linear, width 80ms ease-in-out, right 200ms ease-out;
width: 5%;
height: 3%;
text-align: left;
padding-left:20px;
padding-top:0.5%;
position: fixed;
background-color: lightgray;
overflow:hidden;
right: 0%;
}
.pane.hidden {
right: -5%;
}
.pane.closed {
opacity: 0.6;
}
.pane:hover {
width: 8%;
opacity: 0.8;
}
My Javascript:
$(document).ready(function() {
setTimeout(function(){$('#about').removeClass('hidden');}, 200);
setTimeout(function(){$('#education').removeClass('hidden');}, 400);
setTimeout(function(){$('#experience').removeClass('hidden');}, 600);
setTimeout(function(){$('#contact').removeClass('hidden');}, 800);
});
For clarity, the class changes do happen in sequence spaced by 200ms, as setTimeout is supposed to do. The problem is that when they trigger, they appear immediately instead of sliding in.
Solved it. I had Twitter Bootstrap CSS included also. Apparently something in there was conflicting, which is why it worked in the jsFiddle. If I had to guess, it probably uses a class called "hidden" that was changing the transition value or something (something I should have thought of). Thanks for your time and effort, those who responded.