Perishable Press

WordPress, Web Design, Code & Tutorials

Back to School! Save 30% on my WordPress books w/ coupon code: BAK2SKOOL

HTML

Category Archive

Top tags

Auto-Focus Form Elements with JavaScript

After digging through the WordPress source code, I stumbled upon this very useful JavaScript method for auto-focusing form elements upon page load. Here is the JavaScript code (place within the document head): <script type=”text/javascript”> function formfocus() { document.getElementById(‘element’).focus(); } window.onload = formfocus; </script> …and corresponding (X)HTML markup (abbreviated for clarity): <form> <input id=”element” /> <input /> <input /> </form> In this example, the first form element (identified by id=”element”) will be automatically focused when the document loads, thus facilitating the process of entering data in the form. This technique would serve users well on login pages (wink, wink;), or anywhere […] Read more »

Exploring the (X)HTML Link Element

Most Web authors are familiar with the <link> element included within the <head> element of many (X)HTML documents. The <link> element enables authors to associate external resources to the (X)HTML document. <link> element references include various types of metadata, navigation, and styling information. This brief post provides examples of these and other important uses of the (X)HTML <link> element. <!– indicate the starting location –> <link rel=”start” href=”http://domain.com/directory/” /> <!– indicate the previous item –> <link rel=”prev” href=”http://domain.com/directory/prev/” /> <!– indicate the next item –> <link rel=”next” href=”http://domain.com/directory/next/” /> <!– indicates the index location –> <link rel=”contents” href=”http://domain.com/directory/index.html” /> <!– […] Read more »

One Link to Open Them All

Welcome to Perishable Press! This article explains several methods for opening multiple frames with a single link. For more excellent (X)HTML information, check out the (X)HTML tag archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;) Opening Multiple Frames with One Link Method 1: The first method of targeting multiple frames involves replacing either the entire frameset (via target="_top") or a subset of frames (via target="subset"). For example, any number of frames may be updated with a single link if that link targets a new frameset containing […] Read more »

Absolutely Centered Layout

Absolute Centering with CSS & (X)HTML Designing an absolutely centered layout involves centering a division both horizontally and vertically. When this is done, the centered division (or other element) is centered according to the browser window. To accomplish this, use this (X)HTML: <div id=”wrapper”> <div id=”center”> </div> </div> And employ this CSS (commented with explanations): Read more »

IE Scrollbar Colors

