SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to add "Click to Close" link for DHTML popin window

    Call it a drop box, popover, popin or hover box... basically I created my first DHTML "pop up" and I'd like to add a Click Here To Close or just "Close" link within the body itself.

    What do I do?

    The contents of the window are in PopIn.js . How can I create my Close link?

    Please and thank you.

    PS. Would this sort of a close link work in IE, Firefox and Safari?

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's a real popup window, you can use <a href="javascript:window.close();">Close this window</a>

    If it's an inline popup (a div-tag or an iframe) you'll have to use a few more lines.
    For example, you have a div that acts like a window (let's say like greybox).
    You'll have to give that div an id, or you have to pass the div element to your close function. The easiest is to give the div an id.
    Here are some examples:

    Code JavaScript:
    function closeById(id) {
        document.getElementById(id).style.display = 'none';
    }
     
    function closeByRef(el) {
        el.style.display = 'none';
    }

    Code HTML4Strict:
    <div id="myWindow">
        Content goes here
        <a href="javascript:closeById('myWindow');">Close this window</a>
        <a href="javascript:closeByRef(this.parentNode);">Close this window</a>
    </div>
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I don't think any of that fits with what I have going on.

    I have this line of script at the end of my webpage that opens the needed javascript file:

    <script language="JavaScript" src="PopIn.js" type="text/javascript"></script>

    That sits just before my </Body>

    Which then opens PopIn.js ... and no, popin is not a new window. It's a DHTML layer (pop over, popin, drop in box, hover box... but not a "pop up").

    Therefore, I don't think your code would work.

    Here's what I thought I needed:

    <p align="center"><a href="javascript:Popin.js_close()">Click Here To Close This Window</a></p>

    I don't know anything about Java ... just have some C++ programming background and a whole lot of HTML design experience. But absolute beginner to Java.

    Again, I appreciate the help but I don't think your code will work for my needs.

  4. #4
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is JavaScript, which is absolutely not Java, not even related

    Take a look inside PopIn.js, as that's where the javascript is which either writes some HTML or uses the DOM to create new HTML elements. Either way, your goal is to make sure the popin's outermost container, whether it's an iframe or a div or something else, has an id attribute. Then you can use hexburner's code to make that container and its contents invisible upon clicking a link.

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! Look at that... took me all of 1.4 seconds to find what I need based on your guidance:

    document.write('<div id="iCoder_POP1182118259" ...

    I'll get cracking from here see if I can make it work. I take it I can rename this id name as well.

  6. #6
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 27amDotCom View Post
    I'll get cracking from here see if I can make it work. I take it I can rename this id name as well.
    Just make sure you update any other code that references the id.

  7. #7
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I change the default id value that was in there and now the window isn't even showing up... I'll have to undo what I just did.

  8. #8
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Un-did my edit (seeing as I find the id mentioned in at least half a dozen places in the code)... I'll now go back to trying the Close code given.

    Thanks.

  9. #9
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something's not working out here...

    I'm assuming if I have this:
    document.write('<div id="iCoder_POP1182118259" pos="ml" style= .....

    then this line should work:

    <p align="center"><a href="javascript:closeById('iCoder_POP1182118259');">Click Here To Close This Window</a></p>
    Meaning, I'm using the proper ID name and it's not working.

  10. #10
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm wondering if there is a syntax error ...

    Here's a question re: javascript syntax ... can there be quotes (ie: double quotes " ") within :

    document.write('<div id="iCoder_POP1182118259" pos="ml" style="

    .
    .
    .
    </div></td></tr></table></div>');
    So, basically, after a document.write(' command, can there be double quotes anywhere in there? Because some of my content does have double quotes... but according to Dreamweaver, all my text in there is blue... it's not picking out the different codes, just treating it all as body text.

  11. #11
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it! The reason the code (from above) wasn't working is I had the single quotes...

    I read this from Hexburner:
    <a href="javascript:closeById('myWindow');">

    and thought I needed the single quotes around myWindow (of course myWindow being the id of my own window). Point is, I was using the single quotes in there by mistake... just pulled those out and everything works great.

    Thanks!

  12. #12
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind... it only works in IE . Back to the drawing board.


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
  •