Stories are now Articles – In an attempt to name Drupal’s core content types in ways that more closely indicate their usage, the Story content type is now Article. Articles are pieces of content that typically post blog-style to a prominent place on your site, but may be replaced, or scrolled down the page, on a regular basis as new articles are posted.

An Administrator Role is already created at installation – Several of the changes that have been made reflect things that most users do immediately after installing Drupal. One of these is the inclusion of an Administrator role as part of the default installation profile.

Search and Paths are enabled by default – Other things that users typically enable immediately are the Search module that allows users to search for content on the site and the Paths module which allows the creation of path aliases to content so that you can publish the link www.yoursite.com/directions instead of www.yoursite.com/node/123.

Basic Taxonomy Created – In previous versions, before you could have users tag their content, you had to create taxonomy vocabularies from scratch. Version 7 includes a basic tag-style vocabulary that can be assigned to content types. A tag-style vocabulary accepts comma-separated tag lists crated on the fly by authors who are entering new content.

This can make for kind of sloppy vocabularies as users misspell, abbreviate, or misuse terms but the tag field is ajax enabled and makes tag suggestions as the user types, which can help avoid some of these issues.

Several Modules are gone altogether, including Throttle, Ping and Access Rules – There are some things that just need to be a part of the core program. For instance, Drupal really should throttle properly based on traffic and not on you telling it to.

Entirely New Database Layer – Most users may never encounter the details of this change, but performance should improve and developers who do need to interact with the database layer should find it much easier to do so. A significant improvement that should come from this change is the ability for Drupal to work through its interface with a wider variety of database servers.

SQLite Support – SQLite is a code library that provides a self-contained, server-less database platform. It is a zero-configuration platform that provides a full set of database features.

Fields in Core – The new Fields in Core API promises to allow users to create their own custom content types that interact with the database, like the Content Construction Kite used to as an add-on module. It is still very much under construction though.

Installation Choices – The installation routine now allows you to select from a default option that installs and activates the most common Drupal features and a basic option that installs only the core. You can then add things as you need them.

Fewer Default Themes – Some of the default themes that shipped with previous versions were thought to not exhibit the best practices that Drupal tries to encourage, so only Garland and Minelli remain, as well as a new Stark theme that demonstrates the Drupal markup at its most basic so that you can learn to build themes off of it.

Menu Changes – The Navigation menus is now the Management Menu. In addition there is an Administration Menu that displays across the top of the screen with the most common admin links. Beneath that is a minimizable Content menu with links to add and find content. A new User Menu displays where the Secondary Menu used to in the default theme and offers account and logout links.

Clean URLs are on by default – The option has been taken out of the installer and clean URLs are on by default. You should always use Clean URLs and only disable them in admin if your server has a specific problem handling them.

Permissions Changes – When you enable a permission for the authenticated user, all other roles on the client side also get that permission and it is marked on the permissions page so that you realize the effects of the changes you are making. This reflects that fact that the authenticated user is a basic level of registered users permissions and whatever you allow them to do, you are also allowing to all other user types that require a sign in.

Image Handling – Image handling is now available in the core program, which allows you to set up image types, like thumbnails, and also perform image effects that cropping and rotating.

The magazine has some great information on topics such as Ajax, code optimization, mashups, jQuery, web application testing, event handling, EXT JS, OOP, and much more. Its unique content, focusing on mainly JavaScript related topics, keeps me continously learning new things in the JavaScript world. Talented developers write different articles each month so content is always new and comes from different perspectives.

The monthly issues (.pdf) are only $4.99 or you can purchase a years subscription as well. It definitely is worth the small investment if you are a JavaScript developer or interested in learning more intermediate to advanced JavaScript topics.

So I found the code to make it work on both IE and Firefox (will not work on any other browser), as well as improving its ‘unobtrusiveness’. As you can see from the code, I only display the link if the browser is either Internet Explorer or Firefox otherwise the link text is blank.

The ‘Browser.Detect’ object is from a script from the JavaScript guru himself, PPK which detects what browser the visitor is using. Browser detection isn’t used as much today as it once was but it is still needed on some occasions.

Internet Explorer

Firefox

