You are here: Forum Home / RapidWeaver User Forum / HTML, CSS, and Design Help / Thread
css layered popup
Does anyone know how to create a css layered popup like the one at this site?
http://www.bmgadg.com/fadead_window.php
I like how it seems to be blocker resistant and redirects in full page mode from a click
Hassan Omar
Live Demonstration Starts Conversation
Does anyone know how to create a css layered popup like the one at this site?
Don’t they give the code (javascript and css) to download at the bottom of the page?
john
Does anyone know how to create a css layered popup like the one at this site?
Don’t they give the code (javascript and css) to download at the bottom of the page?
john
cant seem to get it to work with RW pages. Doing it exactly as they say plus looked at their source code for the page.
Hassan Omar
Live Demonstration Starts Conversation
[quote author=“terra” date=“1226993105]cant seem to get it to work with RW pages. Doing it exactly as they say plus looked at their source code for the page.
OK, I’ll have a look tonight.
john
OK, I’ll have a look tonight
Works for me using the instructions in the ‘readme.txt’ file. Loaded all the required files via Page Assets.
john
OK, I’ll have a look tonight
Works for me using the instructions in the ‘readme.txt’ file. Loaded all the required files via Page Assets.
john
I never used page assets. How did you do it?
Hassan Omar
Live Demonstration Starts Conversation
I never used page assets. How did you do it?
Page Assets is invoked using the Page Inspector. I add files to “page assets” on a page using the “add files” button and selcting each file I want to add. The beauty of Page Assets is that RW will automatically upload the files I’ve “added”, being when I Preview, Export or Publish my (test) site. To use one of these files, I have to add “assets/” to the pathname in the html code.
For instance, this is the code I’ve pasted from the ‘readme.txt’ file onto a HTML page in RW:
<!-- STEP 1. Edit fadw.js and set the variable on line 37 according to the instructions in the commented code. There is not a reliable cross-browser way to retrieve an element's width with javascript, so you have to define it manually. -->
<!-- STEP 2. Make sure to link the files properly in the <head> section of your XHTML file. -->
<script type="text/javascript" src="assets/fadw.js"></script>
<link rel="stylesheet" type="text/css" href="assets/fadw.css" />
<!-- STEP 3. Inset this div right after the <body> tag. You can put whatever you want to be included in the popup in the faw div. -->
<div id="faw">
<div class="bar"><a href="#">Make money being a geek!</a><a href="#" onClick="hFa()" class="close"> </a></div>
<div class="ad"><a href="#"><img src="assets/rich_geek.gif" alt="Advertisement" /></a></div>
</div>
<!-- STEP 4. Put this script right above the closing </body> tag at the end of your XHTML file. -->
<script type="text/javascript">sFa();</script>
<!-- STEP 5. Upload fadw.js, fadw.css, the image files (if you're going to use them), and the XHTML file to your server and test it out, it should work fine! The stylesheet was written to work with this doctype...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->
I’ve commented out some of the text (adding <!—and—> here and there) and changed pathnames to “assets/fadw.js”, “assets/fadw.css” and “assets/rich_geek.gif”. That’s all!
OK, for a proper implementation I’d move some of the code to the <head> section as recommended. But as a first guess I’m off to a good start and the ad appears and fades when the test page is Previewed.
hope this helps
john
Took a minute but I figured it out. Using page assets was the key.
Take a look http://www.tbdinvesting.com
Now I can get past safari and firefox popup blockers. I’ll check i.e later
Thanks
I never used page assets. How did you do it?
Page Assets is invoked using the Page Inspector. I add files to “page assets” on a page using the “add files” button and selcting each file I want to add. The beauty of Page Assets is that RW will automatically upload the files I’ve “added”, being when I Preview, Export or Publish my (test) site. To use one of these files, I have to add “assets/” to the pathname in the html code.
For instance, this is the code I’ve pasted from the ‘readme.txt’ file onto a HTML page in RW:
<!-- STEP 1. Edit fadw.js and set the variable on line 37 according to the instructions in the commented code. There is not a reliable cross-browser way to retrieve an element's width with javascript, so you have to define it manually. -->
<!-- STEP 2. Make sure to link the files properly in the <head> section of your XHTML file. -->
<script type="text/javascript" src="assets/fadw.js"></script>
<link rel="stylesheet" type="text/css" href="assets/fadw.css" />
<!-- STEP 3. Inset this div right after the <body> tag. You can put whatever you want to be included in the popup in the faw div. -->
<div id="faw">
<div class="bar"><a href="#">Make money being a geek!</a><a href="#" onClick="hFa()" class="close"> </a></div>
<div class="ad"><a href="#"><img src="assets/rich_geek.gif" alt="Advertisement" /></a></div>
</div>
<!-- STEP 4. Put this script right above the closing </body> tag at the end of your XHTML file. -->
<script type="text/javascript">sFa();</script>
<!-- STEP 5. Upload fadw.js, fadw.css, the image files (if you're going to use them), and the XHTML file to your server and test it out, it should work fine! The stylesheet was written to work with this doctype...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->I’ve commented out some of the text (adding <!—and—> here and there) and changed pathnames to “assets/fadw.js”, “assets/fadw.css” and “assets/rich_geek.gif”. That’s all!
OK, for a proper implementation I’d move some of the code to the <head> section as recommended. But as a first guess I’m off to a good start and the ad appears and fades when the test page is Previewed.
hope this helps
john
Hassan Omar
Live Demonstration Starts Conversation
I used the code for a layered css popup and added a subscription form in place of the default text and photo. Works good
Took a minute but I figured it out. Using page assets was the key.
Take a look http://www.tbdinvesting.com
Now I can get past safari and firefox popup blockers. I’ll check i.e later
Thanks
I never used page assets. How did you do it?
Page Assets is invoked using the Page Inspector. I add files to “page assets” on a page using the “add files” button and selcting each file I want to add. The beauty of Page Assets is that RW will automatically upload the files I’ve “added”, being when I Preview, Export or Publish my (test) site. To use one of these files, I have to add “assets/” to the pathname in the html code.
For instance, this is the code I’ve pasted from the ‘readme.txt’ file onto a HTML page in RW:
<!-- STEP 1. Edit fadw.js and set the variable on line 37 according to the instructions in the commented code. There is not a reliable cross-browser way to retrieve an element's width with javascript, so you have to define it manually. -->
<!-- STEP 2. Make sure to link the files properly in the <head> section of your XHTML file. -->
<script type="text/javascript" src="assets/fadw.js"></script>
<link rel="stylesheet" type="text/css" href="assets/fadw.css" />
<!-- STEP 3. Inset this div right after the <body> tag. You can put whatever you want to be included in the popup in the faw div. -->
<div id="faw">
<div class="bar"><a href="#">Make money being a geek!</a><a href="#" onClick="hFa()" class="close"> </a></div>
<div class="ad"><a href="#"><img src="assets/rich_geek.gif" alt="Advertisement" /></a></div>
</div>
<!-- STEP 4. Put this script right above the closing </body> tag at the end of your XHTML file. -->
<script type="text/javascript">sFa();</script>
<!-- STEP 5. Upload fadw.js, fadw.css, the image files (if you're going to use them), and the XHTML file to your server and test it out, it should work fine! The stylesheet was written to work with this doctype...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-->I’ve commented out some of the text (adding <!—and—> here and there) and changed pathnames to “assets/fadw.js”, “assets/fadw.css” and “assets/rich_geek.gif”. That’s all!
OK, for a proper implementation I’d move some of the code to the <head> section as recommended. But as a first guess I’m off to a good start and the ad appears and fades when the test page is Previewed.
hope this helps
john
Hassan Omar
Live Demonstration Starts Conversation