PDA

Click to See Complete Forum and Search --> : Unobtrusive Bookmark Script Works Too Well - Not A Good Thing

Jules Manson
12-23-2005, 12:27 PM
My crossbrowser bookmark script does not wait for the onClick event to activate. The bookmark dialog box opens immediately when the page loads. It will not work at all if I remove the onload="bookFav()" from the BODY tag. It is supposed to wait for an onClick mouse event. My intent in writing this as I did is to completely seperate behavior from presentation and structure. My goal is to eventually link this script externally via a common javascript library file. I tested it with Internet Explorer 6.0 on Windows Me. Please, no solutions which require adding inline javascript to my bookmark link. I already know how to do that. I need to make this unobtrusive so that nonprogrammers can easily edit the HTML. This script will also serve as a model for many other unobtrusive scripts which I have planned. Please examine my script and see why it is not waiting for the onClick event. Thank you for your help.

<HTML><HEAD>
<TITLE>UNOBTRUSIVE DOM SCRIPTING - BOOKMARK</TITLE>
<SCRIPT>
function bookFav() {
if (!document.getElementById || !document.all) /* object detection to prevent errors */
{alert("Please use your browser menu to bookmark us!");} /* alert for non-supporting browsers */
else {
var el = document.getElementById("bookmark");
myURL = window.location.href; /* gets url of page to bookmark */
myTitle = document.title; /* gets title of page */
el.onClick = addFav(myURL,myTitle); /* this event is supposed to open the bookmark dialog */
}
}
function addFav(aURL,aTitle){
if (document.all) /* is this MSIE? */
{window.external.AddFavorite(aURL,aTitle);} /* if yes then call bookmark dialog for MSIE */
else if(window.sidebar) {window.sidebar.addPanel(aURL,aTitle,"");} /* else call bookmark dialog for NS&FF */
return false;
}
</SCRIPT>
</STYLE>
</HEAD>
<BODY onload="bookFav();">
Please <A id="bookmark" href="#">bookmark</A> this site.
</BODY>
</HTML>
konithomimo
12-23-2005, 12:34 PM
It would be like this:
<HTML><HEAD>
<TITLE>UNOBTRUSIVE DOM SCRIPTING - BOOKMARK</TITLE>
<SCRIPT>
function bookFav() {
if (!document.getElementById || !document.all) /* object detection to prevent errors */
{alert("Please use your browser menu to bookmark us!");} /* alert for non-supporting browsers */
else {
var el = document.getElementById("bookmark");
myURL = window.location.href; /* gets url of page to bookmark */
myTitle = document.title; /* gets title of page */
el.onClick = addFav(myURL,myTitle); /* this event is supposed to open the bookmark dialog */
}
}
function addFav(aURL,aTitle){
if (document.all) /* is this MSIE? */
{window.external.AddFavorite(aURL,aTitle);} /* if yes then call bookmark dialog for MSIE */
else if(window.sidebar) {window.sidebar.addPanel(aURL,aTitle,"");} /* else call bookmark dialog for NS&FF */
return false;
}
</SCRIPT>
</STYLE>
</HEAD>
<BODY>
Please <A id="bookmark" href="#" onclick="bookFav()">bookmark</A> this site.
</BODY>


of course you don't need all of that code, such as the ID or the call to it:
<HTML><HEAD>
<TITLE>UNOBTRUSIVE DOM SCRIPTING - BOOKMARK</TITLE>
<SCRIPT>
function bookFav() {
if (!document.getElementById || !document.all) /* object detection to prevent errors */
{alert("Please use your browser menu to bookmark us!");} /* alert for non-supporting browsers */
else {
myURL = window.location.href; /* gets url of page to bookmark */
myTitle = document.title; /* gets title of page */
addFav(myURL,myTitle); /* this event is supposed to open the bookmark dialog */
}
}
function addFav(aURL,aTitle){
if (document.all) /* is this MSIE? */
{window.external.AddFavorite(aURL,aTitle);} /* if yes then call bookmark dialog for MSIE */
else if(window.sidebar) {window.sidebar.addPanel(aURL,aTitle,"");} /* else call bookmark dialog for NS&FF */
return false;
}
</SCRIPT>
</STYLE>
</HEAD>
<BODY>
Please <A href="#" onclick="bookFav()">bookmark</A> this site.
</BODY>
</HTML>
Jules Manson
12-23-2005, 01:00 PM
Thank you for your reply konithomimo but you see this is not what I am looking for. I already know how to make this work with inline javascript. The idea behind this is to completely remove all inline events and have all of the javascript (including mouse event) contained in the javascript (currently in the head but will be moved to a common.js file). The idea is to make this script completely unobtrusive. The theory behind unobstrusive scripting is here The Behaviour Layer (http://adactio.com/atmedia2005/).
konithomimo
12-23-2005, 01:04 PM
Then just do:
<HTML><HEAD>
<TITLE>UNOBTRUSIVE DOM SCRIPTING - BOOKMARK</TITLE>
<SCRIPT>
function bookFav() {
if (!document.getElementById || !document.all) /* object detection to prevent errors */
{alert("Please use your browser menu to bookmark us!");} /* alert for non-supporting browsers */
else {
myURL = window.location.href; /* gets url of page to bookmark */
myTitle = document.title; /* gets title of page */
addFav(myURL,myTitle); /* this event is supposed to open the bookmark dialog */
}
}
function addFav(aURL,aTitle){
if (document.all) /* is this MSIE? */
{window.external.AddFavorite(aURL,aTitle);} /* if yes then call bookmark dialog for MSIE */
else if(window.sidebar) {window.sidebar.addPanel(aURL,aTitle,"");} /* else call bookmark dialog for NS&FF */
return false;
}
</SCRIPT>
</STYLE>
</HEAD>
<BODY onclick="bookFav()">
Please <A href="#">bookmark</A> this site.
</BODY>
</HTML>


or
<HTML><HEAD>
<TITLE>UNOBTRUSIVE DOM SCRIPTING - BOOKMARK</TITLE>
<SCRIPT>
function bookFav() {
if (!document.getElementById || !document.all) /* object detection to prevent errors */
{alert("Please use your browser menu to bookmark us!");} /* alert for non-supporting browsers */
else {
myURL = window.location.href; /* gets url of page to bookmark */
myTitle = document.title; /* gets title of page */
var el = document.getElementsByTagName('a');
el.onclick = addFav(myURL,myTitle); /* this event is supposed to open the bookmark dialog */
}
}
function addFav(aURL,aTitle){
if (document.all) /* is this MSIE? */
{window.external.AddFavorite(aURL,aTitle);} /* if yes then call bookmark dialog for MSIE */
else if(window.sidebar) {window.sidebar.addPanel(aURL,aTitle,"");} /* else call bookmark dialog for NS&FF */
return false;
}
</SCRIPT>
</STYLE>
</HEAD>
<BODY>
Please <A href="#">bookmark</A> this site.
</BODY>
</HTML>
Jules Manson
12-23-2005, 01:22 PM
Dear konithomimo:

I realize that you are tyring to help but your help has been destructive to my thread. You obviously did not read my posting clear enough nor test your own solutions. The solutions that you posted still activate the bookmark dialog when the page loads. I do not want that. I only want the bookmark dialog to open only by a mouse click event where the anchor has no inline javascript. By posting all of your attempted non-help all you have done is made my thread old, long, and difficult for others to follow. I will now have to post this at some other forum.
felgall
12-23-2005, 01:44 PM
if (document.all) /* is this MSIE? */ NOT NECESSARILY there are other browsers that define document.all

Why not test
if (window.external && window.external.AddFavorite)
instead which will confirm that it is IE and that the version of IE supports the call.

The way to get it to open on a mouse click is to use
window.onclick = bookFav;
to attach the function to the mouse click event instead of the onload event.
konithomimo
12-23-2005, 01:53 PM
My second suggestion from my last post does that:

var el = document.getElementsByTagName('a');
el.onclick = addFav(myURL,myTitle); /* this event is supposed to open the bookmark dialog */

or you can use

window.onclick

I had thought of that, but since you were obviously trying to get it to run when the link was clicked I decided you wouldnt be interested in that. There is no JS outside of the script tags for my second solution from my last post.

you don't assign IDs to links.
Jules Manson
12-23-2005, 03:04 PM
Konithomimo I am glad I didn't lose you after my very thoughtless and somewhat rude response to you. Felgall thank you for joining this discussion. Please allow me to start over. Lets forget everything said so far and look at this:

I want the code in this bookmark1.html (http://members.aol.com/oysteinramfjord/bookmark1.html) to behave like this bookmark2.html (http://members.aol.com/oysteinramfjord/bookmark2.html) without adding any javascript inside any tags whatsoever. All javascript must exist inside the head section of the HTML file.
ShrineDesigns
12-23-2005, 03:10 PM
window.sidebar.addPanel(aURL,aTitle,"");DOES NOT do a bookmark in mozilla/firefox, all it does is, loads the page into the sidebar
konithomimo
12-23-2005, 03:19 PM
DOES NOT do a bookmark in mozilla/firefox, all it does is, loads the page into the sidebar
That is from the OPs original post . . . I was only correcting what the OP asked for . . .
konithomimo
12-23-2005, 03:29 PM
So what you want is to have all the work done inbetween the head tags . . .

According to the link that you gave:

http://adactio.com/atmedia2005/

the best solution is using the method that I already used (without having to look at your link)

var el = document.getElementsByTagName('a');
el.onclick = addFav(myURL,myTitle); /* this event is supposed to open the bookmark dialog */

Again, there would be no scripting in the html, so according to what you asked me to look at the following code is 'best' (of course this is what I already posted):
<HTML>
<HEAD>
<TITLE>UNOBTRUSIVE DOM SCRIPTING - BOOKMARK</TITLE>
<SCRIPT type="text/javascript">
function bookFav() {
if (!document.getElementById || !document.all) /* object detection to prevent errors */
{alert("Please use your browser menu to bookmark us!");} /* alert for non-supporting browsers */
else {
myURL = window.location.href; /* gets url of page to bookmark */
myTitle = document.title; /* gets title of page */
var el = document.getElementsByTagName('a');
el.onclick = addFav(myURL,myTitle); /* this event is supposed to open the bookmark dialog */
}
}
function addFav(aURL,aTitle){
if (document.all) /* is this MSIE? */
{window.external.AddFavorite(aURL,aTitle);} /* if yes then call bookmark dialog for MSIE */
else if(window.sidebar) {window.sidebar.addPanel(aURL,aTitle,"");} /* else call bookmark dialog for NS&FF */
return false;
}
</SCRIPT>
</HEAD>
<BODY>
Please <A href="#">bookmark</A> this site.
</BODY>
</HTML>


Of course you could go one step more and assign a class the your links and check the class too, but for this purpose it isnt needed. However, the above code does follow the guidelines from the link that you gave as an example.