We Keep Coding

Run add class on different elements concurrently jquery

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;
}

Zoom Effect when Page is Loaded Doesn't Work as Wanted

I am trying to get an effect which is to zoom in on a logo centred on the page when the page is loaded. I am using the following HTML and JS code:
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<img id="logo" src="images/logo2.png" style="zoom: 200%; transition: zoom 1s ease-in-out;"/>
</div>
JS
document.addEventListener("load", pageFullyLoaded, true);
function pageFullyLoaded()
{
var elem = document.getElementById("logo");
elem.style.zoom = "300%";
}
The result is really odd.
It display the logo in it's normal size,
then it jumps on a super zoomed in version of the logo (> 1000%),
zoom in on the logo even more (1000% to 1500% say) for the duration of the transition,
jump back to the normal logo size and position (which is correct, and this is the final positon and size I want).
So obviously this technique doesn't work:
the jump at the beginning is ugly but I only suppose this happens because 2) is incorrect anyway. As it should start by default with a zoom value of 200% (which is defined in the style of the div) and then the JS should make it zoom to 300%. So there should be no jump visible really.
I don't understand why I get this incredibly zoomed in version of the logo at the start of the animation. Basically it's almost like if the entire image was filling up the screen.
Any idea on how to do this reliably, please? Thank you.

I would do this in only CSS like so:
Set the image to scaleX and scaleY 0 (or hide it in some other way)
On $(window).load or $('document').ready add a class with keyframe animations
Do whatever you need afterwards.
Fiddle
$(window).load(function(){
$('img.zoom').addClass('element-animation');
});
You can also listen to animation end events like so https://github.com/daneden/animate.css#usage
That library (Animate.css) is also pretty handy and you might be able to find some useful effects in it.

If you're looking to scale an image, you don't need to use zoom or transform or anything. Just alter the width directly and the browser will scale the image for you:
http://jsfiddle.net/C4JZv/
HTML:
<div class="wrapper">
<img class="tiny" src="http://placehold.it/200x150" />
</div>
CSS:
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: width 1s ease-in-out;
width: 200px;
}
.wrapper img.tiny {
width: 10px;
}
JS:
document.querySelector('.wrapper img').className = "";
EDIT: You mentioned in the comments that you wanted to see this done using transform. Again, it's just a case of having a shrunken image (using transform's scale), having a transition property and then removing the CSS class that shrinks the image:
http://jsfiddle.net/C4JZv/1/
HTML & JS: Same
CSS: Mostly the same, but with a couple of changes (plus a load of vendor prefixes):
.wrapper img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-ms-transition: -ms-transform 1s ease-out;
-o-transition: -o-transform 1s ease-out;
transition: transform 1s ease-out;
}
.wrapper img.tiny {
-moz-transform: scale(0.1);
-webkit-transform: scale(0.1);
-o-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}

Vertically center a button inside a responsive container with pure CSS?

So I want to make this thumbnail effect.
$(window).resize(setThumbHeight);
$(window).resize(centerBtn);
SEE HERE
As you can see I wrote some JQuery to set the container height and center the btn, which I think is pretty dumb.
I have a few questions:
1. How can I maintain the aspect ratio of the container without using JQuery.
2. How could I center the button vertically inside the container using pure CSS? (It seems someone had it done with table and table-cell)
3. Why background url is not working? (I have the line commented out in the CSS.)
Thanks guys.

Here's a simple cross-browser method to achieve what you're looking to do:
http://codepen.io/aecend/pen/KEvBa
I didn't bother with any of the CSS transitions, just focused on the centering. To maintain the container dimensions, only set the width of the outer thumbnail container, the height will automatically flex to fit. Also, the background url does seem to be working, the image itself was covering the background in your fiddle.
HTML
<div class="thumbnail">
<img src="http://placekitten.com/300/200">
<div class="mask center-in-container"></div>
<button class="button center-in-container">Enter</button>
</div>
CSS
.thumbnail {
width: 30%;
position: relative;
}
img {
display: block;
width: 100%;
height: 100%;
}
.center-in-container {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.button {
width: 50px;
height: 30px;
display: none;
}
.mask {
background-color: rgba(0,0,0,0.3);
display: none;
}
.thumbnail:hover .button {
display: block;
}
.thumbnail:hover .mask {
display: block;
}

You can center an element vertically with this trick:
change value of margin if you change width or height of your button.
-17px is half of height and -30px is half of width
.thumbnail-mask .btn{
position:absolute;
top:50%;
left:50%;
margin:-17px -30px;
}
and for zoom on picture you can use this:
.my-thumbnail:hover img{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);
}
and if you want display your picture with background css property, you must have height on your container .my-thumbnail.

Hashbug,
Aside from a JavaScript method, which, you have employed - there are no dynamic, cross-browser compatible solutions for what you are attempting to do.
If you still do not wish to use JavaScript, and are O.K. with this not working cross-browser, then you may want to take a look at CSS3's flexbox. As I said the flexbox is not supported by all browser versions yet, you can find out which here: caniuse.com. I made a fiddle to show your solution updated with flexbox here:
http://jsfiddle.net/jpatterson69/z8uCK/
.thumbnail-mask {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,0.4);
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
I did not include any of the "hacks" as other users have posted because they generally will cause you much more strife than is needed - your solution is the easiest compared to these. May I ask why you need to use the flexbox?

How to zoom out a div using animations?

I have a DIV that is covering the whole page (height and width are 100%). I am trying to use CSS (and possibly JavaScript) to create a zoom out animation effect so the DIV is smaller (making everything inside the div - its children - smaller as well) to a specific point on the page (middle of the page) and to a specific width and height (let's say 100 * 100px for example).
I am starting with the following code:
<div id="toBeZoomedOut">
<div>something</div>
<div><img src="background.jpg"></div>
</div>
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#toBeZoomedOut img {
height: 250px;
width: 250px;
}
#toBeZoomedOut:hover {
zoom: 0.5;
}
The issue with this code is that it zooms out on component down (the parent div) and immediately zooms out what's inside it then goes back to zoom in the components.
Basically it is a little buggy. Any helpful fixes to make it zoom out everything together? It would be great if I can zoom out everything together to a specific location on the page and to a specific width/height (for example, zoom everything out to left: 100px, top: 100px and the parent div should be: 100px * 100px and everything else is relative in size).
I understand this might be easier with JavaScript? Any help?
One final note, if you notice the animation is not really reflecting a zoom animation. Although this would be an additional plus, the actual zoom animation would be great.
JSFiddle link to make it easier: http://jsfiddle.net/HU46s/

I am using the universal selector to target everything inside of the parent container to have the css transitions applied to it.
The next thing I did was changed the inside contents width to a % for ease of scaling.
Here is the css:
#toBeZoomedOut * {
-webkit-transition: all 1s ease;
-moz-transition: 1s ease;
transition: 1s ease;
}
Finally, a fiddle: Demo

To make all images and div backgrounds zoom at the same time you have to use percentage size for #zoomer-inside elements and set a specific font-sizes...
However is not smooth, if you want a smoother result, I suggest you use a jQuery in combination with some animation() method or plugin.
Fiddle: http://jsfiddle.net/HU46s/1/
Code:
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#toBeZoomedOut div, #toBeZoomedOut img {
width: 90%;
font-size: 20px;
}
#toBeZoomedOut img {
height: 90%;
width: 90%;
}
#toBeZoomedOut:hover {
zoom: 0.5;
}
smoother by jQuery:
Fiddle: http://jsfiddle.net/HU46s/5/
Code:
jQuery - smoother solution (even less CSS):
$('#toBeZoomedOut').hover( /* change the animation speed as you want :) */
function(){
$(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s !
},
function(){
$(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s !
}
);
...with this only CSS you need is:
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
#toBeZoomedOut img {
width: 250px;
}

Cross-device CSS problems

I just tested my website with both Google Chrome Desktop and Mobile version, and it seems like the label for the slide-out menu is not displaying. It does work, it's just not displayed, and I have no idea why. Changing positions does not work here, because the slide-out design I'm using is relying on positions, and I need them to be fixed.
Related CSS:
#slideout #label {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
display:block;
float:right;
margin:46% 0 0 0;
padding: 0 2px 6px 2px;
font-size: 20px;
position: fixed;
left:-36px;
-webkit-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
-moz-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
-o-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
background-color:#fff;
border-bottom:0 !important;
border-radius:8px 8px 0 0;
}
#slideout.opened #label {
left: 86px;
}
JavaScript:
$('#label').on('click',function(){
$('#slideout').toggleClass('opened');
});
EDIT: I tried using this code:
#slideout #label {
position: absolute;
left: 90px;
}
#slideout {
position: relative;
}
But What happens is, the label is in the right place, but it is cut off and invisible.

position:fixed is unpredictable on mobile, you should be able to fix it by switching to position:relative; even though that may be difficult. There is some decent coverage on this here: http://www.quirksmode.org/blog/archives/2012/10/budding_consens.html

Look at the opacity property of your slide panel.
You set opacity to 0.3 when hiding the panel, your label is inside your panel, so it fades too.
But it looks like there is some problem in chrome mobile, and opacity property. the button disappears completely. You should try to put it outside your panel. When I disable the opacity : 0.3 of the slide panel in chrome inspector, the label appears.
I think you should investigate this.

Try the following in addition to what you have:
#slideout {
position: relative;
}
#slideout #label {
position: absolute;
top: 46%;
right: -10px; (approximate)
}
Obviously, these are overrides for a couple, so integrate them at your discretion. Also, remove the float: right;

That's only a guess, but the problem might come from the javascript event handling which is different on a mobile because the event is actually different. I guess the click event is triggered twice on mobile, something like "touch" or "mousedown", so therefore, the event happening twice, the toggleClass() adds and remove the wanted class. So either you detect mobile with javascript in order to add the correct event
Detecting a mobile browser (detect mobile)
jQuery mobile (click event) (appropriate event)
Or you change the toggle class for "addClass" and "removeClass" with a timer. Something like
var animating = false;
var open = false;
$('#label').on('click',function(){
if (!animating) {
animating = true;
if (open) {
$('#slideout').removeClass('opened');
} else {
$('#slideout').addClass('opened');
}
setTimeout(function() { animating = false }, 500); // 500 = 0.5s of css animation
}
});
Hope this helps­.

use postion:fixed in your css along with respective width-height property.