Here is list of tutorials combining HTML,CSS,PHP and JQuery, including demo page and download page on tutorial source.
In this tutorial, we will look at using jQuery to call Twitter’s API and then use the results to create a widget for a blog or personal website that shows what hours during the day we tweet at the most.
News Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.
When you submit a form, it will look for inputs with predefined class selectors, and validate them accordingly to their type. It also does on the fly validation when you click outside of the input. When validating on submit , every errors will appear in absolute position above the input in question, and slide the scroll bar to this first error (diminish your browser window if you don’t see the effect).
One of the most useful parts of jQuery is it’s ability to attach events to objects within a web page. When these events are triggered you can then use a custom function to do pretty much whatever you want with the event. So I thought I would share with you an introduction to jQuery Events.
Of course Nielsen is right when he talks about users making more errors and feeling less confident when they can’t see what they’re typing while filling in forms. That may have been the reason why Apple
developed implemented an alternative method on iPhone/iPod Touch: passwords get masked while typing but the last character in row is shown in plain text.
This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.
I also have a tutorial on coding up a professional menu in case rotating content with tabs is not your thing. You can view a working demo of this tutorial in case you’re curious and feel free to download the source files for reference.
I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked.
Well, this is not new and can be easily found on jQuery UI but you will have to download jQuery UI and use it as if it is a plugin. But for my case, i wanted to find out and construct an easy and nice slider for myself.
The more I learn about jQuery, the more natural it feels. Probably because of how closely tied to CSS it is. From a design perspective, the syntax for jQuery is:
So now instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.
For one of my projects recently I was playing about with search boxes and came up with a cool drop down search panel. So I thought I would share with you how I made the panel using some jQuery and CSS sprites.
In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.
I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I’ll use the exact same CSS and HTML as yesterday.
After publishing ScheduledTweets yesterday, I received e-mails asking “how the drag’n drop & saving the new positions to the database was working”.