Develop Reference

Queue on click function

I am pretty new to jQuery and I am having a bit of difficulty adapting to it being a Java nerd.
I am trying to make these 3 boxes so that when you click one of them, it comes forward and the two in the back dim and stay there, in the back. The problem is that, I want to make it so when you click more than 1 box consecutively, the second box clicked doesn't come forward until the animation ends, much like a queue of box clicks. Right now it's all mixed up and the dimming is fine but the boxes come forward as soon as I click them and not when they should.
I tried callbacks and deferred to no avail.
Here is the code:
Javascript:
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
Here is the JSFiddle:
https://jsfiddle.net/asger/5yvvgoda/14/
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
#backgroundbox {
position: absolute;
width: 400px;
height: 200px;
background-color: #E5E8E8;
z-index: -5;
border-style: solid;
border-width: 1px;
}
.box_listener {
position: absolute;
width: 120px;
height: 120px;
background-color: white;
border-style: solid;
border-width: 1px;
}
#redbox {
left: 270px;
top: 20px;
border-color: red;
z-index: 0;
}
#bluebox {
left: 230px;
top: 60px;
border-color: blue;
z-index: 0;
}
#greenbox {
left: 210px;
top: 77px;
border-color: lightgreen;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundbox">
<div class="box_listener" id="redbox">
</div>
<div class="box_listener" id="bluebox">
</div>
<div class="box_listener" id="greenbox">
</div>
</div>
Cheers and thanks!

A more bulletproof approach is to not use jQuery animations at all and instead use CSS transitions. The reason for this is twofold; CSS transitions can be automatically reversed and they can be GPU accelerated. It also means you don't have to artificially wait for the transition to complete before allowing user input.
To accomplish this, just set up two CSS classes; One that tells the elements you're going to animate how they should transition. The other class changes the values on the element, which causes the transition to happen. Then all jQuery needs to do is addClass() and removeClass() in order to cause the transitions to occur.
Below is an example of it in action. I've highlighted the most important aspects with comments.
$('.btn').on('click', function() {
// remove the active class from all buttons,
// this will reverse the transition
$('.btn').removeClass('active');
// apply it to only the current button clicked,
//this will start the transition
$(this).addClass('active');
});
.btn {
display: block;
width: 200px;
padding: 10px 20px;
margin-bottom: 5px;
background: cornflowerblue;
border: 0;
cursor: pointer;
/* set up a transition on any css transformations like
translating, scaling, rotating, etc. */
transition: transform 300ms ease-in-out;
}
/* when this class is added to the button it will scale it, but the
transition already on the button will make sure it happens slowly */
.active {
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>
<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>

How to Combine Two CSS Animations

I'm trying to replicate the menu design used by:
https://www.pandaexpress.com/menu/appetizers
I think I am at the point where I need to use javascript/jquery, but I'm very new and unsure of my next step. When the user hovers over an image the image seems to slide into focus and display information below. I have tried to isolate this into separate actions, modeled by the following jfiddles:
https://jsfiddle.net/Lrqu8L0q/3/ (enlarges and focuses image on hover)
https://jsfiddle.net/4ud7wnop/1/ (slides down to reveal text on hover)
I tried combining them but when I add the
<p>This text is displayed on a downward slide after hover</p>
to the first jfiddle the paragraph isn't hidden.
Now I'm having trouble trying to think of a way to combine the both. I think I need to use javascript/jquery to create a function that applies the slide down to reveal text after the image enlarge has been completed. I'm very new to web design as a whole and am especially shaky with javascript and jquery.
I was wondering if I could write a function that checks if the image has expanded on enlarge yet, and after it's reached a desired height/width run the text slide function. Really not sure how to do this.. could someone point me in the correct direction?

I merged them together here: https://jsfiddle.net/danbovey/53ya31gm/
The main problem was, you need the image to be larger to cover over any detail text you may have.
I have commented on most changes I added in the fiddle. But here's the key parts:
I renamed the bg element to tile, it seemed more appropriate. Instead of working with height for the .slide-down class, I created a transform on the details div when the tile is hovered.
.tile:hover .details {
transform: translateY(150%);
}
You can learn about CSS transforms here: http://css3.bradshawenterprises.com/transforms/
The percentage of the transform can be calculated as the height of img / height of details - 300px / 200px = 150%
To create the growing effect, a pseudo :before element adds a white area the same size of the image before the tile, and when hovered, grows to 25px around each edge. And an identical element is added to the details div.
.tile:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
transition: all 0.4s ease;
content: '';
}
.tile:hover:before {
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
}

Is this what you want here?
https://jsfiddle.net/Lrqu8L0q/9/
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
border-radius: 2px;
}
.bg:hover {
transform: scale(1.25)
}
.bg{
width: 150px;
height: 110px;
background-color: teal;
border-radius: 2px;
}
.slide-down {
border-radius: 3px;
height: 60px;
width: 150px;
position: relative;
transition: height 0.3s;
-webkit-transition: height 0.3s;
text-align: center;
overflow: hidden;
background-color: teal;
}
.bg:hover .slide-down {
height: 140px;
}
.container{
position: relative;
left: 150px;
top: 50px;
}
<div class="container">
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
</div>
Basically what you need to do is put both your requirement into 1 combined object (in this I mean put both the Image & Text inside 1 container) like in the above example
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
Both of them are put inside 1 container with class .bg, then what you want is to hover the container (not the thumbnail or description itself) and trigger both the scaling & slide-down the menu detail, you can do this by adding the CSS
.bg:hover { ... }
For the scaling, you need to put it together with the container so all the elements inside will be scaled to, then for the description inside it, you need to use
.bg:hover slide-down { ... }
This is where you set the animation that will expand the description of the menu (for explanation, this CSS will trigger on .bg hover, and applied to the element .slide-down inside of it)

Partially exposed div to slide up when image is clicked

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/

How to make an interactive sidebar with jQuery and CSS3?

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

Difficulties causing html div to slide horizontally

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.