Thursday, August 14, 2014

How to add Indian National Flag flying script in to your Blog / Website?

Would you like to have the Indian flag displayed on the top right corner of your blog or website?


Bloggers:

For Bloggers, do this following steps, (if you know already do your own style)
Go To Blogger account and select the Layout panel
Add Element
Select the HTML/Java Script
Then Paste the below script
Save and Close.
Now preview your blog
The flag displayed in your blog right corner.

 
<script language="JavaScript" type="text/JavaScript" src="http://teck.in/bharat.js"> </script>


Website:
Just copy and paste the code below to your webpage anywhere using java script gadget . Basically, It is suggested to copy to the HEAD section of the page, though the script works anywhere.

Good Luck...

Happy Independence Day..

3 comments:

  1. hi,how are you doing?pls can i have japan National Flag flying script .

    ReplyDelete
  2. Hi Chuks,
    here .js code:

    window.onload = function(){
    var flag = document.getElementById('flag');
    drawFlag( flag, 320, 0, 40 );
    flag.style.marginLeft = -(flag.width/2)+'px';
    flag.style.marginTop = -(flag.height/2)+'px';
    var timer = waveFlag( flag, 20, 10, 150, 200, -0.1 );
    };
    function drawFlag( canvas, width, padX, padY ){
    if (!padX) padX = 0;
    if (!padY) padY = 0;
    var a = width / 1.9;
    var b = width;
    var c = 7*a/13;
    var d = 0.76*a;
    var e = 0.054*a;
    var g = 0.063*a;
    var k = 0.0616*a;
    var l = a / 13;
    canvas.width = b+2*padX;
    canvas.height = a+2*padY;
    var ctx = canvas.getContext('2d');
    // Stripes
    ctx.fillStyle = "#fff";
    ctx.fillRect(5,25,300,50);
    ctx.fillStyle = "#fff";
    ctx.fillRect(5,75,300,50);
    ctx.fillStyle = "#fff";
    ctx.fillRect(5,125,300,50);
    ctx.strokeStyle = '#f50b56';
    ctx.lineWidth=3 ;
    ctx.fillStyle = '#f50b56';
    ctx.beginPath();
    ctx.arc(155,100,23,0,2*Math.PI);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    }
    function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){
    if (!squeeze) squeeze = 0;
    if (!shading) shading = 100;
    if (!period) period = 200;
    if (!amplitude) amplitude = 10;
    if (!wavelength) wavelength = canvas.width/10;
    var fps = 30;
    var ctx = canvas.getContext('2d');
    var w = canvas.width, h = canvas.height;
    var od = ctx.getImageData(0,0,w,h).data;
    // var ct = 0, st=new Date;
    return setInterval(function(){
    var id = ctx.getImageData(0,0,w,h);
    var d = id.data;
    var now = (new Date)/period;
    for (var y=0;y<h;++y){
    var lastO=0,shade=0;
    var sq = (y-h/2)*squeeze;
    for (var x=0;x<w;++x){
    var px = (y*w + x)*4;
    var pct = x/w;
    var o = Math.sin(x/wavelength-now)*amplitude*pct;
    var y2 = y + (o+sq*pct)<<0;
    var opx = (y2*w + x)*4;
    shade = (o-lastO)*shading;
    d[px ] = od[opx ]+shade;
    d[px+1] = od[opx+1]+shade;
    d[px+2] = od[opx+2]+shade;
    d[px+3] = od[opx+3];
    lastO = o;
    }
    }
    ctx.putImageData(id,0,0);
    // if ((++ct)%100 == 0) console.log( 1000 * ct / (new Date - st));
    },1000/fps);
    }

    ReplyDelete
  3. Pretty nice post. I just stumbled upon your weblog and
    wanted to say that I have really enjoyed surfing around your
    blog posts. In any case I will be subscribing to your feed and I hope you write again very soon!

    ReplyDelete