Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    1
    Thanks
    0
    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)

    Code:
    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:

    Code:
    .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:

    Code:
    <!-- 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>
    	</table>
    	</center>
    </div>
    I figure it's probably related to the double-click thing. I have no idea why it happens.



    EDIT:
    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
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    376
    Thanks
    9
    Thanked 55 Times in 54 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
    •