SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast Jujubee's Avatar
    Join Date
    Mar 2001
    Location
    Canada
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I want to make a graphical popup window (not the typical system windows that have a border, close button, etc).

    The yellow QuickRef popup on PHP.NET was exactly what I wanted, and figured I'd go check the source today - GONE! They changed their design...ugh.

    I'm figuring it's DHTML? No idea how to go about doing it. I've checked a few sites and done searches, but only find reference to the textual popups via DHTML and Javascript.

    Thanks in advance for the help!

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jujubee...it's a "show/hide" layers trick. I am not a dHTML guy, but if you have Dreamweaver, it can whip up the code for you. I normally would nto advocate DW for that type of stuff, but you can at least see how it works...
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Member
    Join Date
    Mar 2001
    Location
    London
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this. You'll need to do your own style definitions. I think this works for all major DOM's.

    <style type="text/css">
    #layerId { position: absolute; left: 100px; top: 100px; visibility: hidden; }
    </style>

    <script language="javascript">

    function getStyle(id){
    if (document.getElementById){
    return document.getElementById(id).style;}
    else if (document.all){
    return document.all[id].style;}
    else if (document.layers){
    return document.layers[id];}
    }

    function showLayer(id){
    var visible=(document.layers)?"show":"visible";
    var layerObj=getStyle(id);
    layerObj.visibility=visible;
    }

    function hideLayer(id){
    var hidden=(document.layers)?"hide":"hidden";
    var layerObj=getStyle(id);
    layerObj.visibility=hidden;
    }

    </script>
    </head>
    <body>
    <div id="layerId">
    This is your popUp layer
    </div>


    I haven't checked this here but its what I've used in the past. I hope it makes sense.

  4. #4
    SitePoint Enthusiast Jujubee's Avatar
    Join Date
    Mar 2001
    Location
    Canada
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code. I'd like to look up exactly what's happening. Is there a name for the technique? DHTML? Layers? ?

  5. #5
    SitePoint Member
    Join Date
    Mar 2001
    Location
    London
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know what your javascript or cascading style sheet knowledge is like but thats what you will want to look up. DHTML is simply modifying page elements using these. The code I gave you just makes a layer (your menu in this case) visible or hidden. You can call the hide/show functions using javascript event handlers like onmouseover/onclick etc from within your HTML.

    Get some good info on CSS to create nice looking menus and you should be able to use the script as it is and just call it from your HTML tags. Webmasterbase.com has some good tutorials as do webmonkey and tucows. Oh, a good place to look for good DHTML advice and clean coding examples is http://www.xs4all.nl/js

    Have fun!

  6. #6
    I believe you have my stapler. scrubz's Avatar
    Join Date
    Feb 2001
    Location
    Van down by the river
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought you were looking for a window, not a menu. ?

    In any case, http://www.siteexperts.com/tips/tech...ts05/page1.asp has an easy way to build chromeless windows. It only works in IE (surprise), but they're cool nonetheless.

  7. #7
    SitePoint Enthusiast Jujubee's Avatar
    Join Date
    Mar 2001
    Location
    Canada
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm looking for a little window that opens up at a specified location, is "chromeless", with links in it.

    PHP.net implementation was great, but they stopped using it because of browser issues, so I guess I should find another way.

    BTW, that chromeless IE link is very cool indeed. Looks like Flash but it isn't!


Bookmarks

Posting Permissions

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