J.me

Best practice to clearing default text with jQuery

Having default text that we later removed when retrieving user input is common in today’s website. Many web developer use this to enhance usability of the website, so user know what to type in what field. There is a lot of way to do this, using both focus and blur event. For example, this is the shortest and easiest way that is commonly used:


 

1

<input type="text" id="example-field" name="example-field" value="Your name" onfocus="if (this.value=='Your name') this.value=''" onblur="if (this.value=='') this.value='Your name'" />

However, this approach will be a pain when you are managing a lot of input fields. You will need to type the default text three times, which can lead to a trivial typo. Also, since we check againts the default value, we will not be able to accept this value. Here is the solution, by using the simplicity and power of jQuery, this is a clean and a better way to do this.

Filter get_terms to return only terms with published post

So you are using custom taxonomy. You add terms to the taxonomy, and add the terms to your posts. Then, you use get_terms and list all your terms. Everything works fine, terms that doesn’t have any posts will not be returned if you set hide_empty argument to true. Now you move some of your posts to draft and you get a problem. Terms that doesn’t have any published posts still returned. This lead to 404 error when you click on the link of this term. It doesn’t look good now, we need to remove term that doesn’t have any published post.

So how to do that? The answer is by using WordPress filter. This piece of code below will solve the problem.

CSS Captcha 0.2 beta

Here I update the CSS Captcha, it is now on 0.2 beta! Thank you for the response of the previous version. While this can work nicely on major new browser, the compatibility with older browser is still minimum. Some mobile browser also haven’t implement some of CSS3 functionality, such as Opera Mini and Opera Mobile. So this is still experimental and shouldn’t be used yet on production website.

Please read the older version information here.

This update is merely a security update. The inline style is randomized now, which make it more difficult for bot to read. The order of the character is also randomized. Sure, it still doesn’t prevent the bot to read or make it impossible to read at all, but it should give more difficulty on creating such bot. 🙂

Still, no support for IE browser at all. 🙁

Change log 0.2b:
– Automatically randomize inline style
– Automatically randomize character order

Demonstration
Download

Enjoy! Any comment is appreciated.

Some useful tips for WordPress custom post type and taxonomy

Custom post type is one of the most powerful WordPress feature. It allows us to create just any content we need, combined with custom taxonomy, the possibility is just endless. WordPress have allowed to have custom post type and taxonomy for some while, but with WordPress 3, everything is far more easier. We have register_post_type and register_taxonomy created specifically for this purpose.

While this two combined to be a wonderful addition for your WordPress blog, there is still a lot of things that is not yet documented. Here is a few useful tips I collected when working with custom post type and taxonomy.

Blog redesign

Welcome to my new redesigned blog! It’s been a year and a half since the last time I changed the design. I have always wanted to change it, but I just always don’t have enough time. 🙂 I know I’m not that good enough in designing, but at least, this is the best design I ever made until now!

The idea behind this design is, to make a simple, usable layout and still looks beautiful. There is a lot of tutorial on the web that helped me when making this. I try to make the website small in size, so you’ll able to load it fast enough. There is also a cool trick on the background, which still make the markup small without much wrapping div over div to accomplish the effect. I also realize the importance on social networking nowadays, so I add links to some of my account. 🙂

Checking the current post type with is_singular function

The WordPress 3 introduce a new feature that let us easily make our own custom post type. This is really a cool feature that give more possibility to customize the WordPress powered website. However, I find that the documentation is not complete yet.

In the recent problem I got, it requires me to check the current post type, something like is_single for post and is_page for page. Luckily enough, the is_singular is now changed to accept a parameter, and that is post type. 🙂

In current codex page, it still not updated. However, now we can use this to check whether we are on our post type page or not.

if ( is_singular(“my-post-type”) )
// whatever you want to do here

Great!

If the_content stop working after upgrading to WordPress 3

Well, this is one common problem happened after upgrading to WordPress 3. After upgrading to WordPress 3, the content is not displayed. This is happened likely because you don’t call the_post before you call the_content.

In previous version of WordPress, when we are on single/page, this worked fine. Some themes didn’t go into the WordPress loop on single/page template, since WordPress already know which page/post to show. This also make sense, single/page only have 1 post to be displayed, so we shouldn’t need to get into the WordPress loop. However, in the recent version, the_content failed to display anything if you don’t call the_post beforehand.

I’m not sure which one should be the correct behavior. In codex, it’s pretty clear that we still need to get into WordPress loop, even though we are in single/page template. However, in theory, calling the_post before calling any other function that supposed to be in the loop should fix it.

Just a quick note, I don’t want to forgot this trivial stuff when I got this problem again in future. 🙂

CSS Captcha 0.1 beta

With coming of the CSS 3, it is now possible to draw using merely HTML and CSS. After seeing some awesome work that can be done with CSS 3, one of my friend suddenly get an idea to create a captcha. Thinking that bot today might haven’t able to pass this kind of captcha, I created this, CSS Captcha. The captcha that didn’t use any image. It just simply using HTML and CSS to draw characters in your screen. I might be not the first one to create this though. 🙂

Click here for demonstration

Moving Stick Figure with CSS 3 and jQuery

With CSS 3, creating a stick figure is easy and fun. But it is even better if it can move. So here it is

Click here for the demo.

This currently worked on Google Chrome and Safari. However, in my test, Safari lagged a lot in the animation. So Google Chrome performed the best!

Enjoy… 😀

Update: This is also submitted on Smashing Magazine CSS 3 Contest, you can preview and download from there too. 🙂

Pure CSS Dropdown with a Little CSS 3 Juice

Menu dropdown is one of the feature that almost every today webs have and it is one of the most popular feature used in the web. In past, such feature need Javascript event. Such as using onMouseOver or onMouseOut event. However, since CSS introduced, the new psuedo classes now have this ability. Also, this solution is work for all major browser, except, of course for the CSS3 juice added, which is currently only worked on web-kit browser such as Chrome and Safari. 🙂