homepage Welcome to WebmasterWorld Guest from 54.205.241.107
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Best way to do pop-up windows
llmm123

5+ Year Member



 
Msg#: 3297207 posted 9:48 am on Mar 30, 2007 (gmt 0)

Hi all,

I would just like to know what the best way is to do pop-up windows. I currently do it as follows:

Example 1:

<a href="javascript:jspopUp('popup.htm')">

The code for jspopUp lies in my JS folder and here the size and postion etc etc is determined.

The other way is just plain and simply

Example 2:

<a href="newwindow.html" target="_blank">

The reason why I like the 1st example so much is because, to me, it looks so much "clearner/neater". It does not show the address and nav bars etc, and you can determine the size and postion.

My questions are:

1.) Will example 1 (and/or example 2, for that matter) cause any problems with pop-up blockers etc. I.E. could some of my clients not access the page if I use example 1.

2.) Is there a way that I can use EXAMPLE 2 (which I would consider the safer bet) but then not show the nav and address bar, AND specify the position and size.

Like I said, I currently use EXAMPLE 1 on my website and have not had a problem with the pop-ups on any of the computers/browsers that I have tested.

Sorry for the long post.

Hope someone can help of give some advice.

LL

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3297207 posted 2:46 pm on Mar 30, 2007 (gmt 0)

The best way to do pop-up windows is to not do them at all. Your customers will thank you for it.

However, if you decide not to heed the accessibility and usability advice of experts that have long since decided that pop-ups suck, well, here would be the best way to do it:

<a href="example.htm" id="example">Example</a>

That's your pure content. Next, you "progressively enhance" your document by attaching an onclick event handler. How you attach the event is up to you, but I prefer to use the Yahoo UI Library's Event Utility because it's rock solid and works across browsers


<script type="text/javascript"
src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script type="text/javascript">
function init() {
YAHOO.util.Event.on('example','click',function(e) {
YAHOO.util.Event.stopEvent(e);
// open the new window
window.open(this.href);
}
);
}
YAHOO.util.Event.on(window,'load',init);
</script>

This keeps a nice separation of content and behavior, making your code easier to maintain. It also remains accessible for those who have JavaScript disabled.


The reason why I like the 1st example so much is because, to me, it looks so much "clearner/neater". It does not show the address and nav bars etc, and you can determine the size and postion.

Ugh! Hiding the address and nav bars is a TERRIBLE idea! Trying to specify the size of the window is also a very bad idea, because often times what you think may be the right size will actually look horrible or be unreadable to the user due to the user having a different font size or using a browser that you don't test with. Avoid modifying the users window settings... you will only end up frustrating and alienating many of them.

Hope this helps.

[edited by: encyclo at 4:20 pm (utc) on April 2, 2007]
[edit reason] fixed side scroll [/edit]

llmm123

5+ Year Member



 
Msg#: 3297207 posted 3:47 pm on Mar 30, 2007 (gmt 0)

Hi Fotiman,

Excellent reply - thank you very much for your help! I might need to rethink the way I'm currently going about this.

Cheers,
LL

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3297207 posted 4:55 pm on Mar 30, 2007 (gmt 0)

My pleasure.

As a side note, I often find that some sites (including a very popular ISP's webmail program) open some windows at a specific size. When viewing those with IE, the size may be correct, but when viewing with Firefox (as I usually do), the size is too small, so some text gets cut off. Even worse is when they also make it so I can't scroll or resize the window, because then I have no way of seeing the clipped content.

While I'm generally not a fan of pop-ups, there are SOME valid applications for such a thing. Use them sparingly and wisely, and avoid pitfalls like the one I mentioned above.

Best wishes!

willybfriendly

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3297207 posted 5:23 pm on Mar 30, 2007 (gmt 0)

...there are SOME valid applications for such a thing

Care to expand?

About the only uses I see for pop-ups are:

1. Enlarged photo in a shopping cart
2. TOS agreement associated with a form checkbox

In both there is an advantage (as a user) to staying on the referring page

WBF

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3297207 posted 7:00 pm on Mar 30, 2007 (gmt 0)

I don't know if I even agree with the enlarged photo. In the context of a shopping cart, where you want the users to add items to cart, I prefer a link to a page with the enlargement that not only contains the enlarged photo by item details, thumbs to more photos, and the ever-important select item options and ad to cart, as well as a functional way to return to where I was before enlargement. :-)

I like pop ups for utility functions that supplement the content, for example, a help link next to a term or requirement that may confuse the user. A help link, "What's this?" next to a CVV code for example. Any time you want to supplement the content, keep the user on the same page, but not bloat the content with additional help, this is a good use for a pop-up. But it should be resizable and contain scrollbars at all times, and should have an alternate method of access:

<a href="myhelp.html#topic" target="new window" onClick="myHelp('topic'); return false;">What's This?</a>

llmm123

5+ Year Member



 
Msg#: 3297207 posted 7:14 pm on Apr 1, 2007 (gmt 0)

Hi all,

I've been thinking about this pop-up problem the whole weekend and I realize that I have to "kick the habit!". My problem however is that I do not know how else to handle it - let me explain....

I run a travel agency so most of my pages are "tour itineraries" with a basic look as follows:

Day 1
The itinerary for day 1
Accommodation: Holiday Inn

Day 2
The itinerary for day 2
Accommodation: Sheraton

And so on, and so on....

My pages are self explanatory (enough info in each day so the client knows exactly what to do) but all clients want to see what the accommodation looks like - with pictures and some text. Currently, I thus have a pop-up when the client clicks on the accommodation link.

The reasons why I like pop-ups was explained in an earlier post, but another reason (which seems to be a bad/invalid reason) is that I determine the size of the pop-up so that the pop-up is SMALLER than the main page. The client thus knows that he is still on the ITINERARY PAGE and just looking at the accommodation. Whenever he is finished with the accommodation pop-up, he just closes it and carries on with the itinerary.

If I just make a normal "new window" I cannot determine the size and this "new window" will then be the same size as the ITINERARY PAGE and thus HIDE / COVER the ITINERARY PAGE. I am worried that some clients might get lost in this way and not realize that he can just close this page and then get back to the ITINERARY PAGE. This is as least what happens on my IE. On firefox, the new window does not open ON TOP / OVER the ITINERARY PAGE, but in a new tab! I really am worried that my client will not realize what happened to the ITINERARY PAGE they were looking at.

This might seem like a simple problem, but it is really bogging me down.

Any suggestions?

Dont get me wrong.... I WANT to get rid of the pop-up's, but dont know with what to replace them.

LL

llmm123

5+ Year Member



 
Msg#: 3297207 posted 10:01 am on Apr 2, 2007 (gmt 0)

Hi all,

Me again, carrying on with my po-up issues.... I found this page [accessify.com...] (I hope I am allowed to show the URL.... I searched the forum for this site and see that mention has been made of it in the past, so I assume I am allowed).

To me it seems like the answer to my problems as it covers the problem where the user does not have scripting enabled.

But........ as I have already admitted, I am not too hot on javascript, so I would appreciate if you could look at this and let me know whether this is still not a good option.

Thanks for all the help so far.

LL

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3297207 posted 10:03 am on Apr 2, 2007 (gmt 0)

Well by your description, as I said

I like pop ups for utility functions that supplement the content,

It sounds like a perfectly legitimate use for a pop-up - additional info that might otherwise be confusing or bloat the content in the main window. But remember this is just my opinion and being wrong is one of the Things I Do Very Well . . .

Just make sure you a) provide a link as above so the content is still accessible if JS is disabled, and b) never omit the scrollbar and resizable parameters. Scrollbars aren't that ugly. :-)

llmm123

5+ Year Member



 
Msg#: 3297207 posted 10:17 am on Apr 2, 2007 (gmt 0)

Thank you rocknbil! And also thanks for the help with the "breadcrumbs post" on which you replied. I haven't started with the homework yet, but I'm definitely going to give it a bash and let you know!

llmm123

5+ Year Member



 
Msg#: 3297207 posted 10:38 am on Apr 2, 2007 (gmt 0)

Hi again,

Just as a side note (your comment on this would be appreciated).... I use google's urchin to track visitors etc. I just checked how many of my visitors have java enabled or not.

For 2006 1.18% of my visitors had java DISABLED and for 2007 0.56% of my visitors had java DISABLED.

I would thus say that the percentage of my users that do not have java enabled (and would thus not be able to view my pop-ups - and many other aspects of my site, such as breadcrumbs) is negligible.

It thus seems like the problem with pop-ups is not so much whether the user can view/use/access it or not, but more a general feeling that pop-ups are not good because it takes control out of their hands etc etc.

Is this assumption correct?

LL

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3297207 posted 3:48 pm on Apr 2, 2007 (gmt 0)

I think the few valid cases would be when the information is supplementary to what is currently on the page. For example, "help" links.

@rocknbil

<a href="myhelp.html#topic" target="new window" onClick="myHelp('topic'); return false;">What's This?</a>

I would avoid something like this. It mixes content (the actual link) with behavior (the onclick and target attributes). Better to use unobtrusive JavaScript to attach the behaviors, as I mentioned in my original post.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3297207 posted 3:54 pm on Apr 2, 2007 (gmt 0)


For 2006 1.18% of my visitors had java DISABLED and for 2007 0.56% of my visitors had java DISABLED.

You mean JavaScript, not Java. Big difference between the two.

For the few who don't have JavaScript enabled, if you develop your page correctly, they can still access the same content. This is probably the biggest advantage to developing using "progressive enhancement" methods and unobtrusive JavaScript. In other words, your content is the same no matter what, you just enhance it.

For example, using JavaScript to turn certain links into popup links would be a valid enhancement. The content remains accessible to those without JavaScript.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3297207 posted 11:02 pm on Apr 2, 2007 (gmt 0)

Yeah I know. :-P But it *is* an easy way to create a pop-up and have the link remain accessible for those that don't understand how to attach behaviors. Since llmm123 has professed he/she is not hot at JS, it applies. Not the *best* way but still accessible.

zeus

WebmasterWorld Senior Member zeus us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3297207 posted 5:49 pm on Apr 5, 2007 (gmt 0)

I have a single pop up, which is shown only once every 14 hours to the same user, think thats ok and its a must if you use many hours work to offer something for free.

thecoalman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3297207 posted 7:42 pm on Apr 5, 2007 (gmt 0)

I see very few uses for pop-ups that are not initiated by the user. About the only one I can thnk of that is useful is the one on phpbb forums which pops up when you have a new PM. I'm sure there are other legitimate uses but that is the only example I can think of at the moment.

As far as user initited ones I've only used one for a pop-up "radio" using an embedded player. It plays random songs form a collection of files on the server. User can minimize and continue navigating the site. I've used similar code mentioned by the second poster that is still accessible whether they have JS enbaled or not. No JS and it's just a regular link.

glitterball

10+ Year Member



 
Msg#: 3297207 posted 8:06 pm on Apr 5, 2007 (gmt 0)

While I am normally puritanical against the use of pop-ups, flash and other such evil elements ;-), I have to admit that there are quite a few useful uses for javascript pop-ups - calendars and 360 degree virtual tours to name two.

oodlum

10+ Year Member



 
Msg#: 3297207 posted 4:12 am on Apr 6, 2007 (gmt 0)

I've always avoided pop-ups like the plague, but have recently implemented them on a new dating site for for (ironically) usability reasons.

1. user does a search, is presented with a list of members
2. user clicks a member, is taken to the profile
3. clicks a photo thumb, which is enlarged in a pop-up
4. clicks "next" 50 times to view all 50 photos
5. closes pop-up, clicks browser's back button once (not 50 times) to return to the search results and check out another profile

A breadcrumb trail would also enable users to return to the results with one click, but many users only ever use the back button to navigate.

