Download

Documentation

I won’t go into detail here about what it does, because the google code project covers that pretty well. If you have any interest in dynamic css and/or javascript, I urge you to check it out. I have been using it on all of my projects lately, and I am enjoying the hell out of it.

I would love some developer feedback on this, so if anyone finds this interesting enough to use, please let me know about your experience, and open issues in the google code project as necessary. I would also love any feedback regarding making it faster / safer / better / whatever.

demonstration toy

<?php    
 
	$p = imagecreatetruecolor(1, 1);
	imagesavealpha($p, true);
	$o = (100 - (int) $_GET['o']) * 1.27;
	$c = imagecolorallocatealpha($p, (int) $_GET['r'], (int) $_GET['g'], (int) $_GET['b'], $o);
	imagefill($p, 0, 0, $c);
	header("Content-type: image/png");
	imagepng($p);
 
?>

usage / parameters:

r

how much red to include: r=[0-255]

g

how much green to include: g=[0-255]

b

how much blue to include: b=[0-255]

o

how opaque the pixel should be: o=[0(fully transparent)-100(fully opaque)]

so…

pixler.php?r=255&g=255&b=255&o=50

will make a white pixel that is 50% visible.

pixler.php?r=255&o=100

will make a red pixel that is fully visible.

pixler.php

calling the script with no parameters will create an invisible black pixel (…).

It has a full page flexible layout as opposed to a fixed width centered layout, is brightly colored rather than dark, and the biggest thing is that there is no JavaScript, and my last theme was filthy with the stuff.

There is some fine tuning to be done, once the little things are taken care of the theme will be available for download.

If anyone has a great name for it, please drop it in the comments.  Extra points if you can manage the word “thuggin” into it.  I can’t come up with a damn thing.

The secret ingredient to get this made up was some CSS3 selectors and a bit of recursion.

You basically just pass in a class for the toggles, a class for the elements, and a parent container to reference.

The usage ends up fairly simple:

new rAccordion('container', 'toggle', 'element');

In the example, container is the id of the parent that the classes are in, toggle is the class that each toggle has, and element is the class that each element has. A fourth argument can be passed, which is the options argument for the mootools Accordion class.

There are some kinks thatstill need working out. There are inherit problems with just jamming accordions inside of each other. The way mootools creates the accordion requires quite a bit of inline styles, which include defined heights. These heights become problematic when accordions inside accordions need to expand or contract, but their parent element has a defined height and overflow which will not allow the newly expanded portion to be seen.

I do have something of a solution in place, but it feels a little hacky, but I am not sure it will get any better unless I rewrite the accordion.

If anyone has any ideas on how to address this issue, please drop me a comment.

example

download w/the example

Here is the class:

var rAccordion = new Class({
 
	initialize: function(container, toggleClass, elementClass, options){
		this.container = container;
		this.tClass = toggleClass;
		this.eClass = elementClass;
		this.options = options;
		this.selector = '#' + this.container + ' > .';
		this.makeAccordion();
	},
 
	makeAccordion: function(){
		new Accordion(
			$$(this.selector+this.tClass),
			$$(this.selector+this.eClass),
			this.options
		).addEvents({
			// The onActive and onComplete events added to the stack here to
			// attempt to address some of the css issues.
			'onActive': function(toggle){
				if(toggle.getParent().getStyle('height') != 0)
					toggle.getParent().setStyle('height', '');
			},
			'onComplete': function(a){
				if ($defined(a)) {
					var height = 0;
					a.getParent().getChildren().each(function(e){
						height = height + e.offsetHeight;
					});
					if(height != a.getParent().offsetHeight && a.getParent().offsetHeight != 0)
						a.getParent().setStyle('height','');
				}
			}
		});
		this.selector += this.eClass + ' > .';
		if($defined($$(this.selector)[0]))
			this.makeAccordion();
	}
 
});

Microsoft Expands Support for Web Standards

Company outlines new approach to make standards-based rendering the default mode in Internet Explorer 8, will work with Web designers and content developers to help with standards behavior transition.

Microsoft has finally been cajoled into standards compliance. For the first time ever, it looks like web developers can create standards compliant pages confident in the knowledge that Internet Explorer will render them correctly – without hacks, and without conditional comments.

Bravo Internet, Bravo.