We Keep Coding

Animate feature not working

I'm trying to make two buttons that slide when clicked and push the other button out of the viewport. For example:
Before clicked - [ blue | grey ]
Click blue - [ all blue ]
Get it? I have the html and css set up perfectly (I think), but I just can't get this jQuery code to animate and change the positioning of the element that contains the two buttons. It's driving me nuts. What I have so far is:
<div id='container'>
<div id='wrapper'>
<a id='wrapper_photo' href=""></a>
<a id='wrapper_video' href=""></a>
</div>
</div>
<style>
#container{
width:760px;
height:25px;
background:#000000;
overflow:hidden;
}
#wrapper {
width:1520px;
height:25px;
background-color:#0F0;
position:relative;
left:-380px;
}
#wrapper_photo{
width:760px;
height:25px;
background-color:#666666;
float:left;
}
#wrapper_video {
width:760px;
height:25px;
background-color:#0000CC;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper_photo').click(function() {
$('#wrapper').animate({
left:"-=380"},
5000);
});
});
</script>
I stopped when I couldn't get the left side to work.

here you go: DEMO
$(function(){
$('#wrapper_photo, #wrapper_video').click(function() {
$(this).animate({
width:"100%"},
5000);
$(this).siblings('a').animate({
width:'0px'
},5000);
});
});

I'm not sure if this new value for left will be set, so you can use position() function to get value of left of #wrapper container and then calculate new value.
$(document).ready(function() {
$('#wrapper_photo').click(function() {
var leftVal = $('#wrapper').position().left - 380;
$('#wrapper').animate({
left:leftVal},
5000);
});
});

Slide right and left - jquery

Suppose I have a list of tasks taking the width of the screen. When I click on one of them, that it slides to the left to occupy the 50% of the with of the screen, and that, at the same time, slides from the right of the screen some details about the clicked task. This 'detail card' will take the half of the screen too. To summarize, I want to mimic the wunderlist effect. So I wrote this fiddle, but it is not working smoothly. Could some one help ?

Give appropriate width,position.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<STYLE>
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
<script>
$(document).ready(function(){
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
});
</script>

Create fade-out and slide-in animation for HTML content

I am trying to get an animation effect where current content fades out, and is then replaced by content sliding in from the right side of the screen. My current effort:
http://jsfiddle.net/LKazq/3/
<p>header</p>
<div id="wrapper">
<div style="height: 400px; background-color: red;">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
$('#next').click(function () {
var current = $('#wrapper :first-child');
var next = $('<div>').css("height", "400px").css("background-color", "blue");
next.hide();
current.fadeOut(800, function () {
current.remove();
$('#wrapper').prepend(next);
next.show("slide", { direction: "right" }, 800);
});
});
Two problems:
The removed element is still taking up space; notice how the footer gets pushed down.
Is there anyway to suppress the horizontal scroll bar?
Any tips on better ways to do this are appreciated. Thanks!

The reason for the vertical scroll back is because of an additional UI wrapper that jQuery UI puts in place.
You can do this with regular jQuery and it should be just fine:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').css({
height:400,
backgroundColor:'blue',
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800);
});
});
Updated jsFiddle.
That's the quick-fix way to do it. An additional step is to externalize your CSS into classes (which you really, really should do instead of inline styles) to make things a bit cleaner:
HTML:
<p>header</p>
<div id="wrapper">
<div class="first">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
CSS:
wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
}
Better jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second').css({
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800,function(){
$(this).removeAttr('style');
});
});
});
Here is a second jsFiddle for that.
And finally the best (although not ancient-browser compliant) way to do it, by maximizing CSS.
CSS:
#wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
margin-left:0;
-webkit-transition:margin-left 800ms;
-moz-transition:margin-left 800ms;
-o-transition:margin-left 800ms;
transition:margin-left 800ms;
}
.secondPushed {
margin-left:100%;
}
Smaller jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second secondPushed').hide();
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().removeClass('secondPushed');
});
});
This is the best from an overhead perspective, and its the way to do it in the modern web world, but it doesn't work on IE9 and below.
Here's a jsFiddle for that one.

Scroll to top in a lightbox

I have created a customized menu. See here. On click of this link I have a shadowbox popping up which has a long list of items. Now I want to have a "back to top" anchor link which takes me back to the top of the menu list.

I've set your lightbox with the #box id.
Html
<div id="box">
...
<!-- long content there -->
To Top
</div>
CSS (setting the width of elements)
#box {
position:relative;
width:200px;
height:250px;
overflow:auto;
}
#box #toTop {
position:absolute;
display:none;
left:150px;
top:10px;
}
jQuery
$('#box').bind('scroll', function(e) {
if ($(this).scrollTop() > 100) {
$('#toTop').fadeIn();
$('#toTop').css({'top' : $(this).scrollTop() + 100});
} else {
$('#toTop').fadeOut();
}
});
$(document).on('click', '#toTop', function(e) {
e.preventDefault();
//$('#box').scrollTop(0); //just go to top
$('#box').animate({scrollTop : 0},'slow'); //animate
});
Fiddle

Pretty easy with:
document.querySelector("iframe").contentWindow.scrollTo(0,0);
Now put a button on the page and call that on click. Oh, and omit the height:100% on your body of the iframe, this way you get rid of the second scrollbar.
You can try this out by just pasting the line above and executing it in the console of your browser with your webpage.

Slide div down when hover over other div, with timer

I searched for this but didn't find an solution that totally fixed my problem.
I got 2 divs that are over each other. Where div #2 isn't shown (display:none).
Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.
Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.
I made a fiddle to illustrate my div positions.

Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.
$('.button').click(function() {
$('.showme').slideDown();
});
$('.showme').mouseout(function() {
window.isoverdiv = false;
setTimeout(function() {
if (!window.isoverdiv) {
$('.showme').slideUp();
}
}, 5000);
});
$('.showme').mouseover(function() {
window.isoverdiv = true;
});
http://jsfiddle.net/mblase75/TxnDd/2/

I moved div #2 into div #1 and this allowed me to do this with only css
http://jsfiddle.net/57Shn/
CSS
.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}
HTML
<div class="button">
touch me
<div class="showme">show me</div>
</div>

CSS-only solution: (doesn't slide)
<div class="outer">
<div class="one">Hover</div>
<div class="two">Hello World!</div>
</div>
CSS:
.two { display: none; }
.outer:hover .two { display: block; }
JS solution:
$(function() {
$('.two').hide();
$('.outer').hover(function() { $('.two').stop().slideDown(); });
$('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});