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.
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.
7. News Ticker
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.
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!
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.
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!
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.