Effective steps to replace old synchronous Adsense code with new asynchronous code in blogger blogs.



On 2-7-2013 , +Google AdSense  team announced that they are giving a new option for publishers to load Google adsense ads asynchronously.
As they mentioned in there official Google+ Post, new asynchronous ad code lets Website content load quicker for users when they experience intermittent connection problems.

Why Asynchronous?


<script> tags will block HTML renderer if they are found in between any other elements.
That means if you are loading a huge JavaScript file with a blocking <script>  tag at the top of markup, you will not see any progress on the page as the mentioned script is getting loaded and evaluated.
Here adding async tag will help the performance.
if we tag with a aync, the browser will no longer stop the html renderer process,and it will load and evaluated the script block asynchronously.

How to replace old code with Asynchronous adsense code in blogger blog?


If you have approved by adsense,and enabled that in your blogger powered blog, blogger will automatically show ads in posts and sidebar. and you might have added extra ad codes using blogger template editor or "Add a widget". option in layout tab.

Lets see how to change default adsense code to new one. please not that this is not mandatory. its optional.


  • Backup template



Before make any change to your template, Backup your template. if you don't know how, here is an article that will help you to backup your template.

  • Check Earnings tab.

Open blog's dashboard, and on left side, click on the tab named "Earnings". Make sure you have set "true" for "Show ads on blog "   option. and save changes.


  • Optimize template for new adsense code



Open Template Html editor. and find </head> , if you don't know how to search inside blogger template, here is an article that will help you.

Just before the closing head tag, Add below script
 <script async="async" src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Save this for now


  • Replace old adsense script blocks with new asynchronous codes.



Search for "<data:adcode/>" (without quotes), inside blogger template.
Replace that with your new asynchronous code you copied from "Myads" section in adsense dashboard.

It will look similar to this.

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="yyyyyyyyyy"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

PLEASE NOTE that you dont have to call  <script async="async" src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
script everywhere.  as +Michael Kleber  said in +Google Developers  blog, only calling on top of document is enough even if you have multiple ads in page .

If you have added other ads manually ,using 'Add a gadget' option in layout tab, Open layout tab, edit gadget contents, and replace the old adsense code with new one.

  • Save template. and test your blog.


Troubleshoot


If you are getting error message,  Error parsing XML, line --, column --: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.Make Sure your async is followed by the ="async" property. (async="async").

If you found any other problems setting it up, feel free to start discussion in comments.

Read Article →

How to add a class to any element using jQuery or JavaScript


If you are a good web designer, you will always think of how to automate things without wasting our valuable time.
This is one of the question every web designer/web developer thinks of. how to automate things!

Here we will discuss about how to add classes to elements automatically on page load.
lets have a look at what are the benefits of assigning classes automatically.

  • Spend no time to add all classes by hand
  • Accuracy
  • Faster Page loads

jQuery's Basic syntax to add class is 
$("elementID").addClass("ClassName")
To use jQuery,you will have to add jQuery library between your<head></head> tags.
If you have not yet included jQuery in your webpages, its the time to do that. dont be afraid that the size of jQuery Script will affect your pageloading time,because it is less than 100 kb if minimized.(Smaller than a normal image i would say). 
To Call jQuery, find </head> tag in your code.then Copy and paste the below code just before that </head> tag.
<script src='//code.jquery.com/jquery-1.8.0.min.js' type='text/javascript'></script>

How to add a class to all "img" tags at a time using jQuery or JavaScript

Imagine that you have  many images in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-img-tags" to all <img>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "img" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("img").addClass("my-sample-class-for-all-img-tags");
});
</script>

JavaScript Code for adding a class to all "img" tag in document :

<script type='text/JavaScript'>
var images = document.getElementsByTagName("img");
var i;
for(i = 0; i < images.length; i++) {
    images[i].className += " my-sample-class-for-all-img-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-img-tags" will be added to all img tags inside the webpage.

How to add a class to all pre tags at a time using jQuery or JavaScript

Imagine that you have  many pre tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-pre-tags" to all <pre>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "pre" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("pre").addClass("my-sample-class-for-all-pre-tags");
});
</script>

JavaScript Code for adding a class to all "pre" tag in document :

