...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum