Question

I want to close and create a new div when the countdown hits 0. My div looks like this

<div id="bij2">Test
    <div id="bij2Blauw">
        <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3" class="titel">Resterende tijd</td>
            </tr>
            <tr>
                <td height="25" colspan="3" align="center" valign="middle">
                    <input id="aktie2" type="text" class="countdownTekst" size="27" readonly="readonly">
                    <script language="javascript">
                        countdown(2012, 7, 29, 'aktie2', 'bij2')
                    </script>
                </td>
            </tr>
            <tr>
                <td height="60">
                    <input name="kopen1" type="submit" class="kopen" id="kopen1" value="Koop nu"
                    />
                </td>
                <td height="60" colspan="2" align="right" valign="bottom">
                    <span class="euro">&#8364;</span>
                    <span class="prijs">14,95</span>
                </td>
            </tr>
        </table>
    </div>
</div>

This is the countdown

function countdown(yr, m, d, idCountdown, divId) {
    var theyear = yr;
    var themonth = m;
    var theday = d;
    var today = new Date();
    var todayy = today.getYear();
    if (todayy < 1000) todayy += 1900
    var todaym = today.getMonth();
    var todayd = today.getDate();
    var todayh = today.getHours();
    var todaymin = today.getMinutes();
    var todaysec = today.getSeconds();
    var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
    var futurestring = montharray[m - 1] + " " + d + ", " + yr;
    var dd = Date.parse(futurestring) - Date.parse(todaystring);
    var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
    var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
    var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
    var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
    var dag = "dagen";

    if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
        document.getElementById(idCountdown).value = "voorbij";
        $(document.getElementById(divId)).fadeOut(2000);
        //removeElements(document.getElementById(divId));
        setTimeout("creatediv(document.getElementById(divId))", 3000);
        return;
    } else if (dday <= 1) {
        dag = 'dag';
    }
    document.getElementById(idCountdown).value = dday + ' ' + dag + ' ' + dhour + " uur " + dmin + " min " + dsec + " sec";
    setTimeout(function () {
        countdown(theyear, themonth, theday, idCountdown);
    }, 1000);
}

So when the time is over it will fade out the div using jQuery. Then i want to create a new div. I use this:

function creatediv(id) {

    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.className = 'newclass';
    newdiv.style.float = "left";
    newdiv.innerHTML = "nothing";

    document.body.appendChild(newdiv);
    alert(id + 'gemaakt');
}

But this creates a div at the bottom of the page and i want a new one at the same position as the div that fades out. What do i need to change?

Answer 1

It’s really simple:

$('#bij2').replaceWith( newcontent );