Button to make other div visible

Question

I am fairly new and just experiencing with some html/css . I was planning to make a login screen pop up in the middle of when a user clicks "login".

i've set up a div which is hidden on the screen and i want to make it visible when the user clicks on "login"

the problem i'm having is making the Div visible again . Here is the CSS:

#loginscreen {
    position: absolute;
    width: 400px;
    height: 500px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 2px solid black;
    border-radius: 40px;
    background-color: lightgrey;
    visibility: hidden;
    z-index: 1000;
}

    .loginbtn:active + #loginscreen
    {
      visibility: visible

    }

Use a JavaScript onclick event listener. Fairly simple to do — Eli Nathan, Mar 19 '16 at 20:24
Are you counselling inline javascript? *We say 'nay nay'...* External js is always the way to go. — cssyphus, Mar 19 '16 at 20:47
I wasn't no, an event listener could be either inline or external. It comes down to preference, when I was first learning js using it inline helped a lot at first but now I can't stand reading code with JavaScript making the html look messy. External all the way! — Eli Nathan, Mar 19 '16 at 20:55

score 2 · Answer 1 · answered Mar 19 '16 at 20:24

2

:active only works for as long as the element is being clicked. As soon as the click is no longer being held the element will no longer be active.

Try using Javascript to do this, for example:

<button type="button" onclick="document.getElementById('<id-of-div>').style.visibility = 'visible'"> Login </button>

Where <id-of-div> is whatever id you have assigned to the div you wish to make visible.

answered Mar 19 '16 at 20:24

theblindprophet

7,767
5
37
55

This would be the best answer because it's simply using JavaScript. I see JQuery as something to be used to enhance JS, but if there's a way to use nice clean JavaScript then you should do it. I'd put it in an external file though rather than inline. TRY: document.getElementById('').addEventListener('click', function() { visibilityChange() }); function visibilityChange { document.getElementById('').style.visibility = 'visible'; } – Eli Nathan Mar 19 '16 at 21:13

score 0 · Answer 2 · edited May 23 '17 at 11:53

You cannot trap a user event ("click") without using javascript (or, better yet, jQuery). As a beginner, I first suggest you use jQuery rather than pure javascript. For one thing, it's much less typing and (imho) far easier to master. You code in jQuery, and behind the scenes jQuery turns that into javascript at runtime. To use jQuery, all you must do is include the jQuery library in the <head> tags of each page, like this:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

The jQuery to show the login form would look something like this:

$('#mybutt').click(function(){
    $('#loginscreen').fadeIn(800);
});

Here is an example you can use for ideas:

jsFiddle Demo

$('#mybutt').click(function(){
  $('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
  $('#loginscreen').fadeOut(800);
});

div{position:relative;box-sizing:border-box;}
#loginscreen {
    position: absolute;
    width: 400px;
    height: auto;
    top:0;
    right: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: lightgrey;
    z-index: 1000;
    display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
  #headLeft{float:left;width:80%;}
  #headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="loginscreen">
    <div id="logHead">
        <div id="headLeft">Login:</div>
        <div id="headRight"><div id="logX">X</div></div>
    </div>
    <div id="logTop">
        <div id="logUN"><input type="text" id="username" placeholder="user"/></div>
        <div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
    </div>
    <div id="logBott">
        <button>Login</button>
    </div>
</div>
<input type="button" id="mybutt" value="Login" />

Since you are new to jQuery, here are some free beginner-level tutorials to get you started. (It's where I learned myself, and they're free)

Button to make other div visible

2 Answers2