function browserBoomkark(id) {
 
var link = document.getElementById(id);
 
switch (BrowserDetect.browser) {
 
     case 'Explorer':
 
          link.innerHTML = 'Set to Home Page';	
          link.style.cursor = 'pointer';
          link.onclick = function () {
               this.style.behavior='url(#default#homepage)';
               this.setHomePage('URL');
          }
 
      break;
 
      case 'Firefox': // only supports making page a favorite
 
           link.innerHTML = 'Set to Favorite';
           link.style.cursor = 'pointer';
           link.onclick = function () {
 
                window.sidebar.addPanel('label', 'URL', "");
           }
 
           break;
 
      default:
 
           // nothing is displayed for other browsers
      }
}

Test the page yourself to test it out and download the code (.zip).

Even though the defintions of DHTML may never be totally accurate (the changing of the styles of HTML elements by means of JavaScript), if we can take what we have learned in the past and apply them now we can get a very thorough understanding of what JavaScript can do.

This e-book (.pdf) and example code (.zip) covers some topics I covered on this website as well as many others I have not, such as: the DOM, table sorting and highlighting, regular expressions, hide-show, pop-up windows, form validation and formatting, alertless error messages, date picker, google maps, and ajax basics.

I would categorize these lessons as beginner to advanced so there is something for every level of developer.

Introduction
Basic JavaScript: values, variables, and control flow
Functions
Data structures: Objects and Arrays
Error Handling
Functional Programming
Searching
Object-oriented Programming
Modularity
Regular Expressions
Web programming: A crash course
The Document-Object Model
Browser Events
HTTP requests

Basically it is accomplished by taking a HTML menu control
and using its values with JavaScript methods to “redirect” the visitor to another web page. The JavaScript would just find the selected option item and using the window.location method to direct to the new web page.

For a detailed explanation, check out this video (.zip) narrated by Dori Smith as well as the online example and code (.zip).

Within CSS there are two different ways of effectively hiding an element from view; both have their benefits but can provide unintented consquences, depending on how you use them:

The visibility property toggles whether an element is visible or not, while still leaving its normal flow properties intact. The visibility property has two values: visible (default) and hidden.

