Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40
Filed in:Web Dev
CSS·XHTML·The Web

Computing Tips

February 11th, 2005  · stk

My (ever growing) repository for useful computing tips, organized by category. I hope that you find many of them useful.

Browsing

  1. Expand ALT text (MSIE Only) - You probably already know that when a picture fails to load (the file name is wrong, or missing, etc.), the alternate <alt> text is displayed. A lot of times, it's cut off.

    What you may not know is that there's a browser setting that fixes this behavior.

    Tools -> Internet Options -> Advanced Tab -> Accessibility -> (check the "Always expand ALT text for images")

    Another default setting that was dropped through the cracks.


xhtml (Strict)

  1. Opening Links in a New Window: Using frames, it's as simple as specifying the target window for a link. Today, with CSS & XHTML, it not that simple. The "target" attribute is obsolete in XHTML strict and nothing has been offered up as a replacement. So how do you open a link in a new window?

    This is one of those areas where the idealism of standards and the needs of the real World collide. There is no panacea, only tradeoffs.

    The method I've been using, involves the javaScript "window.open()" function, but provides a backdoor for visitors who have javaScript turned off or have a pop-up blocker in place. The code:

    <a href = "pg-noJava.html" onclick = "window.open ('pg.html'); return false">
    or

    <a href = "pg.html" onclick = window.open(this.html); return false">

    This approach is valid-XHTML, and many browsers will execute it. However, they may neglect to pass along the referrer (the tradeoff). This method results in a new window for many older browsers too, provided that javaScripting is turned on.

    If you include a javaScript "window.close()" function, inside the new window, to return the viewer to the main site, you might need two pages (one with the close() and one without), unless you use a PHP script to decide whether to show the close() or not.

    The "return false" keeps the originating page from loading the linked page, IF the javaScript is sucessfully executed. And if the javaScript cannot be executed (for whatever reason), the visitor is linked to a non-java page, degrading to a regular link, loading into the same window.

    EVERYONE gets to see the page.


