Articles > Tag > Tutorial

Due to popular demand, this tutorial is actually a revisit from my previous Twitter tutorial - Create a dead simple Twitter feed with jQuery. A lot of readers requested to be able to parse hashtag. So, I've decided to make a new version that able to do both plus some enhancements.

As a lead frontend developer, it's my responsibility to make sure I'm keeping up-to-date with the web development industry trend. I reckon it's important and should be part of my job because my company will have to rely on my input regarding the best solution or possible technical difficulties during the development process. From HTML to HTML5, CSS to CSS3, Javascript to Javascript framework, it's a fast pace industry and if you leave behind, you're out of the market!

Continued from our previous posts on Tips, Tricks and Tools You Will Need to Start Using HTML5 Today. Now we present the second series about References, Presentation, E-Book and Tutorials.

Today, we are going to build a TAB interface. Well, not your ordinary TAB interface, this version come with history support. Yes, you can use Back and Forward button in your browsers, and also it has an URL for each TAB as well.

Browse through dozens of job offers for web professionals including design jobs and tech jobs

This tutorial will guide you how to build a jQuery script that reads and parses XML file and display data in random order. I made this because I believe some of us might get this kind of request from clients. Eg, load the frontpage promotional tiles randomly among 8 tiles but display only 4 of them and JavaScript is the only option to do it. However, one should aware the pros and cons of this approach:

On Queness, I have developed more than 40 jQuery tutorials. I'm absolutely a big fan of jQuery. It's simplicity encourages a lot of web designers and developers to pick it up and start develop their own scripts that do what they desired. Combined with CSS3, web pages just won't be the same again. Just recently, I saw a few pretty cool tutorials regarding jQuery and CSS3, check out the list below, pretty sure it will sharpen up your web dev skill. Enjoy!

Most likely, you have used Google to search something so you're probably familiar with their search form. In this tutorial, I'll show you how to re-create it with some lightweight HTML, CSS and JQuery combination. Google has an ingenious way of adding subtle usability enhancements. In their search input field, you may or may not have noticed that the "X" delete button appears as you type something and disappears if the field is empty. With a few lines of JQuery, you can implement the same effect. I'll also show you how to re-create Google's new search button with some simple CSS settings. We'll put it all together and you'll have a minimal Google search form clone that you can use on your own website.

Designing web layouts is a very profitable job nowadays with so many marketplaces available. If you create wordpress themes, or simple web layouts you should learn how to design websites in a proper way using Photoshop. Bellow you will find one of the best 30 web layout tutorials for: hosting layouts, Wordpress layouts, business layouts.

13 Jan 2011, Australia suffered a catastrophic flood disaster, almost 75% of Queensland was affected. Inland Tsunami in Toowoomba, evacuation of Brisbane city, it was a total chaos in the entire state. Sudden flood which lead to torrential and ferocious flood destroyed homes and killed many. It will take 2 years to recover. If you wish to donate, please visit Queensland Government State Website.

A post about jQuery plugins and tutorials. It has been a while since I publish post about jQuery plugins, and the following are all brand new jQuery resources that I pretty sure will be really useful for your project. Worth to be mentioned is the Face detection script, I never thought jQuery will able to do this until I found this plugins, brilliant.

Alright, back to jQuery tutorial after a long break. This time will be pretty simple script that hide the extra length of a long paragraph and toggle hide and show the extra sentence. I created it few days ago for the comment moderation in the backend, normally what I do is list out all the comment (with pagination of course) and display the first 20 words of the comment (following by 3 dots :)), and also a set of control such as view, approve and delete buttons. However, I found it annoying because if the comment is too long, you can't really read the comment from the list, because of that I will have to click on the view button to view it in another page. That's waste of time and bandwidth if you have a lot of comments to approve!

Today, we will be learning something about accessiblity. Well, some people may think that it's not important browsers has the zoom in and zoom out functionality anyway, oh well, that's quite true but design wise, when you use the zoom feature on browsers, it's more likely to ruin your design as well. So, we have this javascript font resizer that allow you to resize some section of your text instead of everything.

Another round up for all the tutorials I have made. Can't believe it I have made another 21 tutorials and there are 42 tutorials focus on different design elements such as horizontal, vertical menu, accordion, toggle content, sliding, gallery and lot more! If you want to check back my old round up, you can visit this link - 21 Simple and Useful jQuery Tutorials You Might Have Missed

I'm writing this tutorial in an Airport, heading back to my home country for a short holiday. It was a long day and had a farewell lunch with my fellow colleague. He got a better job offer, resigned and moved on. Well, that's life, had a great time working with him accross different projects, no doubt about it, I learnt heaps of stuff from him. I'm pretty sure I'll miss his daily quotes, jokes and whinging.

Long long time ago, my friend had written a jQuery tutorial about spotlight effect called - making a cool spotlight efect with jQuery, he got this inspiration from Sikker website that uses the similar effect for all his portfolios. I think that's cool, so I decided to spice thing up a little bit by adding a caption into it.

There are heaps of image sliders out there. Javscript plugins, tutorials, inspirational posts are everywhere! :) This time, my search is not limited to javascript only, but flash too. I have filtered out simple javascript slider that uses fadein/fadeout and sliding and choose slider with beautiful transition and some flash sliders as well.

There are a lot of solutions to style a block with background. Few days ago, I was assigned to work on bits and pieces of an almost completed website, I was fixing some layout bugs in IEs and then I discovered that the background of the content was a big background image, and different height for different page! Well, to be honest, that's the quickest way but it brings more trouble when we fit in more content in it, I ended up have to resize most of them to fit the new content. It was a nightmare and too late to fix it, the website has to go live.

Don't you feel annoyed when you see the inconsistencies of submit buttons in different browsers on different platform? Well, I do. The thing is, we can't really duplicate the submit button without the help of javascript, what if the user had javascript disabled? Alright, we will be creating a button that will degrade gracefully. It's a bit tricky and pretty simple.

There are heaps of image galleries out there but don't know which one is the best? I have searched through the Internet and I found these image galleries that come with a filmstrip (thumbnails). Most of the are pretty easy to implement, and if you want to create a custom jQuery script, no problems at all because some of them are presented in tutorials.

Alright fellow web designers and developers. We are going to do something a little bit more hardcore this time. There are heaps of jQuery plugins out there, but it's hard to find something that suit us. So, this tutorial will teach you how to be creative and create a customize plugin.

Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my project which has a blue sky with clouds and it makes the whole website came alive. I think that's pretty impressive.

Greeting, I haven't posted jQuery tutorial for quite a while now because I have been busy sketching and working on the redesign of Queness and other projects. Yep, something exciting is coming soon :)

This is my fouth tutorial about thumbnail effect. This time is the well known sliding door effect that slide the top layer to top, bottom, left or right direction to reveal the content underneath.