OT - 80% Transparency Overlay for Enter/Leave Page

Soniclight wrote on 7/12/2012, 2:25 PM
I know, I should and may eventually have to go to a CSS or HTML source or forum but the Frontpage/ExpressionWeb one I've used in the past has been slow to non-existent on responses. Figured I might as well pick some of you wizards brains for you might just know how to do this since it is for my upcoming video.

The image 'splains what I'm trying to do. I'd prefer to not use Javascript. Either CSS or HTML. I also don't know yet know the HTML or CSS I'd have to use in the hyperlink to re-direct back (what the 2nd "No" option would do - act like the Back button on a browser).

Thanks.

~ Philip



Comments

Former user wrote on 7/12/2012, 2:54 PM
Not too sure about the 80% transparency, but the following should work for your control elements:

For the "No" option / back link you can use the following to create a button:


<INPUT TYPE="button" VALUE="No" onClick="history.go(-1);return true;">


For the "Yes" option you can make a button:


<INPUT TYPE="button" VALUE="Yes" onClick="window.location.href='http://www.sonycreativesoftware.com'">
Chienworks wrote on 7/12/2012, 3:16 PM
CSS is probably the most straight forward and the easiest way to do this.



  <div style=\Position: absolute; left: 40px; top: 120px; opacity:0.2; filter:alpha(opacity=20)">



YOUR CONTENT HERE



  </div>


The left & top parameters let you position a container for the transparent items. There are two opacity paramenters. Some browsers obey the first one, some the second, some both. It's best to include both just to be safe. Everything between the div and /div tags will be rendered in this container with the specified opacity.
Soniclight wrote on 7/12/2012, 3:19 PM
jdw,

OK, thanks, that looks simple enough.

The thing with the transparency is that I can find plenty of "image" transparency" snippets out there, but so far... nothing to "mask" a whole page. I suppose I could to a monster .png (to cover the wider 1920x1080 and above monitor resolutions but it would still have to float over the other page and have those <lNPUT Type=...> on it. I'm more of a basic HTML guy for my site is rather small and simple to admin.
Soniclight wrote on 7/12/2012, 3:21 PM
Chienworks,

Thanks. You replied while I was responding to jdw... and it seems like you've brought in the second part of this. I've tried some stuff I've found online but none of it worked, so I'll give your approach a whirl. And my guess is that <div> goes right after the opening <body>, and that the </div> goes right before the closing </body> tag so that that the transparency covers the entire page. Ooops... or maybe not -- I still have to stick those links into that division. I'll experiment.
Former user wrote on 7/12/2012, 4:29 PM
Here's a more complete example:

This style class goes between the Head tags of the page:


<style type="text/css">

.opac_over {

	position:absolute;

	width:100%;

	height:100%;

	z-index:1;

	left:0;

	top:0;

	background-color:#000000;

	opacity:0.8;

	filter:alpha(opacity=80);

	font-family: Arial, Helvetica, sans-serif;

} 

</style>


And this is the business portion of the overylay (be sure to change the http link in the "yes" option to go to whatever page you need to display):


<div class="opac_over"> 

  <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

    <tr> 

      <td align="center"> 

        <div style="color: #FFFFFF; font-weight: Bold;">PLEASE CHOOSE YOUR OPTION<br />

          <br />

        </div>

        <div style="color: #009900";> 

          <INPUT TYPE="button" VALUE="Yes" onClick="window.location.href='http://www.yahoo.com'">

            I am over 18 years of age and I will respect the spirit of the 

          work and its copyrights.<br />

          <br />

        </div>

        <div style="color: #ff9933";> 

          <INPUT TYPE="button" VALUE="No" onClick="history.go(-1);return true;">

            I am not over 18 and/or I don't really care much about stuff 

          like respect or copyrights. </div>

      </td>

    </tr>

  </table>

</div>


I don't like to use tables much anymore, but it's a simple way to get the content to center both horizontally and vertically on the page regardless of the browser window size.

Also, keep in mind that this effect will always happen over whatever page the code is on. It's not a "pop-up" that just goes away to reveal the page underneath. That would take jQuery (java) code to access a lightbox type effect or such.

Jim
Soniclight wrote on 7/12/2012, 6:13 PM
jdw,

