SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can you do this with AJAX?

    I have seen AJAX gallery's that dim the screen to show photos, but is it possible to do the same but show a login box or html page? Like this:


  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did this once to highlight a certain form field. Basically you have an absolutely positioned container div, with 100% width and height and top/left 0px 0px:

    Code CSS:
    .fade_out
    {
       background: black; 
       opacity: 0.6; /* forgot which browser this is */
       -moz-opacity: 0.6; /* for gecko based browsers */
       filter: alpha(opacity=60); /* ie's filter system */
       top: 0px;
       left: 0px; 
       height: 100%;
       width: 100%;
       position: absolute; /* you need this for z-index to actually work */
       z-index: 2; /* shove this puppy above the other elements */
    }
     
    .highlighted_element
    {
       z-index: 3; /* Shove this puppy above the faded layer */
       position: absolute;
       /* Position your login box here maybe fluid percentages? */
    }

    Then add your content appropriately. Let me know if this works or if you need me to elaborate any further.
    Last edited by chris_fuel; Nov 3, 2007 at 16:24. Reason: gah, missed a _ for a class name

  3. #3
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Chris, I have a version working but I would like to have the gray fade in gradually.. is this possible?

    Can you add to this or do it better?
    HTML Code:
    <style>
    .fade_out
    {
       background: black;
       opacity: 0.6; /* forgot which browser this is */
       -moz-opacity: 0.6; /* for gecko based browsers */
       filter: alpha(opacity=60); /* ie's filter system */
       top: 0px;
       left: 0px;
       height: 100&#37;;
       width: 100%;
       position: absolute; /* you need this for z-index to actually work */
       z-index: 2; /* shove this puppy above the other elements */
    }
     
    .highlighted_element
    {
       z-index: 3; /* Shove this puppy above the faded layer */
       position: absolute;
       background-color:#FFFFFF;
       height: 190px;
       width: 300px;
       margin-top: 100px;
       margin-left: 100px;
       padding-top: 50px;
       padding-left: 15px;
       
       /* Position your login box here maybe fluid percentages? */
    }
    .box
    { 
    	float:right;
    }
    </style>
    
    <script>
    var browserType;
    if (document.layers) {browserType = "nn4"}
    if (document.all) {browserType = "ie"}
    if (window.navigator.userAgent.toLowerCase().match("gecko")) {
       browserType= "gecko"
    }
    
    function hide() {
      if (browserType == "gecko" )
         document.poppedLayer = 
             eval('document.getElementById("loginShade")');
      else if (browserType == "ie")
         document.poppedLayer = 
            eval('document.getElementById("loginShade")');
      else
         document.poppedLayer =   
            eval('document.layers["loginShade"]');
      document.poppedLayer.style.visibility = "hidden";
    }
    
    function show() {
      if (browserType == "gecko" )
         document.poppedLayer = 
             eval('document.getElementById("loginShade")');
      else if (browserType == "ie")
         document.poppedLayer = 
            eval('document.getElementById("loginShade")');
      else
         document.poppedLayer = 
             eval('document.layers["loginShade"]');
      document.poppedLayer.style.visibility = "visible";
    }
    </script>
    
    
    <a href="#" onClick="show()">Login</a> | <a href="#" onClick="hide()">Hide</a>
    <div style="visibility: hidden" id="loginShade" class="fade_out">
    
    <div id="loginBox" class="highlighted_element">
    <div class="box"><a href="#" onClick="show()">Login</a> | <a href="#" onClick="hide()">Hide</a> </div>
    <form name="form1" method="post" action="">
    user:
       
        <input type="text" name="textfield">
        <br>
        pass:&nbsp;     
        <input type="text" name="textfield">
        <br>
        <input type="submit" name="Submit" value="Submit"> 
      </form>  
    </div>
    </div>

  4. #4
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, there probably is a way to do it through dynamic dom manipulation, but it'd probably need to be a function that does a timed callback, and you'd have to handle the browser specific opacity on a case per case basis (ie. specific javascript to access ie's filter system and manipulate the opacity).

    I'll play around with it tomorrow and see if I can't get something working.

  5. #5
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Chris, I think I am pretty close. I think I just need to tweak the IE code to center the login box... it looks a little left aligned to me in the center. How'd I do?

    Code:
    <style>
    .fade_out
    {
       backgroundimage: black;
       background-image:url(fade-bg.gif);
       opacity: 0.6; /* forgot which browser this is */
       -moz-opacity: 0.6; /* for gecko based browsers */
       filter: alpha(opacity=60); /* ie's filter system */
       top: 0px;
       left: 0px;
       height: 100&#37;;
       width: 100%;
       position: absolute; /* you need this for z-index to actually work */
       z-index: 2; /* shove this puppy above the other elements */
    }
     
    .highlighted_element
    {
       z-index: 3; /* Shove this puppy above the faded layer */
       position: absolute;
       top:25%;
       right:25%;
       bottom:25%;
       left:25%;
       /* Position your login box here maybe fluid percentages? */
    }
    .box
    { 
    	float:right;
    }
    </style>
    
    <script>
    var browserType;
    if (document.layers) {browserType = "nn4"}
    if (document.all) {browserType = "ie"}
    if (window.navigator.userAgent.toLowerCase().match("gecko")) {
       browserType= "gecko"
    }
    
    function hide() {
      if (browserType == "gecko" )
         document.poppedLayer = 
             eval('document.getElementById("loginShade")');
      else if (browserType == "ie")
         document.poppedLayer = 
            eval('document.getElementById("loginShade")');
      else
         document.poppedLayer =   
            eval('document.layers["loginShade"]');
      document.poppedLayer.style.visibility = "hidden";
      
      
      if (browserType == "gecko" )
         document.poppedLayer = 
             eval('document.getElementById("loginBox")');
      else if (browserType == "ie")
         document.poppedLayer = 
            eval('document.getElementById("loginBox")');
      else
         document.poppedLayer =   
            eval('document.layers["loginBox"]');
      document.poppedLayer.style.visibility = "hidden";
    }
    
    function show() {
      if (browserType == "gecko" )
         document.poppedLayer = 
             eval('document.getElementById("loginShade")');
      else if (browserType == "ie")
         document.poppedLayer = 
            eval('document.getElementById("loginShade")');
      else
         document.poppedLayer = 
             eval('document.layers["loginShade"]');
      document.poppedLayer.style.visibility = "visible";
      
      
       if (browserType == "gecko" )
         document.poppedLayer = 
             eval('document.getElementById("loginBox")');
      else if (browserType == "ie")
         document.poppedLayer = 
            eval('document.getElementById("loginBox")');
      else
         document.poppedLayer = 
             eval('document.layers["loginBox"]');
      document.poppedLayer.style.visibility = "visible";
    }
    </script>
    
    <div style="visibility: hidden" id="loginBox" class="highlighted_element">
    <p> <p> <p><p><p>
    <table width="350" height="175" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td><table width="219" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center">
          <tr>
            <td colspan="2"><div class="box">
                <div align="right"><a href="#" onClick="hide()">Hide</a> </div>
            </div></td>
          </tr>
          <tr>
            <td>user: </td>
            <td><input type="text" name="textfield2"></td>
          </tr>
          <tr>
            <td>pass:</td>
            <td><input type="text" name="textfield"></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="Submit" value="Submit"></td>
          </tr>
        </table></td>
      </tr>
    </table>
    </div>
    <div style="visibility: hidden" id="loginShade" class="fade_out">
    
    
    </div>
    <table width="757" height="341" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr bgcolor="#006633">
        <td width="542" height="10">&nbsp; </td>
        <td width="215" height="10" valign="top"> </td>
      </tr>
      <tr>
        <td valign="top" bgcolor="#00FF99"><p>Welcome</p>
        <p>Blah Blah blah</p></td>
        <td valign="top" bgcolor="#00CA79"><a href="#" onClick="show()">Login</a></td>
      </tr>
    </table>
    Last edited by ripcurlksm; Nov 5, 2007 at 20:20.

  6. #6
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about the delayed response, I had something come up that took a bit of time (enough to where I couldn't fool around with dhtml type stuff... that can get brutal ).

    I like the .gif idea, hadn't thought of that.. seems simple enough. As for the centering.. The only thing I can think of is just messing around with the fluid percentages more. Unfortunately that sort of thing isn't my strong point, and I'd be doing tweaking all day . Might do something like "cross browser css element centering" in google and see what it comes up with. I'm sure someone's taken hours trying to figure it out :P.

  7. #7
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!


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
  •