Neil Stewart Website

Date: 16th January 2008 at 7:07 pm | Filed under: portfolio | Author: Sam Burdge

Neil Stewart - HomeNeil Stewart - GalleryNeil Stewart - BiogNeil Stewart - Moving Image

This site, built for photographer Neil Stewart, is the first site 76 Creative have launched this year. Built with PHP, it features categorized thumbnail galleries, the usual biog, links and contact information, and also a moving image section with an embedded Flash Video (flv). All of the navigation for the site is done using images to create the hand written look that we were going for, it uses a javascript to give the mouseover effect for the images. For me, this is one of the best designed sites I have worked on so far, as it has a distinctive style, yet it's simple and functional.

Check it out: www.photoneil.com

Leave a Comment

JavaScript Popups

Date: 3rd November 2007 at 4:43 pm | Filed under: development, scripts | Author: Sam Burdge

Something I've noticed recently, whilst installing many different WordPress plugins on my site and on other sites is the inconsistency in JavaScript popup window code used in many plugins, allowing for the same popup to be opened numerous times or for a popup to hide in the background behind another page. The basic code to open a popup is:

window.open('http://bla.com','myWindow','status = 1, height = 300, width = 300,
resizable = 0');

However, if you add this code as the onclick for a button or anchor tag it will open a new popup each time it is clicked regardless of the fact that the window may already be open. Adding return false; will prevent this from happening, but then if the window is at the bottom of the pile clicking on the link will do nothing.

To ensure the window is brought to the front the code should be executed like this:

myPopup = window.open('http://bla.com','myWindow','status = 1, height = 300,
width = 300, resizable = 0'); myPopup.focus(); return false;

6 Responses to “JavaScript Popups”

  • Comment by c-received
    Date: November 6th, 2007 at 7:40 pm

    Hey Sam,

    In the second example the window.open object and it’s properties are being assigned to a custom window object reference. This makes the process of isolating, controlling, and recognising individual window.open objects easier. Basically, the window object reference ties the main window to the sub-window as well as creating a link between the secondary window to its main opener window.

    If you wanted to harden the function shown above some more you could do something like whats below. This ensures the creation code isn’t ran if the window already exists. You can also test and verify if a window is closed by using ‘w.closed’, err not done here.

    function openWin(url){
    var w=null;
    if(!w)w=window.open(url,….);
    else w.focus();
    return false;
    }

    Using approches like these is very bad news. Best practice is to avoid using window.open() at all.

    <a href=”#” rel=”nofollow”>
    <a href=”window.open(…)” rel=”nofollow”>

    Anyway, if you were to, ideally the event that fires this function should be attached to the link unobtrusively, however, at the end of the day it will be formed something like this…

    …onclick=”return openWin(this.href);”

    I.E 7 will put an end to developers setting certain properties by force, e.g. removing the address bar, due to accessibility and security reasons… No doubt someone will find a work around.

    cheers, c-received

  • Comment by c-received
    Date: November 6th, 2007 at 8:03 pm

    Hmmm.. muffed my code and turned it into real HTML … Should fix this soon mate, also have a look into Cross Site Scripting as it would be quite easy to do this on your site.. E.G

  • Comment by c-received
    Date: November 6th, 2007 at 8:06 pm

    a=”get”;
    b=”URL(\”";
    c=”javascript:”;
    d=”alert(’XSS’);\”)”;
    eval(a+b+c+d);

  • Comment by c-received
    Date: November 6th, 2007 at 8:07 pm

    blah blah…

  • Comment by c-received
    Date: November 6th, 2007 at 8:09 pm

    or to test this way ..
    ”;!–”=view source

  • Comment by Sam Burdge
    Date: November 6th, 2007 at 9:55 pm

    Hi c-received,
    Thanks for your detailed response. I will indeed look into Cross Site Scripting. I think you are right that using the window.open(…) method is not great. This brief article was written after I’d spent ages scanning throught the code of about 4 or 5 wp plugins that I’d installed on a clients site to fix these popup window problems.
    S

Leave a Comment

« Previous Page