Wow, cool, thank you very much. :D I've all these last minute encoding and editing mini-snafus that inevitably seem to show up when one is hyper-ventilating on polishing the last touches of one's video labors. Nice to have something made simple and easy.

Now if I could find non-inside the player share + embed script that all browsers would accept and that I could make look nice... lol.
Truth is I'm not quite sure I really need/want that. Just thinking about it.
Chienworks wrote on 7/12/2012, 8:15 PM
Share and embed functions are nothing more than URLs. You can figure them out yourself and put them in an <a href= ..... > tag manually if you wish.
Soniclight wrote on 7/13/2012, 7:44 PM


jdw,

Again, thanks for you help. I've chosen to make the questions more or less hover over the video player in the back instead of page center. In the image above is a facsimile of what I've tried to do over and over again but it always messes up the position or something else. I'd like to add a transparent -- or even black -- table as shown; the border colors fit with the ones used at the video page.

Also, I'd like to replace the "Yes" and "No" function boxes with some nice faux-glass type boxes that I'll create once I know if it's even possible to replace stock function boxes. And if it is, images may act differently and the image vs. text may do some wacky stuff, so I'd have to choose the right alignment. The choices I have for FrontPage 2003's** Image alignment in "None" are Center, Absmiddle, Baseline, Bottom Absbottom.

(I know,"He's using FrontPage 2003??" I just feel more comfortable with it than my later WebExpression for certain things...)

Last, I'm wondering if there is a way to have the Yes/No paragraphs NOT be transparent so that they pop out more. I may decide to go for a 75 or 70% and so the font will be even more translucent. The "No" one is already a bit hard to read.
Might be tricky for it may take an absolute position additional division or table. Dunno...

One slightly irritating quirk when testing in IE, Firefox and Chrome is that the space paragraphs spacing between the Yes and No vary according to browser. IE and Chrome show it correctly, Firefox seems to add in a break or paragraph space. This may or may not be repair-able.
______________________________

The link to this intro Yes/No page as it is now is below. If you hit Yes, you'll go to the video page but I've disabled the video with a temporary false file name for I'm still working out some last minute stuff. But at least you can see that your genius works :D

Closing this is the current code (the <! -- ==============> page comments are so I can quickly find codes on a page).

Thanks for your help.

~ Philip

"Yes/No" Intro Page ***
*** LATER EDIT: Link above has been disabled due to current postponement of project (some redo work is needed.)



<!-- ========================== YES/NO TRANSPARENCY CODE =========================== -->



<style type="text/css">

.opac_over {

	position:absolute;

	width:100%;

	height:100%;

	z-index:1;

	left:0;

	top:0;

	background-color:#000000;

	opacity:0.8;

	filter:alpha(opacity=80);

	font-family: Arial, Helvetica, sans-serif;

} 

</style>

<div class="opac_over"> 

  <table width="380" color="000000" align=center height="400px" border="0" cellspacing="0" cellpadding="20">

    <tr> 

      <td align="center"> 

        <div style="color: #FFFFFF; width:380px; font-style: Arial Bold; height:36

        px";>

			<p style="margin-top: 0; margin-bottom: 10px">

			<font size="4">PLEASE CHOOSE YOUR OPTION</font><br />

          </div>

       <div style="color: #FFFFFF; width:380px; font-style: Arial Bold; height:28

       px";> 

          <p align="left" style="margin-top: 0; margin-bottom: 0"> 

          <INPUT TYPE="button" VALUE="Yes" onClick="window.location.href='http://www.compassionsensuality.net/ANM/A_NEW_MANHOOD.html'">

            <font color="#00CC00">I am over 18 years of age and I will respect the spirit of the <br />

          </div>

        <div style="color: #FFFFFF; width:380px; font-style: Arial Bold; height:57px";> 

          <p align="left"> 

          <span style="font-size: 4pt"> </span><p align="left"> 

          <INPUT TYPE="button" VALUE="No" onClick="history.go(-1);return true;">

            <font color="#FF3300">I am not 18 or older and/or I do not really care much about stuff </font> </div>

      </td>

    </tr>

  </table>

</div>

<!-- =============================================================================== -->
Former user wrote on 7/13/2012, 9:41 PM
I'll have a look at it and see what I can come up with...
Soniclight wrote on 7/14/2012, 12:52 AM
Thanks, jdw, no rush.
Former user wrote on 7/14/2012, 11:01 AM
1. Set the opacity of the overall page opacity in the "opac_over" style.
2. Set the opacity of the box in the "opac_box" style. Note that this affects the opacity of any content within the div.
3. I used a different "Yes" and "No" link code to allow the use of the images for links.
4. Of course, you'll need to change the links to the images for the buttons. You're welcome to download them for your own use if you would like.



