Can't move element to end at right time - javascript

I am using jquery to slide images left inside a div set to hide overflows, and then remove the first image and append it to the end, so that I always have the same number of images in the list and they keep sliding left each time the function fires:
function xxx(){
var first = $('.ximg:first');
$('.ximg').animate({ left: '-=200'}, 2000, function(){ $('.ximg').css({left: '0'}); first.insertAfter($('.ximg:last'));});
}
setInterval(function(){ xxx () }, 8000);
<div style="position:relative; overflow:hidden; width: 400px; height: 150px;">
<div class="ximg" style="position: relative; width: 200px; min-height:150px; background:red"></div>
<div class="ximg" style="position: relative; width: 200px; min-height:150px; background:orange"></div>
<div class="ximg" style="position: relative; width: 200px; min-height:150px; background:green"></div>
<div class="ximg" style="position: relative; width: 200px; min-height:150px; background:yelow"></div>
</div>
But I only end up with 1 image in the container, the second only gets added when the function fires. I know there are read made plugins to do this kind of thing but I want it simple and prefer to try and write my own even thought I am relatively new with jquery !
http://jsfiddle.net/rgct2/6/
The container is 400 wide and as each div is 200 wide, there should always be 2 divs in view, even during animation when it will show a % of the first and 3rd divs.

A better way is probably to animate the width of the first element, so it doesn't require all elements to be animated.
function xxx() {
var origWidth = $('.ximg:first').width();
$('.ximg:first').animate({
width: 0
}, 2000, function() {$(this).insertAfter($('.ximg:last')).css({width: origWidth})});
}
There are also CSS problems with the elements. The parent element should have white-space: nowrap, so the elements are in the same line, even when they're not visible. The children elements should have display:inline-block, so they can be in a line (i.e. inline), and have configurable widths.
Another thing to be aware of is the space between <div>s. You need to make sure there is no unintentional spaces, which include newlines.
See the updated demo: http://jsfiddle.net/rgct2/7/.

Tested and its working, instead of use remove, use "detach"
function xxx(){
$('.ximg').css({left: '0'});
$('.ximg').animate({ left: '-=200'}, 2000, function(){ });
$('.ximg:first').detach().insertAfter( $('.ximg:last') );
}

Related

Scrollable DIV, I want to create an animation that scrolls to the bottom of the div on pageload

I have a DIV that has an overflow-y set to scroll.
.scrolling-div {
width: 85%;
height: 200px;
overflow-y: scroll;
}
Assuming that I have a bunch of content inside this div, I want it to scroll all the way to the bottom of the div on pageload. I actually want to see the animation of the scroll (so the div would start at the top, but then I want to see it scroll to the bottom).
How do I create this with either Javascript, Jquery, or just pure CSS? I also want to be able to control the speed of the scroll animation.
You can use jquery's animate:
$('.scrolling-div').animate({
scrollTop: $('.scrolling-div').prop('scrollHeight')
}, 1000);
See a working example here.
$(function() {
var wtf = $('#scroll');
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
});
#scroll {
width: 200px;
height: 300px;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll">

Preventing IMG from Resizing and Inconsistent Div Height Change?

Currently I have a huge div that would collapse from the height it automatically generated to the height of the title of the div. (i.e. 32px). I have it start out collapsed and then when I click on the div it opens to its full size, displaying all its inner information, and then when I click again, it collapses again. Unfortunately, two things happen:
The div doesn't completely expand to its full height.
The first large img in the div gets resized.
Now I understand why the latter is happening. It has something to do with the height being a percentage instead of a discrete number, for when I change the number to something like 500px, it works just fine. But I don't want to do that. I need it to remain a percentage for when I need to use, yet resize, large pictures.
I also feel this same problem may coincide with the former problem as well, but I'm not sure.
Please help me with this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
<div class="example"> <span class="h2">DIV Example</span>
<br />
<img class="big" src="http://www.greenbookblog.org/wp-content/uploads/2012/03/big-data.jpg" />
<p>This is a big picture. It's here to show what this thing is supposed to be doing.
However, this picture has been squished so that it can fit within the div nicely. I am
writing a bit so that I can take up space.</p>
<img class="big" src="http://www.greenbookblog.org/wp-content/uploads/2012/03/big-data.jpg" />
<p>This is a big picture. It's here to show what this thing is supposed to be doing. However, this picture has been squished so that it can fit within the div nicely. I am writing a bit so that I can take up space.</p>
</div>
</body>
</html>
CSS:
div.example, div.example img {
border: 3px solid #402468;
border-radius: 6px;
}
div.example {
color: white;
margin: 0 15px;
background-color: #504689;
overflow: hidden;
}
img {
display: block;
margin: 0 auto;
}
img.big {
width: 85%;
height: 85%;
}
/*further formatting: pay no mind*/
div p {
text-indent: 15pt;
margin: 0 15px;
}
.h2 {
font: 32px"Times New Roman", serif;
color: #678900;
}
aaaand jQuery:
$(document).one("ready", function () {
$("div.example").each(function () {
$(this).data("height0", $(this).height());
$(this).height("32px");
});
});
$(document).ready(function () {
$("div.example").click(function () {
if ($(this).height() !== 32) {
$(this).animate({
height: '32px'
});
} else {
$(this).animate({
height: $(this).data("height0")
});
}
});
});
Here is the fiddle:
https://jsfiddle.net/AirStyle/rb95K/35/
Also this is what I get:
https://jsfiddle.net/AirStyle/rb95K/35/embedded/result/
CAUTION: I may not have made the percentages small enough for the picture used. Please lessen them if necessary.
Just remove the height setting altogether and it will keep aspect ratio
(Demo)
img.big {
width: 85%;
}
Also you should cache your jQuery objects. I've done this in the demo by caching $(this) to var self = $(this) and then referring to self therein. There is a lot of overhead in initializing jQuery objects, so if you're using the same selector more than once, cache it.
Edit:
Because you are setting the height of the div to a fixed height on expansion, if the user resizes the window the images will grow in width as well as height. As the container is a fixed height the contents will grow past the end of the container and get cut off. If you would like to fix that, add a "complete" function to the animation to remove the height setting and make it dynamic again.
(Demo)
self.animate({
height: self.data("height0")
},function() {
self.height('');
});
You can also add height: auto; to maintain the default aspect ratio.
img.big {
width: 85%;
height: auto;
}

Horizontal slideshow with DIVs

I have a container div element, this should contain all child div elements.
I saw this thread: Slide a div offscreen using jQuery and I was wondering how to implement it (within a div element and not in the body).
The code is working fine, but what if the "wrapper" div element has 500px width, how am I supposed to wrap the child divs? Am I need to use iframe or ...?
For a better understanding I made this image:
The red rectangle would be a window and the grey background the wall. You can only see trough the window and see the current div element. If you push the right button -aqua- you will see the green div and if you push the left button you will see the yellow div.
Notice: Div elements should move and not the wall.
jQuery for the logic and CSS3 for transition and transform.
Multiple galleries + Auto-slide + Pause on hover:
$(function(){
$('.gallery').each(function() {
var $gal = $(this),
$movable = $(".movable", $gal),
$slides = $(">*", $movable),
N = $slides.length,
C = 0,
itv = null;
function play() { itv = setInterval(anim, 3000); }
function stop() { clearInterval(itv); }
function anim() {
C = ($(this).is(".prev") ? --C : ++C) <0 ? N-1 : C%N;
$movable.css({transform: "translateX(-"+ (C*100) +"%)"});
}
$(".prev, .next", this).on("click", anim);
$gal.hover(stop, play);
play();
});
});
.gallery{
position: relative;
overflow: hidden;
}
.gallery .movable{
display: flex;
height: 70vh;
transition: transform 0.4s;
}
.gallery .movable > div {
flex:1;
min-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Pause on hover and autoslide
<div class="gallery">
<div class="movable">
<div style="background:#0af">1 <p style="position:absolute; top:400px;">aaaa</p></div>
<div style="background:#af9">2</div>
<div style="background:#f0a">3</div>
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
As many galleries as you want
Count the number of slides and put into a counter C.
On prev/next click manipulate C
On autoslide $(this).is(".prev") will also evaluate as false so ++C will be used, just like clicking the Next button.
On mouseenter simply clearInterval the currently running itv and on mouseleave (the second .hover argument) reinitialize the itv
The animation is achieved by multiplying C*100 and translateX by - C * 100 %
Add all three div in a container div, then make the window wrap around the long div and hide the overflow.
Example if the window area is 960px then the div inside would be 3x 960 (2880)
You can center it by changing it's left position by increments of 960 (placing the long div in relative positioning and the window to overflow to hidden)
#window{
width:960px;
overflow: hidden;
}
#container{
position: relative;
left: -960px;
}
.content_box{
width:960px;
}
Then you can use javascript (jQuery) to animate the left position:
$('#arrow-left').click(function() {
$('#container').animate({
left: '-=960'
}, 5000, function() {
// Animation complete.
});
});
$('#arrow-right').click(function() {
$('#container').animate({
left: '+=960'
}, 5000, function() {
// Animation complete.
});
});
More on .animate can be found in the manual: http://api.jquery.com/animate/
<div id="parent">
<div id="container">
<div id="child1"></div>
<div id="child2"></div>
</div>
</div>
give the parent red div css properties:
position: relative;
overflow: hidden;
width: 500px;
height: somevalue;
wrap the children divs with another div "container for example" and give it the following css properties:
position: absolute;
width: ;/*overall width of all children divs including margins*/
top: 0;
left: 0;
height: ;/*same as parent*/
and finally for children divs:
float: left;
height: ;/*same as parent*/

