Entries tagged “yui”

If someone knows the more common name for triangle-toggle menu’s similar to this. Let me know.

There is a widget where an element toggles the display of a secondary set of elements. The toggle shows an arrow pointing down or right depending on the visibility of the elements. I wanted to build that in YUI.

The problem is two-fold:

1. Build a triangle that toggles from right to down.
2. Show and hide content.

However, with some clever CSS we can do this all in a single class change on an element.

Build that triangle

There’s a number of ways to show or hide this triangle. Because it is flexible, I’m going to opt for using a background image. Also to save on HTTP requests, I’ll use a sprite-d image. This may get merged with other icons on the system.

The particular site I’m working on uses a black background with white text, therefore a white triangle toggle seems appropriate.

This is what I use. I leave a little space, because the background will only clip horizontally based on the size of the element.

Add the HTML/CSS

The following HTML:

and the following CSS:

Provide the two states we require for the triangle. If you are new to sprites, rather than changing the background image entirely we just shift the background image up or down appropriately to show a new background.

The Javascript

The javascript is rather simple, but we put in some magical tricks here and there.

If you’re unfamiliar with this style of Javascript, here’s what’s going on. Everything is done in the MA namespace as to not conflict with other javascript.

The toggler is fairly generic and expects a similar HTML structure for any toggle-able element. That means this code only needs to be written once, and anytime we use the toggle class, toggling in this fashion will occur.

We only run the init function. init says when the DOM is available then run the setup function. setup adds an event handler to doc4. doc4 just happens to be the id we use on our body tag.

Note that we’re listening for clicks everywhere. This means we have to define only one event handler, regardless of how many toggle-able items there are. The event handler checks to make sure we clicked on a relevant element and then applies the toggle function to the grandparent element (switching the class from off to on as appropriate).

Note that this style of event handling means you need to carefully apply your class names. Also note, that this code could be optimized a little bit more, I haven’t put this code into production, and therefore haven’t optimized it for the YUI compressor.

Try this out if you want, I’m sure it can be trimmed down overtime. If you have trouble with it, let me know.

-d

[tags]yui, autocomplete, javascript, jquery, symfony[/tags]

[tags]css, yui, grids, table, layout[/tags]

[tags]js, javascript, readability, yui, jquery, shortcuts[/tags]

[tags]css, symfony, blueprint, yui[/tags]

I’ve been creating some dummy projects for my presentations at SymfonyCamp and decided now would be a good time to learn using the Blueprint CSS framework. It’s a bit different than YUI which I’ve been using heavily, but it has some potential.

Of course, instead of just downloading the framework, I made a plugin for symfony. It’s not much yet, but eventually I’ll throw in some helpers.

Enjoy!

[tags]css, symfony, blueprint, plugins, symfony camp, camp, yui[/tags]

[tags]yui, yahoo, css, snippet, textmate, ems, px[/tags]

If you use YUI grid layouts you’ll notice that ems are the preferred units and for good reason. But ems don’t make sense to people like us who want to be super precise down to the pixel… pixels make sense.

So type in a number select it and run this ruby script as a TextMate command (that outputs as a snippet):

You’ll have the proper tab stops to change the newly calculated ems from width to margin-left or margin-right or whatever it is you desire.

I do a lot of YUI grid layouts and I love the nestable grids:

<div class="yui-g$1"> 
	<div class="yui-u first">
		$2
	</div>
	<div class="yui-u">
		$3
	</div>
</div>

There’s a tab stop after yui-g in case you want to use one of the variants (yui-gb, yui-gc, etc).

I’m working on a site that uses two equal width columns… a lot… so this comes in quite handy. So long tables.