Dynamically update div content

**roadjan** · 03-30-2009, 08:45 AM

Hi

General Q - and forgive me if this is in the wrong area. I have no coding experience but want to dynically update div content, changing text and background images (styled with css). This is to update an area on a page used for promotions and I want a slideshow effect but the promotions are html and css styled so it is not just a case of having a slideshow for images (if that makes sense).... Is there a way to do it and where should I be looking, I want to avoid flash slideshows if possible?

Thanks in advance for any help.

**codeexploiter** · 03-30-2009, 08:50 AM

You can do this with JavaScript without much trouble. DD provides some slideshows here. Select the one you want to use. Read the steps required to integrate it in your page. If you have any issue, post the issue in the forums, so that the users will be able to help you.

**roadjan** · 03-30-2009, 08:54 AM

These are good, but i want up date the text within the div's dynamically, so after, say 5 seconds, the text changes in the div from "original text" to "new text" and then possibly "newer text" and then back to "original text"?

**codeexploiter** · 03-30-2009, 09:49 AM

Yes you can here is a simple version of the feature that you've mentioned in your post

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
    </head>
    <body>
        <div id="container">
            This is the default text
        </div>
        <a href="#" id="link">Click to change</a>
        <script type="text/javascript">
            var a = document.getElementById('link');
            a.onclick = function(){
                var d = document.getElementById('container');
                var def = d.childNodes[0].nodeValue;
                t = 5000;
                setTimeout(function(){
                    d.childNodes[0].nodeValue = "New Text";
                    setTimeout(function(){
                        d.childNodes[0].nodeValue = "Newer Text";
                        setTimeout(function(){
                            d.childNodes[0].nodeValue = def;
                        }, t);
                    }, t);
                }, t);
            }
        </script>
    </body>
</html>

Copy the above furnished source code and save it with an extension of either .htm or .html. After this open the HTML file in any browser and click the link 'Click to change'. After click the link it will change the content of the div element after 5 seconds then after 5 seconds it will again change the content and after 5 seconds it will change the content back to the original content.

Hope this helps.

**roadjan** · 03-30-2009, 10:24 AM

This is great - one final query, can you do it without having to click on a link, i.e. it is automated when the page is loaded?

Thanks for all your help

**codeexploiter** · 03-30-2009, 10:59 AM

Sure check the following source code. Just load the page and wait the updation will be done automatically unlike the earlier time.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
    </head>
    <body>
        <div id="container">
            This is the default text
        </div>        
        <script type="text/javascript">
            window.onload = function(){
                var d = document.getElementById('container');
                var def = d.childNodes[0].nodeValue;
                t = 5000;
                setTimeout(function(){
                    d.childNodes[0].nodeValue = "New Text";
                    setTimeout(function(){
                        d.childNodes[0].nodeValue = "Newer Text";
                        setTimeout(function(){
                            d.childNodes[0].nodeValue = def;
                        }, t);
                    }, t);
                }, t);
            };
        </script>
    </body>
</html>

Hope this helps.

**roadjan** · 03-30-2009, 11:08 AM

Brilliant!! I have the "javascript made easy" book from sitepoint on it's way as we speak!! Is there a way to loop this so it is continuous? I think I am there after that.

**codeexploiter** · 03-31-2009, 04:06 AM

Here it is

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
    </head>
    <body>
        <div id="container">
            This is the default text
        </div>
        <script type="text/javascript">
            /**
             * @method update
             * The function responsible for updating a div element starting from the page loading to the page close.
             * @param {void}
             * @return {void}
             */
            function update(){
                var d = document.getElementById('container');
                var def = d.childNodes[0].nodeValue;
                t = 5000;
                setTimeout(function(){
                    d.childNodes[0].nodeValue = "New Text";
                    setTimeout(function(){
                        d.childNodes[0].nodeValue = "Newer Text";
                        setTimeout(function(){
                            d.childNodes[0].nodeValue = def;
                            update();
                        }, t);
                    }, t);
                }, t);
            }
            
            /**
             * Inovking the update function through window object's onload event.
             */
            window.onload = update;
        </script>
    </body>
</html>

Hope this helps.

**queerfm** · 04-09-2009, 01:58 PM

Hi I am wondering how do i make this script show HTML?
As it seems it shows html as text.

Can anyone help?

Thread: Dynamically update div content

Thread Tools

Search Thread

Dynamically update div content

The Following User Says Thank You to codeexploiter For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions