SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using JS to open new Windows

    Hi - I want to use JS to open PDFs and Word documents in a new window. However I don't want to rely on the user having to add extra classes (they will probably forget) - I just want the document extension to indicate whether the file is a PDF.

    I tried this code but I can't get it to work:

    Code:
    <script type="text/javascript">
    document.onclick = function(e)
    {
      var target = e ? e.target : window.event.srcElement;
    
      while (target && !/^(a|body)$/i.test(target.nodeName))
      {
         target = target.parentNode;
      }  
      
      if (target && target.getAttribute('href')) {        
    	   var url = target.getAttribute('href');
    	   var format = url.substring(lastIndexOf('.')+1);   
    	      if (format == "pdf") {	   
    	        var external = window.open(target.href);
                return external.closed;       
    	      }
      }
    }
    </script>

    It is supposed to get the href attribute of the link clicked and then work out whether it is PDF based on the file extension. Any idea how I could achieve this? I need to add some text like Opens in a new window.. too with JS and resize the window so it is 90% of the screen (so that users will see 2 windows open at the same time).

    Thanks
    Steven

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lastIndexOf should be url.lastIndexOf

    Try this.
    Code:
      if (target && target.getAttribute('href')) {
        var url = target.getAttribute('href');
        var format = url.substring(url.lastIndexOf('.')+1);
        if (format == "pdf") {
          var external = window.open(target.href);
          return !external;
        }
      }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - thats brilliant I just need to open the new window at 80&#37; of the original window size. I tried the code below without success

    document.onclick = function(e)
    {
    var target = e ? e.target : window.event.srcElement;

    while (target && !/^(a|body)$/i.test(target.nodeName)) {
    target = target.parentNode;
    }


    // if the browser understands target and getAttribute
    if (target && target.getAttribute('href')) {

    // get the href
    var url = target.getAttribute('href');

    // get the file extension
    var format = url.substring(url.lastIndexOf('.')+1);

    //if pdf open new window

    var newHeight = document.body.clientHeight * 0.8;
    var newWidth = document.body.clientWidth * 0.8;

    if (format == "pdf") {
    var external = window.open(target.href, '', 'width=' + newWidth + ', height=' + newHeight + ', resizable=yes, scrollbars=yes');
    return !external;
    }
    }
    }

    Any ideas?
    Steven

  4. #4
    SitePoint Guru SSJ's Avatar
    Join Date
    Jan 2007
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do you want it to be 80&#37; of the original size?

    document.body.clientHeight only gets the height of body, which does not include the scrollbars, toolbars, or any other parts of the browser's "chrome".
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •