Tag Clouds - Styling and Adding Sort Options. Users have very different opinions when it comes to tag clouds. Some like them, some can’t stand to look at the mess. Whatever your feelings are, categorizing items (i.e. blog posts) using tags have become very popular and widely spread and can’t be avoided in the web today. So we might as well learn how to deal with them. Take a look at the full demo | Download Tag Cloud Style & Sort Overview This article consists of 2 parts: one is marking up and styling tags and the second is adding behavior to tag cloud using client-side script. ) tutorials elsewhere.
Tag cloud is a list of links. <div class="tags"><ul><li class="tag1"><a href="#">Lorem ipsum</a></li></ul></div> Based on certain parameters, tag cloud items have different visual treatment. The other option is to use color and contrast to achieve the same goal. And… Action! Many visitors find tag clouds too confusing to use, so why not provide them with an alternative? Check out this (static) demo page with both styles. Enjoyed the article? Easy Display Switch with CSS and jQuery. Get the FlatPix UI Kit for only $7 - Learn More or Buy Now This tutorial was originally put together by Soh Tanaka during the Spring of 2009.
Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch. I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. Getting Started All the functionality we need can be written in plain jQuery without any external plugins. <! The internal body structure contains an outer wrapper div with the ID #w to center everything. <div id="w"><span class="options">Switch Options: <a href="#" id="details-list" class="sorticon active" title="List View"><img src="images/details-list.png" alt="list"></a><a href="#" id="thumbnails-list" class="sorticon" title="Thumbnail View"><img src="images/thumbnails-list.png" alt="thumbnails"></a></span><!
Page Design with CSS Closing. How to Mimic the iGoogle Interface - NETTUTS. jQuery 1.4.3 Offline Learning Kit. Hey guys. Quick post for you today. So by now, chances are you’ve had an opportunity to play around with jQuery 1.5 (and 1.5.1) and you may have even checked out some of the great new Deferred features that that release came with. Today I wanted to share an offline learning pack for anyone interested in tweaking their jQuery skills offline. What does this learning pack come with? Well, for starters it will include printable reference sheets so that whenever you’re wondering what selector or method might be best to use, you’ll have access to material that can assist with that. The pack also comes with all the 1.5.1 documentation in an easily browseable offline format (with all our API examples included) and a chrome extension allowing you to easily search the API offline while you code. The 1.5.1 Offline Learning Kit Includes For record purposes, if you’re interested in picking up the 1.4.3 kit from last year, I’m going to leave it up below.
The 1.4.3 Offline Learning Kit Includes. How to build a web widget (using jQuery) - Alex Marandon. Published on 15 June 2010, updated on 10 February 2015, 110 Comments Introduction I created some web widgets for the London’s Design Museum and learned a few useful things in the process. Although all the necessary information can be found on the web, I couldn’t find a really comprehensive guide about doing this with jQuery so I decided to write this one. I’ll cover only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily.
The interesting points will be: ensure the widget’s code doesn’t accidentally mess up with the rest of the page, dynamically load external CSS and JavaScript files, bypass browsers’ single-origin policy using JSONP. Don’t worry if all this doesn’t make sense to you yet, we’ll see in details what these techniques are used for in the context of building web widgets. That’s really all that a web site owner would need to include our widget on her pages. Can’t it be even simpler? 35 jQuery Tutorials You Must Know. Improve your jQuery - 25 excellent tips.