SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clean Pop-up Script

    I would like to make a cleaner pop-up script than the standard DreamWeaver "<a href="javascript:MM_openBrWindow..." stuff, I would like to create something that is cleaner and more accessible. Since practically all the pop-up windows are the same dimension, I would like each link to simply reference the id or name attribute to pop-up the window.

    I know this is possible, but my javascript skills kinda run short once you get to event-handling. I was wondering if there was anyone on this forum who could point me to a place where I could learn how to do this?

  2. #2
    Smart programmer silver trophy M.Zeb Khan's Avatar
    Join Date
    Jan 2004
    Location
    Luton, Beds
    Posts
    1,791
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should have mentioned that I need this script for links. You click on a link, and it opens a pop-up window containing images & includes.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Code javascript:
    <a id="targetPopup" href="target.html">Popup Link</a>

    Code javascript:
    document.getElementById('targetPopup').onclick = function () {
        popup(this, 'myWindow');
        return false;
    }
    function popup(el, popupName) {
        window[popupName] = window.open(el.href, popupName, 'toolbar=no,location=no, directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=500,height=300');
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much--this is what I am looking for. I hate to sound like a stup, tho--but I tried the script and it will not work. It opens the link in the same window. I cannot figure out what I am doing wrong! The only thing I changed is the href url... can anyone help me figure it out?

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where did you place your Javascript code? In the head section or before the closing </body>?

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh!

    Putting it right before the close-body tag fixed it! Sad that I didn't try that before posting, but grateful for the suggestion. If you do not mind, will you please tell me why placing the script here fixed it--was it because script needed to bubble through all elements first?

  8. #8
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its probably because the element didn't exist yet... at the point where you had the code first (in the head section)

    What you could do (and this is only my opinion) is, run a function on window load (in other words add an event listener, for the window load), and place the above code in that function. That way you can put the code anywhere in the script (or in an external script, keeping it modular) and it will only run once all objects have been created / loaded. Thus it shouldn't error.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was going to be my next question! I will study about building listeners so I can make the script modular (so when the client asks to re-do the window proportions, I do not have to update dozens of files.)

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OH! Here is a problem with this: it only works on the first link (there may be a dozen pop-up links on a page!) Is this because the element is gotten by ID? Is there another element I need to use? If not, what has caused this serious problem...?

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You need to repeat the code for each id you want to link it to.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by felgall
    You need to repeat the code for each id you want to link it to.
    Correct.

    You need to add the onclick event (which attaches the function) to each of the links you want to have the pop up. Personally i wouldn't use an anonymous function, rather create the function, and attach it to each of the links (saves writing it out multiple times)

    You could use something like this to attach the function.

    Code:
    function add_event(obj , event_type , func) {
      if(obj.addEventListener) {
        obj.addEventListener(event_type , func , false);
        return true;
      } else if(obj.attachEvent) {
        var r = obj.attachEvent('on' + event_type , func);
        return r;
      } else {
        return false;
      }
    }
    
    // usage
    var my_obj = document.getElementById('id_of_the_element');
    add_event(my_obj , 'click' , going_to_be_attached_to_link)
    
    function going_to_be_attached_to_link() {
      // jut check up if "this" (im talking about the this keyword) works in this context...
      popup(this, 'myWindow');
      return false;
    }
    If you are going to be attaching this to multiple links, i'd suggest using something like getElementsByTagName, to get all links (if you don't have all the id's of course)


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
  •