<script type='text/JavaScript'>
var pres = document.getElementsByTagName("pre");
var i;
for(i = 0; i < pres.length; i++) {
    pres[i].className += " my-sample-class-for-all-pre-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-pre-tags" will be added to all pre tags inside the webpage.


How to add a class to all code tags at a time using jQuery or JavaScript

Imagine that you have  many <code> tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-code-tags" to all <code>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "code" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("code").addClass("my-sample-class-for-all-code-tags");
});
</script>

JavaScript Code for adding a class to all "img" tag in document :

<script type='text/JavaScript'>
var codes = document.getElementsByTagName("code");
var i;
for(i = 0; i < codes.length; i++) {
    codes[i].className += " my-sample-class-for-all-code-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-code-tags" will be added to all <code> tags inside the webpage.


How to add a class to all div tags at a time using jQuery or JavaScript

If you want to automate the process of adding a class called "my-sample-class-for-all-div-tags" to all <div>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "img" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("div").addClass("my-sample-class-for-all-div-tags");
});
</script>

JavaScript Code for adding a class to all "div" tag in document :

<script type='text/JavaScript'>
var divs = document.getElementsByTagName("div");
var i;
for(i = 0; i < divs.length; i++) {
    divs[i].className += " my-sample-class-for-all-div-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-div-tags" will be added to all div tags inside the webpage.

How to add a class to all button tags at a time using jQuery or JavaScript

Imagine that you have  <button> tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-button-tags" to all <button>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "img" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("button").addClass("my-sample-class-for-all-button-tags");
});
</script>

JavaScript Code for adding a class to all "img" tag in document :

<script type='text/JavaScript'>
var buttons = document.getElementsByTagName("button");
var i;
for(i = 0; i < buttons.length; i++) {
    buttons[i].className += " my-sample-class-for-all-button-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-button-tags" will be added to all <button> tags inside the webpage.

How to add a class to all input tags at a time using jQuery or JavaScript

Imagine that you have  <input> tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-input-tags" to all <input>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "input" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("input").addClass("my-sample-class-for-all-input-tags");
});
</script>

JavaScript Code for adding a class to all "input" tag in document :

<script type='text/JavaScript'>
var inputs = document.getElementsByTagName("input");
var i;
for(i = 0; i < inputs.length; i++) {
    inputs[i].className += " my-sample-class-for-all-input-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-input-tags" will be added to all <input> tags inside the webpage.

How to add a class to all textarea tags at a time using jQuery or JavaScript

Imagine that you have  <textarea> tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-textarea-tags" to all <textarea>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "textarea" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("textarea").addClass("my-sample-class-for-all-textarea-tags");
});
</script>

JavaScript Code for adding a class to all "textarea" tag in document :

<script type='text/JavaScript'>
var textareas = document.getElementsByTagName("textarea");
var i;
for(i = 0; i < textareas.length; i++) {
    textareas[i].className += " my-sample-class-for-all-textarea-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-textarea-tags" will be added to all <textarea> tags inside the webpage.

How to add a class to all span tags at a time using jQuery or JavaScript

Imagine that you have  <span> tags used in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-span-tags" to all <span>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "span" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("span").addClass("my-sample-class-for-all-span-tags");
});
</script>

JavaScript Code for adding a class to all "span" tag in document :

<script type='text/JavaScript'>
var spans = document.getElementsByTagName("span");
var i;
for(i = 0; i < spans.length; i++) {
    spans[i].className += " my-sample-class-for-all-span-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-span-tags" will be added to all Span tags inside the webpage.

How to add a class to html tag on page load using jQuery or JavaScript

If you want to add a class to your <html> tag on pageload,Add below code just before closing body tag (</body>).

jQuery Script for adding a class to "html" tag

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("html").addClass("my-sample-class-for-html-tag");
});
</script>

JavaScript Code for adding a class to "html" tag

<script type='text/JavaScript'>
var htmltag = document.getElementsByTagName("html");
htmltag[0].className += " my-sample-class-for-html-tag";
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-html-tag" will be added to <html> tag.

How to add a class to body tag on page load using jQuery or JavaScript

If you want to add a class to your <body> tag on pageload,Add below code just before closing body tag (</body>).

