Archive for the ‘ Javascript ’ Category

In my day job, I have to be pragmatic. That means although I am eager to try out new things right away, I have to weigh the pros and cons and the impact it might cause my unsuspecting users. I need to think about backward compatibility, about supporting browsers as old as Father Time and the list never ends. Although those daily exercises provide challenging and intriguing ways of working with old and new technology, I admit I always dream about how it would be to work in a world where IE6 or even IE7 is merely a dream, where I could care less of using a library to achieve cross browser compatibility and blah blah blah …

While working on my personal project this weekend (a girl’s got to have some fun sometimes), I discovered a rather peculiar behavior in a few different browsers I was testing my program with. I had a dropdown that I was setting a preselected value dynamically using Javascript using the setAttribute method.

I have been working a lot recently with the Facebook API at work. Unfortunately, I have been encountering a steep learning curve for Facebook API due to the lack of documentation and good sample code. So, here I have decided to provide little snippets of code that will help someone in their Facebook journey. This will hopefully be the first of many installations.

As Ajax application start becoming larger and larger, you will need to come up with ways to present a user interface to your users in a timely manner instead of making your users wait for all your code to download. In today’s fast moving world, slow loading applications have become a user’s nightmare.

We’re all probably used to the usual comparison methods in different languages. After all, if you learned some sort of Math, you know == is a rather common comparison operator in some programming languages. Javascript has it too, but some of the comparisons done in Javascript sometimes produces rather ambiguous results. Don’t believe me? Fire [...]

There are many ways to declare functions in Javascript. Sometimes, the way we choose to declare them might just be a matter of preference, but it’s good nevertheless to know some of the hidden costs that can occur when using certain constructs.

Here, we’re going to take a look at two different methods and compare their efficiencies. Before we jump into these different methods, here’s a quick refresher for those of you who aren’t too sure of the difference between classes and instances.

I’ve been tinkering around with CakePHP for the last few weeks out of curiosity. The process has been fun and has made me enjoy PHP much more. After building the application to work the usual way (not spiced up with some Ajax goodness), I decided to add in some Ajax support. Although CakePHP comes with Ajax helpers that will certainly help make development a snap, I wanted use jQuery. Here’s a snippet of my code that I used to add a task.

I love TinyMCE. It’s extremely easy to integrate and best of all, it’s open source and thus free.

Some time ago, something stumped my co-worker and I about TinyMCE. We were working on a blog application that included an HTML editor. Along with the editor, we wanted to give the users a chance to upload pictures with their posting. But looking at the general structure of TinyMCE, we realized that TinyMCE was not built to accommodate multiple users (I might be wrong here, but it’s didn’t seem possible without purchasing MCImageManager). In our application, each user has the ability to upload his own images and should not have access to the rest of the images uploaded by other registered users.

What is jTipster? Remember the times you would like to add notes to a picture, but there were no other ways to do it without firing up Photoshop. The problem with that is the content added to the picture was not easily changed, you needed some Photoshop skills and well, not SEO friendly.

So, what is it again? Well, jTipster allows you to add “markers” to a picture. For each marker added, you can add short or long captions that appear on rollover. See it working here.

So, how do you get it working. Follow the steps below and to get started.

While working on a site today that was built to support multiple languages, I ran into a small issue. Since the site’s buttons were all actually text links (hrefs) made to look like good ol’ regular buttons (easier to do this rather than creating multiple button sets for each language), the default button action code I had working for other sites didn’t work for this particular site.

After coming up with a quick bit of code yesterday for the longdesc comment that Ruth left, I had another idea. I decided to try the the idea using the title attribute on images. Before launching on my idea, I decided to find out if the idea was valid by W3 standards.

I just received this comment today by Ruth and when I read it, I thought, yeah, why not. “longdesc” as the name says provides a longer description to supplement the alt attribute of an image. When I first thought about the problem, my first inclination was to provide a hidden div that held the long description which became visible whenever the image it corresponded to was interacted with. The solution seemed intriguing but I had another thought toying with me at the back of my mind.

The first time you write a plugin, however simple it is, a sense of accomplishment takes over. It might last a couple hours, but those hours are precious as walking on the moon. As a person who recently got addicted to jQuery, the library has certainly lived up to its reputation in helping cutting lines of codes. Without further ado, here’s my first jQuery plugin – a stylesheet switcher.

There would be times you would want to offer your users an indication of the current form element they are on. A simple, non intrusive manner for this would be as simple as changing the background of the element using CSS. Users who are using their keyboard to move through the form elements would also benefit from this as this provides a more obvious cursor position.

In a recent project I was working on, I had a chance of trying out Microformats. Getting the hCard in and running was easy, but at the same time, I wanted to provide a mapping functionality that opened to Google Maps. The only caveat I imposed on myself was not to add any extra markup than necessary.
Why do it this way you might ask? Since the project was basically an online directory, it was easier to use Javascript to handle all the Google map address creation since there were literally thousands of addresses in the directory.