Web Design & Developers eTips

Print nice-looking JavaScript quotes that you don't have to escape from

You probably know that quotes inside JavaScript strings can get you into trouble. After all, JavaScript uses quotes to determine when a string begins and ends, so if you have a quote as part of your string, JavaScript thinks the string ends there.

Fortunately, there are several ways to handle this. For instance:

If you use single quotes around the string, double quotes inside are okay.
You can also use a JavaScript escape sequence (\") to signify the quote; the slash (\) tells JavaScript to read the quote literally and move on.
Alternatively, you can use an HTML escape sequence (") if the purpose of the string is to write text to the page.
If you're using curly quotes, the main modern browsers support them, and JavaScript doesn't even recognize them as quotes, so you can actually get away with putting the curly quotes right into your JavaScript, without having to escape them. It's quick, it's easy, and it looks good.

Use a shortcut to remove underlines from all your links

You can use a stylesheet shortcut to remove link underlines for an entire web page. Before we jump into describing how to remove the links for the entire page, we'll explain how to do it for an individual link.

Just create the link as you normally would, and then switch to the HTML source view in your web-authoring tool. Next, add the tag style="text-decoration:none" to the HREF tag of the link. For example, if the link was originally defined as <A HREF="http://www.newhorizons.com/desmoines"> you would change it to <A HREF="http://www.newhorizons.com/desmoines" style="text-decoration:none"> in order to remove the underline for that link only.

If you want every link on the page to be non-underlined, here's a CSS shortcut you can place in between the <head></head> tags in your document. The code will look like this:

<STYLE type="text/css">

</STYLE>

Place this code between your <HEAD></HEAD> tags, and then code your links normally. The stylesheet in the head section will make them all non-underlined. Now you can have underline-free links anywhere you like. Just be careful when applying this to your links, as the underline helps users easily identify hyperlinks. To eliminate this problem, choose a vibrant color that will stand out from the other text on your web page.

Use the Visual Studio .NET Toolbox to add <div> elements to Web pages (ASP.NET)

If you need to add <div> elements to your ASP.NET Web pages, Visual Studio .NET makes it easy for you to do so on your ASPX design page. Simply open the VS .NET Toolbox and expand the HTML menu. Then, you can either select Grid Layout Panel or Flow Layout Panel from the list and draw it on your Web form. In ASP.NET you can configure pages for Grid Layout (using X and Y coordinates) or Flow Layout (left to right, top to bottom). If you configure your page for Grid Layout, use the Flow Layout Panel to add a section that supports a flow layout. Likewise, if you configure your page for Flow Layout, use the Grid Layout panel to add a section that supports a grid layout.

A quick way to sum powers of 2

A lot of development tasks involve working with powers of 2. For example, you may use enum declarations with powers of 2 in your server-side code, store data on the server in binary format, or keep track of user choices by assigning different powers of 2 to your HTML form elements.

If you ever need to sum the powers of 2 up to a certain power (e.g., to calculate the highest possible combination of enum values), here's a quick shortcut for you: Just take the next power of 2 and subtract 1. For example, to sum the powers of 2 up to 2-to-the-4th, you could program a loop to do 1 + 2 + 4 + 8 + 16 = 31. But the easier way is to just add 1 to your power to get 2-to-the-5th = 32 and subtract 1 to get 31. You can easily prove this by induction since (2 to the x+1) times 2 is (2 to the x+2).

Separate script tags can help insulate good JavaScript code from bad

As developers, sometimes we like to think of ourselves as perfect. However, whether you blame other developers, clients, etc., the fact remains that mistakes happen. Unfortunately, often one bad apple in a script ruins the whole batch. For example, consider the following code:

<script language="javaScript" type="text/javascript">
   //Lots of code...
   var 0t = "la";
   //Lots of other code...

   function Myfunction() {
    alert(document.form1.txtbox.value);}
</script>

Anything that tries to call the function Myfunction will fail. In fact, when debugging a case such as this, it's very easy to assume that there's something wrong with Myfunction. But that isn't necessarily the case. We simply added a bad variable declaration above it. Since variables can't begin with numbers, JavaScript stops working at the first line in the script.

If the part of the code that had the error turned out not to be that critical, it's really a shame that it messed up your wonderful function. But you can insulate against this problem by simply creating different script blocks, so that each piece of functionality fails or succeeds separately, like this:

<script language="javaScript" type="text/javascript">
   //Lots of code...
   var 0t = "la";
   //Lots of other code...
</script>
<script language="javaScript" type="text/javascript">

   function Myfunction() {
    alert(document.form1.txtbox.value);}
</script>

Make the case of your element and attribute names consistent with XSLT

A common use of the XSLT translate() function is to change the case of text strings within a document; however, you may run into situations where you need to change the actual element and attribute name cases, not simply text strings within them.

For instance, you may receive well-formed XML submissions from multiple sources which use the same element/attribute names, but one may use uppercase, another upper-lower, and another all lowercase. Or you may be trying to integrate data from disparate XML data sets and need to change the case for consistency across tag names.

You can use the XSLT translate() function to do this for you. The XSLT stylesheet below is a standalone process that converts one XML document into another, changing the case of all elements and attributes from uppercase to lowercase.

<?xml version="1.0" encoding="UTF-8"?>



<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

   <xsl:output method="xml" encoding="UTF-8" version="1.0" />

   <xsl:template match="*">

      <xsl:variable name="vElement"
          select="translate(name(), 'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')" />

      <xsl:element name="{$vElement}">
         <xsl:for-each select="@*">
            <xsl:variable name="vAttribute"
                select="translate(name(), 'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')" />
            <xsl:attribute name="{$vAttributename}"><xsl:value-of select="."/></xsl:attribute>
         </xsl:for-each>
         <xsl:apply-templates />
      </xsl:element>
   </xsl:template>

</xsl:stylesheet>

The output method is, of course, XML. Note that only one template is required. Use the template to match on any element. Then, set a local variable to pick up the element name, match all uppercase letters in the name, and replace them with lowercase letters. Next, for each element, match on any attributes, create a new local variable, and apply the same translate rule to attribute names. Finally, apply templates to output the transformed element and attribute names.

The resulting XML file will now have lowercase names for all elements and attributes. All text and attribute contents will pass through intact.

Place a search on your website for free

Adding a search engine to your website can cost a small fortune if you don't shop around. Fortunately, we have two solutions for obtaining a free search.

Atomz Corporation, www.atomz.com, offers the Atomz Express Search. It’s a free commercial solution that you can implement in just a few minutes. To learn more about the Atomz Express Search check out www.atomz.com/applications/search/trial.htm.

Another free search solution is on Bravenet's site at www.bravenet.com/webtools/search2/index.php.

You can try either of these resources for free, and if later you decide that you need a larger search, you can upgrade.

Create reusable attribute groups in your XML DTD

In XML DTDs, you can set up reusable attribute groups for common attributes by creating a parameter entity and referencing it in an attribute list. For example, you can set up an ID for a topic, with link options to parent elements and child elements.

<!ENTITY % id-group "id ID #REQUIRED
     parent IDREF #IMPLIED
     children IDREFS #IMPLIED" >

The ID keyword in the id attribute serves as a flag to the XML parser indicating that the ID value must be unique. No duplicate values are allowed. The IDREF keyword on the parent attribute allows a single reference to the ID of the parent of the current element. The IDREFS keyword on the children attribute allows references to the IDs of multiple child elements (each value must be separated by a space). The last two attributes are #IMPLIED, meaning they don't have to be used.

Now you can use this parameter entity as the definition of the attribute list (ATTLIST) for any element in your DTD:

<!ELEMENT topic (title , body, subtopic*) >
<!ATTLIST topic %id-group; >

<!ELEMENT subtopic (title, body, subtopic*) >
<!ATTLIST subtopic %id-group; >

A resulting document instance may look like this ("..." is used to represent content):

<topic id="tp-001 children="tp-002 tp-003 tp-004">
<title>...</title>
<body>...</body>
<subtopic id="tp-002" parent="tp-001">
<title>...</title>
<body>...</body>
</subtopic>
<subtopic id="tp-003" parent="tp-001">
<title>...</title>
<body>...</body>
</subtopic>
<subtopic id="tp-004" parent="tp-001" children="tp-005">
<title>...</title>
<body>...</body>
    <subtopic id="tp-005" parent="tp-004">
    <title>...</title>
    <body>...</body>
    </subtopic>
</subtopic>
</topic>

For more understandable error reporting, use the JavaScript console in Gecko-based browsers

When you encounter JavaScript errors in Internet Explorer, they'll be in your face (as long as you select the Display A Notification About Every Script Error check box, which is located in the Browsing section on the Advanced tab under Tools | Internet Options). That's good for catching them in the first place (in Netscape, you might never notice the errors). However, when it comes to figuring out what the error is, Netscape beats IE in spades. Case in point: IE gives you messages such as "Expected identifier" and "Object expected." So, what's wrong with the code? How do you fix it? Who knows?

Compare this with what we see when we open the same error-ridden file in Netscape Navigator or Mozilla and navigate to Tools | Web Development | JavaScript Console. The messages say things like "missing variable name." There's nothing like good 'ole English! And certain error messages even show pictures of your code with an arrow pointing to exactly the character that's incorrect. What's more, instead of a flurry of confusing dialogue boxes, you see the errors in order. That makes it much easier to figure out what's wrong.

Convert to milliseconds when adding time in JavaScript

To keep time uniform, JavaScript represents it as the number of milliseconds since midnight January 1st, 1970 GMT. As a result, whenever you want to mathematically manipulate a time, you'll need to convert everything to milliseconds.

For example, the following code illustrates how to add eight hours to the current time:

var dtHere = new Date();
var oneDayFromNow = dtHere.getTime() + (8 * 60 * 60 * 1000);
dtHere.setTime(oneDayFromNow);

Use the position() function to locate and output content with XSLT

The position() function allows you to specify which one of a given element you want to select for transformation.

For example, the table below identifies two drugs which interact with each other. However, you decide you would rather have this information in list format instead of tabular, but there are too many tables in your XML data set to convert them by hand. So, you want to write an XSL transformation to reformat this content on output.

<table>
<tgroup>
<thead>Drug Interaction Table 1</thead>
<tbody>
<row><entry><drugname>Warfarin</drugname></entry>
<entry><drugname>Aspirin</drugname></entry></row>
</tbody>
</table>

All of the drug interactions tables consist of two columns (two entries in each row), with the object drug listed first, the precipitant drug listed second. You can match on the entry tags with the position () function like so:

<xsl:template match="row/entry[position() = 1]/drugname">
   <br/>
   <xsl:text>Object: </xsl:text>
   <xsl:apply-templates/>
</xsl:template>

<xsl:template match="row/entry[position() = 2]/drugname">
   <br/>
   <xsl:text>Precipitant: </xsl:text>
   <xsl:apply-templates/>
</xsl:template>

The resulting output would look like this (assuming other templates for the rest of the data):

Object: Warfarin
Precipitant: Aspirin

You can also abbreviate your position() function like so:

<xsl:template match="row/entry[1]/drugname">

The number in the square brackets indicates the position without having to write out position() =.

What are mirror sites?

A mirror site is basically an exact copy of an existing site that resides on a different server than the original site. Mirror sites are used for testing, providing faster access to different locations, and spreading long download time around to more than one site. Many popular sites have mirror sites positioned around the world so that viewers visiting their site can have speedier access no matter where they are.