The display property provides more options to a developer for controlling the layout of an element. The options for it vary between inline, block and none (which completely hides an element from the document. The result of setting a display property of an element looks exactly the same as if you had just removed the element from the document.

function  hideshow() {
 
     var elem = document.getElementById("hideshow");
 
     if (elem.style.display == 'none') {
 
         elem.style.display = 'block';
 
     } else {
 
         elem.style.display = 'none';
     }
}

Since we are separating behavior from presentation we should make our link behave like a link too.

link.onclick = function () {
 
     hideshow();
}
 
link.onmouseover = function () {
 
     this.style.cursor = 'pointer';
}

Put this all together into a simple example. Download the code (.zip) if you want as well.

element.style.property

Here’s an example of a paragraph with some inline styling:

<div id = ”example” style = “font-family: ‘Arial’, san-serif;”>
An example of a paragraph.</div>

Using the style property you can retrieve this stylistic information.

var para = document.getElementById(“example”);

To verify that the style property is an object:

alert(typeof para.style);

To retrieve the the font of the style:

alert(para.style.fontfamily);

The DOM camelCases style properties that have more than one word. The CSS property “font-family” becomes the DOM property fontFamily.

There is a big caveat to retieving stylistic information with the style property. The style property only returns inline style information. So if you add an external style sheet or even put the style in the tags it will not retrieve the information.

So the really only good use of using the style property is if you apply stylistic information via the DOM. If you do this it will pick it up as if it were inline. This is useful if you are dynamically updating or modifying elements on a page and want to also change the style of those particular elements for a more visual effect. (table hightlighing, form validation, hiding/showing, drag and drop, animation, etc.)

All that is necessary to implement for that function is a standard key listener: Keyboard events are not part of DOM Level 1 or Level 2, but are still implemented in recent browsers.

Accessing the event differs from the usual approach (window.event in Internet Explorer; the event as the automatic parameter of the function in all other browsers). But then, the keyCode property returns the ASCII code of the key, which can then be processed, as in the following example:

The key code for the Enter key is 13, so when this code is found, the form is submitted:

function checkKey(e) {
 
     var key;
 
     if (window.event) {
 
          key = window.event.keyCode;
 
     } else {
 
          key = e.keyCode;
 
     }
 
     if (key == 13) {
 
          document.forms[0].submit();
     }
 
}
 
window.onload = function () {
 
     document.forms[0].elements["field"].onkeydown = checkKey;
}

Even if you don’t declare any argument names in your function declaration, you can actually pass one or more arguments when you call the function. This can be useful for writing functions that will accept any number of arguments.

Imagine we called a function with these arguments:

debate ("affirmative", "negative");

We could access those arguments via the arguments array inside the function:

function debate() {
 
     var affirmative = arguments[0];
     var negative = arguments[1];
}

Or check to make sure a specific number of arguments were passed to the function:

function debate() {
 
     if ( arguments.length !=2 ) return false;
}

This is something I just noticed and isn’t normally mentioned in most beginner JavaScript books.

To get started, all the necessary scripts are included in one download from their web site. I created a simple example to show you how it would look.

The main disadvantage of this script is that the other required libraries are a little large, so it may take a little while to initially load. You can checkout other JavaScript versions of Lightbox JS such as ThickBox, Slightly ThickerBox, Litebox, iBox and so forth.

Apart from using JavaScript for images, you can use Adobe Flash as well.

There are many free ones that use Flash such as from the company Airtight Interactive, such as AutoViewer, SimpleViewer, PostCardViewer, and TiltViewer.

I zipped all their free flash viewers (.zip) for you to checkout.

All you do is update an .xml file with the image information (url, caption, styling, etc.).

You can buy the “Pro” versions of these which include the source (.fla) files so you can customize how it looks completely.

A fairly simple function is all you need:

function alternate(id) {
 
     // object detection
     if (document.getElementsByTagName) {
 
          // reference the table (id) and the rows ("tr")
          var table = document.getElementById(id);   
          var rows = table.getElementsByTagName("tr");   
 
          // loop through the table rows
          for(i = 0; i < rows.length; i++) {
 
               // %, gives remainder in division
               if (i % 2 == 0) { 
                    rows[i].className = "even"; 
               } else { 
                    rows[i].className = "odd"; 
               }       
          } 
     } 
}

Then add your CSS styles to your stylesheet:

.odd {background-color: white;} 
.even {background-color: gray;}

This simple example shows how it would look and here is the code (.zip) as well.

So what is wrong with popups?

1. popups are generated from links, though those links do nothing when scripting is not available
2. popup windows that don’t have a status bar, so you can’t necessarily tell whether the document has loaded or stalled, is still loading, etc.
3. popups that don’t give users the ability to resize the window, and popups that fail to generate scrollbars for content that might scale outside the window.
4. windows that are “chromeless” or open to the full size of the user’s screen

These issues are not just questions of usability, but of accessibility as well. For example, screen-reader users may not be notified by their devices that a new window has opened. This could obviously case confusion if they then attempted to go back in the browser history (they can’t). The same thing might happen for a sighted ser is a window opens at full-size: you and I may be familiar with using the taskbar to monitor open windows, but not all computer users are — they may not even realize that a new window has popped up.

Also, bear in mind that, from a developer’s perspective, popup windows are not guaranteed to work: most browsers now include options to suppress popup windows, and in some cases suppression occurs even if the popup is generated in response to a ser event.

How Do I Minimize the Problems?

1. Make sure any triggering link degrades properly when scripting is not available.
2. Always include the status bar.
3. Always include a mechanism to overflow the content: either allow window resizing, or allow scrollbars to appear, or both.
4. Don’t open windows that are larger than 640×480 pixels.

Here is a generic popup function created by Cameron Adams that’s based on the guidelines above as well as the code (.zip) for you to review.

The window.open method can take a number of arguments in addition to the URL and window name which specifies whether the window should have particular decorations, such as the menu bar, tool bar, or address (location) bar. These arguments are passed as a comma-delimited string to the third argument of window.open.

In popup function, the menubar, toolbar and location arguments are all preset to no because these elements are rarely useful for popup windows — they’re navigation tools after all.

Once a new window is open, you can bring it to focus using the object’s focus method. This isn’t usually necessary since it generally happens by default. But it may come in handy if you’re opening multiple windows:

var cpanel = makePopup(cpanel.html, 480, 240, 'resize');
cpanel.focus();

Alternatively, you may want to open a popup but keep focus in the primary window (thereby creating a so-called “popunder”). You can take the focus away from a window using its blur method:

var cpanel = makePopup(cpanel.html, 480, 240, 'resize');
cpanel.blur();

Creating a hover effect in Internet Explorer 7, Opera 9 or Firefox is pretty straight forward since all you have to do is use the CSS :hover dynamic pseudo-class on elements other than links. It would look like something like this:

table.class tr:hover { 
       background-color:#AAAAAA; color: #FFFFFF 
}

In Internet Explorer 6 it is only supported on links, so you have to use a little JavaScript.

Here is an example of using JavaScript to plug the holes in browser support for CSS and here is the code (.zip) too.  The important job, however, is to make your table usable without the highlighting.  That way, it doesn’t matter to your users if they don’t get the highlighting effect, which will still be the case if they have JavaScript turned off in Internet Explorer 6. 

Hopefully, with the IE7 adoption rate steadily increasing, support for IE6 will become less of a neccessity and more of a niceity.

The ternary operator syntax is:

var variable = condition ? trueValue:falseValue;

This is very handy for boolean conditions or very short values.

For example, you can replace this long if condition with one line of code:

// Normal syntax
 
var direction;
 
if (x < 200) {
 
    direction = 1;
 
}  else  {
 
    direction = -1;
}
 
// Ternary operator
 
var direction = x < 200 ? 1 : -1;

The order of completion that takes place inside a browser is roughly:

1. HTML is parsed
2. External scripts/style sheets are loaded
3. Scripts are executed as they are parsed in the document
4. DOM is fully constructed
5. Images and external content are loaded
6. The page is finished loading

Scripts that are in the header and loaded from an external file are executed before they DOM is actually constructed. This is a problem because all script executed in those two places won’t have access to the DOM. However, thankfully, there exists a number of workarounds for this problem.

The most common technique is to wait for the entire page to load before performing any DOM operations. Although it is the slowest technique, it is the safest, easiest and works on all browsers. You can do this using a nunber of ways.

One way is to just attach a function to the load event of the page.

window.onload = "function";

Although functional, it is limited because you can only execute one function on the page load since only the last specified function will actually be executed.

You could create an anonymous function to hold the other functions and the last function (the anonymous one) will be executed last which then executes the functions you want:

window.onload = function() {
     firstFunction;
     secondFunction;
}

This works fine, and it’s the simplest solution when you have a small number of functions.

There’s another solution that scales quite nicely, no matter how many functions you want to execute when the page loads. It takes a few more lines to setup initially but, once it’s in place, attaching functions to window.onload is an easy task. This function is called “addLoadEvent” and it was written by Simon Willison.

It takes a single argument: the name of the function that you want to execute when the page loads.

function addLoadEvent(func) {
     var oldonload = window.onload;
 
     if (typeof window.onload != 'function') {
          window.onload = func;
     } else {
          window.onload = function() {
               if (oldonload) {
                    oldonload();
               }
               func();
          };
     }
}

Here’s what addLoadEvent does:

1. Stores the exisiting window.onload as a variable called oldonload
2. If this hasn’t yet had a function attached to it, then simply add the new function in the usal way
3. If there is already a function attached, add the new function after the exisiting instrctions.

This effectively creates a queue of functions to be executed when the page loads. To add functions to this queue you just need to write:

addLoadEvent(firstFunction); 
addLoadEvent(secondFunction);

Here is a video (.zip) narrated by Dori Smith covering this same topic.

Since the emergence of Google Maps giving us the ability to put an interactive map on your own web page(s), there are now four separate APIs to choose from: Google Maps, Yahoo! Maps, Microsoft Virtual Earth Bing Maps, and MapQuest. These APIs are similar, so once you understand one; it is just a matter of learning the differences of the others.

It’s pretty interesting noticing the visual and functional differences as you go back and forth looking at each one. Personally, I favor Google Maps because of its smooth interface, clean look, and easy to understand documentation, but Yahoo! Maps is a close second.

Yahoo! Maps also provides a Flash API version (see below) that can use either JavaScript or Flash ActionScript code. 

Virtual Earth reminds me of the interfaces Microsoft has for many of its development products (which can be good or bad), but provides the most intriguing visual experience with its aerial and bird’s eye views. MapQuest is the new kid on the block and has the least visually entertaining experience, but incorporates its biggest strength with driving directions so it has some potential.

All of the APIs are built upon the theory of geocoding, but offer different implementations for allowing you to retrieve latitude/longitude points either within the JavaScript API or using external REST calls. For the later, you will need to incorporate some server-side scripting (PHP, ASP, etc) to retrieve the information you want. If you do not want to be bothered with that, but need specific points (latitude/longitude) for an address(s) you can use websites such as http://geocoder.us/ or you can use my simple geocoding example.

There actually is another mapping API called Map TP, but requires that the browser have the Java Runtime installed.

Although server-side code is the most robust method of dealing with cookies, sometimes you need to manipulate cookies on the client side. Luckily, JavaScript can read and write cookies in exactly the same way servers do. Though the problem with JavaScript is that reading a cookie requires a little parsing to get them out. Don’t worry, I found a nice little function to the job for us.

Any script be it server or client-side can only read cookies that were set by a web page from the same domain. Cookies are stored in the document object’s cookie property. This property is actually a string that’s automatically generated by the browser when the page loads. It concatenates all the valid cookie information stored for the current browser address, and makes it available to JavaScript via the DOM.

Within the cookie property, cookies are separated by a semicolon (;), and traditionally each cookie consists of a name/value pair separated by an equality sign (=).

Writing a Cookie

An example cookie string looks like this:

fur=blue; food=biscuits; name=Cookie_Monster

The first step in creating a cookie is to create a string that reflects the name of your cookie, followed by =, followed by the value of the cookie:

var cookieName = "login";
var cookieValue = "choc_chip";
var theCookie = cookieName + "=" + cookieValue;

note: When you create your cookie string, make sure that the name or value of the cookie does not include spaces, commas, or semicolons. These characters can cause errors not only with the parsing of the cookie string, but with the sending of cookie data via HTTP headers. As an added precauttion when you create and get your cookie name/value data you can use the escape and unescape functions respectively. These will convert and unconvert chracters that are not text or numbers into the hexadecimal equivalent of their character in the Latin-1 character set, preceded by a % character.

Once you’ve created your cookie string, you have to store it in the browser’s cookie jar. Even though document.cookie is really just one string, it exhibits special behavior when JavaScript tries to write a cookie to it. Assigning a cookie string to document.cookie does not overwrite the entire property, as it would for a normal string. Instead, the cookie string is added to document.cookie.

If the cookie name already exists, the new value automatically replaces the current one:

document.cookie = theCookie;

Your data is now a cookie! Imagine that document.cookie was originally:

fur=blue; food=biscuts; name=Cookie_Monster

Now, it’s:

fur=blue; food=biscuts; name=Cookie_Monster; login=choc_chip

You can only add one cookie at a time, so even though you can replicate the cookie-semicolon-cookie syntax, you cannot concatenate a number of cookie strings together and add them to document.cookie in one go.

Reading a Cookie

It’s no good writing a cookie unless you can access it again. The browser automatically fills document.cookie with all the valid cookies for the current domain, so there’s no chance that you’ll read something you’re not meant to.

There’s nothing glamorous about getting cookies out of document.cookie, you have to parse the string yourself and collect your own values. But, once you understand the syntax of the cookie property, it’s fairly easy to break the process using a few indexOf string method calls. This handy function was found in Chapter 11 of the latest edition of Beginning JavaScript.

function getCookie(name) {
 
     var value = document.cookie;
 
     var startsAt = cookieValue.indexOf(" " + name + "="); 
 
     if (startsAt == -1) { 
 
          startsAt = value.indexOf(name + "="); 
     }
 
     if (startsAt == -1) { 
 
          value = null; 
 
     } else {
 
          startsAt = value.indexOf("=", startsAt) + 1;
          var endsAt = value.indexOf(";", startsAt);
 
          if (endsAt = -1) {
 
               endsAt = value.length; 
          }
          value = value.substring(startsAt, endsAt);
     }
     return value;
}

var monsterName = getCookie("name");

The value of the variable monsterName is now “Cookie_Monster”.

So you can use this simple example to see it in action and download (.zip) if you want too.

There are two types of timers: one that’s set once, and one that reoccurs over an interval. Both can be canceled, though the one-time timer method fires just once.

To create a nonrepeating timer, use the setTimeout method. It takes a minimum of two parameters: the function literal or function name to run the timer delay ends, and the length of the timer delay in milliseconds. If there are any parameters to send to the function, they are listed at the end of the cal, separated by commas. The method returns the identifier of the timeout:

var tmOut = setTimeout (func, 5000, "param1", param2, ..,param);

To clear the time out, use the clearTimeout method:

clearTimeout(tmout);

If you want the timer delay to repeat over an interval, use the setInterval. This takes two parameters, the function name and the timer interval. As with setTimeout, it return an indetifier:

var tmOut = setInterval("function", 5000);

Again to stop or cancel the interval timer, use the clearInterval method. If you want to have a repeating delay but still use a function literal or pass in parameters, you can use setTimeout and reset the timer when the previously set timer expires.