We Keep Coding

Reverse list and delay display

I have a simple script on my site to reverse the display of a list.
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
});
It works great, but the reversal of the list occurs after / during page load — and thus the list (which is largely imagery) appears and then snaps into reverse order, which looks a little clunky.
Is there a way to delay the display of the list until after it has reversed?
Thanks in advance.

Set the visibility to hidden until you finish your flip.
Do not use display:none because it will mess up the rest of your screen.

You could use the style display: none in your HTML, something like:
<ul style="display:none">
..and then during the loading of the page you show the list at the end:
$(function() {
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
}).parent().show();
})

As already suggested well by O_Z
$(function() {
$('li.shoplist').each(function() {
$(this).parent().prepend(this);
}).parent().css('opacity', '1');
})

Switch HTML content of div with another piece of HTML without fading out to white first using jQuery

I'm looking for a way to fade from one piece of HTML in a div to another piece of HTML without fading out to white (to the background color of the div) first like i'm doing in this example:
The positionNumber variable is just an int with the number (e.g. 3).
function changeContent(positionNumber) {
$('.banner-content-wrapper').fadeOut('fast', function() {
var contentHtml = $('.slidercontent#' + positionNumber).html();
$('.banner-content-wrapper').hide().fadeIn(1000).html(contentHtml);
});
}
This example does the exact same by fading to white first but this is not what I'm lookig for:
Why doesn't jquery fadeIn() work with .html()?
I want to fade directly from one piece of HTML to another. I haven't been able to find any example on Stack Overflow that shows how to do exact that. I know this is not valid code but it's something like this I'm looking for:
$('.banner-content-wrapper').fadeToHtml(contentHtml);
How can I fade directly?

why use fadeOut/fadeIn - why not hide/show
function changeContent(positionNumber) {
$('.banner-content-wrapper').hide('fast', function() {
var contentHtml = $('.slidercontent#' + positionNumber).html();
$('.banner-content-wrapper').hide().html(contentHtml).show();
});
}
I have not tested this - just a suggestion based on the example you referenced

I don't think you should use fade. Try to use Replace.
http://api.jquery.com/replacewith/

how to traverse a loop in javascript

I've three boxes ,each one fades in, shakes then fades out.
The ID of each one reserved in an array and a loop traverses them,the loop works correctly but just shows the first item!.
I've checked the javascript with different ways using for loop,delay instead of setTimeout
.I've also tried to add the boxes in html not in js file
(if it casued any problems!!!!!!!!)
Here is my code:
http://jsfiddle.net/#&togetherjs=QLRAbwHOR7
could any one help me please???!!
$(document).ready(function(){
var imgID= ['red','green','blue'];
$.each(imgID, function(i) {
$(".image").append('<div class="box"fid="'+i+'">'+imgID[i]+'</div>');
$('#'+i).fadeIn(500);
setTimeout(function(){
$('#'+i).effect( "shake",{times:5}, 1000 ).fadeOut(500);
}, 1000);
alert("ID: "+i);
});
});

Based on the code in the question (not the jsfiddle link) I think the problem is on this line
$(".image").append('<div class="box"fid="'+i+'">'+imgID[i]+'</div>');
^
should be
$(".image").append('<div class="box" id="'+i+'">'+imgID[i]+'</div>');
^ remove the 'f'
here is my fiddle results
http://jsfiddle.net/jasrus/ZqayT/
Update Also make sure that you include jQueryUI because effect is not part of the jquery library

Giving user 2nd attempt

