Re: [WSG] Popups
For when you ever have links that open in a new window, it helps to
have that little image, would this be appropriate: ?
a[onclick="newwindow()"] {
padding: 10px;
background: url("newwindow.png") no-repeat 0 0;
}
Yes, but...
The point of having rel="external" is to provide a hook for an external
javascript to add the new window functionality. If you have that
external script running, then having the onclick="newwindow()" in the
tag is redundant. Also, you may need some new-window links to have
other onclick handlers too, so you should match on one of a pattern
(foo~="value").
*Also,* having the onclick encoded in the tags reduces your separation
of content, presentation, and behavior. When possible, keep the event
handlers in the javascript and out of the HTML.
So...
a[rel~="external"] {
padding: 10px;
background: url("newwindow.png") no-repeat 0 0;
}
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Popups
Hi guys
Thanks for the tips, I think I'll opt for the show/hide region option.
Just one more thing...
For when you ever have links that open in a new window, it helps to have
that little image, would this be appropriate: ?
a[onclick="newwindow()"] {
padding: 10px;
background: url("newwindow.png") no-repeat 0 0;
}
Cheers
--
-David
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Popups (plus, standards-based event handling)
Another method I've imagined but never implemented is for each added function to add itself to an array of functions. ... It's efficient. Your imagination is should try it. Er, "Your imagination is on the right track; you should try it." My imagination, apparently, completes sentences that my fingers do not. -- Ben Curtis WebSciences International http://www.websciences.org/ v: (310) 478-6648 f: (310) 235-2067 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Popups (plus, standards-based event handling)
Also, while it's convenient to insert javascript event handlers into
HTML
markup when demonstrating an example, in practice it's probably best
to
leave the script out of the markup and apply it from a separate
script file
at window.onload.
One beef I have with this code, and most code of this nature, is that
it uses this to trigger it:
window.onload = externalLinks;
This is fine, if it's the only code you are assigning to onload, but
it
overwrites any previous onloads and is overwritten by subsequent
onloads.
http://www.bivia.com/sandbox/crossfade_slideshow/
test_bv_addListener.html
Wow, your method looks elaborate.
A bit. But you put it in a central utilities-script file, and then all
you need to do is call it so you never need to see the elaboration.
Instead of the DOM:
el.addEventListener('event', func, bool);
...you call a function that does the same, but cross-browser:
bv_addListener(el, 'event', func);
Another method I've imagined but never implemented is for each added
function to add itself to an array of functions.
This is essentially how I used to do it. Each js file that housed a
certain behavior would have this at the end:
if (!window.ToLoad) window.ToLoad = new Array();
window.ToLoad[window.ToLoad.length] = someFuncName;
window.onload = function() {
for (var xx = window.ToLoad.length -1; xx >= 0; xx--) {
window.ToLoad[xx]();
}
}
It's efficient. Your imagination is should try it. Notice that it uses
FILO ordering of the handlers (that's First In, Last Out, or reverse
order from being added).
The advantage to my other code is that it adds any event handler to any
event on any object. So, in this case, the same code could be used to
cue the init script, and the init script could use it to add the
onclick handlers.
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Popups (plus, standards-based event handling)
At 02:39 PM 1/13/05, Ben Curtis wrote:
Also, while it's convenient to insert javascript event handlers into
HTML
markup when demonstrating an example, in practice it's probably best
to
leave the script out of the markup and apply it from a separate
script file
at window.onload.
One beef I have with this code, and most code of this nature, is that
it uses this to trigger it:
window.onload = externalLinks;
This is fine, if it's the only code you are assigning to onload, but it
overwrites any previous onloads and is overwritten by subsequent
onloads.
Ben,
Wow, your method looks elaborate. When I have some more time I'll go
through it in detail and try to give you some feedback.
In the meantime, the way I get around the one-function-onload problem is
simply to load a generically-named function at the global level:
window.onload = jsInit;
Then, jsInit() can be defined differently by each page to load its own
batch of functions:
function jsInit()
{
var x = doThis();
var x = doThat();
}
This method isn't *ideal* because I have to list all of the onload
functions manually for each page, instead of simply attaching the functions
to the html file with
Re: [WSG] Popups (plus, standards-based event handling)
window.onload = externalLinks; This is fine, if it's the only code you are assigning to onload, but it overwrites any previous onloads and is overwritten by subsequent onloads. ... Another issue is that it works only after loading the whole page... I use it in (testing setup of) a photogallery on http://lesik.cz/index.php?i=4 and visitor "has to" wait for the whole page to load to have it fully functional (Actually they don't wait and the have the less functional version...). So I was wondering if placing the
Re: [WSG] Popups (plus, standards-based event handling)
Also, while it's convenient to insert javascript event handlers into
HTML
markup when demonstrating an example, in practice it's probably best
to
leave the script out of the markup and apply it from a separate
script file
at window.onload.
I'm curious as to how you do that, because to my mind it's a great
idea.
Keeping it out of the markup would make sure that the code of the page
itself remains nice and lean and would also make it easier to remove
the
popups altogether if such a feat was necessary.
If you could elaborate on that, either on or off list, I'd really
appreciate
it. :)
Here's a place you can start:
http://www.sitepoint.com/article/standards-compliant-world
One beef I have with this code, and most code of this nature, is that
it uses this to trigger it:
window.onload = externalLinks;
This is fine, if it's the only code you are assigning to onload, but it
overwrites any previous onloads and is overwritten by subsequent
onloads. But it should use the DOM (a standard! woohoo!) when possible
to add a handler to an event. Unfortunately, IE on Windows doesn't use
this, and IE on Mac won't use what IE Win uses. So I've written this
code, that you are free to use (beware of line wrap, and send support
questions offlist):
/*
the ondocload "event" is triggered by this code you place before the
closing body tag:
window.ondocload();
it is the event before onload that indicates the document is done
downloading;
after the func declaration we set two handlers to make sure events
assigned to
docload are triggered onload if the author forgets to put the call in
the doc.
*/
function bv_addListener(el, evt, fn) {
if (typeof el == "string") el = document.getElementById(el);
if (!el) return;
if (window.addEventListener && evt != 'docload') { // DOM
el.addEventListener(evt, fn, false); // false, because IE can't
handle the truth
} else if (window.attachEvent && evt != 'docload') { // MS, incl Opera
el.attachEvent('on'+ evt, fn);
} else { // Mac IE and the ondocload event
var prevHandler = (typeof el['on'+ evt] == 'function') ? el['on'+
evt] : function () {};
el['on'+ evt] = function() { prevHandler(); fn(); }
}
}
bv_addListener(window, 'docload', function () { window.bv_docInited =
true; });
bv_addListener(window, 'load', function () { if (!window.bv_docInited)
window.ondocload(); });
/* END bv_addListener */
Now, if you want a script to run when the HTML has finished downloading
(e.g., initialization scripts), use this:
bv_addListener(window, 'docload', someFuncName);
If you want something to run onload:
bv_addListener(window, 'load', someFuncName);
If you want to add any handler (e.g., someClickHandler) to any event
(e.g., onclick) on any element (e.g., el), use this:
bv_addListener(el, 'click', someClickHandler);
If you don't have an element object to pass, it also accepts an ID as a
string (and a future version will accept classes -- let me know if this
interests you); this is handy when you want to attach an event to an
element that doesn't exist yet:
bv_addListener(window, 'docload', function () {
bv_addListener('someID', 'click', someClickHandler); });
The testpage for this is here:
http://www.bivia.com/sandbox/crossfade_slideshow/
test_bv_addListener.html
(tests will report as failed until the event is triggered -- until you
click or mouseover)
I tested it a bunch, but would appreciate reports of other platforms
success/failure. Once I get out from under some deadlines, I'll write
this technique up and give it to the community.
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] Popups
That's great, thank you very much. I have a project coming up where a script
like this will be very useful. :)
Cheers,
Seona.
> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] Behalf Of Paul Novitski
> Sent: Friday, 14 January 2005 9:07 AM
> To: wsg@webstandardsgroup.org
> Subject: RE: [WSG] Popups
>
>
> At 01:20 PM 1/13/05, Seona Bellamy wrote:
> > > -Original Message-
> > > [mailto:[EMAIL PROTECTED] Behalf Of Paul Novitski
> > > Subject: Re: [WSG] Popups
> > > Also, while it's convenient to insert javascript event
> handlers into HTML
> > > markup when demonstrating an example, in practice it's
> probably best to
> > > leave the script out of the markup and apply it from a separate
> > > script file
> > > at window.onload.
> >
> >I'm curious as to how you do that, because to my mind it's a great idea.
> >Keeping it out of the markup would make sure that the code of the page
> >itself remains nice and lean and would also make it easier to remove the
> >popups altogether if such a feat was necessary.
>
>
> Seona,
>
> Here's a quickie example in which I assign Jeff's href event handler to a
> single specific hyperlink:
>
> ===
> HTML:
>
>
>
>
>
> http://example.com";>Open the example site
>
>
> ===
> JavaScript:
>
> // this file is "assignevent.js"
>
>
> // Tell javascript to run a function when the page finishes loading:
> window.onload = jsAssignEvent;
>
>
> // When the page loads, assign the event handler to the object:
> function jsAssignEvent()
> {
> // don't run code the browser can't handle
> if (document.getElementById)
> {
> // get the object
> var oAnchor = document.getElementById("anchor1");
>
> // assign the event handler
> oAnchor.onclick = jsOpenLinkWindow;
> }
> }
>
>
> // When the link is clicked, open the new window:
> function jsOpenLinkWindow(evt)
> {
> // stop event propagation
> if (!evt) var evt = window.event;
> evt.cancelBubble = true;
> if (evt.stopPropagation) evt.stopPropagation();
>
> // open the link in a new window
> window.open(this.href, '_blank',
> 'width=500,height=500,menubar=no');
>
> // cancel the click event so the parent window location
> doesn't change
> return false;
> }
> ===
>
> I recommend Peter Paul Koch's articles on event handlers & javascript at
> http://www.quirksmode.org/
>
> Cheers,
> Paul
>
> **
> The discussion list for http://webstandardsgroup.org/
>
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> **
>
>
> --
> No virus found in this incoming message.
> Checked by AVG Anti-Virus.
> Version: 7.0.300 / Virus Database: 265.6.11 - Release Date: 12/01/2005
>
__
<< ella for Spam Control >> has removed Spam messages and set aside Later
for me
You can use it too - and it's FREE! http://www.ellaforspam.com
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.300 / Virus Database: 265.6.11 - Release Date: 12/01/2005
<>
RE: [WSG] Popups
At 01:20 PM 1/13/05, Seona Bellamy wrote:
> -Original Message-
> [mailto:[EMAIL PROTECTED] Behalf Of Paul Novitski
> Subject: Re: [WSG] Popups
> Also, while it's convenient to insert javascript event handlers into HTML
> markup when demonstrating an example, in practice it's probably best to
> leave the script out of the markup and apply it from a separate
> script file
> at window.onload.
I'm curious as to how you do that, because to my mind it's a great idea.
Keeping it out of the markup would make sure that the code of the page
itself remains nice and lean and would also make it easier to remove the
popups altogether if such a feat was necessary.
Seona,
Here's a quickie example in which I assign Jeff's href event handler to a
single specific hyperlink:
===
HTML:
http://example.com";>Open the example site
===
JavaScript:
// this file is "assignevent.js"
// Tell javascript to run a function when the page finishes loading:
window.onload = jsAssignEvent;
// When the page loads, assign the event handler to the object:
function jsAssignEvent()
{
// don't run code the browser can't handle
if (document.getElementById)
{
// get the object
var oAnchor = document.getElementById("anchor1");
// assign the event handler
oAnchor.onclick = jsOpenLinkWindow;
}
}
// When the link is clicked, open the new window:
function jsOpenLinkWindow(evt)
{
// stop event propagation
if (!evt) var evt = window.event;
evt.cancelBubble = true;
if (evt.stopPropagation) evt.stopPropagation();
// open the link in a new window
window.open(this.href, '_blank', 'width=500,height=500,menubar=no');
// cancel the click event so the parent window location doesn't change
return false;
}
===
I recommend Peter Paul Koch's articles on event handlers & javascript at
http://www.quirksmode.org/
Cheers,
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] Popups
> -Original Message- > [mailto:[EMAIL PROTECTED] Behalf Of Paul Novitski > Subject: Re: [WSG] Popups > Also, while it's convenient to insert javascript event handlers into HTML > markup when demonstrating an example, in practice it's probably best to > leave the script out of the markup and apply it from a separate > script file > at window.onload. I'm curious as to how you do that, because to my mind it's a great idea. Keeping it out of the markup would make sure that the code of the page itself remains nice and lean and would also make it easier to remove the popups altogether if such a feat was necessary. If you could elaborate on that, either on or off list, I'd really appreciate it. :) Cheers, Seona. __ << ella for Spam Control >> has removed Spam messages and set aside Later for me You can use it too - and it's FREE! http://www.ellaforspam.com -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 265.6.11 - Release Date: 12/01/2005 <>
Re: [WSG] Popups
At 11:58 AM 1/13/05, Jeffrey Hardy wrote: ... Here's an example of a call to window.open with the 'properties' argument: onclick="window.open(this.href, '_blank', 'width=500, height=500, menubar=no'); return false;" Nice summary, Jeff. One correction: you're not supposed to embed spaces in the properties list, so your example should read: 'width=500,height=500,menubar=no' Also, while it's convenient to insert javascript event handlers into HTML markup when demonstrating an example, in practice it's probably best to leave the script out of the markup and apply it from a separate script file at window.onload. Regards, Paul ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Popups
I got into this discussion late and, while most of the thread has been about showing and hiding layers, I thought I'd try to shed some light on the subject of the message, and David's main question: opening new windows. This has been mentioned here before, but it seems to come up pretty often, so I'll attempt to provide a clear answer for everyone. david wrote: > Ordinarily, this would be achieved with the help of JavaScript and > Window.Open(), so much for cross-browser compatibility. > > Then there's the target="_blank" anchor attribute, but this is > disallowed by the DTD I'm using (XHTML1.1 w/ IFrame), that... plus it > doesn't offer a way to get rid of browser UI elements. My preferred method is to create a standard anchor element (http://example.com";>) and utilize the onclick handler to call javascript's window.open() method with arguments. Here's a simple example: http://example.com/"; title="More about example." onclick="window.open(this.href, '_blank'); return false;">Example Note that the link is valid and well-formed. It's actually perfectly accessible despite the javascript -- even with javascript turned off in the client, the href attribute would suffice and the browser would handle the hyperlink as usual. If javascript is turned on, however, it will respond to the onclick event by executing the window.open function, and then return false to tell the browser not to bother handling the event: onclick="window.open(this.href, '_blank'); return false;" The first argument, 'this.href' is key. By using 'this.href', we are accessing the value of the current element's 'href' attribute. This means we don't need to supply window.open() with the url manually -- it will use the same value as the 'href' attribute in our link, in our case, 'http://example.com'. The second argument (the 'name' of the new window to be created) is given the special name, '_blank', which serves to inform window.open() that it is to launch a new window. Think of it like using in older versions of html. Note that we follow the call to window.open() by returning false to the event handler (return false;). This is important as it prevents the browser from handling the link itself. If the onclick handler doesn't return false, the browser will handle the click normally, and both windows will wind up at http://example.com. For David, who wanted to know about controlling the attributes of the new window, there is an optional third argument that window.open() accepts -- a string of properties for the new window. Here's an example of a call to window.open with the 'properties' argument: onclick="window.open(this.href, '_blank', 'width=500, height=500, menubar=no'); return false;" Going back to our original example, we can revise it so that it opens a new window to 'http://example.com' that is 500px wide, and 500px high with no menubar: http://example.com/"; title="More about example." onclick="window.open(this.href, '_blank', 'width=500, height=500, menubar=no'); return false;">Example It's probably worth noting that, as per the xhtml spec, you need all your attributes to be lowercase (including attributes that pertain to event handlers). So, while "onClick" may work in most browsers, you'll need to use "onclick" if you want xhtml compliance. While I generally try to avoid creating new windows, I do on occasion use this method as a straight-up replacement for target="_blank" when appropriate. Hope this helps! Jeff. -- Jeffrey Hardy Application Developer http://shiftmediagroup.com Standards Compliant Web Development david wrote: Here's the situation: I've got a form that users fill out in order to add something to a database... Under each , there's the element for each of the input elements, and that works fine But because of the layout of the page, the values are kept short, yes... there are title="" attributes, but IE and FF don't show the whole text So I was thinking about doing what other sites do... and thats to put a "more info on this field" link, people click on it, and a popup appears with the minimum of browser UI chrome and jumps to the right section in the code Ordinarily, this would be achieved with the help of JavaScript and Window.Open(), so much for cross-browser compatibility. Then there's the target="_blank" anchor attribute, but this is disallowed by the DTD I'm using (XHTML1.1 w/ IFrame), that... plus it doesn't offer a way to get rid of browser UI elements. Does anyone have any alternatives? I was thinking of having a JavaScript "show/hide" function with the instructions and extra detail contained in a ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
RE: [WSG] Popups
Hi David I struggled with this as well. I tried the nicetitles javascript which allows you to put the information in the title tag and firefox will show the entire text. It also gives you the ability to style the "tooltip" window that pops up. We decided against it for our particular use. We have a form teaser on the left and some in the body of the page. The nicetitles window pops up relative to where the mouse is on the label tag. This forced me to put some extra distance in the nicetitle and it became too confusing. However, if you have a form that is only shown in the main section and can control the layout better, you may want to try this technique. http://www.kryogenix.org/code/browser/nicetitle/ Do some searching around for nice titles and take a look at how others have modified the script. It has some great potential and is less intrusive than popup windows. I think Safari continues to show the tool tip in the status bar. You could also do the javascript function to hide/show the information. This will hide the information for those with javascript disabled. This is something to consider. Good luck Ted http://www.tdrake.net -Original Message- From: david [mailto:[EMAIL PROTECTED] Sent: Thursday, January 13, 2005 4:50 AM To: wsg@webstandardsgroup.org Subject: [WSG] Popups Here's the situation: I've got a form that users fill out in order to add something to a database... Under each , there's the element for each of the input elements, and that works fine But because of the layout of the page, the values are kept short, yes... there are title="" attributes, but IE and FF don't show the whole text So I was thinking about doing what other sites do... and thats to put a "more info on this field" link, people click on it, and a popup appears with the minimum of browser UI chrome and jumps to the right section in the code Ordinarily, this would be achieved with the help of JavaScript and Window.Open(), so much for cross-browser compatibility. Then there's the target="_blank" anchor attribute, but this is disallowed by the DTD I'm using (XHTML1.1 w/ IFrame), that... plus it doesn't offer a way to get rid of browser UI elements. Does anyone have any alternatives? I was thinking of having a JavaScript "show/hide" function with the instructions and extra detail contained in a ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Popups
Hi, I think there are two main possibilities, both quite equal: [1] Information on the same page In that case you have link to the helping paragraph on the same page. The onclick and other event handlers are added to the links with javascript and also the help section (probably at the bottom of the page) is being hidden only when scripting is available. help ... foo foo is actually bar... ... ...
RE: [WSG] Popups
As I read your mail I was going to suggest the hidden DIV with a show/hide toggle button, then there it was at the bottom. I try to stay away from popup windows where I can. When I've needed to do this, and I you have enough space on the page, I've shown the help in a nicely-formatted (light yellow, grey border) box to the right of the field, rather than below, then when people toggle the DIV it doesn't break the flow of the form if they leave the DIV shown. Depends on the amount of text you need show, I suppose. Chris -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of david Sent: 13 January 2005 12:50 To: wsg@webstandardsgroup.org Subject: [WSG] Popups Here's the situation: I've got a form that users fill out in order to add something to a database... Under each , there's the element for each of the input elements, and that works fine But because of the layout of the page, the values are kept short, yes... there are title="" attributes, but IE and FF don't show the whole text So I was thinking about doing what other sites do... and thats to put a "more info on this field" link, people click on it, and a popup appears with the minimum of browser UI chrome and jumps to the right section in the code Ordinarily, this would be achieved with the help of JavaScript and Window.Open(), so much for cross-browser compatibility. Then there's the target="_blank" anchor attribute, but this is disallowed by the DTD I'm using (XHTML1.1 w/ IFrame), that... plus it doesn't offer a way to get rid of browser UI elements. Does anyone have any alternatives? I was thinking of having a JavaScript "show/hide" function with the instructions and extra detail contained in a ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Popups
Hi, David. Why not use a DIV that contains all the extra information you wish to convey? Conceal the DIV with display:none, and then reveal the DIV when the user hovers over some sort of hotspot (use a lowercase white "i" on a blue circle - the universal symbol for "information").Simon Jessey Business Email: [EMAIL PROTECTED] Personal Email: [EMAIL PROTECTED] Business Site: http://keystonewebsites.com/ Personal Site: http://jessey.net/ - Original Message - From: david To: wsg@webstandardsgroup.org Sent: Thursday, January 13, 2005 7:50 AM Subject: [WSG] Popups So I was thinking about doing what other sites do... and thats to put a "more info on this field" link, people click on it, and a popup appears with the minimum of browser UI chrome and jumps to the right section in the code Does anyone have any alternatives?
