![[ Best Title Separator ]](https://perishablepress.com/wp/wp-content/images/2008/misc-chunks/best-title-separator.jpg)
While writing my previous article on creating the perfect WordPress title tags, I deliberately avoided discussing the use of separators in titles. I feel that the topic is worthy of its own article, enabling a more thorough exploration of the details. Title separators are the symbols, punctuation, and other characters used to distinguish between various parts of the page title. For example, a title may include the blog name, post title and blog description, with each element separated by a […] Continue reading »
In an effort to organize my pile of offline notes, I will be posting a number of quick, “to-the-point” tutorials on a number of useful topics. In this post, I share an excellent method for auto-clearing and restoring multiple form field inputs using a bit of unobtrusive JavaScript. This method was discovered at xy.wz.cz. There are two steps to this technique, which should take no longer than five minutes to implement. Continue reading »
This was just too juicy to pass up. Blogstorm recently blogged about an easy JavaScript technique for making any website editable. After checking it out for myself, I just had to share it here at Perishable Press. Here it is: javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 Paste that single line of code into the address bar of any modern browser and have fun editing the page. Obviously, any changes will only apply to the page as seen in your browser, not the […] Continue reading »
![[ Count Chimpula ]](https://perishablepress.com/wp/wp-content/images/2008/misc-chunks/verify-feedcount.jpg)
Recently, I received a bizarre email accusing me of calling someone out on their fake Feedburner subscriber count. Apparently, some desperate blogger had been claiming to have something like 30,000 Feedburner subscribers when in reality they only had around 700. From what I could tell, the fraudulent site was displaying a counterfeit Feedburner subscriber-count badge using some fancy CSS image-replacement or something. Whatever. I really could care less, but the information contained in the email got me thinking: Providing an […] Continue reading »
As more and more people discover the flexibility, specificity, and all-around usefulness of Microsoft’s proprietary downlevel conditional comments, it behooves us to reiterate the importance of utilizing proper syntax. Specifically, for downlevel-revealed, or negative, conditional comments, the commented content will remain visible unless the associated if condition proves false. Continue reading »
![[ Mint Icon ]](https://perishablepress.com/wp/wp-content/images/2007/misc-chunks/fluid-mint.png "Have a Mint")
Recently, I spent some time addressing a few of the performance issues pointed out by Yahoo!’s very useful YSlow extension for Firebug. Working on performance tip #3, Add an Expires or a Cache-Control Header, I encountered some difficulty while trying to get the JavaScript used by Mint to cache as desired. Apparently, the HTAccess directives used to cache my other scripts do not effect the two PHP-generated JavaScript files used by Mint. Although I am not entirely certain, I suspect […] Continue reading »
![[ Screenshot: Toggling Metadata (visible state) ]](https://perishablepress.com/wp/wp-content/images/2008/toggling-divs/toggling-metas.gif)
Recently, while restoring the popular Jupiter! WordPress theme, which several readers use to “skin” the Perishable Press website, I found myself searching for a simple, effective JavaScript technique for toggling element visibility. Specifically, I needed to accomplish the following design goals: Continue reading »
![[ Jump Menu ]](https://perishablepress.com/wp/wp-content/images/2008/jump-menu/access-deco.jpg)
Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted […] Continue reading »
In this tutorial, I present an easy way to add a little extra flair to your site by adding some dynamic clock functionality. Using unobtrusive JavaScript, a bit of (X)HTML markup, and a dash of PHP (optional), we will create a dynamic clock that degrades gracefully to a static date/time-stamp when JavaScript is unavailable. No need to get all verbose with this one, so let’s dive right in.. Continue reading »
![[ WordPress RSS Feed ]](https://perishablepress.com/wp/wp-content/images/2008/misc-chunks/exclude-feed-content.png)
Just a quick tip on how to create error-free links to feed validation services for feeds that are redirected through Feedburner. For example, let’s say our site’s main feed is originally located at: Continue reading »
Just a note to web designers and code-savvy bloggers: make sure your custom error pages are big enough for the ever-amazing <cough> Internet Explorer browser. If your custom error pages are too small, IE will take the liberty of serving its own proprietary web page, replete with corporate linkage and poor grammar. How big, baby? Well, that’s a good question. In order for users of Internet Explorer to enjoy your carefully crafted custom error pages, they need to exceed 512 […] Continue reading »
I realize that probably everybody already knows this elementary and absolutely dead-simple JavaScript tip, but I was surfing around the other day and encountered a page that made great use of some auto-highlighted textarea content. The idea is simple, include a snippet of JavaScript to enable users to automatically highlight/select upon focus any chunk of text located within a form input or textarea element. Continue reading »
![[ Screenshot: broken footer positioning in IE 7 ]](https://perishablepress.com/wp/wp-content/images/2007/script-tags/ie-incorrect.gif "a rather 'loose' footer as seen in IE 7")
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 »
![[ Preload Images with CSS ]](https://perishablepress.com/wp/wp-content/images/2007/misc-chunks/preload-images-css.jpg)
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 »
