How to make a DIV disappear after a few seconds

Asked

Viewed 4,656 times

0

In my adventure discovering html/php, I ran into another problem. I have a DIV, where the user data appears after a correct login, and I would like to make this DIV disappear through javascript.

This is my index.php:

<?php include('server.php');

    //se não estiver logado, não consegue aceder a esta página
    if (empty($_SESSION['username'])){
        header('location: login.php');
    }

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>Mobies</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">

<script type="text/javascript">
        setTimeout(function() {
            $("#goaway").fadeOut().empty();
        }, 5000);
</script>

</head>

<body>

<div class="goaway">
    <div class="header">
        <h2>Página Principal</h2>
    </div>

    <div class="content">
        <?php if (isset($_SESSION['success'])): ?>
            <div class="error success">
                <h3>
                    <?php
                        echo $_SESSION['success'];
                        unset($_SESSION['success']);
                    ?>
                </h3>
            </div>
        <?php endif ?>

        <?php if (isset($_SESSION["username"])): ?>
            <p>Bem-vindo <strong><?php echo $_SESSION['username']; ?></strong></p>
            <p><a href="index.php?logout='1'" style="color: red;">Logout</a></p>
        <?php endif ?>
    </div>
</div>

</body>
</html>

In my code I have this function:

<script type="text/javascript">
        setTimeout(function() {
            $("#goaway").fadeOut().empty();
        }, 5000);
</script>

Through my research, several tutorials use this function to make the DIV disappear, but I’m not getting.

Am I doing something wrong? Or have I forgotten something important?

When I make a alert("Olá Mundo!") in the script, it works as soon as you log in.

php javascript jquery html

  • setTimeout(Function() { $('#div'). fadeOut('fast'); }, 5000);

2 answers

2

With the script below you could do this. The '2000' number in the function is the desired amount of seconds multiplied by a thousand, that is, if you want to hide the div in 6 seconds = 6000, if in 4 = 4000 and so on.

setTimeout(function() {
   $('#teste').fadeOut('fast');
}, 2000);
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="teste">
<p>teste</p>
</div>

1


Your code was missing the inclusion of jQuery. Your correct code would look like this:

<?php include('server.php');

    //se não estiver logado, não consegue aceder a esta página
    if (empty($_SESSION['username'])){
        header('location: login.php');
    }

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>Mobies</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>

<body>

<div class="goaway">
    <div class="header">
        <h2>Página Principal</h2>
    </div>

    <div class="content">
        <?php if (isset($_SESSION['success'])): ?>
            <div class="error success">
                <h3>
                    <?php
                        echo $_SESSION['success'];
                        unset($_SESSION['success']);
                    ?>
                </h3>
            </div>
        <?php endif ?>

        <?php if (isset($_SESSION["username"])): ?>
            <p>Bem-vindo <strong><?php echo $_SESSION['username']; ?></strong></p>
            <p><a href="index.php?logout='1'" style="color: red;">Logout</a></p>
        <?php endif ?>
    </div>
    <!-- jQUery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Ação para ocultar a div depois de 5 segundos -->
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function(){ 
            setTimeout(function() {
                $("#goaway").fadeOut().empty();
            }, 5000);
        }, false);
    </script>
</div>

</body>
</html>

Browser other questions tagged php javascript jquery html

You are not signed in. Login or sign up in order to post.