jQuery Script for adding a class to "body" tag

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("body").addClass("my-sample-class-for-body-tag");
});
</script>

JavaScript Code for adding a class to "body" tag 

<script type='text/JavaScript'>
var bodytag = document.getElementsByTagName("body");
bodytag[0].className += " my-sample-class-for-body-tag";
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-body-tag" will be added to <body> tag.

How to add a class to an element with specific class on page load using jQuery or JavaScript

If you want to add a class to an element with specific class on pageload,Add below code just before closing body tag (</body>).

jQuery Script for adding a class to an element with specifc class.

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$(".existing-class-name").addClass("my-sample-class-for-element-with-a-class-of-existing-class-name");
});
</script>

JavaScript Code for adding a class to an element with specifc class.

<script type='text/JavaScript'>
var classes = document.getElementsByClassName("existing-class-name-to-find");
var i;
for(i = 0; i < classes.length; i++) {
    classes[i].className += " my-sample-class-for-all-elements-with-class-of-existing-class-name-to-find";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-elements-with-class-of-existing-class-name-to-find" will be added to all elements which was having a "existing-class-name-to-find" class.


Important Notes:

  • Dont forget to include jQuery library before you experiment with jquery sample codes above,a small description on how to add jQuery to your page is explained in the beginning of this article.
  • Dont forget to replace class names and tags with your own classnames which you used in your blog or website.

Press ctrl+D to bookmark and Please leave your comments and thoughts below :)


Read Article →

Open new window with javascript simple tutorial

In this tutorial, you are going to learn how to open a new window with javascript.
It will be useful if you decide to show preview of something,or to open on a buttonclick.
Basic code looks likes this ->

window.open(URL,name,Attributes) ;
Where URL is your specified URL to open,  name is the title or name for the tab,attributes are the optional attributes we can use.
Optional Attributes are

  • width = 300 


You can specify width of the new window. it can be any.

  • height = 400  


You can specify height of the new window. it can be any.

  • resizable = yes or no / 0 or 1 


This resizable attribute can be used to control whether you want the window can be resized or not.

  • scrollbars = yes or no / 0 or 1


This attribute can be used to show or hide scrollbars on the new window.

  • toolbar = yes or no / 0 or 1


It can be used to show or hide toolbar in the new window, toolbar is where your browser's back,forward,reload buttons appears,

  • location = yes or no / 0 or 1


To show or hide location,url box,or where the address of page appears.

  • directories = yes or no / 0 or 1


To show or hide extra tools on ur browsers toolbar.

  • status = yes or no / 0 or 1


To show or hide status bar at the bottom of th window .

  • menubar = yes or no / 0 or 1


To show or hide menubar of your browser. file ,edit, etc.

  • copyhistory = yes or no / 0 or 1


To copy history of old window to new window, or not.
<form> <input type="button" value="New Window!" onClick="window.open('http://www.google.com','google','width=640,height=460')"/>
 </form>
Check this live example



For an empty window (not for tab), please use _blank

window.open('', '_blank', 'toolbar=0,location=0,menubar=0');
If you want to do it with a function,

<script type="text/javascript">
function open_new_window(URL)
{
NewWindow=window.open(URL,"_blank","toolbar=no,menubar=0,status=0,copyhistory=0,scrollbars=yes,resizable=1,location=0,Width=1500,Height=760") ;
NewWindow.location = URL;
}
</script>
Implimentation of this function Example

<a href="#" onClick="open_new_window('http://www.google.com');">google search</a>

<a href="#" onClick="open_new_window('http://www.yahoo.com');">yahoo search</a>

 Set position of new window
screenX  number in pixels, the position of window from top. this code is for netscape browsers.
screenY  number in pixels, the position of window from left. this code is for netscape browsers.
top  number in pixels, the position of window from top. this code is for IE 4+. 4.
left  number in pixels, the position of window from left. this code is for IE 4+. 4.

Example Code

<form>
<input type="button" value="New Window!" onClick="window.open('http://google.com','google search','width=700,height=600,left=0,top=100,screenX=0,screenY=100')">
</form>

To close an opened window, use window.close();

Example code
<form>
<input type="button" value="Close Window" onClick="window.close()">
</form>

Read Article →

Another Beautiful Firework with JavaScript

Here is another firework effect made with simple javascript.
To add this to your page or blog, just copy and paste this code to your page's head section.
or if you wish to add to blog, then Select add javascript /html option in layout section and paste this script, then save.
<script type="text/javascript"> var stopafter = 0; var firestop = []; var fire = []; var stdDOM = document.getElementById; var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4)); function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:700;}function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:500;} function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;} function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;} var hD="0123456789ABCDEF"; function d2h(d) {return hD.substr(d>>>4,1)+hD.substr(d&15,1);} layernum=0; piece = function(parent) {this.elem = null; if(nsDOM) {if(parent == null) this.elem=new Layer(1); else {this.elem=new Layer(1,parent.elem); this.style.visibility = "inherit";} this.parent = parent; this.style = this.elem;} else if (stdDOM) {if(parent == null) this.parent=document.body; else this.parent=parent.elem; this.elem = document.createElement('div'); var xName = "xLayer" + layernum++; this.elem.setAttribute('id', xName); elemc = document.createTextNode('.'); this.elem.appendChild(elemc); this.parent.appendChild(this.elem); this.style = this.elem.style;document.getElementById(xName).style.lineHeight = '3px'; document.getElementById(xName).style.color = '#fff'; document.getElementById(xName).style.position = 'absolute';} window[this.elem.id]=this; this.ay = .1; this.type = 0;}; piece.prototype.moveTo = function(x,y) {if(nsDOM) this.elem.moveTo(x,y); else {this.style.left = x+"px"; this.style.top = y+"px";}}; piece.prototype.setC = function(colour) {if(nsDOM) this.elem.bgColor = colour; else this.style.backgroundColor = colour==null?'transparent':colour; };  piece.prototype.fire = function(sx, sy, fw) {var a = Math.random() * Math.PI * 2; switch (fw) {case 1: var s = Math.random() * 2; break; case 2: var s = 2; break; case 3: var s = (Math.PI * 2) - a - Math.random(); break; case 4: var s =  a - Math.random(); break; default: var s = Math.random() * 2; if(Math.random() >.6) s = 1.5;} this.dx = s*Math.sin(a); this.dy = s*Math.cos(a) - 2; this.x = sx; this.y = sy; this.moveTo(sx, sy);}; piece.prototype.sCol = function(hex,hex2,cl) {switch (cl) {case 1: this.setC("#" + hex + hex2 + "00"); break; case 2: this.setC("#00" + hex + "00"); break; case 3: this.setC("#00" + hex + hex2); break; case 4: this.setC("#" + hex + "0000"); break; case 5: this.setC("#" + hex + hex + "00"); break; case 6: this.setC("#" + hex + hex + hex); break; case 7: this.setC("#" + hex2 + hex + "00"); break; default: this.setC("#" + hex + hex2 + hex);}}; piece.prototype.animate = function(step,cl) {var colour = (step > 25) ?  Math.random()*(380-(step*5)) : 255-(step*4); var hex = d2h(colour-112); if (colour < 112) hex = d2h(colour); this.sCol(d2h(colour),hex,cl); this.dy += this.ay; this.x += this.dx; this.y += this.dy; this.moveTo(this.x, this.y);}; fo = function(numst) {this.id = "fo"+fo.count++;this.sp = new Array(); for(i=0 ; i<numst; i++) {this.sp[i]=new piece(); if(nsDOM){this.sp[i].style.clip.top =0; this.sp[i].style.clip.left = 0; this.sp[i].style.clip.bottom = 3; this.sp[i].style.clip.right = 3;} else this.sp[i].style.clip="rect("+0+" "+3+" "+3+" "+0+")"; this.sp[i].style.visibility = "visible";} this.step = 0; window[this.id]=this; fire.push(this); firestop.push(setInterval("window."+this.id+".animate()", 15));}; fo.count = 0; fo.prototype.animate = function() {if(this.step > 55) this.step = 0; if(this.step == 0) {var x = posLeft() + 50 + (Math.random()*(pageWidth() - 200)); var y = posTop() + 50 + (Math.random()*(pageHeight() - 250)); var fw = Math.floor(Math.random() * 5); this.cl = Math.floor(Math.random() * 8); for(i=0 ; i<this.sp.length ; i++)this.sp[i].fire(x, y, fw);} this.step++; for(i=0 ; i<this.sp.length ; i++) this.sp[i].animate(this.step,this.cl);}; function stopfire() {for(var i = firestop.length - 1; i >= 0; i--) {clearInterval(firestop[i]); for (var j = fire[i].sp.length - 1; j >= 0; j--) {fire[i].sp[j].style.visibility = "hidden";}}} function fireworks() {new fo(50);setTimeout('new fo(50)',750);if (stopafter > 0) {setTimeout('stopfire()',stopafter * 60000);}} window.onload=fireworks; </script>

