How to replace a html div with another div using just PHP?

Question

I wanted a div to show after a number of seconds, thus I have made it into two parts, one is a php that echoes that div, and the second is a javascript that replaces the div with another div after some seconds. The problem is before that javascript is executed, The div code shows for 2-3 seconds. Which I do not want. May be we can do this in just PHP? This is the PHP code

if(isset($_GET['id']))
{
$slide = $_GET["id"];
$mytitle='Your id is '.$slide.' ,Welcome';
$murl='"https://example.com/?id='.$slide.'"';
echo '<div id="countdown"> </div>';
echo '<div id="loader"></div>';
echo '<div id="welcome"><a href='.$murl.'>'.$mytitle.'</a></div>';
</div>';
}

This is the javascript

<script>
window.onload = function() {
var countdownElement = document.getElementById("countdown"),
    welcomeButton = document.getElementById("welcome"),
    loader=document.getElementById("loader"),
    seconds = 30,
    second = 0,
    interval;

    welcomeButton.style.display = "none";

interval = setInterval(function() {
    countdownElement.firstChild.data = "Preparing your welcome in " + (seconds - second) + " seconds, Please wait";
    if (second >= seconds) {
        welcomeButton.style.display = "block";
        loader.style.display="none";
        clearInterval(interval);
    }

    second++;
}, 1000);
}
</script>

countdownElement.firstChild.data - there is no child element within that particular DIV so I would guess that will throw an error and .data should likely be either .innerHTML or .textContent — Professor Abronsius
– Professor Abronsius, Commented Nov 23, 2022 at 8:07

foder · Accepted Answer · 2022-11-23 12:34:24Z

2

You won't be able to do dynamic changes to your page using php.

Here, the issue is that the javascript hides your welcome div. You can add style="display: none" to the div in the php part, so that when the page loads, the div is already hidden.

You can then remove welcomeButton.style.display = "none"; from the javascript

edited Nov 23, 2022 at 12:34

answered Nov 23, 2022 at 3:54

foder

1137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maxim Mazurok Over a year ago

Couldn't hold myself after reading first line, so put my answer up, but your suggestions are very likely to be very sensible :)

hindisong.cc Over a year ago

That was very useful, But I hoped I would do all that in PHP, since I didn't want my page to be overloaded with js files. But this solved my main problem why I posted this question.

Maxim Mazurok · Accepted Answer · 2022-11-23 04:00:23Z

1

Disclaimer: I'm 99.99% sure you need to use JS.

However, there is a way to dynamically replace elements after a certain timeout using only PHP. You can achieve this by redirecting the user to another page (or the same but with certain URL query params, like ?welcome=off), see Page redirect after certain time PHP which suggests using header( "refresh:5;url=wherever.php" );

But as I mentioned in the first line, in virtually any normal situation you should prefer to use JS to do this stuff. For example, if you have a form and the user starts typing - they might lose progress when the page redirects.

answered Nov 23, 2022 at 4:00

Maxim Mazurok

4,2002 gold badges29 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to replace a html div with another div using just PHP?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related