Develop Reference

Css transform animation from right to left

I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE

Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.

Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});

Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});

JS Slide toogle sidebars out and expand content div

I want to slide out my both sidebars and expand the width of my middle content div but at the same time and on a again click I want to toogle it back to original.
What I tried so far
$('.headbar').click(function () {
$(".leftside").animate({width: 'toggle'});
$( ".rightside" ).animate({
width: "toggle"
}, 300, function() {
$(".content").animate({width: '1200px'});
});
});
My Problems
headbar is flashing when animation start (but guess its CSS bug)
content is not toggle back to original
My Concept for understanding

I would approach this using a CSS class transition effect toggled by jQuery instead of using jQuery animate function.
Working Demo:
$(document).ready(function() {
$('body').on('click', '.headbar', function(){
$('body').toggleClass('expanded');
});
});
.headbar {
width: 100%;
background: #303030;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 5px;
position: fixed;
z-index: 1000;
margin-top: -40px;
}
.leftside {
position: fixed;
left: 2%;
top: 100px;
height: 500px;
width: 13%;
background-color: rgba(123, 123, 123, 0.95);
}
.rightside {
position: fixed;
right: 2%;
top: 100px;
height: 500px;
width: 13%;
background-color: rgba(123, 123, 123, 0.95);
}
.scrollable {
position: relative;
top: 20px;
min-height: 700px;
width: 70%;
margin: 0 auto;
box-shadow: 0px 1px 5px;
background: white;
}
/* ===================== */
/* expanded transition
/* ===================== */
.leftside, .rightside, .scrollable {
transition:0.3s;
}
body.expanded .scrollable {
width:100%;
}
body.expanded .leftside {
left: -100%;
}
body.expanded .rightside {
right: -100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>
jsFiddle

How to make an image the full width of a screen with dictating the height

I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>

On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}

change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.

try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),

Responsive lightbox not working in iPhones

We're trying to make a lightbox responsive
Here's the original CSS:
#mageworxLightbox{ position: absolute; left: 0; width: 100%; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#mageworxImageContainer{ padding: 10px; }
Which has been edited into:
#mageworxLightbox{ position: absolute; left: 0; width: 100%; height: auto !important; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ width:80% !important; height: auto !important; position: relative; max-width: 600px; background-color: #fff; margin: 0 auto; }
#mageworxImageDataContainer{ width: 80% !important; height: auto !important; max-width: 600px; line-height: 2em; }
#mageworxImageContainer{ padding: 10px; height: auto !important; }
but the close button isn't working anymore on devices such as iPhones and I can't understand why; also in landscape mode the image is not resizing correctly.
This is our page:
http://www.arredodesignonline.com/it/letto-design-imbottito-heart.html
(to see the lightbox choose "modello letto" on dropdown and any image clicked in there will work)

Add this css to your stylesheet. Some elements have clashing layers, which causes the button to be "under" a layer so you are not clicking on a button but on some invisible layer.
#mageworxImageDataContainer{
...
position: relative;
}

device.iphone = function () {
return !device.windows() && find('iphone');
};
if (device.ios()) {
if (device.ipad()) {
addClass("ios ipad tablet");
} else if (device.iphone()) {
addClass("ios iphone mobile");
} else if (device.ipod()) {
addClass("ios ipod mobile");
}
}

Why the image does not fade in on top of existing image

I have the following code:
HTML CODE:
<table border=0 cellpadding=0 cellspacing=0 width=250px bgcolor=#FF0000>
<tr>
<td align=right><span id=spnMain></span>
</td>
</tr>
</table>
CSS CODE:
#spnMain {
background: url("theImages/searchButton.png") no-repeat;
background-position: 0px 0px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain span {
background: url("theImages/searchButton.png");
display: block;
height: 50px;
background-position: 0px -56px;
}
JS CODE:
$(document).ready(function () {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({
"opacity": 0
});
$("#spnMain").hover(function () {
$(this).children("span").animate({
"opacity": 1
}, 400);
}, function () {
$(this).children("span").animate({
"opacity": 0
}, 400);
});
});
Produces the following (the top is onload and the bottom when mouse is hovered:
How can I make the green button fade in on top of the purple button so it hides it?

I know you ask for a javascript solution but you can do the same thing with css only (if you want to)
Way 1, sprites, no animation though: http://jsfiddle.net/NicoO/WBjS5/
Way 2, two images, css transition (a bit hacky): http://jsfiddle.net/NicoO/WBjS5/6/
#spnMain
{
display: block;
height: 28px;
width: 28px;
background-image: url(**url to green button image**);
background-position: 0% 0%;
position: relative;
}
#spnMain:after
{
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
content:"";
transition-duration: 0.4s;
visibility: hidden;
opacity: 0;
background-image: url(**url to red button image**);
}
#spnMain:hover:after
{
visibility: visible;
opacity: 1;
}
Update the visibility property helps for IE8 support- no transition will occur, but the image will be swapped on mouse over. What should be good enough of a fallback for old "browsers".

#spnMain {
position: relative;
/* ... same as before ... */
}
#spnMain span {
position: absolute;
top: 0;
right: 0;
/* ... same as before */
}

And your answer is:
Fiddle link: http://jsfiddle.net/LNQq3/4/
CSS Code:
#spnMain {
background: url("http://s18.postimg.org/balg05zj9/gogo.gif?noCache=1393616120") no-repeat;
background-position: 0px -5px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain:hover {
background-position: -37px -5px;
}

Have you tried using an absolute positioned element within a relative positioned element (http://css-tricks.com/absolute-positioning-inside-relative-positioning/)?
I have put together a quick jsfiddle demonstrating this: http://jsfiddle.net/9xENQ/
I just grabbed a quick GO/STOP image sprite and didn't take the time to really look into the necessary background-position to make it line up perfectly. Just wanted to convey the concept.
The HTML:
<div class="button-container">
Hi here is a bunch of text with a padding right to keep it from bleeding into the image.
<span id="spnMain"></span>
</div>
The CSS:
.button-container {
position: relative;
padding-right: 160px;
width: 158px;
height: 163px;
border: 1px solid black;
}
#spnMain {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA") no-repeat;
background-position: 0px 0px;
width: 158px;
display: block;
height: 163px;
cursor: pointer;
position: absolute;
top: 0;
left: 100%;
margin-left: -158px;
}
#spnMain span {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA");
display: block;
width: 158px;
height: 163px;
background-position: -158px 0px;
position: absolute;
left: 100%;
top: 0;
margin-left: -158px;
}
Your JavaScript (as is):
$(document).ready(function() {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({"opacity" : 0});
$("#spnMain").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});