Avoid forced social signups and likes

Forced likesI just stumbled upon this website and feel really pathetic to see a forced sign up / like button, Its to be noted that you can enforce  a like or social sign up but they do not actually brings you good audience.

A like or thumps up comes for a good content, hiding a content and asking for like and share is a very bad strategy, audience are bound to bounce off form those pages.

Any information that is blogged should be available for free.  Technically good article will be ranked high, say for example Wikipedia articles, stack overflow answers, WordPress forums, David walsh’s blog. None of them implement any forced Likes or social shares.

read more

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

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)