Need jQuery code
I have for example 100 quotes. I want to display them on the mobile screen (iPhone, Android phone, tablets) and all types of browser (Safari, Chrome, Firefox, Opera,...)
At the beginning, it's a blank page with only a link called "Start" and when people click on that link, the quotes will be displayed (fadeIn) one by one but RANDOMLY on the screen - the time delay between 2 quotes will be about 1,5 second.
Under that "Start" link, there is a progress bar + percentage of the progress bar (outside of the progress bar) and a counter, to count the quotes which have been displayed on the screen. I need also the total number of quotes - this total number should be automatic so each time I add a new quote (new div) to the list, I dont have to re-count manually and edit this number.
Now I put the quotes into the div like this:
<div id="content">
<div><a href="#">Start button</a>
<div>progress bar</div>
<div>percentage of the progress bar (outside of the progress bar)</div>
<div>counter (the number of already displayed quotes) / total quotes</div>
<div class="floatleft" id="n1">Quote 1</div>
<div class="floatright" id="n2">Quote 2</div>
<div class="floatleft" id="n3">Quote 3</div>
<div class="floatright" id="n4">Quote 4</div>
.... so on...
</div>
Before a quote is displayed on the screen, there is a loading image at the place of that quote (0.5 second then display the div of quote)
Once a quote appears (fadeIn) to the screen, it will be highlighted within 2 seconds - i think, it's the highlight effect of jquery, with the background #66ccff
I need the script to show ALTERNATELY but RANDOMLY the quotes from the top of the screen to the 2/3 down of the screen, then always focus at that place. It means, the script is always leaving blank 1/3 down of the screen. All other quotes which have already displayed will be scrolled up (pushed up).
When the script displays the last quotes, it will fill the 1/3 down of the screen so the final quote will appear at the very bottom of the screen and the total screen will be filled with the content.
If the user leaves the page before the final quote is displayed, then all hidden quotes will be displayed immediately.
Once all quotes have been displayed, it will remain on the page, even if the visitors go to another page then come back to the quotes, the script does not run again (unless the users click the "Start" link again) - I think we can use cookie here (?!)