Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Thanked 0 Times in 0 Posts

    Using a Div to shade the Background

    What I want to do is a button that, when clicked, shades the screen and opens a new box above it. The box code works fine alone, but if I add the javascript that shades the screen, the button won't work at all.

    I use a div as the button, with an onClick method that changes the box.display from none to block or the opposite.

    This is the function that changes the display. If I take out the whole first part (the background part), it works fine (though at the first time I have to click twice to show the box)

    function showBox ( method ) {
    	background = document.getElementbyId( 'shade' );
    	if ( background != null ) {
    		background = background.style;
    		if ( background.display == 'none' ) background.display = 'block';
    		else background.display = 'none';
    	box = document.getElementById( method );
    	if ( box != null ) {
    		box = box.style;
    		if ( box.display == 'none' ) box.display = 'block';
    		else box.display = 'none';

    Now this is the CSS formatting of the background and the box:

    .box {
    	padding: <?php print $style -> getPadding( ); ?>;
    	display: none;
    	position: absolute;
    	z-index: 2; 
    	<?php css_base_1_format ( $style , $colorset ); ?>
    	<?php css_setAlpha ( $style -> getAlpha( ) ); ?>
    .background {
    	display: none;
    	position: absolute:
    	z-index: 1;
    	width: 100%;
    	height: 100%;
    	background-color: '#000000';
    	<?php css_setAlpha ( 0.5 ); ?>
    Don't mind the PHP css_setAlpha method. It merely prints alpha settings for each browser. And the css_base_1_format prints things like border and background color.

    Now this is the HTML implementation of both:

    <!-- fullscreen shading -->
    <div id="shade" class="background"></div>
    <!-- box_delete -->
    <div id="box_delete" class="box" style="width:300;" >
    	<center> Are you sure you want to delete <?php print $mailboxname; ?>? <br />
    	<table border="0">
    		<td class="text" width="100" > <a href="webmail_deletebox.php?box=<?php print $mailboxname; ?>"> <center> Yes </center> </a> </td>
    		<td class="text" width="100" onClick="return showBox( 'box_delete' );" > <center> No </center> </td>
    I figure it's probably related to the double-click thing. I have no idea why it happens.

    I had written getElementbyId instead of getElementById, sorry.
    Now the button works, but while the box appears, the shade does not.
    Last edited by gabrielkfl; 02-10-2010 at 03:30 PM.

  2. #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Jakarta, Indonesia.
    Thanked 78 Times in 76 Posts
    Remove the quotes of background-color,
    and retry. Also, background is a keyword
    in CSS, try to use other like shadow, etc.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts