How To Cross Fade Anything With JavaScript [JavaScript Fade Effect]

JavaScript Cross FadeThis is one sure question that every budding web developer would have in his mind.  Today I am going to explain how to achieve  cross fade effect using JavaScript and CSS opacity property. As always lets use pure 100% home grown JavaScript. No frameworks are used.

Demo

The HTML

Its necessary for the element to have an id to identify for the cross fade function.

 

The JavaScript

 

 

You might have noticed two functions fadeOut and fadeIn. The function names define what they do.

read more

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)

Pure CSS Sticky Elements, Sticky Footer, Sticky Banner, Sticky Margin widgets

Pure CSS Sticky ElementsEver wonder how those sticky footer stays intact at the bottom of the page? And those lovely bubbles that floats over the page even while scrolling? fed up of trying Jquery and other scripts library available? Here is the quick and complete CSS solution to make any HTML elements sticky. Like my previous Post, all the codes are pure 100% home made CSS.. that means no CSS/ JavaScript library is used.

Lets get Started

Demo Download Code

The HTML

We are making 4 sticky HTML elements Sticky buble,  Sticky left margin banner, Sticky footer, Sticky page center like a light box

 

read more

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

Pure JavaScript SlideShow

pure javascript slide showI have been always fascinated about the slideshows, how do they make one. Well here is the basic slideshow with pure JavaScript. No frameworks are used, No chunks of codes,  Simple Slideshow with 100% pure home grown JavaScript.

Demo Download Code

Lets start with the HTML.

 

  • div “show ” – this is where the images are displayed [ fixed width/ height, overflow hidden]
  • div “slideHolder” – is the div that holds the slides [relative to "show", images float left]

Here is the CSS

 

Slide Concept

Use the margin left property to move the slideHolder div inwards show div.  The overflowing part is hidden by the css. A timer function is used to iteratively reduce the margin left , lets call the function as slider(). A function named revert() is used to revert back the margins to its original position.

read more

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

Animated Twitter Feed widget with Simple JavaScript

Demo Download Code
Here is a quick implementation of Twitter Feed using Simple JavaScript, No frameworks are used. Lets start with the HTML

<div id=”feedWraper”>
<div id=”twitterFeed”></div>
<div id=”feedCache”></div>
</div>

  • “feedWraper ” holds the widget , hence its width and height should be fixed.
  • “twitterFeed” contains all the tweets , and its will be animated with simple JavaScript
  • “feedCache” is a hidden div that stores the tweets.

 

The whole process can be divided into three

  1. JSONP Call
  2. Parsing JSON results [tweets]
  3. Animation

For the JSON call to work properly, all the supporting elements and reference functions should be available before the JSON request. That means all the HTML , CSS and JavaScript for the widget should be on the top and JSON Call should be at the bottom.

read more

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Moo Bar – Bar Chart with MooTools

Moo-Bar Mootools bar chart Introducing Moo Bar  bar chart plugin for easy HTML bar chart creation.

Features

  • HTML friendly
  • No canvas element required
  • Cross browser compatible

Written for  Moo tools version  1.2  and above, works fine with Moo tools 1.4. The plugin features a fully configurable moo bar class .  See the live demo here.

Download Moo Bar

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)