Databases
StackOverflow2013
Postsdbo
POTooltip timed tutorial using fadeLoop show and hide divs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTooltip timed tutorial using fadeLoop show and hide divs
    text
    copied!<p>So I created an online tooltip tutorial, and set each tooltip to fade in and fade out in 7 second intervals. Everything works pretty well, except that when the button to turn on the interactive tutorial is first turned on, all of the tooltips flash on the screen for a second - which I do not want to happen. Any ideas on how I eliminate this from happening?</p> <p>Also, I would like to add a 300ms overlap from the time one tooltip fades out and the next fades in. How do I adjust me code to allow for that?</p> <p>Here is my Javascript to control the fadeLoop:</p> <pre><code>&lt;script src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ fadeLoop() function fadeLoop() { var counter = 0, divs = $('.fader').hide(), dur = 300; function showDiv() { $("div.fader").fadeOut(dur) // hide all divs .filter(function(index) { return index == counter % divs.length; }) // figure out correct div to show .delay(dur) // delay until fadeout is finished .fadeIn(dur); // and show it counter++; }; // function to loop through divs and show correct div showDiv(); // show first div return setInterval(function() { showDiv(); // show next div }, 7 * 1000); // do this every 7 seconds }; $(function() { var interval; $("#start").click(function() { if (interval == undefined){ interval = fadeLoop(); $(this).val("Stop"); } else{ clearInterval(interval); $(this).val("Start"); interval = undefined; } }); }); }); &lt;/script&gt; </code></pre> <p>Here is my HTML:</p> <pre><code>&lt;!--#include file="header.asp"--&gt; &lt;% if Request("interactive") = "on" then %&gt; &lt;form name="tutorial"&gt; &lt;div class="fader"&gt;&lt;div class="arrow-w arrowlocation1" style="font-size:1em;" &gt;&lt;/div&gt;&lt;div id="tutorial1" class="tutorial createquestion1"&gt;Start by creating a title and selecting a folder for your question to be stored in.&lt;/div&gt;&lt;/div&gt; &lt;div class="fader"&gt;&lt;div class="arrow-w arrowlocation2" style="font-size:1em;" &gt;&lt;/div&gt; &lt;div id="tutorial2" class="tutorial createquestion2"&gt;Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.&lt;/div&gt;&lt;/div&gt; &lt;div class="fader"&gt;&lt;div class="arrow-w arrowlocation3" style="font-size:1em;" &gt;&lt;/div&gt; &lt;div id="tutorial3" class="tutorial createquestion3"&gt;Select your options and/or upload an attachment (file, video or audio).&lt;/div&gt;&lt;/div&gt; &lt;div class="fader"&gt;&lt;div class="quicktiptitle quicktiplocation4"&gt;QUICK TIP&lt;/div&gt;&lt;div class="arrow-n arrowlocation4" style="font-size:1em;" &gt;&lt;/div&gt; &lt;div id="tutorial4" class="quicktip createquestion4"&gt;To create questions easier update your question preferences in your account area options.&lt;/div&gt;&lt;/div&gt; &lt;div class="fader"&gt;&lt;div class="arrow-w arrowlocation5" style="font-size:1em;" &gt;&lt;/div&gt; &lt;div id="tutorial5" class="tutorial createquestion5"&gt;Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.&lt;/div&gt;&lt;/div&gt; &lt;div class="fader"&gt;&lt;div class="arrow-e arrowlocation6" style="font-size:1em;" &gt;&lt;/div&gt; &lt;div id="tutorial6" class="tutorial createquestion6"&gt;Write your questions, answers and you are ready to go.&lt;/div&gt;&lt;/div&gt; &lt;div class="fader"&gt;&lt;div class="arrow-w arrowlocation7" style="font-size:1em;" &gt;&lt;/div&gt; &lt;div class="quicktiptitle quicktiplocation7"&gt;QUICK TIP&lt;/div&gt; &lt;div id="tutorial7" class="quicktip createquestion7"&gt; Click on this icon to open and close sections that you don't use. These will remain closed whenever you visit this page until you open them again.&lt;/div&gt;&lt;/div&gt;&lt;/form&gt; </code></pre> <p>Any thoughts?</p> <p>Chris</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload