Databases
StackOverflow2013
Postsdbo
POTrying to set timer on a switch with jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to set timer on a switch with jQuery
    text
    copied!<p>With the help of Google (and a lot of results here at StackOverflow) my co-worker and I have managed to scrap together a "rotator". The main picture with blue buttons on the right at www.buisnessinlake.com for reference.</p> <p>We have it functioning properly but now we're trying to get it to automatically switch between the different states at set intervals. We're using a switch to do this now but would like to add the auto part. I've found other script examples on how to add a timer, but not one that works with a switch like this, so I'm not sure where to go from here.</p> <p>This is where we're at:</p> <pre><code> $(document).ready(function () { var theid = $("div.open").attr("id"); //ACCORDION BUTTON ACTION $('div.accordionButton').click(function () { // console.warn(theid); var theitem = $("#" + theid); var doanimation = true; if ($(this).attr("id") == theid) { doanimation = false; }; theid = $(this).attr("id"); if (doanimation) { switch (theid) { case "rotator_1": $('div.arrow').animate({ left: '-24', top: '-3' }, 300, function () { // Animation complete. }); $('#picsunder').css("background-image", "url(../../content/images/rotator_1.png)"); $('#pics').fadeTo('slow', 0, function () { //animationcomplete $(this).css("background-image", "url(../../content/images/rotator_1.png)"); $(this).fadeTo('fast', 1); }); break; case "rotator_2": $('div.arrow').animate({ left: '-24', top: '55' }, 300, function () { // Animation complete. }); $('#picsunder').css("background-image", "url(../content/images/rotator_2.png)"); $('#pics').fadeTo('slow', 0, function () { //animationcomplete $(this).css("background-image", "url(../content/images/rotator_2.png)"); $(this).fadeTo('fast', 1); }); break; case "rotator_3": $('div.arrow').animate({ left: '-24', top: '113' }, 300, function () { // Animation complete. }); $('#picsunder').css("background-image", "url(../content/images/rotator_4.png)"); $('#pics').fadeTo('slow', 0, function () { //animationcomplete $(this).css("background-image", "url(../content/images/rotator_4.png)"); $(this).fadeTo('fast', 1); }); break; case "rotator_4": $('div.arrow').animate({ left: '-24', top: '171' }, 300, function () { // Animation complete. }); $('#picsunder').css("background-image", "url(../content/images/rotator_3.png)"); $('#pics').fadeTo('slow', 0, function () { //animationcomplete $(this).css("background-image", "url(../content/images/rotator_3.png)"); $(this).fadeTo('fast', 1); }); break; } } //console.warn(theid); $("div.accordionButtonSelected").removeClass("accordionButtonSelected").addClass("accordionButton"); $("div.accordionContentSelected").removeClass("accordionContentSelected").addClass("accordionContent"); $(this).next().removeClass("accordionContent").addClass("accordionContentSelected"); $(this).removeClass("accordionButton").addClass("accordionButtonSelected"); $('div.accordionContent').slideUp('normal'); $(this).next().slideDown('normal'); }); //HIDE THE DIVS ON PAGE LOAD $("div.accordionContent").hide(); //Opens DIV on load that has the ID of "open" $("div.open").trigger('click'); }); </code></pre> <p>Here's the HTML as requested:</p> <pre><code> &lt;div id="photo_rotator"&gt; &lt;div id="pics"&gt;&lt;/div&gt; &lt;div id="picsunder"&gt;&lt;/div&gt; &lt;div id="wrapper"&gt; &lt;div class="arrow"&gt;&lt;/div&gt; &lt;div class="accordionButton open" id="rotator_1"&gt;Why Lake&lt;/div&gt; &lt;div class="accordionContent"&gt;@Html.ActionLink("Our prime location and business-friendly approach make Lake County the perfect location to live, work and play.", "Index", "WhyLake", Nothing, New With {.class = "rotator"})&lt;/div&gt; &lt;div class="accordionButton shadow" id="rotator_2"&gt;Opportunity Centers&lt;/div&gt; &lt;div class="accordionContent"&gt;@Html.ActionLink("Lake County’s three Business Opportunity Centers offer a myriad of programs and services to support your business.", "BusinessOpportunityCenters", "BusinessSupport", Nothing, New With {.class = "rotator"})&lt;/div&gt; &lt;div class="accordionButton shadow" id="rotator_3"&gt;Economic Coordinators&lt;/div&gt; &lt;div class="accordionContent"&gt;@Html.ActionLink("Lake County’s economic development coordinators are here to assist with the information or support your business needs.", "EconomicDevelopmentCoordinators", "BusinessSupport", Nothing, New With {.class = "rotator"})&lt;/div&gt; &lt;div class="accordionButton shadow" id="rotator_4"&gt;Site Selection&lt;/div&gt; &lt;div class="accordionContent"&gt;&lt;a class="rotator" href="http://propertyfinder.lakecountyfl.gov"&gt;With an abundance of available land and vacant building space, we can pinpoint the perfect site to locate your business.&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p> Any ideas on how I can add a simple timer to switch between each case every 10 seconds? Most appreciated!</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