Avoid forced social signups and likes

Posted on November 5, 2014 by Clain Dsilva

I 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.

Rating: 0.0/5 (0 votes cast)

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

Posted on November 11, 2012 by Clain Dsilva

JavaScript Cross Fade This 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.

<div id="myElement">This text will toggle fade effects </div>

1	<div id="myElement">This text will toggle fade effects </div>

The JavaScript

function fadeOut(id,val){
  if(isNaN(val)){ val = 9;}
  document.getElementById(id).style.opacity='0.'+val;
  //For IE
  document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
  if(val>0){
    val--;
    setTimeout('fadeOut("'+id+'",'+val+')',90);
  }else{return;}
}

function fadeIn(id,val){
  if(isNaN(val)){ val = 0;}
  document.getElementById(id).style.opacity='0.'+val;
  //For IE
  document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
  
  if(val<9){
    val++;
    setTimeout('fadeIn("'+id+'",'+val+')',90);
   }else{return;}
}

function fadeOut(id,val){

if(isNaN(val)){ val = 9;}

document.getElementById(id).style.opacity='0.'+val;

//For IE

document.getElementById(id).style.filter='alpha(opacity='+val+'0)';

if(val>0){

val--;

setTimeout('fadeOut("'+id+'",'+val+')',90);

}else{return;}

}

function fadeIn(id,val){

if(isNaN(val)){ val = 0;}

document.getElementById(id).style.opacity='0.'+val;

//For IE

document.getElementById(id).style.filter='alpha(opacity='+val+'0)';

if(val<9){

val++;

setTimeout('fadeIn("'+id+'",'+val+')',90);

}else{return;}

}

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

Rating: 5.0/5 (4 votes cast)

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

Posted on November 10, 2012 by Clain Dsilva

Ever 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

<div id="sticky-buble" >Sticky<br />Buble</div>
<div id="sticky-Left-Banner" >Left Margin<br />Sticky</div>
<div id="sticky-center" >Stickey Page Center <br />With Transparency</div>
<div id="sticky-footer" >Stickey Footer</div>

<div id="sticky-buble" >Sticky<br />Buble</div>

<div id="sticky-Left-Banner" >Left Margin<br />Sticky</div>

<div id="sticky-center" >Stickey Page Center <br />With Transparency</div>

<div id="sticky-footer" >Stickey Footer</div>

Rating: 5.0/5 (1 vote cast)

Pure JavaScript SlideShow

Posted on October 30, 2012 by Clain Dsilva

I 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 id="show">
<div id="slideHolder">
<img src="images/slide1.jpg" />
<img src="images/slide2.jpg" />
<img src="images/slide3.jpg" />
<img src="images/slide4.jpg" />
</div>
</div>

</div>

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

#show{
width:800px;
height:250px;
border:8px solid #E9E9E9;
margin:5px auto;
overflow:hidden;
box-shadow:2px 2px 5px #514F4F;
}
#slideHolder{
width:3200px;
position:relative;
}
#slideHolder img{
float:left;
}

#show{

width:800px;

height:250px;

border:8px solid #E9E9E9;

margin:5px auto;

overflow:hidden;

box-shadow:2px 2px 5px #514F4F;

}

#slideHolder{

width:3200px;

position:relative;

}

#slideHolder img{

float:left;

}

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.

Rating: 5.0/5 (1 vote cast)

Animated Twitter Feed widget with Simple JavaScript

Posted on October 28, 2012 by Clain Dsilva

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

JSONP Call
Parsing JSON results [tweets]
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.

Rating: 0.0/5 (0 votes cast)