this might be a weird one but what I am trying to do is make a div slide up from the bottom of the screen when someone clicks an image. To paint this clearer, imagine the Windows desktop, and if you click the start menu image/icon, instead of the start menu popping up from the button, the entire start menu bar would slide up exposing the entire div.
What I'm doing now (forgive me as I have just learned JS and jQuery from codecademy) is using the slideUp function. However, this is causing the div to slide down out of sight instead of up, exposing the entire div. The goal is that when you click the button the div slides up, and if you click the button again (or anywhere outside the div) it'll slide back down leaving the top 60px exposed like before.
Here's my JS/jQuery code:
$('#start').click(function() {
$('#nav').slideUp('slow');
});
My HTML
<div id="nav" class="nav">
<img id="start" src="img/btn_start.png">
</div>
My CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
font-family: Helvetica;
}
.nav {
width: 100%;
min-width: 100%;
height: 500px;
background: #000;
color: #fff;
position: absolute;
bottom: -440px;
text-align: center;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}
.nav ul li {
display: inline;
}
.nav li {
padding: 20px;
margin-top: 80px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#start {
float: left;
}
Thanks, and I hope this isn't too ridiculous.
Instead of slideUp you should use
$('#start').click(function() {
$('#nav').animate({bottom: "0px"}, 1200);
});
...which will smoothly animate from the current location until the bottom is at 0px (i.e. aligned with the bottom of the containing element).
For even smoother results, checkout velocity.js (http://julian.com/research/velocity/), which does even smoother animation by synchronising with browser frame updates.
JsFiddle here: http://jsfiddle.net/11r46jnm/
You can also do this with CSS transitions instead. For stuff like this I like to hook my CSS into data attributes on the HTML:
<div id="nav" class="nav" data-nav-state="collapsed">
<img id="start" src="img/btn_start.png">
</div>
...use javascript to change the attributes...
$('#start').click(function() {
//toggle the nav element between two states
var currentState = $('#nav').attr("data-nav-state");
var newState = "collapsed";
if ( currentState === "collapsed" ) {
newState = "expanded";
}
$('#nav').attr("data-nav-state", newState);
});
Finally we use CSS to set the positions of the two states, and to ensure that transition is smooth. CSS transitions have much better performance than jQuery, so I recommend using them if you can:
#nav[data-nav-state=collapsed] {
bottom: -440px;
}
#nav[data-nav-state=expanded] {
bottom: 0px;
}
#nav {
transition: bottom 1.2s ease;
}
See this jsFiddle for a demo: http://jsfiddle.net/Lv2saepy/1/
Related
I'm making a menu that slides in from the right side of the screen when the menu icon is clicked. Thing is, I don't know how to create the jquery for it. Right now I was able to make the menu slide to cover half the screen after pageload, but can someone help me change it to animate after menu icon is clicked and then slide back to the right(left:100%) when menu icon is clicked a second time?
I can get it to work on pageload but not with:
$("button").click(function(){
Here is what I have that works:
CSS
#menulayer {
height: 100%;
width: 100vw;
background-color: #999;
position: fixed;
z-index: 1;
left: 100%;
}
JQ
$(document).ready(function(){
$("#menulayer").delay(3000).animate({left:'50%'});
});
I used jQuery's on for the click binding, rather than click due to improved memory usage and for handling dynamic elements added after initial load. To show and hide the menu, a simple toggleClass does the trick. You can see in the CSS we set the menu's initial state offscreen, and then, once the open class is added, we smoothly animate it onscreen.
Note: when moving DOM elements around, you want to use translate rather than left, right, etc. Animations are smoother this way and you'll avoid the glitchy behavior (or "jank") sometimes involved with non-optimized animations. [1]
$('.toggle-button').on('click', function() {
$('.menu').toggleClass('open')
})
.toggle-button {
position: absolute;
top: 50px;
left: 50px;
border: 1px solid #333;
}
.menu {
background: red;
display: inline-block;
padding: 20px 40px;
position: fixed;
right: 0;
transform: translateX(100%);
transition: 0.5s transform;
}
.menu.open {
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button">toggle menu</button>
<ul class="menu">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
[1] High Performance Animations
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
Mozilla.com has this tab on the top of their site that you can click and a menu drops down. I have a client who wants me to do the same thing but upside down, from the bottom half of the page. Apparently this is a really hard request. How do I make something like tabzilla that goes up and either overlaps or pushes the content away? Thanks!
Update: I love you guys.
Edit: http://hemakessites.com/mayukh/4/ Why does the top "Sign In/Register" pop down and the "Toggle" on the bottom pops up? I'm not seeing the difference besides 'top' and 'bottom' in the css. How does that change the direction of the popup?
Also, clicking the '337-9147' will expand the menu. I only want the button region to be clickable. How can I accomplish this?
You guys are awesome and I'm going to return the favor by answering some questions on here when I get time.
I took a similar approach as others, in that you set a div to have a fixed, or absolute position at the bottom of the screen (depending on whether the tab should always be visible, or only at the very bottom). Then, you can write some very simple javascript to vary the height of the element, and as the bottom is fixed, it will cause the tab to rise into the screen.
Essentially all you need is
.container{
position: absolute;
bottom: -1px;
}
And
$('.container').toggle(function(){
$(this).animate({height:'205px'}, 500)
},function(){
$(this).animate({height:'20px'}, 200)
});
Here's a jsfiddle demo.
Here's a jQuery solution, which is smoother than css3:
So, you'll want to do something like this jsfiddle (NOTE: This requires jQuery):
http://jsfiddle.net/cFkn2/
$(document).ready(function() {
$('#tab').click(function() {
if ($('#tab').css('height') == '20px') {
$('#tab').animate({
height: '100px'
}, 1000);
}
else {
$('#tab').animate({
height: '20px'
}, 1000);
};
});
});
and
#tab{
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
height:20px;
}
and
<div id="tab">CONTENT</div>
Style, edit, and add easing to taste.
I was lazy to make here click handler, so it is css3 only hover sample
I used fixed position with {top: 100%}, transition for animation, margin <0 to show;
HTML
<div id="menu">
<div id="handler">handler</div>
<div id="menucontent">
menu menu<br>
menu menu<br>
</div>
</div>
<div id="content">
<div> text text text</div>
<div> text text text</div>
<!-- many of them -->
<div> text text text</div>
<div> text text text</div>
<div> text text text</div>
</div>
CSS:
#content > div {
font-size: 2em;
height: 2.1em;
border: 1px solid black;
margin-top: 10px;
}
#menu {
left: 30px;
position: fixed;
font-size: 20px;
width: 300px;
height: 300px;
top: 100%;
border: 1px solid red;
background: white;
-webkit-transition: all 1s;
-mozilla-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu #handler {
position: absolute;
top: -40px;
background: green;
font-size: 30px;
height: 40px;
padding-left: 5px;
padding-right: 5px;
left: 10px;
}
#menu:hover {
margin-top: -300px;
}
with click, or
JS:
$(function() {
$('#menu #handler').click(function() {
$('#menu').toggleClass('shown');
});
});
in css change hover to class shown
#menu.shown {
margin-top: -300px;
}
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.
CSS
#acc-close-all, #to-top {
position: relative;
left: 951px;
width: 29px;
height: 42px;
margin-bottom: 2px;
display:none;
}
#acc-close-all a, #to-top a {
position: absolute;
float: right;
display: block;
height: 42px;
width: 29px;
overflow: hidden;
display:none;
cursor: pointer;
}
HTML
<div id="acc-close-all">
<a title="Close all open tabs"><!----></a>
</div>
<div id="to-top">
<a title="Back to top"><!----></a>
</div>
jQuery
// Scroll close all and bcak to top buttons with the page
$(window).scroll(function() {
var top = $(this).scrollTop();
$('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
});
I would like these tabs to fadeIn slowly when the user scrolls down the page and fade up when the user is near the top.
I can get it to work without the display:none and display:inline but it just doesn't show up when the user scrolls down the page. I've read this http://api.jquery.com/scroll/ but still can't get it to work.
NB: The page is only scrollable when the accordion is opened. Yes more than one accordion can be opened at any one time.
The reason you're not seeing your links appear onscroll is because their parent containers (#acc-close-all and #to-top) are also set to display: none and never set visible on scroll. You can change the CSS as follows to fix the issue:
#acc-close-all, #to-top {
position: relative;
left: 951px;
width: 29px;
height: 42px;
margin-bottom: 2px;
}
Alternatively you could set both parent containers to display: block in your scroll event handler.
Here's a simplified example with it working.