www.webdeveloper.com
Results 1 to 3 of 3

Thread: Adding a DIV every x seconds to the page

Hybrid View

  1. #1
    Join Date
    Mar 2010
    Posts
    1

    Adding a DIV every x seconds to the page

    Hello ppl,
    I've been searching around for different ways to achieve this.
    What I'm trying to do is to add a new DIV to my page without refreshing the actual page, and put that on a timer. Kind of a Live-Blog.
    But lets ignore the timer for now.

    What I have so far:
    Code:
    function createDiv()
        {
            var divTag = document.createElement("article");
            divTag.id = "newArticle";  
            divTag.setAttribute("align","center");
            divTag.style.margin = "0px auto"; 
            divTag.className ="hentry";
            divTag.innerHTML = "<header>This is the title</header>";  
            document.body.appendChild(divTag);
        }
    instead of an actual DIV element I used the Article element since I'm also trying to keep it HTML5. But it works both ways.
    I also added a simple button that calls this function.

    The thing is, it always adds the Div to the bottom of the page (under the footer), while I need it to add it under the header as the new 1st article, and move all the older once down a notch.

    The only way I could think of doing so is to use an Array to store the previous articles, then slide all the array entries down one spot, add the new article to the 1st position, use a For loop to add the newly organized articles.

    Is that the best way to go about it?

    Also, I've noticed that when I press the button, while it does add the Div visually, it doesn't Really add it to the source code. So a manual refresh of the page returns everything to its previous state.
    How can I add these new articles to the actual html code?

    Thanks a lot for any help!
    - soundwave -

  2. #2
    Join Date
    Feb 2010
    Location
    Amsterdam
    Posts
    174
    erm html5 is still in development so it makes no sense to use it..

    function createDiv()
    {
    var divTag = document.createElement("div");
    divTag.id = "newArticle";
    divTag.setAttribute("align","center");
    divTag.style.margin = "0px auto";
    divTag.className ="hentry";
    divTag.innerHTML = "<h1>This is the title</h1>";
    document.body.appendChild(divTag);
    }

    window.onload = function(){
    window.interval = setInterval(createDiv, 1000); // global setinterval 1 sec timer
    }

    if you look in firebug you see it has been added to the source code, if you want to add it to your page you will have to send it to your server which has to include it into the page...
    Last edited by Gozzy82; 03-10-2010 at 10:28 AM.

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    How can I add these new articles to the actual html code?
    By sending the code to a server program.

    Don't use innerHTML. IE does not construct the html5 elements correctly if you do.
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles