I'm trying to animate something using jQuery.
UPDATE
I have it working the way I want it. This is the jQuery:
$(document).ready(function() {
// go chat button
$('#go-chat input').click(function() {
$('#search, #go-chat').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
});
The problem now is that the text is wrapping as the slide happens and it is very ugly. How could I make it so that the text slides in/out as the search bar and the input fields without it wrapping as the width narrows/expands?
Thanks.
OLD QUESTION
Basically, I want to slide in the search bar to the left, essentially hiding it, and then slide out the 4 inputs below it. For now, I've placed them under the search bar but my plan is to hide them, and when the "Go Chat" button is pressed, the search slides out to the left and the 4 inputs slide in to the right.
Right now, the search box slides in to the center and doesn't disappear fully. How can I make it so it functions as I want it? If my explanation is unclear as to what I'm looking for, please ask for clarification.
Thanks.
Try changing
$('#search').animate({
width: '0px',
},
'1000'
);
to
$('#search').animate({ width: '0px' }, 1000, function() {
$(this).hide();
});
Once the animation is complete, the element will be hidden.
I also noticed that the 'Search' text isn't animated well.
Before doing the animate, try removing (or fading out) the text. Remember to show it again when toggling back. Eg:
$('#search-label').hide();
OR
$('#search-label').fadeOut();
I figured it out. To make it slide to the left, I gave the corresponding surrounding <div>s a width and margin-left: 0px;. Then I had the issue of the text wrapping as the width narrowed/widened. To fix that, I added white-space: nowrap; to the CSS for the corresponding <div>s.
Here's the jQuery:
$(document).ready(function() {
$('#go-chat input').click(function() {
$('#search, #go-chat').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
});
... and the CSS:
#search {
border: 1px solid #999999;
-moz-border-radius: 5px;
width: 573px;
height: 40px;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-chat {
width: 575px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
}
#login {
border: 0px;
width: 0px;
display: none;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-search {
width: 0px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
display: none;
}
If anyone has suggestions on the way I formatted the jQuery, please let me know what you think... do you like the way I formatted? I feel like it looks a bit awkward.
$('#search').animate({width: '0'}, 1000, function(){
$(this).hide();
});
The page kind of freaks out on toggle...mind your selectors.
Related
I know this is a solved problem, but I'm having difficulty getting this to work so I need some help.
I have the following setup: http://jsfiddle.net/yHPTv/3656/
The issue is, users will scroll past that slider. I need the slider to stay in the same place on the page.
I've tried using the classes approach (have a class called sticky with position: fixed;) but it didn't work for me unfortunately.
Any help would be appreciated.
JS from JSFiddle:
$(function () {
$("#slideout").click(function () {
if($(this).hasClass("popped")){
$(this).animate({left:'-280px'}, {queue: false, duration: 200}).removeClass("popped");
} else {
$(this).animate({left: "20px" }, {queue: false, duration: 200}).addClass("popped")
}
});
$("#slideout").delay(500).animate({left: "20px" }, {queue: true, duration: 200}).addClass("popped");
});
CSS from JSFiddle:
body {
overflow-x: hidden;
}
#slideout {
background: #666;
position: absolute;
width: 280px;
height: 80px;
top: 45%;
left: -280px;
padding-right: 20px
}
#clickme {
position: absolute;
top: 0;
right: 0;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float: right;
}
.stick {
position: fixed;
top: 0px;
}
Your current position is set to absolute when it should be fixed.
You tried this?
#slideout {position:fixed;}
and it works fine for me here: JS FIDDLE
I'm trying to make a small piece of code, so when I click on the question mark, it shows another div. However, when I click on the body, it should hide the just revealed div.
The problem I am running into, is that even though I use .slideUp() when the person clicks on the body (note: the body is only clickable on the height of the ?), it also shows after clicking on the body again. How do I make it so clicking on body won't show the .popover again? If I add .hide() after .slideUp(), it just hides it directly and the slideUp effect is gone.
CodePen
HTML
<div class="center">
<span class="qs">? <span class="popover above">Voeg toe aan wensenlijst</span></span>
</div>
CSS
body {
background-color: #e3fbff;
}
/* Just to center things */
.center {
margin: 100px auto;
width: 30px;
}
/* The element to click on */
.qs {
background-color: #02bdda;
border-radius: 16px;
color: #e3fbff;
cursor: default;
display: inline-block;
font-family: 'Helvetica',sans-serif;
font-size: 18px;
font-weight: bold;
height: 30px;
line-height: 30px;
position: relative;
text-align: center;
width: 30px;
.popover {
background-color: rgba(0,0,0,0.85);
border-radius: 5px;
top: 42px;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
color: #fff;
font-size: 12px;
display:none;
font-family: 'Helvetica',sans-serif;
left: -95px;
padding: 7px 10px;
position: absolute;
width: 200px;
z-index: 4;
}
}
jQuery
$(".qs").click(function(){
$(".popover ").slideToggle();
});
$('body').click(function() {
// Hide all hidden content
$('.popover').slideUp();
});
$('.popover').click(function(e) { e.stopPropagation() });
$('.qs').click(function(e) {
// this stops the event from then being caught by the body click binding
e.stopPropagation();
});
Hide the tooltip when clicking, if it is visible.
You don't need more code than this:
var popover = $('.popover');
var qs = $('.qs');
qs.click(function(e){
e.stopPropagation();
popover.slideToggle();
});
$('html').click(function() {
if(popover.is(':visible')) {
popover.slideUp();
}
});
$('.popover').click(function(e) { e.stopPropagation() });
Codepen
You can check if .popover is visible like:
$('body').click(function() {
// Hide all hidden content
if($('.popover').is(":visible"))
$('.popover').slideUp();
});
Also you don't need to use slideup() and hide() together.
codepen
You need to make sure the popup is not click on you can do a check like this
var mouse_is_inside = false;
$('.popover').hover(function() {
mouse_is_inside=true;
}, function() {
mouse_is_inside=false;
});
$("body").live('mouseup', function() {
if(! mouse_is_inside)
$('.popover').slideUp();
});
So I have three DIV's in a container, like so:
<div class="container">
<div class="left">left</div>
<div class="center">click me</div>
<div class="right">right</div>
<div class="spacer"></div>
</div>
body {
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
display: flex;
}
.left, .center, .right {
position: relative;
border: 1px solid black;
float: left;
padding: 10px;
}
.left, .right {
width: 25%;
}
.center {
width: 50%;
}
.right {
right: -999px;
transition: right 0.5s ease-out;
}
.left {
left: -999px;
transition: right 0.5s ease-out;
}
.spacer {
clear: both;
}
I've already coded it so that when you click on the .center DIV, the two sidebars (.left & .right) DIV's move into place. I used this code:
$('.center').click(function(){
$('.right').animate({"right": "0"});
$('.left').animate({"left": "0"});
}
});
What I want to do is write it so that AFTER they move into place, I can click on the .center DIV again and they'll move out like a sidebar does. My idea is to use an if/else checker so that it knows what state the DIV's are in.
I'm fairly new to Javascript and reading the if/else samples on Google only gets me more confused.
Any help? Thanks!
You may be able to rely on the animate complete property...
http://api.jquery.com/animate/
EDIT: I've updated to match your code...
$( ".center" ).click(function() {
$( ".right" ).animate({"right": "0"}, 5000, function() {
// Place the code you want to perform once animation is complete here.
});
});
You have a few options here - you could set a flag in the animation complete block for instance...
var complete = false;
$( ".center" ).click(function() {
$( ".right" ).animate({"right": "0"}, 5000, function() {
complete = true;
});
});
EDIT based on on comments...
$('.center').click(function(){
$('.right').animate({"right": "100px"});
$('.left').animate({"left": "100px"});
});
I'm trying to implement a simple "scroll to top" button on my site.
HTML:
<img src="img/scrolltotop.png">
CSS:
#scrolltotop {
width: 40px;
height: 40px;
position: fixed;
right: 100px;
bottom: 50px;
display: block;
}
JS:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 150) {
$('#scrolltotop').fadeIn('slow');
} else {
$('#scrolltotop').fadeOut('slow');
}
});
$('#scrolltotop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
When I load my page, I see the button there in the right place for a split second, then it is covered by a background of one of my divs that is down the page in my HTML structure. In the end, I can't see it anywhere on my page, and when I inspect the element it is in the right spot, just not visible.
I think you just need to add an initial display:none; to #scrolltotop like so:
#scrolltotop {
width: 40px;
height: 40px;
position: fixed;
right: 100px;
bottom: 50px;
display:none;
}
Working Example
When using fadeIn() you need to have the element's initial display state set, so that you're not trying to fadeIn() an element that's already present.
Add z-index: 1000 to the back to top link so it is shown on top of everything.
This is a bit of a challenge. Here's what I'm looking for:
3 divs on screen
Div 1 resides in the middle of the page (centered)
Div 2 resides just off the screen on the far left
Div 3 resides just off the screen on the far right
OnClick, Div 1 slides to the position Div 2 was (to the left), Div 2 slides off the screen entirely, Div 3 slides to where Div 3 was (middle, centered). A new div arrives on the right.
I've tried using jQuery animation and AddClass. jQuery doesn't like sliding a div offscreen.
Any thoughts?
For an example of what I'm describing, visit Groupon.com. I thought it was a cool idea, and have given myself the challenge of recreating it. So far, no dice.
-D
Something like this?
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/
This is the basic functionality. It doesn't scale to more divs, etc, but that should get you started.
The key is to wrap your elements in a container and make the overflow hidden.
Update:
Here's a slightly better version that handles any number of divs (greater than 1):
http://jsfiddle.net/jtbowden/ykbgT/1/
Simplified further:
http://jsfiddle.net/jtbowden/ykbgT/2/
Code snippet:
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
Maybe I misinterpreted. I though you wanted three divs in a row, and only the ones on the end sliding and whatnot.
http://jsfiddle.net/acsfy/
(I know you're using jQuery for this, but it pissed me off as I was trying to force it to work. You'd have to adapt this for your purposes.)
Extending Jeff B answer, i've included Hammer.js and made a circular list.
$(function() {
$("#esq").click(function() {
console.log("Esquerda !");
var obj = $(".ativo");
$(obj).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '+150%');
$(this).appendTo('#container');
});
$(obj).next().animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
$("#dir").click(function() {
console.log("Direita !");
var obj = $(".ativo");
var prox = $(obj).siblings(":last");
$(obj).animate({
left: '+150%'
}, 500, function() {
$(prox).prependTo('#container');
});
$(prox).css('left', '-50%');
$(prox).animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
var hammertime = new Hammer(document.getElementById("container"));
hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
hammertime.on('swipeleft', function() {
$("#esq").trigger("click");
});
hammertime.on('swiperight', function() {
$("#dir").trigger("click");
});
});
Example in: http://jsfiddle.net/tvLt1r9h/2/
And... not a year too late. If you want it to start on the first div, your css needs to look like this.
#box1 { background-color:#333; }
#box2 { background-color:#333; left: -50%; }
#box3 { background-color:#333; left: 150%; }
#box4 { background-color:#333; left: 150%; }
#box5 { background-color:#333; left: 150%; }