Entries tagged “javascript”

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

[tags]JQuery, jq, javascript, js, JQuery Calendar, calendar, symfony, plugin[/tags]

I released a new symfony plugin today for the jQuery Calendar available via svn. Feel free to read about it on trac. This adds a clever calendar widget that can trigger events. Very handy for viewing an events calendar.

I’ll publish a link to this plugin in action in the following weeks. Enjoy.

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

[tags]css, jQuery, layout, javascript, equal, columns, equal columns[/tags]

I’ve seen a few examples of how to equalize column heights using javascript, and none of them seem appealing:

• jquery.equalizecols.js
  • This required a few other libraries, and I wanted more flexibility (e.g. where the column should grow in order to equalize)
• Project 7
  • The Project 7 approach was the most interesting, but the code seemed a bit messy and not so open source friendly (even thought it might have been). It would let you specify which element was to grow inside a column.
• Nifty Corners
  • I had trouble with the syntax, but I liked how it just created a new element out of thin air…

So I wrote my own:

$("#col1, #col2").equalizeCols();

will equalize the columns as expected

$("#col1, #col2").equalizeCols("p,p");

will equalize the columns and add the extra space after the p tag in #col1 or #col2 (whichever is shorter).

Here’s our function:

This requires jQuery of course, and it hasn’t been tested much.

So I have a small bone to pick with Jacob Nielsen and his opinion on within-page links or anchor links^.1 There clearly is a benefit to not just linking to a specific page, but linking to a specific part of a page.

With a little help from script.aculo.us we can spice up our anchor links by highlighting them as well as linking to them.

For this article we’ll limit our scope to internal anchors only.² We’ll write the code using the symfony framework and in straight up XHTML. This is really dirt simple and is more of a design pattern with an example than a tutorial.

Let’s do the XHTML first:

Yup, that’s it… I told you it was dirt simple. You just need to include the proper prototype and script.aculo.us libraries.

In symfony we avoid repeating ourselves with a helper function:

and call it by doing:

That’s it.

I like the way that Lightbox Gone Wild will automatically pickup any links with the class=lbOn, but I wanted to use (at some point) Prototype Window Class instead.

Luckily PWC is built on Prototype which means we’ve already loaded a helpful library.

In order to take all class=lbOn objects and run them through PWC we just write a simple loop and iterate.

So here’s the low-down:

• Download PWC
• Copy window.js
• Use the included prototype & script.aculo.us if you don’t already include it in your page
• copy any themes you wish to use.

In your page add this bit of JavaScript:

So, this code simply looks for all the anchor tags with class=lbOn and then creates a new mylb instance for each anchor. The end.