How do I make an object visible with javascript and CSS

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • londres9b
    New Member
    • Apr 2010
    • 106
    #1

    How do I make an object visible with javascript and CSS

    I have this on my css style:

    Code:
    <style type="text/css">
#container
{visibility:hidden;
   width: 1000px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
</style>
    Then, I have this javascript code:

    Code:
    <script type="text/javascript"> 
window.onload=function(){
	document.getElementById("container").style.display="???";
}
</script>
    What I want to do, is to make the #container visible on page load.

    But as I'm a newbie on css and javascript, I don't know what to put on style.display=" ???"; to make it visible.

    I only know that if I put style.display=" none"; it will not display #container.

    What do I put to make it display?

    Thanks to anyone who can help me.
    Tags: css, div, style display
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Depending on what kind of element #container is, assuming it's a div, set it to 'block'.

        Comment

        • londres9b
          New Member
          • Apr 2010
          • 106
          #3
          I did that, but nothing appeared anyway

          but thanks, I'll check again.

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              you still have visibility set to "hidden". display is a completely different thing.

                Comment

                • londres9b
                  New Member
                  • Apr 2010
                  • 106
                  #5
                  Then how do I make the div appear on page load?

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      set the visibility to "visible"

                        Comment

                        • londres9b
                          New Member
                          • Apr 2010
                          • 106
                          #7
                          yes, i know, but that's in the css style!

                          I want in the javascript

                            Comment

                            • Dormilich
                              Recognized Expert Expert
                              • Aug 2008
                              • 8694
                              #8
                              then change the CSS in JavaScript.

                                Comment

                                • londres9b
                                  New Member
                                  • Apr 2010
                                  • 106
                                  #9
                                  How do I do that?

                                  I have

                                  Code:
                                  <script type="text/javascript"> 
window.onload=function(){
    document.getElementById("container").style.display="???";
}
</script>
                                  How do I put css on that javascript?

                                  P.S. thanks for the help

                                    Comment

                                    • Dormilich
                                      Recognized Expert Expert
                                      • Aug 2008
                                      • 8694
                                      #10
                                      How do I put css on that javascript?
                                      you can use any CSS property via the JavaScript style object (like you did in the example with the display property).

                                      but your CSS rule is not about display, it's about visibility.

                                        Comment

                                        • londres9b
                                          New Member
                                          • Apr 2010
                                          • 106
                                          #11
                                          Oh, ok.
                                          But, lastly, can you give me a short example?

                                            Comment

                                            • Dormilich
                                              Recognized Expert Expert
                                              • Aug 2008
                                              • 8694
                                              #12
                                              set a background color for your website:
                                              Code:
                                              document.body.style.cssText = "background-color: navy;";

                                                Comment

                                                • londres9b
                                                  New Member
                                                  • Apr 2010
                                                  • 106
                                                  #13
                                                  thanks
                                                  i did

                                                  Code:
                                                  <script language="JavaScript">
	function makeVis(container) {
		document.getElementById(container).style.visibility = "visible";
	}
</script>
                                                  and

                                                  Code:
                                                  <body onload="javascript:makeVis('container');">
                                                  it worked.

                                                  It worked fine on firefox but on internet explorer it displays nothing!

                                                  (the javascript is not working, on ie)

                                                  I wouldn't suppose you know anything about this?

                                                  But thanks anyway, you've been a great help

                                                    Comment

                                                    • londres9b
                                                      New Member
                                                      • Apr 2010
                                                      • 106
                                                      #14
                                                      I managed to find something that worked. It now works both on firefox and ie

                                                        Comment

                                                        • Dormilich
                                                          Recognized Expert Expert
                                                          • Aug 2008
                                                          • 8694
                                                          #15
                                                          the language attribute is outdated, better use the type attribute (IE uses JScript, not JavaScript)
                                                          Code:
                                                          <script type="text/javascript">

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...