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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question how to optimize multiple popup link code?

    I have a page with several links to open in the same popup window. This is the coding I am using:

    Code:
    <a href="URL_1" title="link name 1"
    onclick="var w=window.open('URL_1', 'popup', 'scrollbars=1,resizable=1,width=590,height=400,left=20,top=20'); return false;"
    onmouseover="setAttribute('title',' &quot;link 1&quot; opens in a popup')">link 1</a> 
    
    <a href="URL_2" title="link name 2"
    onclick="var w=window.open('URL_2', 'popup', 'scrollbars=1,resizable=1,width=590,height=400,left=20,top=20'); return false;"
    onmouseover="setAttribute('title',' &quot;link 2&quot; opens in a popup')">link 2</a>
    
    <a href="URL_3" etc.etc.
    I am a rank beginner at javascripting and wonder how to go about putting most of the popup coding into the header so that I am not repeating the same rather large amount of code over and over in each link.

    Code:
    <script type="text/javascript">
    <!--
    ???
    // -->
    </script>
    </head>
    <body>
    <a href="URL_1" title="link name 1"
    onclick="var w=window.open('URL_1', 'a var???'); return false;"
    onmouseover="setAttribute('title','&quot;link 1&quot; a var???')">link 1</a> 
    
    <a href="URL_2" title="link name 2"
    onclick="var w=window.open('URL_2', a var???); return false;"
    onmouseover="setAttribute('title',' &quot;link 2&quot; a var???')">link 2</a>
    Even better would be if any repeated onclick and onmouseover stuff could be in the header. Thank you for any help you can offer.

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What you want to do is encapsulate the code in a function.

    Notice that your code differs only slightly from link to link, and that this change can be held in a variable.

    Something like this:
    Code:
    function openLink(url) {
     var w=window.open(url, 'popup', 'scrollbars=1,resizable=1,width=590,height=400,left=20,top=20');
     return false;
    }
    
    <a href="URL_1" title="link name 1"
    onclick="return openLink('URL_1');"
    onmouseover="setAttribute('title','&quot;link 1&quot; a var???')">link 1</a>
    I'm not sure what else you're trying to do with setAttribute (the a var??? part), but I don't think you can encapsulate that much further.. I could be wrong though..

    Hope that helps,
    Sadiq.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <script type="text/javascript">
    <!--
    function link2Popup(linkObj)
    {
    var w=window.open(linkObj.href, 'popup', 'scrollbars=1,resizable=1,width=590,height=400,lef  t=20,top=20'); 
    return false;
    }
    // -->
    </script>
    </head>
    <body>
    <a href="URL_1" title="link name 1"
    onclick="return link2Popup(this);" title="&quot;link 1&quot; opens in a popup">link 1</a> 
    
    <a href="URL_2" title="link name 2"
    onclick="return link2Popup(this);" title="&quot;link 2&quot; opens in a popup">link 2</a>
    What I've given you will take the HREF attribute from the current link and open it in a popup but in case someone has javascript disabled the link will open in the current window. There's no reason at all for using the onmouseover event to set a title on a link since the title is a standard property.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #4
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you, sad69, that coding is working very well. Also, thanks to you, Roy Sinclair for your reply.

    As for the mouseover stuff, I am trying to ensure that the popup links will all open in the same window if people don't close the popups. But as you pointed out, Roy, it would not be advisable to have a new window opening for those who have javascript disabled. I realize that target= is not really allowed for anything but frames but it does seem to work as expected right now.


    Quote Originally Posted by Roy Sinclair
    There's no reason at all for using the onmouseover event to set a title on a link since the title is a standard property.
    The reason that I wanted a separate title for the javascript version is that I wanted to have "opens in a popup" for viewers with javascript enabled but not on the title for people with javascript disabled.

    I was hoping to do something similar with function setAttribute() (if I could have such a thing) because so much of that part is similar as well. What I envisioned was having only to fill in the relevant parts on the links. Obviously the following is wrong but this is as close as I can come to attempt to explain what I hope to do.

    Code:
    var message=opens in a popup window
    [...]
    </script>
    </head>
    <body>
    <a href="URL_1" title="link name 1"
    onclick="return openLink('URL_1');"
    onmouseover="return opensetAttribute('&quot;link 1&quot; + 'message')">link 1</a>
    
    <a href="URL_2" title="link name 2"
    onclick="return openLink('URL_2');"
    onmouseover="return opensetAttribute('&quot;link 2&quot;  + 'message')">link 2</a>
    Please accept my apologies if what I'm asking is impossible.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function opensetAttribute(objLink){
      var addStr = " opens in a popup window";
      if (objLink.title.indexOf(addStr)==-1) {//don't add on succeeding mouseover
         objLink.title = objLink.title + addStr;
      }
    }
    ...
    <a href="URL_1" title="link name 1"
    onclick="return openLink(this.href);"
    onmouseover="opensetAttribute(this)">link 1</a>
    
    <a href="URL_2" title="link name 2"
    onclick="return openLink(this.href);"
    onmouseover="opensetAttribute(this)">link 2</a>
    Last edited by glenngv; 04-28-2004 at 05:33 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    This is wonderful, glenngv! It works like a charm.

    Thank you very much to all of you for the help.


  •  

    Posting Permissions

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