It was my pleasure to speak at this month’s first-ever meeting of Web Dev Connect. This month’s topic was an introduction to jQuery. Next month we’ll be talking about the new jQuery Mobile framework. Hope to see you there!
Below are my slides.
This took me a while to figure out so I thought I would post it here just in case it may help someone else.
One of the challenges of using any of those nifty widgets that ship with our favorite JavaScript frameworks is getting around CSS style conflicts. A lot of times, widgets created by framework developers will rely on custom style sheets to style their UI elements. Since I’m old fashioned and like to code my own style sheets, it can be very frustrating when a framework’s style sheet overrides some of my own styles elsewhere on the page.
To get around this in ExtJS, you have to use the “scoped” stylesheet that ships with ExtJS and do a little footwork with the JavaScript:
<head>
<link rel="stylesheet" href="js/libs/ext/4.0.2a/resources/css/ext-all-scoped.css">
...
This style sheet will only apply ExtJS’s styling to elements that are inside an element with the class x-reset. That’s great but what isn’t clear is that once you load ext-all.js, it will automatically apply that x-reset class to the html element. To get around this you’ll need to tell the Ext object not to apply this class by actually defining the Ext object before it’s created by the ExtJS code itself:
...
<script>
// Here we define Ext for the first time
Ext = {
buildSettings:{
"scopeResetCSS": true // Thanks, but I'll do my own scoping please
}
};
</script>
<script src="js/libs/ext/4.0.2a/ext-all-debug.js"></script>
</body>
When Ext loads, it actually looks to see if an Ext object has already been defined and if so, treats its values like a config object. So by setting the buildSettings value before Ext loads you are telling the future Ext object that you’re going to handle scoping the CSS yourself and it can just chill out—go have a Coke or something.
From time to time at work, I feel like the only person in the world who doesn’t have a big soft spot in their heart for ExtJS. Each time it’s vaunted as the Swiss Army Knife of UI development I can’t help but object. I will say that ExtJS is a top-notch library with tons of amazing features, but what I take issue with is when it’s implemented as a replacement for traditional UI design and markup.
When you are writing your UI entirely in JavaScript, something is wrong. Not only are you pushing the browser to generate a daunting amount of HTML through code, you’re also completely depending on JavaScript for anything to work on your site. It’s Progressive Enhancement cryptonite.
To be fair, there are some reasons why you might use ExtJS for your UI: You can get projects up and running much faster and in some groups where there isn’t a strong designer you can actually improve the consistency and look and feel of your applications. Outside of these scenarios, I much prefer libraries like jQuery that focus on building upon the existing markup of the page rather than writing the markup for the page.
We’ve all seen them, links that look like they go somewhere but when you roll your mouse over them you see something like “javascript:popupWindow();” in the status bar instead of a URL. Putting JavaScript into the href of links is just a horrible idea as it severely degrades the accessibility of your site (and ticks off people like me who want to see where they’re about to be taken before they click). But rather than just complain about it, I thought I’d put together some code to help us all avoid this situation all together.
The ideal solution is one that will work for the greatest number of users. Given that, we need a solution that will use unobtrusive JavaScript to enhance a standard HTML page with customizable popup windows—rather than rely solely on JavaScript. Since straight-up HTML supports opening links in new windows by adding a target attribute to the link, we start off with a link that looks like this:
<a href="/popup.html" target="popupWindow" class="popup">Open new window</a>
Using this as a starting point, the next step is to create a simple popup window function that wraps the standard DOM method: window.open(). I use this function to do a few things:
Here’s the function:
// Create a namespace for our utilities
var UTIL = UTIL || {};
UTIL.popup = UTIL.popup || {};
/**
* Open popup window
*
* Opens a popup window using as little as a URL. An optional params object can
* be passed.
*
* @param {String} href
* @param {Object} params
* @return {WindowObjectReference}
*/
UTIL.popup.open = function (href, params) {
// Defaults (don't leave it to the browser)
var defaultParams = {
"width": "800", // Window width
"height": "600", // Window height
"top": "0", // Y offset (in pixels) from top of screen
"left": "0", // X offset (in pixels) from left side of screen
"directories": "no", // Show directories/Links bar?
"location": "no", // Show location/address bar?
"resizeable": "yes", // Make the window resizable?
"menubar": "no", // Show the menu bar?
"toolbar": "no", // Show the tool (Back button etc.) bar?
"scrollbars": "yes", // Show scrollbars?
"status": "no" // Show the status bar?
};
var windowName = params["windowName"] || "new_window";
var i, useParams = "";
// Override defaults with custom values while we construct the params string
for (i in defaultParams) {
useParams += (useParams === "") ? "" : ",";
useParams += i + "=";
useParams += params[i] || defaultParams[i];
}
return window.open(href, windowName, useParams);
};
Admittedly, this part isn’t rocket science and could probably be done in a more elegant way, but it’s needed to really open things up for the next part. Now we get to the fun stuff. Using jQuery, we search the document for all links that have a CSS class of “popup”. For each one we find, we add an onClick handlerthat disables the browser’s default onClick behavior for links and then opens up a popup window using the links href attribute. Here’s the code:
$(function(){ // Run this code when the document's done loading
// Apply this code to each link with class="popup"
$("a.popup").each(function (i){
// Add an onClick behavior to this link
$(this).click(function(event) {
// Prevent the browser's default onClick handler
event.preventDefault();
// Grab parameters using jQuery's data() method
var params = $(this).data("popup") || {};
// Use the target attribute as the window name
if ($(this).attr("target")) {
params.windowName = $(this).attr("target");
}
// Pop up the window
var windowObject = UTIL.popup.open(this.href, params);
// Save the window object for other code to use
$(this).data("windowObject", windowObject);
});
});
});
One of the great features of jQuery that we utilize here is the data method. This allows us to attach data to DOM elements without corrupting the HTML with non-standard attributes or tags. Using jQuery’s ability to locate DOM elements using CSS selectors, we can bind the custom configuration object (used in our new popup function) to the links themselves. Then, when a link is clicked, it can read it’s popup configuration and pass it to the popup window function. In this way, we can keep our HTML standards compliant and completely separate from our JavaScript code.
Putting it all together, we can create an HTML page like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Popup Window Test</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<ul>
<li>
This link uses defaults:
<a href="http://google.com" target="google" class="popup">Google.com</a>
</li>
<li>
This link uses custom parameters:
<a id="custom-popup" href="http://yahoo.com" target="yahoo" class="popup">Yahoo.com</a>
</li>
</ul>
<script type="text/javascript">
// Add custom pop-up properties to the second link
$("a#custom-popup").data("popup", {width:400,height:400, top:200, left:200});
</script>
</body>
</html>
If you would like to download this example, you can get it here.
After a few posts where I wanted to include code examples, I quickly became frustrated with the standard <pre> display that the folks at WordPress recommend. I looked for a plugin that worked well, but didn’t like what I was seeing. So at the prodding of my colleague, Pat Doran, I decided to roll my own plugin.
The result is my “Code Face” plugin. It uses the YUI JavaScript framework to scan your posts and replace specially tagged <pre> blocks with rich code syntax highlighting via the syntaxhighlighter utility. Ninety-nine percent of the plugin is written in JavaScript using the concept of progressive enhancement. That means that even if your readers have JavaScript turned off or are using a screen reader, the content of your post is still highly accessible.
Check it out and let me know what you think. I’d love to hear your comments.
Update: This version of Code Face is now on Github. Hope to have an easier to use version update soon.
Ever get that annoying “Click to activate and use this control” message in IE when you embed a Flash movie? I did and couldn’t find a solution that worked as well as I’d like. A quick browse of my Google results brought be here, but the solution there was kinda sloppy in my opinion. But with a few tweaks, I got things working…and with the added street cred’ of not introducing a single global variable.
Here’s the code:
(function()
{
var clear = function(a)
{
for(var i=0; i < a.length; i++)
{
a[i].outerHTML=a[i].outerHTML;
}
};
clear(document.getElementsByTagName("object"));
clear(document.getElementsByTagName("embed"));
})();
The original code I found only applied the fix to object tags. But since use of the object tag is becoming deprecated, we also need to touch the embed tags as well. The code above does both and is wrapped in an anonymous function to keep all is private bits private.
Finally, since this is an IE-only fix, we should make use of IE’s conditional comments so other browsers don’t have to be bothered by the script. Assuming we placed (a minified version of) the code into a file named controlFix.js, we then add the following code at the end of the source code:
<!--[if IE]> <script type="text/javascript" src="controlFix.js"></script> <![endif]-->
If you’d like to use this on your site, you can download the minified JavaScript here.
© 2012 Donald J. Sipe III |
Powered by WordPress |
