How to make a DIV disappear after a few seconds

Navigation
0

In my adventure to discover html / php, I came across another problem. I have a DIV, where the user data appears after a correct login, and would like to make that 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>

From my research, several tutorials use this function to make the DIV disappear, but I can not.

Am I doing something wrong? Or did I forget something important?

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

    
asked by anonymous 12.06.2017 / 13:31

2 answers

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çãoparaocultaradivdepoisde5segundos--><scripttype="text/javascript">
        document.addEventListener('DOMContentLoaded', function(){ 
            setTimeout(function() {
                $("#goaway").fadeOut().empty();
            }, 5000);
        }, false);
    </script>
</div>

</body>
</html>
    
12.06.2017 / 13:47
1

With the script below you could do this. The number '2000' in the function is the desired number of seconds multiplied by a thousand, ie 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><divid="teste">
<p>teste</p>
</div>
    
12.06.2017 / 13:44
How to use and what is the timer function in C #? How to check if a JInternalFrame is already open in JDesktopPane?