Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expert popup i need.

    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.
    Attached Thumbnails Attached Thumbnails Expert popup i need.-popup.jpg  
    Last edited by Zpixel; 06-18-2009 at 06:47 PM.

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    12
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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 I hope that helps.

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it's a tooltip i think, like the one in this address:

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

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    the beutification using images,

    Code:
    <!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

    Code:
    http://www.vicsjavascripts.org.uk/RadiusCornersII/RadiusCornersII.htm
    Last edited by vwphillips; 06-18-2009 at 12:53 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •