Forum Moderators: open
I've tried several types of popup functions, and everything works out ok, except the url that it pops up is http://www.example.com/[object Object]
========================================
{
image: 'chat_menu_detach.png',
text: 'Detach Window',
action: popupURL
},
========================================
function popupURL(url) {
newwindow=window.open(url,'http://www.example.com','height=180,width=1200', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,');
}
========================================
Anyone willing to shed some light?
[edited by: eelixduppy at 1:13 am (utc) on Sep. 2, 2009]
[edit reason] use example.com please [/edit]
function popupURL(url) {
newwindow=window.open(url,'http://www.example.com','height=180,width=1200', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,');
}
Five things here, four of them significant, the last just a matter of style but requires a little tweak for accessibility.
1. The parameters for open are url, window name/id, window attribute list. You have your site URL for a "window name/id," which is probably the main cause.
The window name/id parameter is to assign a unique ID to the window. A common error is to put 'new window' in this parameter. When a user opens the window, it opens a window ID'ed 'new window.' If they do not close it and click another link in that opens in 'new window' populating it with the new content.
Think about this. Main window -> click link, popup opens, then they go BACK to the main window to click another link. Doing so puts the pop up behind the main window now. Click the link, it opens content in the window hidden behind main - hence, the perception is your site is broken.
So what you want there is a way to assign a unique value to every window using this function:
var day = new Date();
var id = day.getTime();
newwindow=window.open(url,id,'height=180,....
2. The attributed list is quoted all together - width and height are not separate.
Wrong:
'height=180,width=1200', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,'
Correct (ish):
'height=180,width=1200,toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0'
3. Next, note the extra comma at the end of the attribute list, which I bolded in my code above. Shouldn't be there.
4. Return false from your function, especially if it's called by a link. Why? A link's normal action is to navigate to the href. Many developers "get around" this like so:
Wrong
<a href="#" onClick="openURL('some url');">Some URL</a>
<a href="javascript:void(0)" onClick="openURL('some url');">Some URL</a>
They work, but are wrong. Use
<a href="file-for-alternate-content.html" onClick="return openURL('some url');">Some URL</a>
By returning false to the onClick handler, it tells the browser to not perform it's natural action and allows Javascript to manage the "click." This allows you to put a REAL alternate content URL in the href so if Javascript is disabled the user can still access the content.
5. Last, you don't have to assign a value to attributes. Just include them if you want them,
'height=180,width=1200,toolbar,scrollbars,location,statusbar,menubar,resizable'
and leave them out if you don't.
'height=180,width=1200'
In exchange, heed this one bit of advice: You do not know your user's environment. Although you think a scrollbar-less and unresizable window is perfect for your design, what happens if the text in this window wraps beyond the size in my environment? I cannot see that content, that is what. And it's extremely annoying. :-)
Always always include, at the very least, resizable so I can open up the window and see all content, and I recommend scrollbars too. They will only make their ugly appearance when they are needed.
Corrected and recommended code:
function popupURL(url) {
var day = new Date();
var id=day.getTime();
var params = 'height=180,width=1200,scrollbars,resizable';
newwindow=window.open(url,id,params);
return false;
}
[edited by: eelixduppy at 1:14 am (utc) on Sep. 2, 2009]
[edit reason] please use example.com [/edit]
I gave it a shot and it worked :D... Many thanks for your support. I will sing webmasterworld praises :D
