Posts filed under ‘non php code’
Dodo’s Text Counter
May 30th, 2008
I needed a text counter at work. I searched around trying to find a jQuery plugin that fits the bill but I didn’t find anything. So I wrote one myself. Check it out 
It should be pretty flexible.
- Requires jQuery
- Define the maximum of characters the user may input
- May be applied to one or more input text or textarea fields
- Also disable the user from entering more characters after s/he reaches the maximum
Dodo’s Picklist
March 23rd, 2008
I needed a pick list script at work. I looked around and found a jQuery plugin but it didn’t do all I wanted so I modified it. I thought I’d share my final results with you. I will contact the original author to see if he wants to include my changes to his version as well.
- Requires jQuery
- A modified version of jqmultiselects jQuery plugin
- Select options sorting code taken from select box manipulation
- Choose one or more to add or remove. Or add all or remove all at once
- Options are sorted to keep them in the same order
IE input background image issue
February 28th, 2008
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.
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.
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
February 27th, 2008
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
February 26th, 2008
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.
lol json tutorial
February 17th, 2008
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
February 16th, 2008
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.
OpenLaszlo
January 31st, 2008
This looks really cool. Maybe I will write a simple guestbook with it.
http://www.openlaszlo.org/demos
Bonus, found a tutorial for OpenLaszlo front end and php back end. Too bad it does require a java container to run. There are ways to get around that I guess.
I was watching this video produced by the author. It’s really very cool!!
transparent PNG background
November 23rd, 2007
I finally found some time to put back the transparent PNG background tutorial. It’s by far the most requested tutorial from Dodo’s New World. People email me from this original post.
Emulate Float Center
August 24th, 2007
This entry talks about how to solve a common design scenario with different approaches. If you are not interested in the long explanation, you can just take a look the end result of my emulation.
(more…)
