javascript - Can't align the hidden divs to appear at the center of the page vertically and horizontally on visibility -
i can't align hidden divs @ center of page.
if give position them relative , scroll increases move 1 page (i.e div not aligned vertically center of page)
should place 3 divs in 1 container div??
please help!!!
many in advance..
<body> <div id ="page1" class="page" style=""visibility:visible> content <!-- contains button hides div , makes next div visible --> </div> <div id="page2" class="page"> content <!-- contains 2 buttons , next div --> </div> <div id ="page3" class="page"> content <!-- contains 2 buttons , submit --> </div> </body>
the css using is:
.page { position: absolute; visibility:hidden; }
the javascript used is:
<script language="javascript"> var currentlayer = 'page1'; function showlayer(lyr){ hidelayer(currentlayer); document.getelementbyid(lyr).style.visibility = 'visible'; currentlayer = lyr; } function hidelayer(lyr){ document.getelementbyid(lyr).style.visibility = 'hidden'; } </script>
this how center div current set demo http://jsfiddle.net/kevinphpkevin/g8r7z/
#page1 { position:absolute; top:50%; right:0; left:0; background:#ccc; width:200px; margin:-50px auto 0 auto; }
Comments
Post a Comment