I'm trying to build a scroller using jQuery.
The items within the scroller are display:inline-block and there can be multiple items visible in the x and y planes at any given time.
Can anyone help with my scroller?
Here is a jsfiddle with what I currently have. The animated sliding isnt working. I'm trying to make all of the contents slide together outside of the wrapper while the next page of items slide in.
http://jsfiddle.net/GR9ZR/
if (~~ (counter / totalVisible) == currentPage) {
item.show();
item.animate({
"left": -(item.position().left)
});
} else {
item.animate({
"left": -(item.position().left)
});
item.hide();
}
If you want to animate the position, in your CSS you must give the element you are trying to animate a property of position: relative;.
Consider a simple example, in which I want to animate a block to move right, when I click on the document page.
Codepen sketch: http://cdpn.io/vdCth
HTML
<div class='item'></div>
CSS
.item {
background: #ccc;
display: inline-block;
height: 50px;
position: relative;
width: 50px;
}
jQuery
$('html').on('click', function(){
$('.item').animate({
left: "+=50"
}, 200, function(){
});
});
Now remove the position: relative; from your CSS, and you will see the animation no longer occurs, as demonstrated in this fork: http://cdpn.io/LcakK
Hope that helps.
Related
I have two navigation in my website. Both the navigation bars are fixed. Basically when I scroll up, I would like to use the animate() and show both the navigation bar in the page. How do I get the scroll up event and use that to animate the divs, like the Google search widget. I would really appreciate your help. Thank you.
html:
<div id="navbar_header">
some link
</div>
<div id="main_content">
<p>Some content...</p>
</div>
<div id="navbar_footer">
some link
</div>
css:
#navbar_header {
background: #22313F;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
}
#navbar_footer {
background: #22313F;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
}
Normally using the window for the scroll event should be sufficient, as it's big enough and the one element, that's being scrolled. If jQuery is loaded correctly, you could try something like this:
$(document).ready(function(){
var lastTopPosition = 0;
$(window).scroll(function(){
var topPosition = $(window).scrollTop();
if (topPosition > lastTopPosition ){
$("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
} else {
$("#navbar_header").stop(true).animate({'top':'0px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
}
lastTopPosition = topPosition;
}
});
This piece of code gets the current position from the top everytime you scroll. If the distance gets bigger (scroll down) the two bars fadeout. If it's getting smaller (scroll up) it fades in. You can replace the FadeOut/In methods here with you animate() call too. A check, if the elements are displayed would be good here too, but I guess you can figure that one out ;-)
If I understood this right, something along the lines of:
$("#main_content").scroll(function(){
$('#navbar_header').show(300);
$('#navbar_footer').show(300);
});
Where show(300) will basically do a 300ms showing animation of your divs.
I'm trying to add an effect on a div, where once you hover over the block the block will move up. I'm using Jquery transitions as I'm aware that anything under ie10 doesnt really support css transitions. At the moment I can get it to move but there is no effect on the movement (just using css). I'm not sure how I would start to add the jquery transition.
At the moment I got it so that once you hover over the block it adds a class.
$(document).ready(function () {
$(".container").hover(function () {
$(this).toggleClass("animated-effect");
});
});
Heres my jsfiddle, I can't manage to get the code to work something up with my js:
http://jsfiddle.net/4bgj4959/
You are looking for the animate method. Note that hover method takes two parameters, the second parameter is for onmouseout (when you are done hovering).
$(document).ready(function() {
$(".container").hover(function() {
$(this).animate({
top: '20px'
})
}, function() {
$(this).animate({
top: '0px'
})
});
});
.container {
width: 500px;
height: 100px;
border: 1px solid #00c;
position: relative;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
you code is working you didn't include jquery see updated fiddle
demo
I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.
I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.
You can find the demo here: http://jsfiddle.net/8ZFMJ/394/
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": -430});
}
else
{
clicked=true;
$(".two").css({"bottom": "-200px"});
}
});
I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.
Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).
It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:
if(clicked)
{
$(".two").css("height", 10);
}
else
{
$(".two").css("height", 250);
}
clicked = !clicked;
clicked = !clicked just flips the boolean state of the variable.
Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle
Basically, all we had to do in between is use animate instead of css. Simple, really.
TL;DR
final JSFiddle
.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.
CSS:
html, body { height: 100%; }
.container {
position: relative;
height: 100%;
overflow: hidden;
}
.two {
position: absolute;
background-color: yellow;
width: 100%;
height:250px;
bottom: -200px;
transition: bottom 1s;
}
jQuery:
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": "-200px"});
}
else
{
clicked=true;
$(".two").css({"bottom": 0});
}
});
http://jsfiddle.net/8ZFMJ/398/
I am using some jquery to slide a legend in and out next to a map. I have used this code before but now I am using it within a responsive framework so I am changing some things to percentages rather than pixels widths. Perhaps I have some things out of order in my script but the div containing the legend drops below the map while it animates back and forth.
Here's my script:
$(".hideLegendRight").click(function () {
$(this).hide();
$(".label").hide();
$(".zoomTo").hide();
$(".legendMenu").hide();
$("#legendMap").animate({
width: "0%"
}, 500);
$(".buttonsMap").animate({
left: "25"
}, 500);
$("#wrapperMap").animate({
width: "100%"
}, 500, function () {
$(".showLegendRight").show();
});
google.maps.event.trigger(map, 'resize');
});
$(".showLegendRight").click(function () {
$(this).hide();
$(".buttonsMap").animate({
left: "0"
}, 500);
$("#legendMap").animate({
width: "35%"
}, 500);
$("#wrapperMap").animate({
width: "65%"
}, 500, function () {
$(".hideLegendRight").show();
$(".legendMenu").show();
$(".zoomTo").show();
$(".label").show();
});
google.maps.event.trigger(map, 'resize');
});
And here's my jsfiddle
You are seeing this issue because of how html styling works. You won't fix this problem by merely changing some script value. Quite literally your issue is that as your #wrapperMap div grows, it doesn't leave enough room for you #legendMap div to be displayed. Not only that, but everything is automatically defaulting to a relative position. So when the #wrapperMap grows it displaces the #legendMap so that it is below it. Here's a good StackOverflow answer that outlines your problem.
Make div stay in top of parent
Pretty much you want to make the parent relative and the child absolute with a couple nuances to make it show up in the right spot. Here's the css I either added or altered to fix your problem.
.grid_12 {
position: relative;
}
#legendMap {
position: absolute;
top: 0px;
right: 0px;
width: 35%;
float:right;
height:458px;
background-color:#404040;
z-index: -1;
margin-bottom:20px;
overflow:hidden;
}
fixed JSfiddle
I have a container that is working similar to notifications in mac os - elements are added to the queue and removed after a certain timeout. This works great but has one jarring visual side effect.
When they are removed from the DOM there is a jagged update to the UI as the next element in the stack fills the void created by the previous element. I would like the elements below in the stack to move up into that space smoothly, ideally with css3 but adding a transition: all 0.5s ease-in-out to the .notice class had no effect on the object when its sibling was remove.
Minimal JS interpertation :
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
Better yet fiddle here :
http://jsfiddle.net/kMxqj/
I'm using a MVC framework to data-bind these objects so some native css / jQuery is preferred over a Jq plugin.
This should remove the clicked element with a fade out effect and then move everything below up smoothly. This will work for any notice div in the stack regardless of it position within the stack.
Try:
$('body').on('click','p.notice', function(e) {
$(this).fadeOut(500,function(){
$(this).css({"visibility":"hidden",display:'block'}).slideUp();
});
});
Fiddle here
Update August 7th, 2018:
As asked by one of the users about using pure JS to do the slideUp functionality, I've put together a quick demo using requestAnimationFrame to animate the height of an element. Fiddle can be found here.
jQuery's Animate() method is a great tool to learn because not only can you fade your objects in and out, but you can move them around, all at the same time.
The CSS:
.notice {
position:relative;
top:20px;
width: 100%;
height: 50px;
background-color: #ccc;
opacity:0;
}
The jQuery:
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
$('.notice').animate({opacity: 1, top:0}, 1000);
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
And my jsFiddle demo
A simple way of doing this would be to animate the height and margin properties - http://jsfiddle.net/kMxqj/14/
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
});
$('body').on('click','p.notice', function(e) {
$(this).animate({'height':0,'margin':'0'});
$(this).fadeOut();
});
This will animate the height and margins to 0, while also fading out the object which results in a smooth transition. Also adding overflow hidden to your notice box so any content inside is covered as the animation happens.
How about this fiddle
CSS
.notice {
width: 0;
height: 0;
background-color: #ccc;
}
JS
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
$('#container p.notice:last-child').animate({
width: 100%,
height: 50px
});
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
Tweak the values as needbe, but something like this should accomplish what you'd like - it sounds like animate() might be what you want though
No JQuery:
Preferable way is with max-width:
HTML
<div id="wrapper">
<div class="myspan">
child
</div>
<div id="removable" class="myspan">
removable child
</div>
<div class="myspan">
child
</div>
<div class="">
child
</div>
</div>
CSS
.myspan {
display: inline-block;
font-size: 30px;
display: inline-block;
max-width: 200px;
transition: all 1s;
overflow: hidden;
}
.myspan:hover {
max-width: 0;
}