Changing the color of scrollbars for Internet Explorer may very well be the oldest trick in the book. In fact, this post exists mostly for the sake of prosperity, as we here at Perishable Press strive to eliminate our entire offline library of website design notes by transferring them to the World Wide Web. Although library conversion requires time, patience, and determination, changing the color of IE scrollbars is relatively simple. Simply associate these CSS rules to the (X)HTML documents desiring unique scrollbar colors: /* produces a stylish black scrollbar with light-grey highlights */ * html body { scrollbar-face-color: #000; […] Read more »

Fun with Downlevel Conditional Comments

Ever since Internet Explorer 5 (IE5), Microsoft has included browser support for "downlevel conditional comments," a non-scripted method of browser detection. Downlevel conditional comments (DCC) are a useful tool for targeting directives to specific versions of Internet Explorer. Downlevel conditional comments consist of an opening statement and a closing statement. Taken together, the statements enclose markup, CSS, JavaScript, or any other element typically included within an (X)HTML document. The DCC may be placed anywhere within the document and executes its contents only for the version(s) of IE specified. This technique is useful for delivering IE-specific stylesheets exclusively to specific versions […] Read more »

XHTML Document Header Resource

This XHTML header tags resource is a work in progress, perpetually expanding and evolving as new information is obtained, explored, and integrated. Hopefully, you will find it useful in some way. Even better, perhaps you will share any complimentary or critical information concerning the contents of this article. Table of Contents Important Information XML Declaration The !DOCTYPE The html tag The head tag The title tag base & item http-equiv link tags meta tags Geo meta tags Dublin Core tags References Read more »

Optimize Convoluted Code via JavaScript

Search engines loathe crawling through convoluted lines of code. Oceans of complex JavaScript scare away the priceless indexing and archiving efforts of most major search engines, which will generally abort a crawl upon encountering such mess. The good news is that search engines actually do not deploy JavaScript, so it is possible to use JavaScript to hide those miles of messy code by using the fundamental document.write function. Place this function in an external JavaScript file, “navmenu.js”: function navMenu() { document.open(); document.write(“<div>Convoluted code goes here.</div>”); document.close(); } Link to the external JavaScript file by placing this code in the document […] Read more »

HTML Frames Notes Plus

If you think that nobody uses frames anymore, think again. I personally know of one person who threw down some tuf HTML frame action for a personal site. So, in the interest of prosperity, we are hereby establishing this post as our official dumping ground for all HTML frame-related garbage. Break your pages out of someone else’s frames We begin our journey with a totally sick JavaScript method for breaking pages out of the illegitimate frames of some ineffectually pathetic bastard: <script type=”text/javascript”> <!–//–><![CDATA[//><!– if (window.self ! = window.top) window.top.location = window.self.location; //–><!]]> </script> Likewise, here is an equally effective […] Read more »

Accessibility Notes Plus

Just a few useful accessibility notes.. Add accesskey attributes to important list items, content areas, and any other key areas of the document. Use alphanumeric characters as accesskey values, as in this example: <ul> <li><a id=”home” accesskey=”h” href=”http://domain.com/home.html”><span class=”accesskey”>h</span>home</a></li> <li><a id=”menu” accesskey=”m” href=”http://domain.com/menu.html”><span class=”accesskey”>m</span>menu</a></li> <li><a id=”search” accesskey=”s” href=”http://domain.com/search.html”><span class=”accesskey”>s</span>search</a></li> </ul> When an accesskey attribute is present within a link tag, pressing alt+letter on the keyboard is equivalent to double-clicking that link. Generally speaking, the presence of an accesskey attribute within an element brings focus to that element. Thus, radio and check boxes are toggled, links are clicked, and form elements […] Read more »

A Complete CSS Template File

To help maintain consistency when developing new CSS-styled websites, we have created a complete CSS template file. The file contains every HTML/XHTML tag known to man. This includes tags such as BASEFONT and CENTER, which have been deprecated; tags such as COMMENT and MARQUEE, which are exclusive to Internet Explorer; tags such as SPACER and SERVER, which are exclusive to Netscape Navigator; and even tags such as !DOCTYPE and BASE, which are included merely for the sake of completeness. As CSS selectors, the tags are (almost all) empty, just waiting to be filled with declarations, properties, and values. Tags that […] Read more »

Stylish Deleted Text

Fashion stylish deleted text in XHTML via the über obscure del tag. Code example: <del datetime=”1999-Dec-31T23:59:59+00:00″ title=”Text deleted: 31-Dec-1999 @ 23:59″> Terminate me. </del> Live example: Terminate me. Read more »

Obscure XHTML Tags

Well, maybe not that obscure.. <pre> — Preformatted character data <em> — Renders as emphasized text <strong> — Renders as strong emphasized text <tt> — Renders font as teletype or monospace <dfn> — Defines a definition term <code> — Defines computer code text <samp> — Defines sample computer code <kbd> — Defines keyboard text <var> — Defines a variable <cite> — Defines a citation <strike> — XHTML Transitional only <del> — Indicates deleted text <ins> — Indicates inserted text <dl> — Defines a definition list <dt> — Defines a definition term <dd> — Defines a definition definition <abbr> — Defines […] Read more »

WordPress RDF Source Makeover

Beautiful Source-Code Output, Part 1: Whip your WordPress RDF Code into Submission Update: This article applies specifically to WordPress 2.0.2, but may be generalized to any WP 2.0+ version. I love looking at beautiful source-code output. However WordPress tends to spit code out in random chunks, often leaving spaces, line breaks, and tabs littered throughout the source output. This messes things up. Lists don’t look like lists and logically written code often appears scattered along the page carelessly. Often, this is the result of poorly written PHP, which can be manipulated to write beautifully aligned code that looks as good […] Read more »