Read Article →

Awesome firework effect in html page with javascript

Here I demonstrate an awesome firework effect with javascript,without jquery.
It can be included to any html page, blogger blogs or wordpress page.
you will have to just Copy and paste the code to your page.
In this fireworks code, you can change the speed ,bits,and colors. using many bangs can slow down the script. If you set this firwork speed to smaller,it will be faster script execution.
To add this to your blog, Sign in to blogger, selct your blog, select layout, and click to add html/javascript
then paste this script . Save. you are done.
If you want to add this effect to only one page, then you can do it via blogger conditional tags.
To learn more about blogger conditional tags, please write "blogger conditional tags" in right side search box and search for that.


<script type="text/javascript"> // <![CDATA[ var bits=80; // how many bits var speed=33; // how fast - smaller is faster var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down) var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");  //                     blue    red     green   purple  cyan    orange  pink /**************************** * Fireworks Effect * http://aslamise.blogspot.com ****************************/ var bangheight=new Array(); var intensity=new Array(); var colour=new Array(); var Xpos=new Array(); var Ypos=new Array(); var dX=new Array(); var dY=new Array(); var stars=new Array(); var decay=new Array(); var swide=800; var shigh=600; var boddie; window.onload=function() { if (document.getElementById) {   var i;   boddie=document.createElement("div");   boddie.style.position="fixed";   boddie.style.top="0px";   boddie.style.left="0px";   boddie.style.overflow="visible";   boddie.style.width="1px";   boddie.style.height="1px";   boddie.style.backgroundColor="transparent";   document.body.appendChild(boddie);   set_width();   for (i=0; i<bangs; i++) {     write_fire(i);     launch(i);     setInterval('stepthrough('+i+')', speed);   } }} function write_fire(N) {   var i, rlef, rdow;   stars[N+'r']=createDiv('|', 12);   boddie.appendChild(stars[N+'r']);   for (i=bits*N; i<bits+bits*N; i++) {     stars[i]=createDiv('*', 13);     boddie.appendChild(stars[i]);   } } function createDiv(char, size) {   var div=document.createElement("div");   div.style.font=size+"px monospace";   div.style.position="absolute";   div.style.backgroundColor="transparent";   div.appendChild(document.createTextNode(char));   return (div); } function launch(N) {   colour[N]=Math.floor(Math.random()*colours.length);   Xpos[N+"r"]=swide*0.5;   Ypos[N+"r"]=shigh-5;   bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);   dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];   if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";   else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";   else stars[N+"r"].firstChild.nodeValue="|";   stars[N+"r"].style.color=colours[colour[N]]; } function bang(N) {   var i, Z, A=0;   for (i=bits*N; i<bits+bits*N; i++) {      Z=stars[i].style;     Z.left=Xpos[i]+"px";     Z.top=Ypos[i]+"px";     if (decay[i]) decay[i]--;     else A++;     if (decay[i]==15) Z.fontSize="7px";     else if (decay[i]==7) Z.fontSize="2px";     else if (decay[i]==1) Z.visibility="hidden";     Xpos[i]+=dX[i];     Ypos[i]+=(dY[i]+=1.25/intensity[N]);   }   if (A!=bits) setTimeout("bang("+N+")", speed); } function stepthrough(N) {    var i, M, Z;   var oldx=Xpos[N+"r"];   var oldy=Ypos[N+"r"];   Xpos[N+"r"]+=dX[N+"r"];   Ypos[N+"r"]-=4;   if (Ypos[N+"r"]<bangheight[N]) {     M=Math.floor(Math.random()*3*colours.length);     intensity[N]=5+Math.random()*4;     for (i=N*bits; i<bits+bits*N; i++) {       Xpos[i]=Xpos[N+"r"];       Ypos[i]=Ypos[N+"r"];       dY[i]=(Math.random()-0.5)*intensity[N];       dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;       decay[i]=16+Math.floor(Math.random()*16);       Z=stars[i];       if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];       else if (M<2*colours.length) Z.style.color=colours[colour[N]];       else Z.style.color=colours[i%colours.length];       Z.style.fontSize="13px";       Z.style.visibility="visible";     }     bang(N);     launch(N);   }   stars[N+"r"].style.left=oldx+"px";   stars[N+"r"].style.top=oldy+"px"; }  window.onresize=set_width; function set_width() {   var sw_min=999999;   var sh_min=999999;   if (document.documentElement && document.documentElement.clientWidth) {     if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;     if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;   }   if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {     if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;     if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;   }   if (document.body.clientWidth) {     if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;     if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;   }   if (sw_min==999999 || sh_min==999999) {     sw_min=800;     sh_min=600;   }   swide=sw_min;   shigh=sh_min; } // ]]> </script>

Read Article →

Darken An Image With CSS, JavaScript Or Jquery!

Assume you have an image in your web page and you want that to get darken when moue enter over that image.

What You will do?

  • Using Inline Css ans inline Javascript,you can darken an image.
  • Also,if  you want to do that with a fade effect, you can use Css and it will work in modern browsers,
  • To work in all major browsers, you can use jquery.

Here is the 3 ways to darken an image

  1. With Simple Inline Javascript + Css
  2. With Only Css.
  3. With the help of Jquery (It is the best) .

Simplest Effect With Inline CSS and JavaScript
Mouse Over and Opacity Will Change with inline CSS and JavaScript 

<a class="darken" href="http://google.com/" style="background: black; display: inline-block; padding: 0;">
<img alt="Mouse Over and Opacity Will Change with inline CSS and JavaScript" onmouseout="this.style.opacity=1;" onmouseover="this.style.opacity=0.6;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" style="display: block;" width="200" />
</a>

Effect with CSS only (Only works with modern browsers) 


<style>
a.darkencss {
    display: inline-block;
    background: black;
    padding: 0;
}
a.darkencss img {
    display: block;
   
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}
a.darkencss:hover img {
    opacity: 0.7;
           
}
</style>
<a class="darkencss" href="http://google.com/">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
</a>
Effect with jquery JavaScript.(Works in all commom browsers) 

<style>
a.darkenjquery {
    display: inline-block;
    background: black;
    padding: 0;
}
a.darkenjquery img {
    display: block;
}
</style>>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<a class="darkenjquery" href="http://google.com/">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEify_lGIWF48wrBM8WqYvkJ4qJhmR12TWFEkOEE_Rlusa0UdOlyR1jJjKmROn0G4HGjVRXc3FIXw4A7PFgy-52ix-cf8yIWYCFxzFfgjeVfDF8HoTXUfIzyi2Qq2p2qv-1Xmw2bd8Hr8I0z/s1600/darkenimage.jpg" width="200" />
</a>
<script>
$('.darkenjquery').hover(function() {
    $(this).find('img').fadeTo(500, 0.5);
}, function() {
    $(this).find('img').fadeTo(500, 1);
});
</script>


Read Article →

Redirection using php and javascript

Here is how you can redirect your current page to a  new declared url. suing php and javascript at the same time.
If you are using this script in iframe, it will help you to open page in the parent page,and not inside the iframe.

<?php
$redirecturl='http://aslamise.blogspot.com';
echo "<script type='text/javascript'>window.open('$redirecturl', '_parent', '')</script>";
?>

Code Explained

<?php
$redirecturl='http://aslamise.blogspot.com'; //Assigning the redirect url
echo "
<script type='text/javascript'>
window.open('$redirecturl', '_parent', '')//Window.open = Opening the window in the specified address
                                                            $redirecturl= The Url we assigned just before.
                                                             _parent =opening on the main.even if the script goes inside iframe-
                                                              It will be opened in main window and not inside iframe.
</script>
";
?>

Javascript function used

window.open()

Read Article →

Fading Webpage background color

