Pupup

Edig · #1 (**permalink**) 09/01/2008, 09:38

Hola he visto unso popup como los que estan en www.travian.com en instrucciones que se abre interno en la pagina y pues pregunte con java y nadie sabia cre... y quisiera saber si se puede haser con ajax o si es con java perdonenme y lo movere.

Edig · #2 (**permalink**) 09/01/2008, 10:00

Perodn peor encontre esto pero aun asi no em sirve me pueden ayudar

var timer;
var t;

function stSwa() {
setLeft();
showSwa();
}

function showSwa() {
t = 100;
mvUp(100000);
fade(0);
}

function hdSwa() {
t = 0;
fade(100);
}

function fade(amt) {
if((t == 100 && amt <= t) || (t == 0 && amt >= t)) setFade(amt);
if(amt == t && t==0) mvUp(-1);

amt += (t > 0)? 10:-10;

if(timer!=null) clearInterval(timer);
timer = setTimeout("fade("+amt+")", 20);
}

function setFade(amt) {
var obj;

if (document.layers) obj = document.layers.swa;
else if (document.all) obj = document.all.swa;
else if (document.getElementById) obj = document.getElementById("swa");

amt = (amt == 100)?99.999:amt;

// IE
obj.style.filter = "alpha(opacity:"+amt+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = amt/100;

// Mozilla and Firefox
obj.style.MozOpacity = amt/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = amt/100;
}

function setLeft() {
var w = 250; // set this to the same value of the width property for the swa div in the style sheet,
// smaller to move it to the right, larger to move it to the left

if (document.layers) document.layers.swa.left = ((window.innerWidth / 2) - (w / 2))+"px";
else if (document.all) document.all.swa.style.left = ((document.body.offsetWidth / 2) - (w / 2))+"px";
else if (document.getElementById) document.getElementById("swa").style.left = ((window.innerWidth / 2) - (w / 2))+"px";
}

function mvUp(amt) {
if (document.layers) document.layers.swa.zIndex = amt;
else if (document.all) document.all.swa.style.zIndex = amt;
else if (document.getElementById) document.getElementById("swa").style.zIndex = amt;
}

Follow these instructions...

1. Edit fad.js and set the variable on line 53 according to the instructions in the commented code.
2. Make sure to link the files properly in the <head> section of your xhtml code.

<script type="text/javascript" src="fad.js"></script>

3. Inset this code right after the <body> tag. You can put whatever you want to be included in the popup in the swa div.

<div id="swa" style="width:340px;height:265px:background:#FFF">
<div style="background:url('/bar.gif') no-repeat left;height:20px;line-height:20px"><a href="#" style="margin-left:10px;font-weight:bold;float:left;color:#FFF;font-size:10px;font-family:Tahoma,Arial,sans-serif;text-decoration:none">Make money being a geek!</a><a href="javascript:hdSwa()" onClick="hdSwa()" style="margin-right:5px;display:block;width:12px;height:20px;tex t-decoration:none;float:right;background:url('/close_off.gif') no-repeat center"> </a></div>
<div style="height:245px"><a href="#" style="text-decoration:none"><img src="/rich_geek.gif" alt="Advertisement" style="border:none" /></a></div>
</div>

4. Put this script right above the closing </body> tag at the end of your xhtml file.

<script type="text/javascript">stSwa();</script>

5. Upload fad.js, the image files, and the xhtml file to your server and test it out, it should work fine! The CSS styles were 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">

they may work with others though...

I've included the .PSD file for the top bar, so edit it in Photoshop to make it smaller or larger to fit your popup contents.

IMPORTANT!! Make sure you change the inline styles for the swa div and the javascript file edit in step #1 above to reflect the height/width of your popup window's contents.

Thanks for downloading!! www.bmgadg.com

Gracias