All My Brain Where stuff from my brain lands

April 29, 2008

Using YUI to Create Nested Tabs

Filed under: Programming,Web — Tags: , , , , — Dennis @ 10:36 am

Recently, I was browsing the YUI JavaScript forums and found a post about nesting the tab control. I haven’t done that before personally, but have done things where my tabs had Ajax or DHTML dependencies inside the tabs. I decided I’d take a whack at this one and see what I could come up with.


April 11, 2008

Using YUI components in a templated environment

Filed under: Programming — Tags: , , , , — Dennis @ 3:40 pm

If you develop sites anything like I do, you’ll end up setting up a site wide layout and theme before you start coding any individual pages. I like to add YUI components where they are useful, but I’ve come across a couple little quirks that were annoying me. Here are my observations and what I did to get around them.

Templating Quirks with YUI

The root of my annoyance is that I don’t need all the components I want to use on all my pages. I do however need some components on more than one page as well as sometimes needing a few components on one page. Somewhere along the line, I gained a believe that doing things more than once was not good. Copying and pasting header files and setup code between pages is on my list of less desirable behavior. This led me down the path of adding all the YUI header files to my master template for my site.

Advantage: All my pages have the header files already and I don’t need to worry about that on each page I’m working on.
Disadvantage: Pages with no need for a YUI component still use up bandwidth/time downloading the headers.

If you weight the disadvantages of putting the header files on every page higher than the advantages like I did, you might go the opposite route and try adding them only to the pages where you need the components.

Advantage: Only pages with the components are now loading the dependencies.
Disadvantage: You’re back to redoing setup work and/or copying and pasting a lot.

Dynamically Loading YUI Components

Well, I wasn’t entirely happy with either solution so I came up with a hybrid. I’ve watched the YUI-Loader with some interest since it was introduced a couple versions ago. It is now no longer marked as “Beta” and I figured it was worth looking at for my current project. The basics are this:

  1. Include the loader script.
  2. Create a loader with a list of objects you’ll be using.
  3. Use the loader to grab all the required resources.
  4. Use the resources you need.

Sounds like a good idea to me but I didn’t want to copy/paste loader initialization code in my template pages any more than I wanted to copy/paste header files. My solution is to create a generic loader in my master template and then override the required resources at the page level.

Here is part of my master template

<script type="text/javascript" src=""></script>
<script src=""></script>
<script type="text/javascript">
var yuiLoaderRequires=[];
var myOnLoad=function() {}
function init() {
var yuiLoader = new YAHOO.util.YUILoader({
require: yuiLoaderRequires,
onSuccess: myOnLoad
<!-- Using your template language, insert the child template javascript here -->
<script type="text/javascript">

Then, just override yuiLoaderRequires and myOnLoad in the subpages:

<script type="text/javascript">
myOnLoad=function() { doSomething....; }

I find that a lot less annoying than looking up requirements for each component on each page. Also, running the loader in the onDOMReady function causes the requirements to be loaded after the HTML has been rendered, this ought to give the appearance of a faster page load for most users. It might not work for every case though, so use with care. Hope you enjoy.

February 25, 2008

Image Upload with YUI Editor 2.5.0

Filed under: Programming — Tags: , , , , , , , — Dennis @ 11:08 am

The YUI team has been making further enhancements to the YUI library. I decided to stick together in one post all the previous resources I’ve added for the YUI Image Uploader and make sure the uploader was compatible with the latest version of the YUI Rich Text Editor.


December 21, 2007

An Example Rich Text Editor Image Upload with PHP

Filed under: Programming — Tags: , , , , , , — Dennis @ 3:36 pm

After my previous image uploader and turbogears image uploader posts, the overwhelmingly most requested information has been a PHP implementation of the upload script. I’m not much of a PHP guru. Luckily, a few users have posted possible solutions for this. I’ve added an editor to this post that uses a PHP script to process the image on the server. The original image uploader script is compatible with the newer 2.4 version of the editor.

Whithout further delay, here is the editor. Just click on the “insert image” link under “Insert Item” to test the upload functionality. (more…)

December 5, 2007

Creating Image Preview Tooltips with the YUI Overlay Widget

Filed under: Programming — Tags: , , , , , — Dennis @ 2:05 pm

The Yahoo UI Library provides a nifty helper for creating tooltips. I started playing around with it when I wanted to add the same tooltip to a large number of elements on a page. What got me interested in this implementation, is the ability to use the same tooltip on a number of elements, rather than having each element have it’s own tooltip div, or implementation.

The tooltip library creates a div element for each tooltip when the document loads. I wanted to use the tooltip to display a larger version of an image when a user hovered their mouse over a thumbnail. I did not however want to load all the full sized images when the page loads.

I decided the best way to handle this task was to implement my own tooltip function and create my own panel. (more…)

October 22, 2007

YUI Image Uploader Example with TurboGears

Filed under: Programming — Tags: , , , , , , , — Dennis @ 12:53 pm

After completing the YUI Image Uploader, I received a lot of requests for a working example. I didn’t originally create a working example, because that requires server functionality that this server didn’t have. I’ve remedied the situation and have completed an example with TurboGears. Of course, any server side language or framework will do as long as you have the ability to upload and store an image.


« Newer PostsOlder Posts »

Powered by WordPress

%d bloggers like this: