Re: [webdesign-396] Unobtrusive Javascript WHY?

From: Adam
Sent on: Tuesday, August 12, 2008 11:15 AM
Joseph is right on with his solution. 

I'd like to add that anyone looking for an excellent entry-level book on unobtrusive javascript should check out Jeremy Keiths "DOM Scripting: Web Design with JavaScript & the Document Object Model". 

Sent from my iPhone

On Aug 12, 2008, at 10:21 AM, Joseph James Frantz <[address removed]> wrote:

I don't know that there is always consensus.:)

Last we what I suggested is that if you use them, make sure you do unobtrusive javascript.

So rather than using <a href="somepage.htm" onclick="javascript void yada yada">

You would use <a href="somepage.htm" class="popup"> and then there would be a
javascript routine that finds all class=popup and add the onclick. Thus if the person
has JS turned off, it still degrades well. In addition, even if they have js turned on,
they can still middle click to open a page in a new tab. So you get the best of both
worlds.

----- Original Message ----
From: Michael Masello <[address removed]>
To: [address removed]
Sent: Tuesday, August 12, 2008 10:07:40 AM
Subject: Re: [webdesign-396] Unobtrusive Javascript WHY?

On the subject of javascript pop-ups.... is the consensus that this is always bad?  As both a marketer & a consumer I can see the benefit of having pop-up windows without menus.  For example on Amazon if you are on a product page there is usually the link towards the top left to "see larger image".  It makes sense for that to not open an entirely new full size page, but rather a window big enough only for the picture.  Because the window is small, it also seems to make sense to strip all the menus, address bars, etc.

Here's an example link:
http://www.amazon.com/Simpsons-Complete-Eleventh-Season/dp/B000MR8W8I/

I don't know that much about Javascript.  Is the way they do it unobtrusive enough?  If code is needed to answer the question, below I pasted the parts that seemed relevant.  If there way is bad, how can you achieve a similar effect with better coding?

Grazie,
Mike

----------------------------------------------------------------
<script type="text/javascript" src="http://127.0.0.1:37935/xpopup.js"></script><script language="Javascript1.1" type="text/javascript">
<!--
function amz_js_PopWin(url,name,options){
  var ContextWindow = window.open(url,name,options);
  ContextWindow.focus();
  return false;
}
//-->
</script>


<script>
  registerImage("original_image", "http://ecx.images-amazon.com/images/I/51qdBIwQYrL._SL500_AA240_.jpg", "<a href="+'"'+"http://www.amazon.com/gp/product/images/B000MR8W8I/ref=dp_image_0?ie=UTF8&n=130&s=dvd"+'"'+" target="+'"'+"AmazonHelp"+'"'+" onclick="+'"'+"return amz_js_PopWin(this.href,'AmazonHelp','width=700,height=600,resizable=1,scrollbars=1,toolbar=0,status=1');"+'"'+"  ><img onload="+'"'+"if (typeof uet == 'function') { uet('af'); }"+'"'+" src="+'"'+"http://ecx.images-amazon.com/images/I/51qdBIwQYrL._SL500_AA240_.jpg"+'"'+" id="+'"'+"prodImage"+'"'+" width="+'"'+"240"+'"'+" height="+'"'+"240"+'"'+" border="+'"'+"0"+'"'+" alt="+'"'+"The Simpsons - The Complete Eleventh Season"+'"'+"  /></a>", "<br /><a href="+'"'+"http://www.amazon.com/gp/product/images/B000MR8W8I/ref=dp_image_text_0?ie=UTF8&n=130&s=dvd"+'"'+" target="+'"'+"AmazonHelp"+'"'+" onclick="+'"'+"return amz_js_PopWin(this.href,'AmazonHelp','width=700,height=600,resizable=1,scrollbars=1,toolbar=0,status=1');"+'"'+"  >See larger image</a>");
</script>



<td class="tiny">&nbsp;<span id="prodImageCaption"><br /><a href="http://www.amazon.com/gp/product/images/B000MR8W8I/ref=dp_image_text_0?ie=UTF8&n=130&s=dvd" target="AmazonHelp" onclick="return amz_js_PopWin(this.href,'AmazonHelp','width=700,height=600,resizable=1,scrollbars=1,toolbar=0,status=1');"  >See larger image</a></span>&nbsp;</td>


On Thu, Aug 7, 2008 at 11:54 AM, Joseph James Frantz <[address removed]> wrote:
Last night during our HTML/CSS Study Group, Lauryl and I were explain why standards and unobtrusive javascript are so important. In particular we focused on folks that feel the need to change a regular link into a JavaScript command.

Why is this bad practice? Because it takes control away from perfectly capable users. This just now struck home as a user in our office wanted to print a tracking page for a shipment but could not. Why not? The company had decided that links to tracking pages would use the JavaScript method instead of the standard <a href= HTML element. In addition, they had determined, that it should create a popup. Finally, that this popup should have no menus, buttons, address bar, or anything else that we, as users, need. Thus it was impossible in their window to print the tracking page.

Yes, I can and will change this users settings (and all of the others) to ensure that no site can do this in the future. Nevertheless it is something I should not have to do.

Hopefully this illustrates one more example for the group from last night, as to why it is really important to use Unobtrusive JavaScript, and why you should stay out of the users way as much as posisble.

Kind Regards,
Joseph James Frantz




--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Joseph James Frantz ([address removed]) from Cleveland Web Design and Development Meetup.
To learn more about Joseph James Frantz, visit his/her member profile
To unsubscribe or to update your mailing list settings, click here

Meetup Support: [address removed]
632 Broadway, New York, NY 10012 USA





--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Michael Masello ([address removed]) from Cleveland Web Design and Development Meetup.
To learn more about Michael Masello, visit his/her member profile
To unsubscribe or to update your mailing list settings, click here

Meetup Support: [address removed]
632 Broadway, New York, NY 10012 USA




--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Joseph James Frantz ([address removed]) from Cleveland Web Design and Development Meetup.
To learn more about Joseph James Frantz, visit his/her member profile
To unsubscribe or to update your mailing list settings, click here

Meetup Support: [address removed]
632 Broadway, New York, NY 10012 USA

Our Sponsors

  • The396.com

    The396.com sponsors free classes for our meetup.

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy