PDA

View Full Version : Resolved Expert popup i need.



Zpixel
06-17-2009, 03:23 PM
in the left-down corner of the bellow url, there is a table. when you click on it an expert popup box will appear. i need the clean javascript of that popup box. i tried to extract code from page but it has quite a mixed content.

http://www.bordobakht.com

i attached one of those.
thank you.

waterintofunk
06-17-2009, 08:28 PM
I could be wrong, but I don't think that it's usually called a popup. Your example is usually referred to as a "lightbox". You can find an example here (http://www.lokeshdhakar.com/projects/lightbox2/#how) I hope that helps.

Zpixel
06-18-2009, 06:24 AM
the link you gave was useful, thank you. but the item i mean uses a div which is beatified with border images and a close button. some of them can be found here:

http://www.ebav.co.uk/travian/
http://www.dynamicdrive.com
http://www.dynamicdrive.com/dynamicindex5/index.html

but they are rather simple.

Zpixel
06-18-2009, 06:56 AM
it's a tooltip i think, like the one in this address:

http://www.walterzorn.com/tooltip/tooltip_e.htm

Old Pedant
06-18-2009, 08:01 AM
Yes, that kind of thing is actually pretty simple to do, except for (as you said) the beatification. That's a really nice looking image they managed to make, using (probably) nested <div>s to get the top and bottom and then the sides.

vwphillips
06-18-2009, 11:49 AM
the beutification using images,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.cornerTL {
position:absolute;overflow:hidden;width:20px;height:20px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

.cornerTR {
position:absolute;overflow:hidden;width:20px;height:20px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif);
}

.cornerBL {
position:absolute;overflow:hidden;width:20px;height:20px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
}

.cornerBR {
position:absolute;overflow:hidden;width:20px;height:20px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Four.gif);
}

.edge {
position:absolute;overflow:hidden;width:20px;height:20px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Five.gif);
}

.pop1 {
position:absolute;left:100px;top:100px;width:200px;height:250px;background-Color:#FFFFCC;

}

.pop2 {
position:absolute;left:400px;top:100px;width:100px;height:50px;background-Color:#FFFFCC;

}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/


function zxcEdges(cls,tl,tr,bl,br,edge){
var popups=zxcByClassName(cls);
for (var c,e,z0=0;z0<popups.length;z0++){
c=zxcES('DIV',{},popups[z0]);
c.className=tl;
zxcES(c,{left:-c.offsetWidth+'px',top:-c.offsetHeight+'px'});

c=zxcES('DIV',{},popups[z0]);
c.className=tr;
zxcES(c,{left:popups[z0].offsetWidth+'px',top:-c.offsetHeight+'px'});

c=zxcES('DIV',{},popups[z0]);
c.className=bl;
zxcES(c,{left:-c.offsetWidth+'px',top:popups[z0].offsetHeight+'px'});

c=zxcES('DIV',{},popups[z0]);
c.className=br;
zxcES(c,{left:popups[z0].offsetWidth+'px',top:popups[z0].offsetHeight+'px'});

e=zxcES('DIV',{},popups[z0]);
e.className=edge;
zxcES(e,{left:0+'px',top:-e.offsetHeight+'px',width:popups[z0].offsetWidth+'px'});

e=zxcES('DIV',{},popups[z0]);
e.className=edge;
zxcES(e,{left:0+'px',top:popups[z0].offsetHeight+'px',width:popups[z0].offsetWidth+'px'});

e=zxcES('DIV',{},popups[z0]);
e.className=edge;
zxcES(e,{left:-e.offsetWidth+'px',top:0+'px',height:popups[z0].offsetHeight+'px'});

e=zxcES('DIV',{},popups[z0]);
e.className=edge;
zxcES(e,{left:popups[z0].offsetWidth+'px',top:0+'px',height:popups[z0].offsetHeight+'px'});

}
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

/*]]>*/
</script>
</head>

<body onload="zxcEdges('zxcEdges1','cornerTL','cornerTR','cornerBL','cornerBR','edge');" >
<div class="pop1 zxcEdges1" ></div>
<div class="pop2 zxcEdges1" ></div>
</body>

</html>

Much easier than


http://www.vicsjavascripts.org.uk/RadiusCornersII/RadiusCornersII.htm

Zpixel
06-18-2009, 05:47 PM
thank you. i finally managed to extract the script from that website and alter it in order to fit my program.

your suggestions and codes are great too.