News Scroller using Dojo

Create a Simple News Scroller Using Dojo.The HTML<div id="news-feed"> <ul> <li><strong style="font-size:14px;">News Item 1</strong><br>Pellentesque habitant morbi...<a href="#">Read More</a></li> <li><strong style="font-size:14px;">News Item 2</strong><br>Pellentesque habitant morbi...<a href="/news/2">Read More</a></li> [...]

Shutter Effect with jQuery

This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website which displays a set of featured photos with a camera shutter effect.jquery.shutter.css<style>#container{ width:640px; height:400px; margin:0 auto; border:5px solid #fff; overflow:hidden; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px rgba(0, 0, [...]

Circulate jQuery Plugin

Circulate, a jQuery plugin make your images circulate around your page. This plugin requires the jQuery library as well as the easing plugin, just include a small piece of code to get the images circula [...]

Dojo Lightbox with dojox.image.Lightbox

The dojox.image.Lightbox resource has many cool features:Integrated theming and imagesKeyboard accessibleResizes when the viewport changesFlexible with numerous optionsDeclarative or Programmatic instance creationWorks with Dojo data storesLet me show you just how easy it is to use Dojo's Lightbox solution!The CSSdojox.image.Lightboxdoesn't require any of the Dijit themes but does require its own [...]

Exploding Logo with CSS3 and jQuery

Ryan's CSS animation library, available with vanilla JavaScript, MooTools, or jQuery, and can only be described as a fucking work of art. His animation library is mobile-enabled, works a variety of A-grade browsers, and is very compact.The HTMLThe exploding element can be of any type, but for the purposes of this example, we'll use an A element with a background image:<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhsm0TORTzqFA-JOb2iKPNUxEkFB9pRMQTLPMaemMJruyyb-g69S47gnKXxPmzaEewSAQHp4RU_t21JLAAlfLZBrz3hJD0jxMotKVOqFF6a80moJuMqo-BleIcgfvyXmwmd1xvIr7n0nSo/s320/Wayang+Kulit.jpg" [...]

Fading and Spinning Icons with CSS3 and jQuery

The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons. Due to popular request, I've duplicated the effect with another popular JavaScript toolkit: jQuery.The HTML<div style="padding:20px 0;position:relative;"><div id="followIcons"><a style="top: 0.653561px; [...]

Create a Spinning Effect with CSS3

They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects is the spinning, zooming CSS animation.The CSSThe first task is creating the base animation with @-webkit-keyframes:<style type="text/css">@-webkit-keyframes [...]

Useful jQuery

Overlay-like Effect with jQuery Today we will create a slick overlay effect with jQuery that does not use an overlay.Fullscreen Gallery with Thumbnail Flip In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. Making a Flickr-powered SlideshowToday [...]

Creating Gradients with CSS3 and HTML5

DIVs with Rounded Corners in CSS3Tutorial about creating Gradients with CSS3.How to create rounded corners with CSS3.5 Useful CSS3 Properties You Need to KnowBrief review of useful CSS3 properties.Border Radius: CSS Rounded Corners Without ImagesOne more tutorial about CSS3 Rounded cornersCSS Browser Extensions: Vendor Specific PropertiesThis article tells about specific properties of various browsers. [...]