• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

How to show home page of app as transparent when logging in?

Experts,

I have a web app that when the user clicks on the home page link, if the user is not logged in then they are taken to the login page.  This process works fine.

I want to change this to when the user goes to the home page and has not logged in, the home page of the app shows up as simi-transparent and the login page pops up, then after the user has logged in the home page shows in regular mode.

Has anyone done something like this?
Any similiar examples would be appreciated.

Cheers
0
g118481
Asked:
g118481
  • 2
1 Solution
 
BigSnazzCommented:
First off, in your css you need to set up a class for your transparecy DIV and the DIV that will contain your login form.

.transDiv{
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.loginDiv{
    width: 100%;
    height: 100%;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;  
}


Then, in your index.cfm file you can place an if statement right after your <body> tag that will fade the page and show the login form if the user is not already logged in  (in this I'm just checking to see if session.loggedIn is true since I don't know what you're using to check logged in status)

<body>

<cfif session.loggedIn neq 1>
    <div class="transDiv">
    </div>
    <div class="loginDiv" align="center">
        --------   CODE FOR YOUR LOGIN FORM GOES HERE -----
    </div>
</cfif>

-------------------  REST OF PAGE  ----------------------------

Let me know if that works for you
0
 
ExpertAdminCommented:
A note about this technique: IE and other browsers handle Alpha transparency differently, so make sure you include code for both. Believe it or not, a lot of folks have given IE the boot.

M@
0
 
BigSnazzCommented:
That's very true, which I forgot to explain above.  The "opacty: .8;" line is for Firefox, Opera, and other standards compliant browsers.  The "filter: alpha(opacity=80);" line is for IE.  I've tested the above in several different browsers and it seems to be fairly portable.  Did this solution work for you?
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now