I am trying to write a simple vertical JavaScript carousel that'll rotate a couple of elements. It works quite well but I am having a hard time figuring out how to keep the amount of elements. As you can see in this JSFiddle, http://jsfiddle.net/xznfQ/2/, the first one is "queued" away and reappears after a round. Can anyone tell me what I am doing wrong?
I guess something is wrong with these two lines:
$(e).eq(1).slideUp('slow'); // Slide next element up over the previous
$(e).eq(0).appendTo(a).show('slow'); // Place the current element at the bottom
Kind regards,
Mathias.
You want to hide the first element, e(0) and only after that move it to the end! You want:
$(e).eq(0).slideUp('slow', function () {
$(e).eq(0).appendTo(a).show('slow');
});
Your code:
$(e).eq(1).slideUp('slow');
Slowly hides the element and returns immediately. Then:
$(e).eq(0).appendTo(a).show('slow');
Moves the first element to the end immediately and slowly shows it. This meant you had the second element disappearing and the first element appearing at the end. So the list had one hidden at all times.
Related
HI, first of all, I've read a lot of posts about this but no one seems to work. I have a content "slider" made by me in jQuery. I'm such a noob on this but after 1 hour it worked. The problem comes when you try to push the button which brings the next "slide" out several times rapidly.
Here's how my "code" works:
First I set a variable named "count" to be at 1000.
I have 4 content divs. I hide 3 of them. When the user clicks the "next" button, the variable checks if the value is 1000. If this is true, then I set the opacity to the first div to 0, hide the div and fadeIn the other one (the div two). Then I set the variable "count" two 1001 and reset the opacity of div 1 (it does not appear since it's hidden).
If at the first moment, the variable is not 1000 checks if it's value is 1001 and so on. You get the point?
It's a little bit tricky but it works.
All working right but when you hit the "next" button several times rapidly, all the animations mess up.
Please if someone could told me how I fix this I'll be completely grateful.
If you want to see the "slider" go here: http://www.sinvenderse.com/hg/index.htm
and scroll to the end of the page.
You can see that if you click the slider buttons slowly it works perfect, but, when you try to hit them rapidly all messes up.
Okay, sorry for my bad English (I'm Argentinian) and I want to tell you that I've tried with everything:
finish();
stop();
clearQueue();
You can see the source code with Ctrl+U or right click, inspection element on Chrome.
And if you know the solution I'll give you a virtual hug (:
Try hiding all slides except current on each step. There are two slides with display: block at some moment
if (count == 1000){
$('.th-1').animate({opacity: 0},600,function(){
$('.think-content:not(.th-2)').hide();
$('.th-2').fadeIn(600);
});
...
I'm trying to position an absolute positioned div using jQuery offset() function.
The idea is to position it at a fixed offset from another element of the DOM. This happens in a quite complex environment with multiple nested divs.
The strange thing that happens is that calling it twice gives two different results. To me it seems there is no reason for this, although I am quite new at jQuery so I could be oversighting something obvious.
I do think that
var pos = $(document.getElementById(someElementInTheDOM)).offset();
$(document.getElementById(MyDiv)).offset( pos );
should position MyDiv always in the same place, even if I call this code some 10 times. That's what correctly happens in this fiddle. Click on the magnifying glass several times, everything is ok.
But as soon as I start adding display:none and display:block properties the thing gets disrupted. I tried to bring it down to basic and I created a fiddle here. To see what I mean press on the magnifying glass, click on the magnifying glass again, click on the magnifying glass once more, close the div by the white "X", click on the magnifying glass once more.
Any clue what's going on?
You just have to change the order:
document.getElementById("iuocboun_filter_window").style.display="block";
$(document.getElementById("iuocboun_filter_window")).offset( pos );
instead of
$(document.getElementById("iuocboun_filter_window")).offset( pos );
document.getElementById("iuocboun_filter_window").style.display="block";
EDIT:
Explanation: The offset does not work on hidden elements, thats why you have to make it first visible and than set the offset. ;)
I have modified a code that displays a marquee scrolling a simple HTML list. You can see it here:
I have 3 problems that I can't solve:
JS: I would like the marquee to show the text entering again through the right just after it disappears through the left, something like a continuous marquee, how could I do it ?
CSS: I am noticing (a) some artifacts in the marquee, I think this is due to the marquee text and the margins/paddings of divs not being properly set; and (b) the shadow of the lighter blue div cut over the marquee.. (I think it may be a z-indez problem?). (b) appears with any browser, (a) only with chrome, firefox looks ok. How could I fix it ?
Here's a screenshot:
I can successfully load data from my db and append it to the marquee. Now, I want to "refresh" the contents of the marquee every X seconds, would it be ok to remove the top element of the list when appending one in the bottom, or would it be better to fade-out, update everything, and fade-in again? Any other ways to do it ?
Here is a simple example to deal with scrolling them in from the opposite side. Also, if you adapt this method you can simply add or delete new items in the array as you need too. Watch this and about 2 or 3 times through it will add new items. One important thing to note is make sure the width of the div with id text is wider then the length of all visible items plus the length of the next in line.
If you check the following link for my working example:
http://jsfiddle.net/xavi3r/Cd8cV/
You can see that when prepend() is invoked the positioning is lost within the animation and the order in which elements are placed seems to get distorted; (check HTML to see output);
$('#container .animateMe').prepend($('#container .animateMe .copy ').clone().removeClass('copy').removeClass('active'));
I have a solution, but it doesn't solve the prepend problem. If you click any button when the animation is still happening, the squares become offset.
This is an edit where the click event becomes unbinded to your left and right buttons as the animation is happening. This stops another animation running at the same time, and the squares don't get offset. The event gets rebinded at the end of the animation callback.
Check it out :
http://jsfiddle.net/SxFPc/
I have merged your left and right click methods into a single handler since they were doing the same thing, apart from the position offset.
So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!
Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.
I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...
1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.