jQuery scale function not working

I've got some code which is supposed to make an image go smaller until it disappears from the screen. If I have the image in a div it will not work properly. If I take it out of the div it will work fine.
However I need it to work in a div. How can I fix this?
The code works fine if the img is not in a div, but when it is it screws up.
setTimeout(function(){
$("#thrid").show('fast').animate({
top : '-=-300',
width: 0,
height: 0
},
{duration: 1000});
},2000);
CSS:
#thrid{
display:none;
position:absolute;
left: 592px;
top: 160px;
}
HTML:
<div id="thrid">
<img src="images/thrid.png" alt="thrid">
</div>
This is what it does with the div:
http://jsfiddle.net/xMV5Q/3/
This is what I want it to do:
http://jsfiddle.net/xMV5Q/1/
Try setting the img's width and height to 100%:
#city2 img {
height: 100%;
width: 100%;
}
The image re-appears because the div overflow is still visible
#city2 {
display: none;
overflow: hidden;
position: absolute;
}
I just tried your example (http://jsfiddle.net/will_moore/g6fYT/) and it seems to work OK for me, even with the div.
I'm guessing you've got some styles associated with the div that are causing problems. I don't see what your -=-300 is doing. Don't you mean '-=300'?.

jquery slideshow using background images

I have a div which currently has a static background image.
I need to create a slideshow of background images for this div.
I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.
I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.
Does anyone know of a good way to do this using jquery??
Here's some code which fades out/in but fades out the contents of the div too.
$("#slideshow").fadeOut(5000, function(){
$("#slideshow").css('background-image','url(myImage.jpg)');
$("#slideshow").fadeIn(5000);
});
HTML:
<div class="slideshow"></div>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
jQuery
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
jsfiddle Demo
How about adding a thumbs pagination list, to update the background image on click, and then, a second or two, and it starts fading in and out with the next bg img automatically?
HTML:
<div class="slideshow">
<h1>Text</h1>
<input type="button" value="Hello" />
</div>
<ul>
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50/123456"></li>
<li><img src="http://placehold.it/50x50/dbca98"></li>
</ul>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
ul {position: absolute; top: 125px; left: 75px;}
li {
float: left;
border: 1px solid #000;
margin: 15px;
}
Javascript:
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
See it all together at http://jsfiddle.net/tatygrassini/R4ZHX/75/.
Instead of just changing the background image, you could first call
fadeOut()
then change source, and then call
fadeIn()
something like...
$('#image').fadeOut(500, function() {
$(this).attr('src', 'new-image.png')
.load(function() {
$(this).fadeIn();
});
});
To use a variety of images, there are a number of solutions, but you could simply iterate through a list of them.
You can create an positioned absolutely and with a slider plugin change the images contained in the div. Otherwize you have to sprite the background. I achieved this with the Jquery Tools tabs plugin.
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();
Here is a solution that not only addresses your problem, but will also solve some other problems as well. Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
Most importantly, this approach will work in IE6-8 without screwing up the font aliasing of elements you may have on the div.

Categories