CODEWITHSUNDEEP
javascriptcssdom-eventsvisibility
rdelfin
rdelfin

Reputation: 816

How to dynamically hide an object in Javascript

I have a web page where you can log in with your account. The idea is that when you press your name a small square appears (similar to what Stack Overflow does) with some of your basic information (name, email, etc.) It's a mix of PHP, CSS and Javascript but the PHP is only to chose the name of the user. So, I have the following code:

<style type="text/css">
table.UserInfo
{
    background-color:#000;
    width:100;
    height:100;
    position:fixed;
    top:10px;
    right:10px;
}
p.UserText
{
    color:#FFF;
}
</style>
<script type="text/javascript">
function showUser()
{
    //Unknown code here
}
</script>

In some part of the page...: Welcome visitor !

The visitor is actually set via php to a user that logged in or visitor if there is none. Here is the box:

<table class='UserInfo' id='UserInfo' >
<tr>
<td><p class='UserText'>This user is a guest user. There is no information available.</p></td>
</tr>
</table>

So, I need the box to appear when I press visitor, so the code would go in showUser() and I need to know where I have to put my Javascript code so the box is initially hidden.

For the box showing when I pressed it I tried putting this code in the showUser() function:

document.getElementById('UserInfo')style.visibility = 'hidden';

But it didn't work. I put it hidden because it starts of as visible.

Upvotes: 1

Views: 25692

Answers (3)

Julian
Julian

Reputation: 4676

You could also do this:

var_name = document.getElementById("idname").style.display = 'none';

Upvotes: 9

Alex Shilman
Alex Shilman

Reputation: 1547

Or jquery:

$('.anyClass').fadeOut('fast');

Upvotes: -1

hackartist
hackartist

Reputation: 5264

That is the correct way to do it but you need to have a dot between the getElementById and the style property for the javascript code to work. If you want to have the element start off as hidden either give it a class where 

visibility:hidden;

or you can put it as the inline style for the hidden element. You could also do it in javascript when the load event fires but it is better to do it in the html because if the page takes a long time to render then the user will see what was supposed to be hidden until the ready event fires. Best of luck.

Upvotes: 1

Related Questions