How to change content of div in a HTML after some time has passed and then start it again?
<p>I am currently creating an app which will be a kind of Digital Display on Android. My problem is I need to show an html page with more than one regions inside it. ( or boxes that are) I am at the moment already implement that but each of those regions have more than one item to put into them. Those switches between elements of each box is done after some specific amount time. And what I am currently doing is after that time elapsed, I just load new data into the region that is elasped and then view that newly created html file with webView. However that method make unnecessary loading and take some time with android devices.</p>

<p>What I want to learn is, is it possible to achieve that switching between each items inside different div 's with some kind of js function?. I read some information about changing contents of divs however i cant find a way to make that after some time.</p>

<p>For example I have 3 different regions which are A , B and C. On A region I have 2 items which will be shown 10sec and 30 sec. On region B there is only one item to show. And also on region C lets say there are 3 different items which got 15sec-25sec-10sec durations. Also I have to show those items again and again. Is there a way to make that loop and content changing after each duration on html? Any information or code piece will be helpful since I dont know much about JS or JQuery.</p>

<p>About those elements inside those different regions: they are consist of text(with some animation too), rss feeds, images, videos, embedded htmls. </p>

<pre><code>textRender += String.format("&lt;div id='text' style='position:relative; overflow:hidden; width: %dpx; height: %dpx; 
                              left: %dpx; top: %dpx'&gt;", widthOfRegio - 10, heightOfRegio,leftOfRegio,topOfRegio);
textRender += String.format("&lt;div id='innerText' style='position:absolute; %s:" + /*leftOfRegio+*/"0px; top: "+/*topOfRegio+*/"0px; 
width: %dpx; %s'&gt;%s&lt;/div&gt;&lt;/div&gt;", startPosition, widthOfRegio-10, textWrap, toTest);
</code></pre>

<p>with this code segment for example i write each element to html file. And also i generate different id's for each of new element i created. For example if i have 3 regions like the example above, i have 3 different boxes with different ids. And i use those tags with some js function which help me to make texts float left right and etc.</p>

<p>And here is the raw generated html looks like:</p>

<pre><code>&lt;div id='text' style='position:relative; overflow:hidden; width: 310px; height: 300px; left: 0px; top: 20px'&gt;
&lt;div id='innerText' style='position:absolute; left:0px; top: 0px; width: 310px; '&gt;&lt;iframe src="http://free.timeanddate.com/clock/i31ww8ou/n514/fn6/fs8/fc9ff/tc000/ftb/bas0/bat1/bacfff/tt0/tw1/th1/ta1/tb4" frameborder="0" width="70" height="24"&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/div&gt; 
&lt;div id='text1' style='position:relative; overflow:hidden; width: 96px; height: 100px; left: 160px; top: -300px'&gt;
&lt;div id='innerText1' style='position:absolute; left:0px; top: 0px; width: 96px; '&gt;&lt;p&gt;&lt;em&gt;&lt;strong&gt;&lt;span style="color:#8b4fff;"&gt;Some Text Goes Here&lt;/span&gt;&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt; 
&lt;div id='text2' style='position:relative; overflow:hidden; width: 96px; height: 100px; left: 53px; top: -306px'&gt;
&lt;div id='innerText2' style='position:absolute; left:0px; top: 0px; width: 96px; '&gt;&lt;p&gt;&lt;em&gt;&lt;strong&gt;&lt;span style="color:#8b4fff;"&gt;Some Text Goes Here&lt;/span&gt;&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>I am using that kind of structure to make texts and rss feeds work with my function. It takes those 2 ids to work with so thats why I create 2 different div id for one region atm.</p>
