Hi! Last time we learned about basics and advanced techniques of HTML and CSS. Now moving forward here are the amazing tutorials on jQuery for beginners to get started as well as for intermediate and advanced developers. So get your feet in the jQuery.
[digg=http://digg.com/design/25_Tutorials_a_Resources_on_jQuery_Powerusers]
So everywhere you look, you see “jQuery this” and “jQuery that”. For the last year or so, this library has been the darling of the Javascript world. But do you feel that you just can’t seem to learn the dang thing? Do you hate how the existing tutorials assume that you know WAY more than you actually do? If this rings true for you, I can help.
In the words of jQuery’s principal developer, John Resig, “jQuery is a simple JavaScript library that helps you to write the code that you want to write and really simplifies the interaction between JavaScript and HTML.”
As a follow-up to “30 HTML and CSS Best Practices”, this week, we’ll review JavaScript! Once you’ve reviewed the list, be sure to let us know what little tips you’ve come across!
I have been getting familiar with jQuery recently and the more I get into it, the more I’m impressed with it. When I first heard about jQuery I was definitely intimidated by it since I had no previous background with javascript, but I soon realized once you get the basics down its not very hard to pull of some neat effects.
So in my journey to to learn jQuery, I’m trying to learn to do some things that CSS can already do but that jQuery can do “sexier”. Jonathan Snook has an article up “Content Overlay with CSS” in which extra content is revealed in a certain area when it is moused over. This inspired me to try to do something similar with jQuery. My first thought was a thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo.
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.
What’s this? liScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker. To build your news ticker all you need is the above markup: an unordered list with a unique ID.
This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a “write less, do more” Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the details of the CSS.
There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed.
At the University of Minnesota’s web conference, MinneWebCon I gave a talk on, “jQuery Essentials” and it seemed well-received. I enjoyed giving the presentation and I particularly enjoyed it because I finally was able to present in my home state of Minnesota!
Karl is the author of several Javascript books such as Learning jQuery and jQuery Reference Guide. Join us as we take a look inside the mind of a humble and talented developer.
Today, we have another great post related to design a beautiful website using stylish effects with CSS/jQuery. In this, we made a list of 21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs. We obviously cannot cover all of the best available on internet, but we have tried to cover as much as possible.
I’ve had quite a few questions regarding the tooltip on my side navigation so I figured I would write a tutorial on it. The tooltip used on my blog was actually from www.jQueryForDesigners.com, but I decided to write my own with some simple jQuery.
Following on from the infinite carousel, there have been a number of requests asking how to make the scrolling action automatic, so I’ve gone ahead to explain how to achieve this.
Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
Let’s take a look at bulletproof ways to ease into Javascript at an accelerated pace. Javascript is the perfect place to start to learn scripting because it is generally less complex than other scripting languages, and is client-side – meaning that you will be able to test your scripts on your computer as you script it, in real time, without setting up servers or putting forth any more effort than you really need to.
Share Point Artist has taken a truly unique approach to the “My Work” area. What they have created is an animated SlideShow showing their recent work with a nice hover effect for the “Previous” & the “Next” buttons.
The idea is a good one: having the data on the page in a table allows it to be accessible, and the chart can be shown as a visual enhancement. Our attempt at solving the problem uses jQuery and provides several types of graphs, such as Pie, Line, Area, and Bar.
Sometimes it’s just fun to play around with the programming languages we know and see what we can create. 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. I’ll show you how to build it today.
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.
Hi everyone, my name is Toby Pitman and Chris has asked me to write a post about a recent experiment that I posted up on the forum a little while ago. It all started when I was looking at the WebKit blog and saw an article on the new CSS3 animations and the one that caught my eye was ‘rotate’. I started thinking what the hell can you rotate on a webpage (it’s animated GIF’s times ten!). Then it hit me — a clocks hands rotate! Bingo!
When used correctly, jQuery can help you make your website more interactive, interesting and exciting. This article will share some best practices and examples for using the popular Javascript framework to create unobtrusive, accessible DOM scripting effects. The article will explore what constitutes best practices with regard to Javascript and, furthermore, why jQuery is a good choice of a framework to implement best practices.
Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience.
Popular JavaScript libraries such as jQuery, MooTools, Prototype, Dojo and YUI can be great for accomplishing common JavaScript tasks. These libraries provide many functions, whether the matter is related to events or effects or AJAX. And if one of these libraries can’t do the job, a plug-in probably exists that can.
JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.
JavaScript is an integral part of the RIA revolution. JavaScript allows developers to create rich and interactive web interfaces and establish asynchronous communication with servers for constantly up-to-date data without a page refresh.
Aside from being a fun exercise, what purpose does something like this have? None that’s plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers.
Related Posts:
25+ Tips and Tutorials of HTML & CSS
We offer best quality testking 70-680 test papers and EX0-101 materials. You can get our 100% guaranteed F50-532 questions & 350-050 dumps to help you in passing the real exam of 642-415 exam.
7 Comments
Great list Nikhil, so thorough & very timely for me – thanks so much!
Thanks for the appreciation… 🙂
Wow, I hadn’t thought about it that way before. Good write up, very clearly written. Have you written previously about 25+ Tutorials & Resources on jQuery? I’d love to read more.
Thanks Balaji,
This is my first compilation of jQuery. You may find “25+ Tips and Tutorials of HTML & CSS” useful.