By: keven ages

keven ages — Thu, 05 Feb 2009 21:02:30 +0000

lol fair enough:

$(document).ready(function(){
    // let's hide all the div's first.  We let jQuery take care of this so that browsers or devices w/o javascript can view the content still
    $(".view-content-health-tips .item-list h3").next().hide();
 
   //add an effect to open the first item in our list to help the user realize how the interface works
    $(".view-content-health-tips .item-list h3:first").next().show("slow");
    $(".my-class-name .item-list h3:first").next().show("slow");
 
    //add a click listener to the headers to toggle the content in the list
    $(".view-content-health-tips .item-list h3").click(function () {
        $(this).next().toggle('normal');
    });
});

Essentially this creates a toggle effect for the following xHTML

block 1

content 1
content 2.
content 3

block 2

content 1-1
content 2-1.
content 3-1

I love anything that only occupies a few lines of code but is both highly extensive as well as practical.

By: Luke

Luke — Thu, 05 Feb 2009 20:19:30 +0000

@kevin: don’t be shy, let’s see your beautiful code!

By: keven ages

keven ages — Thu, 05 Feb 2009 20:04:51 +0000

We prefer to let javascript handle the image transparency issue. GD can be a pain sometimes for the simple reason that not everyone has it installed and it can use a lot of resources. Great code btw, we just prefer it this way:


 
$(document).ready(function() {
    //location of transparent gif
    $.ifixpng('/sites/all/themes/proscenium/images/pixel.gif');
    //fix transparency for div id membership-block
    $('#membership-block').pngfix();
});

I was going to post a piece of javascript that I found to be beautiful, however, after reading the example in the post, I think I’ve been trumped.

By: Jesse

Jesse — Mon, 26 Jan 2009 16:37:05 +0000

I’ve chosen a piece of code that’s smaller in size, however not as small as JavaScript image preloading.

Mine has to do with images also, but deals with PNG images on web sites.

Internet Explorer (older versions, at least) are not setup inherently to handle alpha transparency in PNG images, but there is scripting to allow it to. In order to have proper placeholders and such I’ve written some PHP code that I’ve used on a few web sites to handle this gracefully.

The $root variable is set on each page loaded, I always do this to work well with relative links rather than absolute, and can write the same code across files as long as $root is set properly.

There’s likely more I could add to this function to support additional IMG tag parameters, but this is pretty much all I use most of the time, so I kept it simpler.

Usage examples:

 echo img_tag('transparent_image.png'); ?>
 echo img_tag('transparent_image.png', 2, 'red', 'This is transparent!', 'right'); ?>
 $png = img_tag('transparent_image.png'); ?>

And so on…

Here’s the code:


// $img = image location/name. ie. ../images/title.png
// $bd = border size
// $bdc = border colour
// $alt = alternate text
// $align = image alignment in reference to text
function img_tag($img, $bd = 0, $bdc = NULL, $alt = NULL, $align = NULL)
{
    global $root;
    $ret = null;
    $png = false;
    $ie = false;
 
    // get the image size for width/height parameters
    list($w, $h) = @getimagesize($img);
 
    // find the extension to make sure it's a PNG file being passed
    $ext = explode('.', $img);
    if (strtolower($ext[sizeof($ext) - 1]) == 'png') { $png = true; }
 
    // make sure we only do this for MS IE
    if (stristr($_SERVER['HTTP_USER_AGENT'], 'msie')) { $ie = true; }
 
    // the return variable, start with the image source.
    // - if it's IE and a PNG image, we'll display a 1x1 transparent
    // gif with the correct width/height as a placeholder,
    // otherwise we'll just display the image
    $ret = ';
    if ($ie && $png) { $ret .= $root . 'images/1x1.gif'; } else { $ret .= $img; }
 
    // add the width/height parameters and start the style tag
    $ret .= '" width="' . $w . '" height="' . $h . '" style="border: ';
 
    // if border size isn't passed, return 0 for no border
    if (!empty($bd)) { $ret .= $bd; } else { $ret .= 0; }
    $ret .= 'px';
 
    // add a solid border with the colour specified
    if (!empty($bdc)) { $ret .= ' solid ' . $bdc; }
    $ret .= ';';
 
    // add the alignment in the style tag too and close style parameter
    if (!empty($align)) { $ret .= ' text-align: ' . $align . ';'; }
    $ret .= '"';
 
    // for good measure, add HTML align parameter too
    if (!empty($align)) { $ret .= ' align="' . $align . '"'; }
 
    // add alt text, if none specified we'll use the image name
    $ret .= ' alt="';
    if (!empty($alt)) { $ret .= $alt; } else { $ret .= $img; }
    $ret .= '"';
 
    // now we verify if it's IE and a PNG we'll add the code to allow IE
    // to handle alpha transparency, as the width/height have to be
    // specified here also. just add another style parameter.
    if ($ie && $png)
    {
        $ret .= ' style="width:' . $w . 'px; height:' . $h . 'px; ' .
        'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' .
        $img . '\', sizingMethod=\'scale\');"';
    }
 
    // close the IMG tag completely
    $ret .= ' />';
 
    // return the variable. this way it can be manipulated or just put into
    // a variable if I don't want it displayed right away. or I can just echo
    // the function name directly to have it print right away.
    return $ret;
}
?>

Hope this helps someone out there, and hope you can improve on what I’ve done also. One likely improvement I will make is to utilize only one style tag, since IE will have two set in the same image since I’m closing one and opening another. It does however, work for IE prior to version 7 back to 5.5. Version 5.0 and prior are still not going to handle this gracefully, they lack the support for this filter.

There is likely some caveats to using this also, and I know there’s other ways to use it (an include JS file that is only read by IE browsers (by using an “if lt IE 7.” to load it, and using a script defer tag to render before the page). The above way works for me, and is how I’ll keep it until I’ll need additional features.

Comments on: Beautiful Code

By: keven ages

By: Luke

By: keven ages

By: Jesse