Site Admin

  1. .htaccess file

    We got our domain in Dec04. For the first month, we just moved files from our old domain. The 2nd month, we made some changes. After the 2nd month, we noticed that anyone can anonymously browse our directories. Ack! :( This is NOT what we want.

    The place to change this is the ".htaccess" file, which controls directory behavior and works in a cascading style. (Control them individually, by placing a .htaccess file in that directory -OR- control them in a cascading, directory-tree-fashion, via one file, sitting higher up in the tree.)

    The second method is what we are currently employing. Our single .htaccess file is in the top-level directory and looks like:

    # Turn on XbitHack for Server-side includes
    XBitHack full

    # Look in htm/html files for php commands
    AddHandler application/x-httpd-php .htm .html

    # Turn OFF external access to directory indexes
    Options -Indexes

    We don't use SSI now, preferring PHP include statements, which makes parsing PHP important (the second bit). Turn off external directory browsing by turning Indexes off (-Indexes). A browse now results in a 403 message, which we can customize.

    Type randsco.com/openDirectory/ in your address line, to see what having Indexes on (+Indexes) looks like. Then try randsco.com/media to see the Indexes off (-Indexes) behavior.

    For more information on what you can do with the .htaccess file, read these:

    Have a look at the effect of turning Indexes off. First, type randsco.com/openDirectory into your address box. THIS is what it would look like if you have Indexes ON. Then, type randsco.com/SlideShow into your browser address box. Instead of an index listing, you will get a 403 "Forbidden" message.

(Permalink)
Views: 4050 views
Leave a Comment · GuestBook
default pin-it button
Updated: 24-Nov-2007
Web View Count: 4050 viewsLast Web Update: 24-Nov-2007
Filed in:CSS
b2evo·XHTML

CSS Photo-Caption Zoom

January 31st, 2005  · stk

Finally ...

On the left is a demonstration of the original version of photo-caption zoom. It's a pure-CSS, XHTML-valid, image/caption zoom method. Move the cursor over the image and it will 'zoom' (pop, explode, magnify) to reveal a larger image with a caption. There are a number of image rollover techniques, but this is the first that combines an image with a caption. It looks nice and saves page real estate, sitting as a small thumbnail, until the reader decides otherwise. Most important, the method is practical and easy to implement.


PZ3 Update: 10-Mar-2007 - Fixes for an IE7 bug (multiple right-floated images) & a work-a-round for IE6 and IE7 in quirks-mode.

Added July 2006: PZ3 is here! It's more robust, lighter and REPLACES PZ2. Compared to PZ2, PZ3 is easier to use, needs 72% less code, overcomes a pesky IE z-index problem and can use an infinite range of image sizes (image size is specified in the XHTML, not the CSS). Like PZ2, Photo-Caption Zoom version 3 overlays text. (See demo on the right).

Added Oct 2005: I've developed a more robust "version 2" (named "PZ2"). It adds functionality (and complexity) to the original, PLUS has the added capability to OVERLAY text (no more "element migration" on ZOOM). It is demonstrated here on the right.

A single image is used for both the small and large views. (No need to have a large and a small version). The width is the only size parameter needed (the surrounding <div> expands to the appropriate height). To float the image left or right and to use different images sizes, just use the appropriate class names from within the HTML (no need to modify an external CSS file).

This code is a result of my recent inspiration and chronic frustration regarding the presentation of images and photo captions on web pages. Below, you'll find 8 different image zoom techniques, all of which are demonstrated on their own page & include cut'n-paste CSS/HTML code. Take your pick.

They've been tested on a PC, using IE6(sp2) and FireFox(v1). I'm not sure how they'll render in different browsers or browser versions. All but two are pure-CSS solutions (two use JavaScript :> ) and all are XHTML-valid (verified with the 'validate' button on the footer bar).

Read full story...

(Permalink)
Views: 358380 views
74 Comments · GuestBook
default pin-it button
Updated: 5-Jan-2008
Web View Count: 358380 viewsLast Web Update: 5-Jan-2008
Filed in:Site News

New Journaling Software

January 21st, 2005  · stk

Because we've got our own domain name, we decided to revamp the look of our site & our journaling methods. We hope that you like it and find it useful. We're also hoping that because posting entries is easier, we'll be able to provide you with MORE news, photos & other information.

First, let's give credit where credit is due. We're using an open-source program (which means that it's FREE - yay - and worked on by a wide array of developers). The name of the program is b2evolution (see the promotional link at the bottom of the page). It offers several new features that we didn't have before:

  • You can now add comments to posts. (Let us know what you think!)

  • Posts are categorized. (Read only what interests you.)

  • Posts are archived. (Easy access to ALL posts.)

  • Better photos. (Larger images because of the wider page layout.)

  • Search posts. (Find an old post based on a keyword.)

  • Posts have 'permalinks'. (Link to a specific post.)

  • Posts can be syndicated. (Advanced feature to keep up with our news.)

So ... we're thinking that this will be way-superior to what we had before. It will take some getting used to, as it is a completely NEW way of doing things.

Note: The current set-up allows 7 posts per page & you can use the "older", "newer" links (either at the bottom or in the right-hand section under "Journal Archives") to move forward/backward 7 posts at a time.

Hope you like it! :) Let us know what you think.

(Permalink)
Views: 2777 views
Leave a Comment · GuestBook
default pin-it button
Updated: 22-Feb-2005
Web View Count: 2777 viewsLast Web Update: 22-Feb-2005

PCT Slideshow

August 8th, 2004  · stk

Two years after we hiked 2,560-miles from Mexico to Canada along the PCT, Scott finalized the online slide show. We have added LOTS of new photos and they've all been modified to show at a higher resolution. Click HERE to see pictures and information about our 5-month long wilderness adventure. It was the experience of a lifetime!

Note: Our slide show is currently a Java applet, so make certain that you have the latest version of Java and that you have javascripting turned on in your browser.

(Scott has been motivated by Tom & Sheila, who've almost finished hiking the length of California. They're headed to Seiad Valley this week). We've been reading their online journal, which brings back memories of our 5-month-long hike. Just the motivation to get that slide show finished!

(Permalink)
Views: 7053 views
1 Comment · GuestBook
default pin-it button
Updated: 22-Feb-2006
Web View Count: 7053 viewsLast Web Update: 22-Feb-2006
Filed in:Site News

Weather Button

July 5th, 2004  · stk

I've updated the weather button on our web page, using a new Edmonton-specific service. Temps are reported in degrees Celsius, which may throw off some U.S. readers. Scott thought about putting up a conversion table, but decided against it because he didn't know where to start: -50 degrees ? or -40 degrees ? It's just too depressing.

An example of the new button is on the left.

Scott finally DID put together a temperature scale. He made is very simple, so everyone (especially those relatives in Arizona) should be able to figure out just how miserable we'll be, come December.

Scott's Edmonton Temperature Scale

  • < -20°C = DAMN COLD!
  • -20°C to -10°C = COLD
  • -10° to 0°C = BALMY
  • 0° to +10°C = SHORTS WEATHER
  • > +10° = HOT

We're on the prairies now! We've been here approximately 3 weeks and we've already had two major storms. Those babies roll in fast and are accompanied by flashes of light and loud rolling boomers! The drops are big and we've even had a bit of hail. And when it pours ... it POURS! (Both times, Scott has been in the middle of barbecuing dinner and gotten soaked!) This ain't no Vancouver drizzle!

(Permalink)
Views: 1872 views
Leave a Comment · GuestBook
default pin-it button
Updated: 15-May-2005
Web View Count: 1872 viewsLast Web Update: 15-May-2005