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: 4368 views
Leave a Comment · GuestBook
default pin-it button
Updated: 24-Nov-2007
Web View Count: 4368 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: 362275 views
74 Comments · GuestBook
default pin-it button
Updated: 5-Jan-2008
Web View Count: 362275 viewsLast Web Update: 5-Jan-2008