9-slice scaling in HTML

written by Clemens Lang at May 15^th 2008, 16:59

The Adobe Fireworks help has a good article explaining 9-slice scaling. Now imagine you’re designing a liquid width layout for a website - wouldn’t it just be great if it would scale as it was 9-sliced? Here’s how:

Slicing

First you need one image for each of the outer areas in the 9-slice grid. That’s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don’t need an image for the center, since it’s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we’re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.
After all, the slicing looks like this (forgive me the typo):

HTML code

Here’s the HTML you’ll need. Read the comments in the code for explanation.

<div class="content">
	<!-- this is the overall container -->
	<div class="content-top">
		<!-- this contains the top left, top right and top center slices -->
		<div class="content-top-left"></div>
		<div class="content-top-right"></div>
		<!-- notice the top center or top repeat slice needs to be at the end -->
		<div class="content-top-repeat"></div>
	</div>
	<div class="content-repeat">
		<!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me -->
		<div class="content-repeat-left">
			<div class="content-repeat-right">
				<!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it -->
				<div class="content-repeat-center">
					<!-- /** this is where you'd place the content **/ -->
					<div class="content-repeat-clearfix"><!-- this will prevent problems with floated stuff within the content --></div>
				</div>
			</div>
		</div>
	</div>
	<div class="content-bottom">
		<!-- this contains the bottom left, bottom right and bottom center slices -->
		<div class="content-bottom-left"></div>
		<div class="content-bottom-right"></div>
		<!-- as above the bottom center div must be after the bottom left and right divs -->
		<div class="content-bottom-repeat"></div>
	</div>
</div>
 

Read the rest of this entry »

Posted in Web Development, Design, PHP, XHTML & CSS | No Comments »

The smaller the error the bigger the bug

written by Clemens Lang at Apr 26^th 2008, 12:05

So we had that navigation tree at work consisting out of two category levels, for simplicity let’s call them Level-1-Category and Level-2-Category. Level-1-Categories could contain other Level-1-Categories and Level-2-Categories, while Level-2-Categories could only contain Level-2-Categories. The navigation was built, caching was implemented, everything seemed fine from a logic viewpoint, however it behaved weird where it would sometimes display the Level-2-Categories in a particular Level-1-Category and sometimes not or in different order.
When we finally found the bug (after hours of debugging) the scales fell off our eyes:

<?php $cacheID = md5($level1Cat->id.$level2Cat->id); ?>

Now imagine what happened when you had a $level1Cat with ID 1 and a $level2Cat with ID 12, that would write it’s cache to md5(‘112’); - and trying to open a $level1Cat with ID 11 and a $level2Cat with ID 2 it would read the cache md5(‘112’);. Unfortunately these classes did have the same interface, so no errors were thrown.
Changing the code to

<?php $cacheID = md5($level1Cat->id.'-'.$level2Cat->id); ?>

resolved the bug and finally fired the closing time-event for us.

Posted in Internal, Web Development, PHP | 1 Comment »

GeSHify: a GeSHi syntax highlighting extension for Expression Engine

written by Clemens Lang at Jan 30^th 2008, 21:51

Update: GeSHify has moved! Visit it's new home http://geshify.com/. This page is probably outdated!

So I figured out it would end as it always does (notice how I exaggerate here to keep the pathos of the text) - I had to do it my way. And here it is: GeSHify for Expression Engine.
GeSHify supports the following features:

• Customizable intelligent caching (this one is very important, since GeSHi is not the fastest code highlighter out there)


• Supports GeSHi 1.0 and GeSHi 1.1 (currently alpha) - and you can even switch between both using some clicks in the control panel


• Customizable tag (in case you want to keep the original functionality of [ code ] instead of overwriting it, which is the default setting)


• HTML-argument-style settings: you can pass something like lang=actionscript to the code tag


• Default settings manageable using the control panel, so you don't have to pass all arguments each time you're pasting code

Want to see an example? Sure, no problem:

<?php
function activate_extension()
{
 global $DB;
 $DB->query($DB->insert_string('exp_extensions',
  array(
   'extension_id' => '',
   'class' => 'Geshify',
   'method' => 'pre_typography',
   'hook' => 'typography_parse_type_start',
   'settings' => serialize($this->settings_default),
   'priority' => 8,
   'version' => $DB->escape_str($this->version),
   'enabled' => 'y'
  )
 ));
 $DB->query($DB->insert_string('exp_extensions',
  array(
   'extension_id' => '',
   'class' => 'Geshify',
   'method' => 'post_typography',
   'hook' => 'typography_parse_type_end',
   'settings' => serialize($this->settings_default),
   'priority' => 8,
   'version' => $DB->escape_str($this->version),
   'enabled' => 'y'
  )
 ));
}
?>

If you know PHP and the Expression Engine API you might notice this is the place where the extension hooks into Expression Engine. If you don't you probably don't care either

Read on for Documentation and Download

Read the rest of this entry »

Posted in Internal, Web Development, PHP, XHTML & CSS | No Comments »