By now, everyone is familiar with the Yahoo Developer Network’s 14 best-practices for speeding up your website. Certainly, many (if not all) of these performance optimization tips are ideal for high-traffic sites such as Yahoo or Google, but not all of them are recommended for smaller sites such as Perishable Press. Nonetheless, throughout the current site renovation project, I have attempted to implement as many of these practices as possible. At the time of this writing, I somehow have managed […] Continue reading »
Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue: the div solution works well, only one problem maybe somebody can help: if you make the browser window smaller then the div is -> the scrollbar doenst fit right […] Continue reading »
Recently, after researching comment links for an upcoming article, I realized that my default <input /> values were being submitted as the URL for all comments left without associated website information. During the most recent site redesign, I made the mistake of doing this in comments.php: … <input class="input" name="url" id="url" value="[website]" onfocus="this.select();" type="text" tabindex="3" size="44" maxlength="133" alt="website" /> … Notice the value="[website]" attribute? It seemed like a good idea at the time — I even threw in a nice […] Continue reading »
Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how to do it with only two easy steps.. Step 1 — Place this in your CSS file: div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } Step 2 — Place this at the bottom of your (X)HTML document: <div id="preloaded-images"> <img src="https://perishablepress.com/image-01.png" width="1" height="1" alt="" /> <img src="https://perishablepress.com/image-02.png" width="1" height="1" alt="" […] Continue reading »
If you think you understand the logic behind Microsoft’s downlevel conditional comments, you are sadly mistaken. Sure, they seem simple enough on the surface, but as you really try to wrap your head around how and why they work, the subtle complexities of downlevel conditional comments may leave you dazed and confused… In our previous article on Internet Explorer’s exclusive browser-detection method, downlevel conditional comments (DCC), we present an introductory exposition, defining expressions and providing several generalized code examples. Overall, […] Continue reading »
This quick tutorial explains how to use HTML, JavaScript, and/or PHP to enable visitors to “go back” to the previous page. You can use either method to add a simple “go back” link or form button to your web pages. Continue reading »
Here is a collection of code snippets for embedding Flash and video using the HTML <object></object> tag. Useful for sites showcasing dynamic multimedia content. Continue reading »
Behold the seventh wonder of the virtual world: max/min-height and max/min-width properties are possible in Internet Explorer! Indeed, by taking advantage of IE’s proprietary CSS attribute, expression, you too can whip IE widths and heights into desirable proportions. The CSS expression attribute enables JavaScript commands to be executed within Internet Explorer. JavaScript via CSS? Thanks, Microsoft! Continue reading »
In our previous article on creating spamless email links via JavaScript, the presented method, although relatively simple to implement, is not the most effective solution available. Spambots, email harvesters, and other online scumbags relentlessly advance their scanning technology, perpetually rendering obsolete yesterday’s methods. Continue reading »
By using an <iframe></iframe> within a <div></div>, it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular. Indeed, with CSS, the placement, sizing, and styling of div’s provides endless possibilities for embedding external or even internal web content into pages that would otherwise require the use of frames, Flash, or JavaScript. This method works on any modern […] Continue reading »
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): Continue reading »
Welcome to Perishable Press! This article explains several methods for opening multiple frames with a single link. For more excellent HTML information, check out the HTML category archive. If you like what you see, I encourage you to subscribe to Perishable Press for a periodic dose of online enlightenment ;) Continue reading »
WordPress Quicktags provide shortcuts for adding certain bits of code to your posts. The default set of quicktags includes some handy shortcut buttons for tags such as <strong></strong>, <a></a>, and <img />, as well as a few others. While the default set of quicktag buttons is occasionally useful, a quick bit of quicktag customization can easily transform your personal set of quicktag buttons into a deadly arsenal of time-saving code shortcuts. Continue reading »
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 […] Continue reading »
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 may 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 […] Continue reading »
Using a small bit of JavaScript, it is possible to auto-clear and restore form elements when users bring focus to them. Simply copy, paste, and modify the following code example to achieve an effect similar to this: Continue reading »