SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looking for a Pop-up on page load

    I have searched for various solutions to this but I am not having much luck. I am currently using GREYBOX on the page for other popups when someone clicks on a link. I thought it would be a good idea to use this same script to force a popup on the screen when it loads but then the other links on the page that use GREYBOX will now work like it is suppose too. So I thought I would just try using an onLoad in the Body tag like this:
    Code:
    onload="window.open('http://www.hbip.com/dcc/is/instructions.html')"
    But that didn't work like I wanted it to. It opened the page in a new tab in the browser. I really want it to show up in a smaller window over the current content. A light box solution is desired but I would settle for just an old fashioned pop-up at this point as long as it could bypass popup blockers.

    Any suggestions?
    PS I am not a javascript programmer so a little hand holding would be greatly appreciated.

    Many thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    To launch a new window you need to pass the function a few more parameters - a title and width/height:
    Code:
    window.open(url,title'width=400,height=200');
    But - this is a popup and a popup blocker wouldn't much of a popup blocker if you could get around it

    Grey box isn't a new window, it loads the content in a iframe.

    Here's what you are looking for:
    http://orangoo.com/labs/greybox/advance_usage.html
    Code:
    GB_show(caption, url, /*optional*/ height, width, callback_fn)

  3. #3
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I my original post I put that I already had GreyBox installed on the page for other links, the thing is, I do not know how to get it to activate on page load to show the information that I want to show.

    Do you know how to do that?

    Many thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    I pointed you to the greybox api which is what you need to be able to activate greybox from javascript.
    Greybox is setup to handles this for you it just looks for links with a specific rel attribute, when you need to activate it in other parts of your code you need to use the api.
    Code:
    <script type="text/javascript">
    window.onload = function() {
      GB_show('A caption goes here', 'http://www.hbip.com/dcc/is/instructions.html');
    };
    </script>
    using window.onload isnt' recommended because it Can overwrite other code that is using that handler. It's best to use event listeners which can be added without overwriting onload events.
    You could use sitepoints core.js from Simply Javascript:
    http://www.sitepoint.com/blogs/2007/...-core-library/
    Code:
    Core.addEventListener(window, 'load', function() {
       GB_show('A caption goes here', 'http://www.hbip.com/dcc/is/instructions.html');
    });
    or jQuery
    http://jquery.com/
    Code:
    $(document).ready(function() {
       GB_show('A caption goes here', 'http://www.hbip.com/dcc/is/instructions.html');
    });
    There's lots of flavours of these functions you should find one that you like best -
    http://www.quirksmode.org/blog/archi..._winner_1.html

  5. #5
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A little over my head. . I will give it a hot non the less. Thanks for the clarification as I missed your point all together the first post.
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  6. #6
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I got it to work with core.js. That is pretty simple.

    Thanks for your patience.

    Many thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by htown View Post
    Wow, I got it to work with core.js. That is pretty simple.

    Thanks for your patience.

    Many thanks,
    Houston
    Good work Simply Javascript is an excellent book.

  8. #8
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I may just have to get that one.
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.


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
  •