Tuesday, September 25, 2012

Install Jelly Beans on Asus Transformer TF101

there is lot of rumors are going around about the jelly beans update for Transformer Tf101, But still its not confirmed and if it going to come also it would be late. 

rayman33 from XDA Developers already created ROM for TF101.if you want to update your TF101 to jelly beans you can follow the steps below

Warning!!: i gone through the same steps to make my tablet to jelly beans and its working fine. but if anything goes wrong while you are doing then iam not responsible for anything.Use these instructions at your own risk. We shall not hold any responsibility or liability for whatever happens to you or your device arising from your use of the info in this guide. Read complete steps before you start.

Stage 1: Rooting

  1.  install Eee Pad PC Suite from http://www.asus.com/Eee/Eee_Pad/Eee_Pad_Transformer_TF101/#download
  2. install JDK  http://www.oracle.com/technetwork/java/javase/downloads/jdk7u7-downloads-1836413.html  
  3. install Android SDK ,  http://dl.google.com/android/installer_r20.0.3-windows.exe 
  4. download 1-Click Transformer Root to root TF101 (for more information on it you can check http://forum.xda-developers.com/showthread.php?t=1689193)
  5. connect Tablet to computer
  6. run  1-Click Transformer Root.bat
  7. wait until bat file completely executes[in case tablet is failed to reboot just start it manually]
Stage 2:  ClockworkMod Recovery

  1. download  RecoveryInstaller.apk, http://www.mediafire.com/?0hdnphtp8ib8phi
  2. install it in your tablet
  3. run  RecoveryInstaller and select "Click to Flash Recovery"

Stage 3: Install Jelly Beans

  1.  download ROM : http://goo.im/devs/RaymanFX/downloads/Android-4.1.1/TF101/jelly_tf101_6.0.0.zip
  2.  download GAPPS :  http://goo.im/gapps/gapps-jb-20120726-signed.zip
  3. copy both files to sdcard
  4. turn off tablet and press power button and volume down button together to boot from ClockworkMod Recovery or install Transformer Reboot to Recovery in tablet and open it and press "reboot to recovery" to boot from ClockworkMod Recovery. [Navigate using Volume up and dowm, and select using power button]
  5. select "Wipe data/factory reset" and click "yes" 
  6. select "Install ZIP from SD card" then select "Choose ZIP from SD card". Locate jelly_tf101_6.0.0.zip file and select it. Confirm installation by selecting "Yes" > "Install jelly_tf101_6.0.0.zip".
  7. select "Choose ZIP from SD card". Locate gapps-jb-20120726-signed.zip  file and select it. Confirm installation by selecting "Yes" > "Install gapps-jb-20120726-signed.zip".

Done, now your tablet having jelly beans, enjoy..




Wednesday, June 27, 2012

Creating navigation buttons in CSS


you can create CSS buttons in many ways, but here i am explaining about making navigation buttons using bullets.It mainly have 2 parts create bullet and apply CSS to it.

bullet


<div id="nav">
   <ul>
      <li class="active">
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Service</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#"> Contact</a>
      </li>
   </ul>
</div>

you can replace # with your link.

CSS


#nav ul
{
   list-style: none;
}

#nav li
{
   display: block;
   float: left;
   margin: 10px;
   padding: 5px;
   color: #CCC;
}

#nav li a
{
   text-decoration: none;
   color: #AAA;
   font-weight: bold;
}

#nav li.active a
{
   color: #D81921;
}
#nav li a:hover

{
   color: #D81921;
   text-shadow: 10px 10px 5px #aaaaaa;
}
we have a lot of possibilities in CSS to make this menu more beautiful.

if you like this post please put comments

Wednesday, June 13, 2012

Draw a circle in HTML5 canvas and mouse over event using jQuery

<!-- Author:    Binyas
     Website:   www.softinker.com
     Blog:      softinker.blogspot.com -->

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { margin: 0px; overflow: hidden; } canvas {         border: 1px solid #9C9898;       } </style> <!--Use:for adding canvas to ie download excanvas from: http://code.google.com/p/explorercanvas/ --> <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <canvas id="myCanvas" width="300" height="350"> your browser does not support the canvas tag </canvas> <div id="result"></div> <script type="text/javascript"> // use requestAnimFrame for better and smooth animation window.requestAnimFrame = (function(callback){     return window.requestAnimationFrame ||     window.webkitRequestAnimationFrame ||     window.mozRequestAnimationFrame ||     window.oRequestAnimationFrame ||     window.msRequestAnimationFrame ||     function(callback){         window.setTimeout(callback, 1000 / 60);     }; })(); function animate(lastTime){           var canvas = document.getElementById("myCanvas");         var context = canvas.getContext("2d");         // update         var date = new Date();         var time = date.getTime();         var timeDiff = time - lastTime;         var linearSpeed = 100;         // pixels / second         var linearDistEachFrame = linearSpeed * timeDiff / 1000;                 lastTime = time;         // clear         context.clearRect(0, 0, canvas.width, canvas.height);         // draw  draw(context);         // request new frame         requestAnimFrame(function(){             animate(lastTime);         });   } var radius=100; var x=150; var y=150; var color="#ff0000"; window.onload = function() {     var canvas = document.getElementById("myCanvas");     var ctx = canvas.getContext("2d");     ctx.clearRect(0, 0, canvas.width, canvas.height);     var date = new Date();     var time = date.getTime();     animate(time); }; function draw(ctx) { ctx.fillStyle=color; ctx.strokeStyle=color; ctx.beginPath(); ctx.arc(x,y,radius,0,2*Math.PI); ctx.closePath(); ctx.fill(); ctx.stroke(); } (function($) { var myctx = $("#myCanvas");       myctx.mousemove(function(e) { //get current mouse pos var mouseX=e.pageX - this.offsetLeft; var mouseY=e.pageY - this.offsetTop; /*logic: if the distance of current mouse position from centre of the circle is lessthan its radius then mouse pointer is in the circle */ var distance=Math.sqrt(Math.pow(mouseX - x, 2) + Math.pow(mouseY - y, 2));//distance formula sqrt((x1-x2)^2+(y1-y2)^2) if (distance <= radius) { $("#result").text("IN"); } else { $("#result").text("OUT"); } }); })(jQuery); </script> </body> </html>
Logic: if the distance of current mouse position from centre of the circle is lessthan its radius then mouse pointer is in the circle.

Works Perfectly

pls put comments ..