Archives for category —javascript

Cufon – easy and fast text-image replacement solution

Cufon - easy and fast text-image replacement solutionHave you ever wanted to use your own font on your website? but bothered about it being installed on your visitors system? Cufon is the solution for you, it makes possible fast and easy replacement of text with the font of your wish. It is extremely easy to set up and supports nearly all major browsers. And also it is SEO friendly.
Here is a demo of Cufon on my portfolio site, those headings with silver gradients are actually text replaced by Cufon on the fly.

Using Cufon

To use Cufon on your site , first download this js file (http://cufon.shoqolate.com/js/cufon-yui.js) and then generate your own font’s js file by uploading your font file here : http://cufon.shoqolate.com/generate/ . Once you have both the javascript files , include it in the head section of your web page like this :

<script src="path/to/cufon-yui.js" type="text/javascript" ></script>
<script src="path/to/generated-font-file.js" type="text/javascript" ></script>

Now we are all set up to replace your text , to replace the text with cufon , add the following piece of javascript to your page :

<script type="text/javascript">
Cufon.replace(‘h1′);
</script>

The above lines of code will replace all your h1 elements with images rendered in your font.
You can take a look at a more detailed guide to replacing text with cufon here : http://wiki.github.com/sorccu/cufon/usage

Styling your rendered text

You can also add linear gradients to your text with cufon!, here is how :

Cufon.replace(‘h1′, {
        color: ‘-linear-gradient(#000, #777, #777, #000)’
});

The above code will cause the text to fade from black (#000) to grey (#777) and then back.For a comprehensive guide to styling using cufon refer to : http://wiki.github.com/sorccu/cufon/styling
So why wait? go ahead and try it out today, i bet its awesome and the easiest text-image replacement solution available right now, much simpler and better that sIFR.

Javascript quadratic equation solver

Here is a simple javascript that solves quadratic equations of the form ax²+bx+c = O. You just have to specify the values of a ,b and c and the script then calculates the two real roots alpha(x1) and beta (x2)  of the equation. The script also tells you if the equation has a real root or not, depending upon the value of D (Discriminant). The equation is solved using the quadratic formula x = -b±(b²-4ac)½/2a .
The script is located here ->http://www.dynamicguru.com/files/quadratic_equation.html

Here is the source code of the script :

//Place this within the  section <script type="text/javascript">< function calculate()     {      var a=prompt("enter value of a");      var b=prompt("enter value of b");      var c=prompt("enter value of c");      var a2=2*a;      var ac=4*a*c;      var dis=b*b;      var dis=dis-ac;      if(dis<0){         document.getElementById('Equation').innerHTML='No real roots exist since Discriminant < 0 !<br />D = ' + dis + ' <br />The Equation = ' + a + 'x&#178; + ' + b + 'x + ' + c + '<br />';         document.getElementById('x1').innerHTML='&nbsp; ';         document.getElementById('x2').innerHTML='&nbsp; ';         }      else{         var dis_sqrt=Math.sqrt(dis);         var x1=-b+dis_sqrt;         var x1=x1/a2;         var x2=-b-dis_sqrt;         var x2=x2/a2;         document.getElementById('Equation').innerHTML=" Equation = " + a + "x&#178; + " + b + "x + " + c + "<br />";         document.getElementById('x1').innerHTML=' Alpha (x1) = ' + x1;         document.getElementById('x2').innerHTML=' Beta (x2) = ' + x2;         }     } </script> //Place this within the section: <h1><a onclick="calculate()" href="#"> Click to solve »»</a></h1>     <div id="Equation"></div>     <div id="x1"></div>     <div id="x2"></div>
© 2010 Dynamic Guru All rights reserved — About UsContactMujtaba