Jump to content

Changing CSS visibility with Javascript.


seany123

Recommended Posts

Im not sure if this is a CSS or Javascript problem but basically i want to change the visibilty of a DIV id or class from hidden to visible.

 

This is my current Html code:

 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/main.css"  media="all" />
</head>

<body>

        <script language="javascript">
        
        //Open Login 
        function OPEN_login{
            
        document.getElementById("centeredcontent").style.visibility = "visible"; 
           
        }
        
        //Close Login
        function CLOSE_login(){
            
                   
            
        }
        
        </script>

    <div id="container"> 

        <button onclick="OPEN_login();" class="design1" onmouseover="this.className = 'design2'" onmouseout="this.className = 'design1'">Login</button>
                
        <div id="centeredcontent" style="visibility: hidden;">
            HERE
        </div>
    
    </div>

</body>
</html>

 

This is the CSS:

 

#container {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #E1DDD9;
    color: #564B47;
    font-family: Verdana,Arial,Helvetica,SunSans-Regular,Sans-Serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

#centeredcontent {
    background-color: #F5F5F5;
    border: 1px dotted #000000;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -200px;
    overflow: auto;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 50%;
    width: 400px;
}

.design1{background-color: #ffffff; border: 1px solid #dbdbdd; padding: 5px;}
.design2{color: white; background-color: gray; border: 1px solid black; padding: 5px;}

 

im sure this is very basic, but im very new to CSS and javascript so im getting confused..

 

Thanks for all help!

Link to comment
Share on other sites

really your javascript is very simple and looks correct.. the only thing that i notice is in your script tag, the use of language instead of type..

 

<script type="text/javascript" language="javascript">

 

not sure if that will make a difference, but i believe it might..

Link to comment
Share on other sites

You would need to add an html declartion on top of your page or you'll be working in quirk mode,

e.g. Instead of just html tag you'll have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Link to comment
Share on other sites

i didnt see that! however it didnt fix the problem.

well at least you learned the correct way to write a script tag!.. heh okay let's look at this further..

perhaps you will want to put this function into the head of your html page instead of the body since it is a listener..

Link to comment
Share on other sites

i didnt see that! however it didnt fix the problem.

well at least you learned the correct way to write a script tag!.. heh okay let's look at this further..

perhaps you will want to put this function into the head of your html page instead of the body since it is a listener..

 

yeah okay i was quite confused as to where the javascript had to go, ill place it into the HEAD.

 

i found the problem, the OPEN_login function was missing ()

 

its working now thanks!

Link to comment
Share on other sites

i didnt see that! however it didnt fix the problem.

well at least you learned the correct way to write a script tag!.. heh okay let's look at this further..

perhaps you will want to put this function into the head of your html page instead of the body since it is a listener..

 

yeah okay i was quite confused as to where the javascript had to go, ill place it into the HEAD.

 

i found the problem, the OPEN_login function was missing ()

 

its working now thanks!

shoot yeah it is, my apologies for missing something simple like that...sometimes i overlook the small things

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.