If I wanted all of the photos to be indexed by SEs I would have reconsidered, or possibly shown the SEs a rewrite (i.e. cloaked version that has each photo embedded on a page). In this case it wasn't an issue as I didn't want to dilute the site with millions of pages each with a single photo in a heavy template.

klown

5+ Year Member



 
Msg#: 3297207 posted 4:20 am on Apr 6, 2007 (gmt 0)

I dislike javascript popups, why not just use a the target=_blank code? The popup window is then configured to match the users last popup size. The code isn't bloated with unnecessary code among other things.

I use popup windows when on basically every external link on my sales site. There aren't many.. I have around 15 pages describing different companies we sell for, and those have links to the mother company. Those open in a pop up as It gives them a better chance of returning to my site.

I use popups for pictures.

I use popups in admin systems where theres just too much info, a single click and a popup saves a reload which could take a bit of time.

There are plenty of reasons pop ups are worthwhile, advertising isn't one of them though, and pop-up ads are what make people annoyed.

patiodragon

5+ Year Member



 
Msg#: 3297207 posted 2:13 pm on Apr 7, 2007 (gmt 0)

">>...there are SOME valid applications for such a thing

>Care to expand? "

Here is another use for pop-up windows that I like.

In a database application there exists a drop-down window and you don't see the choice that you like. You can click on a link that allows you to "Add New Type" (or new something) in a small pop-up window without leaving the page you are on. When you type in the new value and close the window, you can re-execute the query / refresh the page so that you have the new value.

OldWolf

5+ Year Member



 
Msg#: 3297207 posted 2:23 pm on Apr 7, 2007 (gmt 0)

I use this one and happy with it (not my website): [digitalia.be...]

[edited by: encyclo at 6:37 pm (utc) on April 7, 2007]
[edit reason] fixed link [/edit]

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3297207 posted 5:49 pm on Apr 7, 2007 (gmt 0)

Side note...

llmm123: Just as a side note (your comment on this would be appreciated).... I use google's urchin to track visitors etc. I just checked how many of my visitors have java enabled or not.

For 2006 1.18% of my visitors had java DISABLED and for 2007 0.56% of my visitors had java DISABLED.

Fotiman: You mean JavaScript, not Java. Big difference between the two.

I'm kinda wondering whether llmm123 does actually mean "Java" afterall (although perhaps confusing it with JavaScript and hence a bit of a red herring in this thread). G's urchin relies totally on JavaScript to do any 'tracking' of visitors, so how can it possibly track how many visitors have JS disabled?!

There is a possibility that some browsers might occasionally request the .js from the server even when JavaScript is disabled in the browser, but from what I've read recently this does not seem to be X-browser, nor reliable?! Anyone know more/how?
[webmasterworld.com...]

surfin2u

10+ Year Member



 
Msg#: 3297207 posted 5:49 pm on Apr 8, 2007 (gmt 0)

Another possible use for popups that I don't think that I noticed in this thread is when you are giving someone a link to a page on someone else's site, but you want to make it easy or possible for them to return to your site after they leave.

Yes, of course, they can use the Back button on the browser, but not everyone thinks of this, or if they have visited a long string of pages on the other site, then it may require just as many Back button clicks to get back to my site, depending on how their browser works, and how well they know how to use it.

Frames were a way to accomplish this, but they are no longer acceptable, and the IFRAME tag is another questionable technique.

The breadcrumb solution works wonderfully when you are in control because the visitor is still on your site, but how about getting them back after they leave to a different site?

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3297207 posted 4:04 pm on Apr 9, 2007 (gmt 0)

Another possible use for popups ... is when you are giving someone a link to a page on someone else's site, but you want to make it easy or possible for them to return to your site after they leave.

Hhhmmm, this may be desirable for the owners of the originating website, but IMHO, from a users perspective, this can at times be annoying. External links should ideally be indicated somehow on the page. If I want to follow an external link and stay where I'm at on the original website I will always 'right-mouse' and select 'open in new window/tab'. If I activate the link in the normal way I would expect it to replace the page I am currently viewing.

Frames were a way to accomplish this, but they are no longer acceptable...

I have used frames to link to external websites a few times... recently. A small frame at the top with a link back to my site and a link to close the frame - and the external site below (if it doesn't have any frame busting code). I would have said this was more desirable to the end user rather than a popup?!

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3297207 posted 7:44 pm on Apr 9, 2007 (gmt 0)

Hhhmmm, this may be desirable for the owners of the originating website, but IMHO, from a users perspective, this can at times be annoying.

Totally agree, if a link is off-site, let them go and don't be greedy. It's like an ex-girlfriend, why would you try and get someone to stay who doesn't want you? :-D

If you want to keep users on your site, write compelling content. If you don't want them springboarding to another site, don't put external links on your site. Period.

surfin2u

10+ Year Member



 
Msg#: 3297207 posted 1:13 am on Apr 10, 2007 (gmt 0)

If you want to keep users on your site, write compelling content. If you don't want them springboarding to another site, don't put external links on your site. Period.

I agree in general.

One of my sites is a successful niche directory. My advertising clients expect links to their websites and I can't argue with that. People do leave my site and return. Anything that I can do to facilitate their return is a plus for me. I do my best to add value with good content.

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3297207 posted 3:41 am on Apr 10, 2007 (gmt 0)

The best way: never. Splitting a visitor's attention between two sources is simply bad design.

- John

BeeDeeDubbleU

WebmasterWorld Senior Member beedeedubbleu us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3297207 posted 8:57 am on Apr 19, 2007 (gmt 0)

I cannot believe the nonsense that I read about this. Deprecating the target="blank" tag because it encourages bad design is just plain stupid. I am sure that the design police could find something more useful to be spending their time on. You cannot force people into designing good websites.

There are so many legitimate reasons why opening a new window or a popup makes sense. Several of them have been discussed already but clearly there are lots of situations where IMHO this is good design.

I appreciate that the intention is to put control of this in the hands of the user. This is good but not when many users do not really know how to use a browser.

With regard to ...

The best way: never. Splitting a visitor's attention between two sources is simply bad design.

I disagree. This is bit like saying you should not have vegetables on the same plate as your steak. There are occasions where the content on a page is better appreciated with support from another page (either on or off site).

If I want to follow an external link and stay where I'm at on the original website I will always 'right-mouse' and select 'open in new window/tab'.

Of course you will, but then you know what you are doing. The majority of people who use browsers to surf the net do so automatically without really knowing how they should be used. Aren't they the amongst the people that accessibility is designed to assist?

It must also be said that if you know how to do this then you should be well capable of recognising and dealing with any new windows that are opened. I cannot understand why this is a big deal? It's easier to just close a new window than it is to right click to view it and then close it. (If you have right clicked then you have recognised that it makes sense to open it in a new window.)

I have been on the net for about 14 years and I could be considered a very experienced surfer and contrary to what has been said I regularly get annoyed when sites link to external documents or other websites that essentially invite closure after they have been viewed. When I close them I often find I have closed my browser. I then have to reopen my browser and use history to get back to where I was. Accessibility my @rse!

Here are some examples of when a new window makes sense to me (and to other people that I have discussed this with).

*** Links to Word Documents or PDFs
When I open a PDF I want and expect it be outside the website from which it is sourced. When I am finished reading these I automatically click the close button, which is bad news if they are not in a new window.

*** Links to External Mapping Software
If I am looking at something that offers a map or directions I want and expect these to open outside the current page.

*** Expanded Product Views in Online Shops
What could make more sense than to display the enlarged view in a popup or new window?

*** Reply Windows to Threads in Forums
I am writing this in a new tab in IE7 because like many others I find it much easier to do so. I used to use the back button to refer to the previous post when doing this but on occasions when I clicked forward again I lost what I had already written. Very annoying!

There are lots of others. Feel free to add to this list.

In conclusion, every time I read a thread on this much of it discusses work arounds in JS, etc. This in itself indicates that it should not have been deprecated. The fact that you can get a page to validate using Javascript instead of target="blank" is clearly not what was intended.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved