SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying DIV tags

    I have a couple of DIV tags I am trying to display. I thought it would be real simple but it is not.

    1) A div tag with nothing in it - it needs to fill out the screen with a background color. It only shows a small portion along the top in IE but seems to work in Firefox.

    2) A div tag with an image in it. It goes over the top of the previuos one. I would like to it centered on the screen, but it doesn't.

    Code:
     <p style="text-align:center; font-size:large;">
     	<input type="button" value="Show It" onclick="glazeOver();" />
     </p>
     <%-- underLayer --%>
     <div id="divUnderLayer" style="display:none; position:absolute;width:100%;height:100%;top:0px;left:0px;z-index:10; background-color:#CFCFCF;" class="modalBackground">
     	
     </div>
     <%-- popupSample --%>
     <div id="divPopupSample" style="display:none;position:absolute;z-index:100;background-color:White;">
     	<img src="uploadCircle.GIF" border="0" />
     </div>
     <script language="javascript">
     	function glazeOver()
     	{
     		var divLayer1 = document.getElementById('divUnderLayer');
     		// scroll to top
     		window.scroll(0,0);
     		// make visisble
     		divLayer1.style.display = '';
     		
     		var divLayer2 = document.getElementById('divPopupSample');
     		// make visisble
     		divLayer2.style.display = '';
     		// set image to dead-center of screen
     		divLayer2.style.top = window.screen.height / 2;
     		divLayer2.style.left = window.screen.width / 2;
     	}
     </script>
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick demo

  3. #3
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. I've been posting betwen here and the .NET forum to try and get this to work. I've got it working, with a couple minor changes, however, I ran into one other issue: all layers/divs are transparent. Any image or text I put over the top of the gray layer becomes transparent as well. I am not sure if my changes caused this, but I had to make some in order to get it to work with .NET.

    Code:
    <script type='text/javascript'>
        function showLoading()
        {
            WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('ctl00$ContentPlaceHolder1$btnSubmit', '', true, '', '', false, false));
            if(WebForm_OnSubmit())
            {
                var cw = xClientWidth();
                var ch = xClientHeight();
                
                xOpacity('splashDiv1', .6);
                xMoveTo('splashDiv1', 0, 0);
                xResizeTo('splashDiv1', cw, ch);
                xShow('splashDiv1');
                
                xOpacity('splashImage', 1);
                var img = xGetElementById('splashImage');
                
                xOpacity('splashDiv2', 1);
                xMoveTo('splashDiv2', (cw - img.width) / 2, (ch - img.height) / 2);
                xResizeTo('splashDiv2', img.width, img.height);
                xShow('splashDiv2');
                
                alert("You've been greyed!");
                //xHide('splashDiv1');
                //xHide('splashDiv2');
            }
        }
    </script>
    Then I just call it in the onClick of the button.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  4. #4
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind the last post. I was reading that other people were having similar issues with nested DIV tags. Mine weren't, so I didn't think that was the issue. However, when I changed from method 1 to method 2 the problem was fixed.

    Method 1
    Code:
    <div id="splashDiv1" />
    <div id="splashDiv2">
        <img id="splashImage" src="Images/saving.gif" />
    </div>
    Method 2
    Code:
    <div id="splashDiv1"></div>
    <div id="splashDiv2">
        <img id="splashImage" src="Images/saving.gif" />
    </div>
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works fine now with one exception, though. If the user scrolls down the page there is a gap between the first gray splash and the bottom of the page. It seems to start where the page has already rolled up out of view. Can I change so the splash covers the viewable page regardless of how far the user may have scrolled down?

    Edit: This only appears to be an issue in Firefox.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Westmich, sorry for the late reply.

    I've made a change to the above demo. See what you think.


Bookmarks

Posting Permissions

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