Monthly Archives: February 2008

new millennium with web 2.0

Posted on by

After much anticipation, it’s finally here!!

I present you the completely rewritten New Millennium – New Millennium with web 2.0 :)

It’s done in ajax with the help of jQuery. The idea is to create a site with no page refresh. Although it was fun, toward the end it was getting a bit tedious. I felt like doing a cross-stitch. Overall, I found ajax coding with no IDE support hard to debug. Some of the bugs eluded me quite a bit. I’ve done extensive testing on the final product. I hope it’s a good one.

It has been a very nice learning experience. I think jQuery is awesome but it’s a client side only library. So if I go try GWT and I should have a very good comparison.

IE input background image issue

Posted on by

IE strikes AGAIN!

Just when I thought I was 100% done with the revamp of New Millennium, I noticed an UI issue in IE. I’m surprised I didn’t notice this before. It shouldn’t be anything new. I did some google research but didn’t find anyone mentioning it either.

Applying background image to input tags should be nothing new. You see the little search icons for search inputs all over the web now but did anyone notice in IE if you have a background image set to no-repeat and someone puts some very LONG text in the input field, the background image SCROLLS with the text? This causes very odd behavior.

Here’s my input background-image. I pick this one so I can do background image affect on hover by manipulating background-position.
background image
CSS:

input.formInput {
	width: 255px;
	background: #a99787 url(formInput.gif) left top no-repeat;
	border: 0;
	padding: 3px;
	height: 22px;
	color: #302721;
}
input.formInput:hover,
input.formInput:focus {
	background-position: -261px top;
}

In Firefox, it looks great but in IE if you start putting very looooooooooooooooong text in the input, it will look like crap.
background image looks like crap in IE

Try it out yourself

So does anyone have a good solution for this issue?

If I were to do it, I’d wrap the input in a container and put the background image on the container and hopefully by applying the hover affect on the container, it would get the desirable effect. Of course I will need to test out my theory. But it’s past midnight so I should get some sleep for now.

AND it does work. check it out.

Man, I just love IE.

jQuery and Tamper data rock

Posted on by

I’ve been working on a UI design at work and some of the build in components have border=”1″ on their generated table code. To achieve a consistent look, I always want border=”0″ on the table so I can control the table border with CSS. There is no way as far as I know you can get rid of the table border with CSS once the source have border=”1″ in the table tag. But you can get rid of all table borders with this single line of code in jQuery:

$("table[border!='0']").attr("border", "0");

It completely rules!!

While debugging, I also found this awesome Firefox plugin: Tamper data. It lets you hijack a post/get http request on the fly so you can view and modify the submitted parameters. I used to use WebScarab. But this is so much lighter weight. Although it only works in Firefox while WebScarab, a proxy server, would work with any browsers.

jQuery plugin – tableRowCheckboxToggle

Posted on by

So since I’ve been playing with jQuery on my spare time while putting together an ajax site, I’ve decided to tackle a design issue I’ve run into many times at work with jQuery. This idea originally comes from phpMyAdmin. If you’ve used that software, you know that when you click on any table row, it automatically toggles the checked state of the checkbox in the first cell. I think that’s an extremely user friendly thing to have since checkboxes are so small and hard to click on.

Let me present you my friends, my first jQuery plugin. It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, I added an initialization step in the script that correctly marks a row when it’s considered checked on page load.

tableRowCheckboxToggle

  • It generically adds the toggle checkbox function to any table rows you specify based on the css class names.
  • It will by default toggle any checkboxes within the table row.
  • You can manually exclude checkboxes based on name, id or css classes in the script.
  • If there is any applicable checkboxes inside of the table row that are checked, it will apply a class to the table row.
  • It also marks table rows when there are checked applicable checkboxes on page load.

Download version 1.0

Live demonstration

jQuery plugin tableRowCheckboxToggle

laptop middle mouse button

Posted on by

I’ve been complaining as long as I’ve been using a laptop that I miss a middle mouse button because I’m so used to using it on my regular mouse esp. to open pages in new tabs in Firefox.

I accidentally discovered today that at least on my laptop Dell Inspiron 6400, if you click on the left and right buttons simultaneously, it acts as a middle button click.

For example, I can click on any links in Firefox with both buttons to open them in new tabs.

lol json tutorial

Posted on by

In my attempt to rewrite new millennium to make it 100% page refresh free, I’ve decided to learn more about json so I can use it with ajax. This is the first json tutorial that popped up in google. Hilarious stuff! I’m about 80% done with the rewrite of new millennium btw. So expected to see its new face on the web in a week or so. The process has been exciting and rewarding except I was pretty disgusted with my old code. Haha, live and learn :)

Oh yea, if you want to test the json you whipped together, you might find this validator useful. And also jQuery’s json lib is my friend. This is a good tutorial to generate json with PHP.

perhaps javascript is not ready for xhtml 1.1 yet

Posted on by

While making a new layout for new millennium, I used a jquery plugin for a certain visual effect. I coded my source to be validated against Xhtml 1.1. If you validate your source recently, you’d notice that W3C now gives you a warning if your xhtml is not served with application/xhtml+xml mimeType. As perfectionist, I changed my mimeType to match but only to find a javascript bug now exists in my code. Reported by firebug, here’s the error message:

An invalid or illegal string was specified" code: "12

I pulled the latest jquery version but no luck. After a bit testing, it seems like it’s not an issue with the jquery lib but the plugin’s code. I posted on the author’s blog about the issue but after reading The Road to XHTML 2.0: MIME Types that was written almost 5 years ago, perhaps javascript is still not ready for application/xhtml+xml mimeType.

The fact that all the sudden it cares about case-sensitive is a big issue. Sounds like a lot of work to be done converting javascript to the new standards.

After thinking about it for a little, I chose to revert my doc type to Xhtml 1.0 Strict.

adobe flex

Posted on by

i’m doing some more reading and researching on open laszlo. it’s kinda funny that i found a blog entry that compares open laszlo and adobe flex. i’ve just recently been to a jug meeting that presented flex. due to technology difficulties the presenter was not able to show us live the flex IDE. here’s a webcast for the flex IDE.

another interesting note. the two sides of RIA :) Do we really need it? vs. Why not?

Although I do not doubt that RIA is the future of web applications. I really don’t think the web is ready for it yet. For example, I was just thinking if I use a full scaled open laszlo app like this one, my firefox won’t even prompt to remember my password at the login. Browsers are still very much build for the traditional web apps. In the sense, ajax has the upper hand. It offers a more smooth transition. However, flash can be a lot more integrated.