<style type="text/css">

.opac_over {

	position:absolute;

	width:100%;

	height:100%;

	z-index:1;

	left:0;

	top:0;

	background-color:#000000;

	opacity:0.6;

	filter:alpha(opacity=60);

}

.opac_container {

	position:relative;

	z-index:2;

	top:200;

}

.opac_box {

	border: 2px #003399 solid;

	padding-left:60px;

	padding-right:60px;

	padding-top:20px;

	padding-bottom:20px;

	z-index:2;

	background-color:#000000;

	opacity:0.8;

	filter:alpha(opacity=80);

	font-family: Arial, Helvetica, sans-serif;

}

</style>



<div class="opac_over"></div>



<div class="opac_container">

  <table width="550px" height="240px" align=center border="0" cellspacing="0" cellpadding="0">

    <tr> 

      <td class="opac_box" height="40"> 

        <div style="color: #FFFFFF; text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 10px;"> 

          PLEASE CHOOSE YOUR OPTION </div>

          

        <table width="100%" border="0" cellspacing="0" cellpadding="8">

          <tr> 

              

            <td height="60"><a href="http://www.compassionsensuality.net/ANM/A_NEW_MANHOOD.html"> 

              <img src="http://dl.dropbox.com/u/49869274/Vegas/btn_yes.png" border="0"></a></td>

              

            <td height="60"><font color="#00CC00">I am over 18 years of age </td>

            </tr>

            <tr> 

              

            <td height="60"><A HREF="javascript:history.back()">

			<img src="http://dl.dropbox.com/u/49869274/Vegas/btn_no.png" border="0"></a></td>

              <td height="60"><font color="#FF3300">I am not 18 or older and/or I do not </font></td>

            </tr>

          </table>

       </td>

    </tr>

  </table>

</div>
Soniclight wrote on 7/14/2012, 1:15 PM
Thanks once again, jdw :D
MOST appreciated and I'll implement it within the next 24 hours or so.
On a kind of aside...

Even though this may or may not have been the first time we've communicated here, I've included you in my recent Thank You posting here for this new video is pretty much my best one so far and hence it's important to me to get the page presentation right.

~ Philip
Soniclight wrote on 7/14/2012, 4:15 PM
Update...

jdw,

Well, I struggled a bit with the new script you gave me -- one thing that I couldn't make go away was that it pushed down the black table containing the video player by the absolute number in the .opac_over or the container (220px). And the more I fiddled with it, the more the whole thing became a mess as I tried to zero out parameters--so I did a kind of hybrid: first script with a transparency version of the table and slightly more saturated/color-curved YES/NO buttons you provided in the second script. Settled for a dark enough opaqueness of 87% so copy is readable enough.

The only weird thing that's going on is that IE-9 won't load the video player's place-holder .jpg in the JW script in the "faux" version of the actual video page behind the .opac_over. Firefox and Chrome, no problem, but they load it a bit slow -- probably the .opac_over is slowing down page load or something.

This IE thing may not be solvable, but if you have any ideas, let me know. But even if you don't have some genius solution for that, I can live with the as-is. Life ain't perfect.
Former user wrote on 7/14/2012, 5:36 PM
Howdy,

The opacity is always is going to be an issue with any version of IE. It has to do with how it deals with layers (and div's for that matter). You might want to get to some happy medium and leave it at that. I test pages out in as many browsers as possible, but I can't remember ever getting all of them to behave the same way.

By the way -- the issue you are having with the placeholder jpg. If you can, you can try setting the "wmode" for the player. Use either wmode="opaque" or wmode="transparent" depending on which version gives you the best results. I've found that wmode="opaque"sometimes works best when other HTML elements are involved.

Jim
Soniclight wrote on 7/16/2012, 4:21 AM
Pardon late reply here but I iz been bizzy...
I'll give the player mode option/s a try.
Thanks.
Soniclight wrote on 7/16/2012, 9:13 AM
HA! The "opaque" fixed the no-show placeholder .jpg problemo in IE :D
Muchas gracias.