SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    possible to do the following

    at my page at www.meadowlarkco.com/customersnew2.php Im going to make the word 'Technology' a link to open up a popup, but how can I set the size of the popup?

    The other thing I was thinking of doing was when the user clicks on Technology have my technology content open up in the same spot as where the control image is, could someone give me an idea on how to start about doing this? Im assuming I couldn't have the control image a background image as it is now.

    thanks

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can specify both the size and the placement of the popup in the window.open method, but it looks like you're already doing both (reformatted for readability):

    Code JavaScript:
    window.open(
        'http://www.meadowlarkco.com/customersnew2.php',
        'popup',
        'width=500,height=500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'
    );

    Just change the width and the height to whatever size you'd like.

    But when it comes to setting the window's position to where the element is located on the screen... That's going to require a change. You currently use inline JavaScript to open the popup:

    HTML Code:
    <a href="..." onclick="window.open(...); return false">Technology</a>
    You'll have to move that somewhere else, and use an event handler or an event listener. And that involves actually grabbing the "Technology" link so that you can give it an event handler/listener, which presents issues of its own.

    But the point of all this is that you can then access the event object, which has the clientX and clientY properties, which you can use to set the popup's position.

    Essentially, you'll want to change your HTML to something like this:

    HTML Code:
    <a href="http://www.meadowlarkco.com/customersnew2.php" id="techPopup">Technology</a>
    
    <!-- other stuff -->
    
    <script type="text/javascript">
    var techLink = document.getElementById('techPopup');
    techLink.onclick = function (e) {
        e = e || window.event;
        window.open(techLink.href, 'popup', 'width=500,height=500,etc,etc,left=' + e.clientX + ',top=' + e.clientY);
        return false;
    };
    </script>
    I'm not sure how much control this will give you over the popup's precise position, but it's a good start.
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Member mrbetabm's Avatar
    Join Date
    Jul 2012
    Location
    Dhaka
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use this code <a href="..." onclick="window.open(...); return false">Technology</a>


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
  •