This script changes the background color between two preset values. You can set the beginning color, the ending color, the number of color changes between the two, and the delay between changes.

To apply this effect on your webpage, just copy&paste below code between your
<head></head> tags.


<script type='text/javascript'>
var begcolor='#0084d8';      // STARTING COLOR AS A HEX STRING
var endcolor='#c4c4c4';      // ENDING COLOR AS A HEX STRING
var steps=50;                // TOTAL CHANGE STEPS FROM ONE COLOR TO THE OTHER
var delay=50;                // DELAY BETWEEN EACH COLOR CHANGE. LOWER IS FASTER.
//*** DO NOT EDIT BEYOND THIS POINT ***\\
var data=new Array();
var ns4=(document.layers)?true:false;
for(i=1, j=1;i<=3; i++, j+=2)data[i]=new colorset(j);
document.bgColor=begcolor;
function colorset(num){
this.beg=parseInt('0x'+begcolor.substring(num,num+2));
this.end=parseInt('0x'+endcolor.substring(num,num+2));
this.up=this.startup=(this.end>=this.beg)? true : false;
this.incr=Math.abs(this.end-this.beg)/steps;
this.current=this.beg;
}
function changebg(){
var color=new Array();
for(i=1;i<=3; i++){
(data[i].up)? data[i].current+=data[i].incr : data[i].current-=data[i].incr;
if(data[i].startup){
if(data[i].current>=data[i].end){ data[i].up=false; data[i].current=data[i].end}
if(data[i].current<=data[i].beg){ data[i].up=true; data[i].current=data[i].beg }
}
if(!data[i].startup){
if(data[i].current<=data[i].end){ data[i].up=true; data[i].current=data[i].end}
if(data[i].current>=data[i].beg){ data[i].up=false; data[i].current=data[i].beg}
}
color[i]=data[i].current;
}
color[4]=Math.floor(color[1]).toString(16); if(color[4].length==1)color[4]='0'+color[4];
color[5]=Math.floor(color[2]).toString(16); if(color[5].length==1)color[5]='0'+color[5];
color[6]=Math.floor(color[3]).toString(16); if(color[6].length==1)color[6]='0'+color[6];
document.bgColor='#'+color[4]+color[5]+color[6];
}
window.onload=function(){
setInterval('changebg()',delay);
}
</script>

You can Change the beginning and ending color values in the script. There are also a couple other values you can adjust as well. Read the script for more details.

On a slower computer, the user may notice flickering of the display. Users of Netscape 4.x browsers will also notice display flicker. To disable the fading background as a workaround for Netscape 4.x browsers if desired , CHANGE THE LINE
 setInterval('changebg()',delay);  TO
 if(!ns4)setInterval('changebg()',delay);
It says that function only apply if it is not ns4 browser.

demo

Read Article →

Make anything draggable in webpage without Jquery


Make anything draggable in your webpage by following this simple steps.
Draggable means that something we can drag from one point to another point.
What we need is only 3kb javascript code.

Step 1


Download script,and link to webpage in between head tag.

example :

<head>
<script src='./javascript/draggable.js' type='text/javascript'>
</script>
</head>

Step 2

Assign a unique ID to element you wish to enable dragging
and
Put this line at bottom of the webpage.

<script type='text/javascript'>
new dragElement(ELEMENT ID);
</script>
Replace ELEMENT ID WITH the element id you wish to enable dragging.

Important: You should set that element's position attribute to 'absolute' or 'fixed'.
Else it will not work!

For example, If i wish to make my div with an id of #MyDiv,
Then i will have to change it's position attribute in css,

#MyDiv{
position:absolute;
}
Or

#MyDiv{
position:fixed;
}
Then your second javascript code will look like this.

<script type='text/javascript'>
new dragElement(MyDiv);
</script>
If you want to make another draggable element with an id #MyDiv2, just add

new dragElement(MyDiv2);

and so on.

It will look like

<script type='text/javascript'>
new dragElement(MyDiv);
new dragElement(MyDiv2);
</script>

Step 3


All set now. but it is (Dragging) not smooth as we expected.
So we will have to solve it with CSS

<style type='text/css'>
*{
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
</style The above css code will make all transitions on the page smoother than before.

If you decide to apply this transition easeness only on draggable elements, remove star, and type draggable elements id ,sperated with commas(,).

For example .


<style type='text/css'>
#MyDiv,#MyDiv2 {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
</style>


Demo Download


This is just a simple script that makes any HTML element draggable - aslamise.blogspot.com


Read Article →

Fly images with javascript


Want to see images in a page flying all over the page? Search in google image. better select old version. Just Copy and paste Below Javascript-code in to your browser's Address Bar.
Come to the beginning of address bar, and add "JAVASCRIPT:" if there is not exist same.



javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var DI= document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px"}R++}tag=setInterval('A()',5 );document.onmousedown=function(){clearInterval(tag);for(i=0; i<DIL; i++){DI[i].style.position="static";}}; void(0)


Then hit Ok
Hurray.. !!
Code Explained

javascript:
R=0; //Assigning Variables and starting values.
x1=.1;
y1=.05;
x2=.25;
y2=.24;
x3=1.6;
y3=.24;
x4=300;
y4=200;
x5=300;
y5=200;//
var DI= document.getElementsByTagName("img"); // getting all img id's from our document .it will collect all img tags.
DIL=DI.length; //Storing the total number of images to variable DIL.
function A() // Declaring a function
{
for(i=0; i<DIL; i++) //loop while the looping of process end .
{
DIS=DI[ i ].style; //getting the style of each img tag

DIS.position='absolute'; //changing the position of images to absolute

DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px";  //Assigning Left position value to image.

DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px" //Assigning top position value of images.

} 
R++ //after each loop , incresing the value of r + 1.
}
tag=setInterval('A()',5 ); 

document.onmousedown=function()  // Clearing the values and return to static position when we right click on page.
{
clearInterval(tag); 
for(i=0; i<DIL; i++){DI[i].style.position="static";
}
};
void(0)

Not Working?? Dont worry, there is always another way.

Try copy and pasting below script into your addressbar.


javascript:R=0;x1=.1;y1=.05;x2=.25;y2=.24;x3=1.6;y3=.24;x4=300;y4=200;x5=300;y5=200;DI= document.images;DIL=DI.length;function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style;DIS.position='absolute' ;DIS.left=Math.sin(R*x1+ i*x2+x3)* x4+x5;DIS.top=Math.cos(R*y1+ i*y2+y3)* y4+y5;} R++;}setInterval('A()',5);void(0);

Read Article →

Retrieve Typed Password


Do you know that we can see typed passwords (*******) with a simple tweek?

Yes.. ofcource!!
With this simple trick!

Type password in the password field , you can even experiment it with twitter,facebook,google.

password-form

Dont hit enter .. and dont click on submit after writing password!
Now, to retrieve password they typed in password field, simply copy and paste the below line to your browser address bar!
javascript:(function()
{
var s,F,j,f,i;
s = "";
F = document.forms;
for(j=0;j<F.length;++j) 
{
f = F[j];
for (i=0; i<f.length; ++i) 
{
if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n";
}
} 
if (s) alert("Passwords on this page:\n\n" + s);
else
alert("No passwords in on this page.");
})();

IMPORTANT: When you paste script on address bar, sometimes, you will need to type "javascript" (Without Quotes) at first.
like this >





Now hit enter!
Yep. you got the password typed !




Hurray.. Now Go And Be awesome among your friends!

Code Explained

javascript:(function() //Declaring a javascript Function
{
var s,F,j,f,i;  //Declaring Vriables to store data.
s = ""; //Assigning a 0 value for variable s to avoid problems when execute
F = document.forms; // Declaring F as Forms in our Page (Forms contains passwords to be submitted)
for(j=0;j<F.length;++j) // looping between current forms in our page
{
f = F[j]; /Assigning f as current form while processing
for (i=0; i<f.length; ++i) 
{
if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; //checking whether element type is password (Where we declare input type='password' ).if there is , storing the password value to variable s.
}
} 
if (s) alert("Passwords on this page:\n\n" + s);//giving an alert message that contains the password.
else
alert("No passwords in on this page.");//if the looping is over and couldnt find any forms with passwords, displays an alert message with No password on this page
})();

Read Article →
Subscribe to: Posts ( Atom )