In my spelling game there is a grid with words in to spell. The user is given a highlighted area in the grid and some clues like a picture and a sound of a word like "cat" for example.
The user then is supposed to click the corresponding letters on the side of the grid to achieve the correct answer.
If the user correctly spells the word, the word fades out to show a section of the image behind. The aim of the game is to spell all the words correctly and reveal the the whole image
If the user gets the spelling of a word wrong, there is a style applied to the word that makes it glow red, this should then fade after 2 seconds and he/she should be given another attempt to try to spell the word.
Currently when a word is spelt incorrectly the style appears to make the word glow red, but it does not go after 2 seconds and the user is not given another shot at the word.
I have used this line of code to get rid of the style's after 2 seconds...
$('.drop-box.spellword').removeClass('wordglow wordglow3 wordglow4', "2000");
For some reason it doesn't work
The script that adds the styles is here...
if (!$('.drop-box.spellword:not(.occupied)').length) {
var wordIsCorrect = 0;
$('.drop-box.spellword').each(function() {
if ($(this).attr("data-letter") == $(this).find("div").attr("data-letter")) {
wordIsCorrect++;
}
});
console.log(wordIsCorrect);
console.log($('.drop-box.spellword').length);
if ($('.drop-box.spellword').length == wordIsCorrect) {
$('.drop-box.spellword').addClass('wordglow2');
$(right).val('Well Done!');
$(right).show();
audioS.play();
$('.counter').html(completeWords + '/6').show();
$(wrong).hide();
$('.minibutton').prop('disabled', false);
} else {
$('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Try Again');
$('.minibutton').prop('disabled');
$(wrong).show();
audioF.play();
$('.counter').html(completeWords + '/6').show();
$(right).hide();
$('.minibutton').prop('disabled', true);
}
To give the user another attempt I thought you may use something like this..
$('.drop-box.spellword').splice(0, $('.drop-box.spellword').length);

You have to use javascript's setTimeout function, for jQuery's removeClass doesn't accept an argument for timeouts.
Also, removeClass only removes one class at the time, so you have to chain them.
try replacing this:
$('.drop-box.spellword').removeClass('wordglow wordglow3 wordglow4', "2000");
for this:
setInterval(
function(){
$('.drop-box.spellword').removeClass('wordglow').removeClass('wordglow3').removeClass('wordglow4');
}, 2000
);

To remove the class after 2 seconds, use this:
setTimeout(function(){
$('.drop-box.spellword').removeClass('wordglow wordglow3 wordglow4')
},2000)
removeClass doesn't accept any argument for a delay before removing a class.
I'm not sure what you're trying to do with the splice, but one error I can see is that you forgot a $ before ('.drop-box.spellword') inside the splice() call.

jQuery's removeClass doesn't support passing a second parameter to be considered as a timer, but you can do this manually using setTimeout():
setTimeout(function() {
$('.drop-box.spellword').removeClass('wordglow wordglow3 wordglow4');
}, 2000);
As for giving the user another attempt, why are you using splice()? Isn't each element with class drop-box.spellword a text input with individual strings? In that case you can use $('.drop-box.spellword').val('') to clear all inputs of that class.
Edit:
To remove the classes from the other children modify it to something like this:
$('.drop-box.spellword').removeClass('wordglow4');
$('.drop-box.spellword').children('.ui-widget-content').removeClass('wordglow')
The jsFiddle is really large so I'm not sure where wordglow3 gets applied, but the principle is the same, find the element and removeClass() from it, all in your timed function.

JQuery's .append() executes 6 times instead of 1

Basically, what I'm trying to do is create a marquee type thing by scrolling vertically through the banners and then moving each to the bottom after it is out of view. I can't figure out why the banner is being appended six times. I realize that it's not quite complete so don't make a remark about that please. If you have a better suggestion, let me know. http://jsfiddle.net/vCuHc/2/
EDIT: How can I append the top element to the bottom and then remove the top element also?

You have six elements with the same class. This script runs once for each of the those elements.
Change the code that it runs once by appending to the parent div after the animations complete and not at the end of every animation.

It's being called against every element in the result of $('.tornado_banner').

Instead of
function(){
...
$("#banner_container").append(
'<a class="tornado_banner" id="banner_alberta" href="#" style="top:' + elementNum * -130 + 'px"> </a>'
);
Try
function(){
$(this).detach().appendTo("#banner_container");
}

If I understand your edit correctly,
var first = jQuery("#banner_container a:first");
jQuery("#banner_container").append(first);
That will remove the first element while appending it to the end of the list.