www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS Transparency

  1. #1
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13

    CSS Transparency

    Hi,

    I am trying to create a page loading screen using CSS and Javascript as given in the website - http://andrewpeace.com/javascript-cs...ll-screen.html This works correctly when run on the website itself.

    When I use this code on my website, I am able to get the loading gif successfully but the background transparency is not coming. I have compared the code and it is by the line.

    Can someone please help?

    The code I've used is

    CSS:
    Code:
    <style type="text/css">
      /*this must be set so that the loading div
        can be height:100% */
      body{height:100%}
     
      /*this is what we want the div to look like
        when it is not showing*/
      div.loading-invisible{
        /*make invisible*/
        display:none;
      }
     
      /*this is what we want the div to look like
        when it IS showing*/
      div.loading-visible{
        /*make visible*/
        display:block;
     
        /*position it at the very top-left corner*/
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        text-align:center;
     
        /*in supporting browsers, make it
          a little transparent*/
        background:#fff;
    	_background:none; /*this line removes the background in IE*/
        opacity:.75;
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
     
        /*set the padding, so that the content
          of the div is centered vertically*/
        padding-top:25%;
      }
    </style>
    HTML:
    HTML Code:
    <div id="loading" class="loading-invisible">
    <p><img src="images/lightbox-ico-loading.gif"></p>
    </div>
    Javascript:
    Code:
    <script type="text/javascript">
    document.getElementById("loading").className = "loading-visible";
    var hideDiv = function(){document.getElementById("loading").className = "loading-invisible";};
    var oldLoad = window.onload;
    var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
    window.onload = newLoad;
    </script>
    Thanks for you help!

  2. #2
    Join Date
    Aug 2008
    Location
    Phoenix, AZ
    Posts
    84
    Background transparencies are a pain in the butt because each browser is different in handling them (and IE is the worst). A work around would be do bring in a semi-transparent background made in photoshop as a .png. Only problem with that is IE6 doesn't handle PNG's well, and you would need to get some special program to handle that too.

    You can look at how to handle this with http://www.w3schools.com/css3/css3_pr_opacity.asp and make sure to look at the section just below what browsers support it.

    What browser are you using anyway?

  3. #3
    Join Date
    Apr 2011
    Location
    Chennai, India
    Posts
    13
    Hi! Thank you for replying...

    I am aware that each browser handles transparency differently and that IE is the worst... I request all IE users to FF or Chrome because a two key design elements on my site don't work on IE and I don't want to change that.

    The reason I posted this is because the transparency works perfectly in the website's demo that I linked to. When I tried implementing the same thing on my site, it didn't work... only the loading image came up. The photos in background can still be seen loading...

    And what's even worse is that I later tried changing the colour of the transparency to black. The black layer came but the photos load on TOP of the layer and not BELOW it!

    I use Chrome and test on FF...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles