How can I change the login
with another css design, when the user log in in the same page

Question

I made a Navigation Bar which contain a Login , so I want to change it with a div (contain image and user's name), when the user log in !

NavBar :

 <div class="collapse navbar-collapse" id="axit-nav">
            <ul class="nav navbar-nav navbar-right">
                <li><a> <button id="myButton">Create event</button></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-left">
                <li><a class="dsctv hidden-xs hidden-sm">events</a></li>
                <li><a class="dsctv hidden-xs hidden-sm">Login</a></li>
                <li><img alt="Logo brand Wevento" class="navbar-brand hidden-xs hidden-sm" src="theme/img/logos/Logo%20White%20Blue.png" </li>
            </ul>
        </div>

PHPcode :

<?php 
session_start();
if (isset($_SESSION['Mail'])) {
     header('Location: admin/index.php');
}
include 'admin/init.php';    
// Check for ADMINS
if($_SERVER['REQUEST_METHOD'] == 'POST'){

    $mail= $_POST['mail'];
    $password= $_POST['password'];
    $hashedPass= sha1($password);

    // check if the user exist in DB

    $stmt = $conn->prepare("SELECT Mail, Password FROM admin WHERE Mail= ?  AND Password = ? ");
    $stmt->execute(array($mail, $hashedPass));
    $count = $stmt->rowCount();

    if($count > 0) {
        $_SESSION['Mail'] = $mail;

    } 
}
 ?>

[Refer this link. ](http://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript) It is the same issue of DOM element replacement. — Vaishnav Mhetre, Apr 29 '17 at 20:21

score 1 · Accepted Answer · answered Apr 29 '17 at 20:49

You need to write a check to confirm if the session exists. If yes, show the user name, if not, show the login link. Something like this:

<div class="collapse navbar-collapse" id="axit-nav">
    <ul class="nav navbar-nav navbar-right">
        <li><a> <button id="myButton">Create event</button></a></li>
    </ul>
    <ul class="nav navbar-nav navbar-left">
        <li><a class="dsctv hidden-xs hidden-sm">events</a></li>
        <?php if (!isset($_SESSION)) { ?>
        <li><a class="dsctv hidden-xs hidden-sm">Login</a></li>
        <?php } else { ?>
        <li><a class="dsctv hidden-xs hidden-sm"><?php echo $_SESSION['user_name'];?></a></li>
        <?php } ?>
        <li><img alt="Logo brand Wevento" class="navbar-brand hidden-xs hidden-sm" src="theme/img/logos/Logo%20White%20Blue.png" </li>
    </ul>
</div>

Of course echo out the user name based on how you stored it in the session.

Thank you very muck that answer my question ! – Amine Karimi Apr 29 '17 at 20:57 — Amine Karimi, Apr 29 '17 at 20:57

Vladimir Jovanović · Answer 2 · 2017-04-29T20:37:52.757

-2

If you are using jQuery, I think you can edit with .css() method.

Something like

$('your-element').click(function () {
 $(this).css('background', '#000');
};

jQuery .css() method documentation : http://api.jquery.com/css/

edited Apr 29 '17 at 20:37

answered Apr 29 '17 at 20:30

Vladimir Jovanović

5,143
5
21
42

1

Thank you for this answer, but where should I place this code ? because I want to replace it when the user log in ! – Amine Karimi Apr 29 '17 at 20:34
I honestly don't know, but try adding the – Vladimir Jovanović Apr 29 '17 at 20:38
1

Thank you anyway :) – Amine Karimi Apr 29 '17 at 20:45

How can I change the login with another css design, when the user log in in the same page

2 Answers2

How can I change the login
with another css design, when the user log in in the same page