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);
});
});
Related
I have a sliding div, or we can say that its a on click expand and collapse div(toggle).
I want to apply the .scrollTop() to the div. when the button is clicked to expand the div
before expand set to top, and then expand. I tried it more then hundreds times
with different ways but i unable to get the desired result. Any help will be appreciated.
<div id="mainarea">
</div>
<div class="slidingDiv">
</div>
<div class="show_hide">
<p> Click me</p>
</div>
var currentscrollpos;
currentscrollpos = $(window).scrollTop();
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
$('body').animate({scrollTop:100}, 'slow')
return false;
});
});
$(document).click(function()
{
$('body').animate({ scrollTop: currentscrollpos }, 0);
});
//This is my css
#mainarea{width:550px; height:300px;background-color: yellow;}
.slidingDiv {
height:200px;
background-color: white;
margin-top:10px;
width:261px;
background-color: black;
}
.show_hide {
display:none;
}
#notificationFooter {
background:#FFFFFF; margin:0 auto; height:8px; width:96px;
}
This is the fiddle
http://jsfiddle.net/muheetmehfooz/wmwn5424/
What you are doing is not bring you to top, just move you bit up. However, if your question is only about how to make this actions in right order - try this.
jsfiddle
just use callback function
P.S.
to get to the top use
{scrollTop:currentscrollpos}
<div class="box" id="box1">
<div class="overlay" id="ovlay1">
</div>
</div>
<style>
.box{
height:200px; width:200px;
}
.overlay{
height:50px; width:200px; position:absolite; top:-50px;
}
</style>
<script>
$(".box").mouseover(function(){
// $(".overlay").animate({
// $(this).animate({
top: "+=50px",
});
});
</script>
assuming i have about 5 of the .box divs, each with ascending id from box1 -> box5 etc.
the overlay should slide in on mouseover, but just on the hovered box.. i can't figure out the jquery function for this. runing animate on (".overlay") shows the overlay on every box, using (this) does not work because its obviously referring to (".box")...
how can i focus (this) on the overlay?
You can use the find method of jQuery:
$(".box").mouseover(function(){
$(this).find(".overlay").animate({
top: "+=50px",
});
});
Target the .overlay inside the currently hovered .box
$(".box").on('mouseover', function(){
$(".overlay", this).animate({
top: "+=50px",
});
});
This jQuery will select the overlay that is the child of $(this):
$(this).children('.overlay').animate({
top:"+=50px"
});
So the final piece looks like this:
$(".box").mouseover(function(){
$(this).children('.overlay').animate({
top:"+=50px"
});
});
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>
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.
here's what I have so far.
http://jsfiddle.net/nSfWs/
Right now when a user clicks on a product div, the green box appears by adding the class "selected" to the product div. What I'd like to also happen is for the class "unselected" to be added remaining two unselected product divs. Therefore, one div would have the green box/border and the other two would be faded with the opacity filter.
Can someone help me make this work? It seems simple enough, but it's driving me crazy. Thanks!
And for those who don't want to click on the jsfiddle link, here's the code.
<style type='text/css'>
div.product {
display:inline-block;
vertical-align:top;
text-align:center;
width:auto;
margin:0 47px 0 0;
padding:24px 22px 20px 27px;
border:1px solid transparent;
}
div.product:last-child {
margin:0px;
}
div.product:hover {
border:1px solid #878787;
-moz-border-radius:3px;
border-radius:3px;
}
div.product.unselected {
opacity:0.6;
filter:alpha(opacity=60);
}
div.product.selected {
border:1px solid #32a24e;
-moz-border-radius:3px;
border-radius:3px;
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(".product").click(function () {
$(this).toggleClass("selected");
});
});//]]>
//]]>
</script>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" alt="Model 11710" width="85" height="146" /></div>
<div class="description">1</div>
</div>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" alt="Model 11710" width="85" height="146" /></div>
<div class="description">2</div>
</div>
<div class="product">
<div class="itemImage"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Plectrophenax_nivalis1.jpg/320px-Plectrophenax_nivalis1.jpg" alt="Model 11710" width="85" height="146" /></div>
<div class="description">3</div>
</div>
Simply remove the class from the siblings:
$(".product").click(function () {
$(this).toggleClass('selected').siblings().removeClass("selected");
});
just remove the class from other divs on click event,
$(window).load(function(){
$(".product").click(function () {
$(".product").removeClass("selected")
$(this).toggleClass("selected");
});
});
and you can toggle the other class as well,
$(".product").click(function () {
$(".product").not(this).removeClass("selected").addClass('unselected')
$(this).toggleClass("unselected").toggleClass("selected");
});
See I have edited
Try using siblings() to change the class of the remaining divs.
$(this).siblings("product").addClass("unselected");
Try this:
$(".product").click(function () {
$(".product").removeClass("unselected");
$(".product").removeClass("selected");
$(this).addClass("selected").siblings().addClass("unselected");
});
Fiddle
Try this
$(window).load(function(){
$(".product").click(function () {
$(".product").removeClass("selected").addClass("unselected");
$(this).removeClass("unselected").addClass("selected");
});
});
Fiddle