2020-08-05
114
Make a most beautiful tags cloud on over the world with Facelift and jQuery
The Tags
Simple and easy as copy and paste these HTML code below into your page. The tags below is just an example. In WordPress, Blogger or any others Content Management System maybe vary a little bit.
  <ul>   <li class="tag1"><a href="#java" class="flir">java</a></li>   <li class="tag5"><a href="#jQuery" class="flir">jQuery</a></li>   <li class="tag3"><a href="#Resources" class="flir">Resources</a></li>   <li class="tag5"><a href="#web-design" class="flir">web design</a></li>   <li class="tag2"><a href="#Kwicks" class="flir">Kwicks</a></li>   <li class="tag5"><a href="#CSS" class="flir">CSS</a></li>   <li class="tag3"><a href="#Mootools" class="flir">Mootools</a></li>   <li class="tag2"><a href="#Wordpress" class="flir">WordPress</a></li>   <li class="tag2"><a href="#php" class="flir">blogger</a></li>   <li class="tag4"><a href="#Tutorial" class="flir">Tutorial</a></li>   <li class="tag5"><a href="#Javascript" class="flir">Javascript</a></li>   <li class="tag2"><a href="#tricks" class="flir">tricks</a></li>  </ul>Remember to set the class name of the link. Because we have lots of link in webpage, and we will use this class to identify the link we want to replace.
|
|
|
CSS code:
That’s not important to make up the link using CSS. But the size of tags we have to define. And one more thing, without css styling, the tags can not display as the cloud and we will not call it tags cloud, right?
The CSS code that I’m using in this tutorial will be:
body {Â Â margin:0;Â Â padding:0;Â Â background:#FFF;Â Â font:80% Trebuchet MS, Arial, Helvetica, sans-serif;Â Â color:#555;}a {Â Â color:#222;}img {Â Â border:none;} /* Tag cloud */ Â Â.tags {Â Â width:500px;Â Â margin-top: 150px;Â Â margin-right: auto;Â Â margin-bottom: 0;Â Â margin-left: auto;}.tags ul {Â Â margin:1em 0;Â Â padding:.5em 10px;Â Â text-align:center;}.tags li {Â Â margin-top:0px;Â Â margin-right:5px;Â Â margin-bottom:0px;Â Â margin-left:5px;Â Â padding:0;Â Â list-style:none;Â Â display:inline;}.tags li a {Â Â font-family: loyal, Arial, Helvetica, sans-serif;Â Â text-decoration:none;Â Â color:#000;Â Â line-height: 100%;Â Â background-color: #FFFFFF;Â Â * background-color: none;}.tag1 a {Â Â font-size:100%;Â Â line-height: 10%;}.tag2 a {Â Â font-size:120%;Â Â line-height: 20%;}.tag3 a {Â Â font-size:140%;Â Â line-height: 30%;}.tag4 a {Â Â font-size:200%;Â Â line-height: 80%;}.tag5 a{Â Â font-size:350%;Â Â line-height: 100%;} /* // Tag cloud */Note: Always remember to set the background for the link because Facelift replacement the text by image but can not display the image as transparent unless we set background value. However, with IE, Facelift can not display correct even when set or not set the background. And result I got is:
Maybe it’s a bug of this script maybe not if I get mistake. Sorry to the script’s author!
Javascript
We will use the Facelift to enable image replacement for text link. Javascript library we need is Facelift v1.2. There’re many of tutorials how to install Facelift, and I would like to forward you to:
· Install FLIR – Typography Solution For The Web
· How To Use Any Font You Wish With FLIR
|
|
|
And one more link to help you understand why I’m using Facelift instead of others script with the same feature. See more Cufon vs sIFR vs FLIR.
Install the Facelift
Before start to install, you have to download Facelift v1.2. After downloading, extract the archive file into your workspace folder. Inside the facelift folder is a Javascript file named “flir.js”. I recommended you not to change its structure if you not sure what you’re doing. In this tutorial, I’m not gonna change anything. I put all the script after renamed it into “js” folder.
Add Facelift to your webpage:
<script language="javascript" src="js/facelift/flir.js"></script>Add these code below into your webpage to make Facelift works. Make sure you put it before the end of <body> tag.
<script type="text/javascript">Â Â FLIR.init({path:'js/facelift/'});Â Â FLIR.replace('a.flir', new FLIRStyle({ cFont:'loyal' }));</script>Config Facelift with the font you want to display
In above, you see the font will be used is “loyal”, right? Did you download the Loyal Fame font at the beginning of my post? Download it now and continue to config the Facelift.
Look for file config-flir.php inside Facelift folder and find something like this below:
each entry in the $fonts array is a font in the fonts folder. The array key between the brackets is what we use in our parameter declarations when we want to use the font. Look back to the javascript code above, you will see I’m using “loyal” font. Now, copy the Loyal Fame font to your facelift fonts folder, and add one more code line into config-flir.php file.
// Each font you want to use should have an entry in the fonts array. $fonts = array();$fonts['illuminating'] Â = 'ArtOfIlluminating.ttf';$fonts['okolaks'] Â Â Â = 'okolaksBold.ttf';$fonts['wanta'] Â Â Â Â Â Â = 'wanta_091.ttf';$fonts['loyal'] Â Â Â Â Â Â = 'Loyal.ttf';That’s it to make Facelift works on your tags cloud. But if you want to add hover function for your tags cloud, you’ll need to modify javascript to work with jQuery and make your tags cloud more awesome.
It’s time for jQuey
Download jQuery right here and add it into your webpage:
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>And replace all the old javascript code at the previous part by code below:
<script type="text/javascript">Â $(document).ready(function(){Â Â FLIR.init({path:'js/facelift/'});Â Â $("a.flir").each(function() { FLIR.replace('a.flir', new FLIRStyle({ cFont:'loyal' })); });Â Â $("a.flir").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});Â });</script>2. Nice & Clean Sliding Login Panel Built With JQuery
The sliding panel works like a charm in IE6, IE7, Firefox, Safari, Opera and Chrome. I didn’t test it in IE8 yet. Let me know if it does.
Please note the Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)!
· Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images:
Login button when panel in closed state:
Close button when panel in opened state:
Toggle effect (.toggle() in the javascript code below) behaves differently in jQuery than in Mootools and makes it dead simple to switch the login and close buttons on click. Here’s how I proceded:
KNOWN BUGS
· Rollover effect for the login button doesn’t work in IE6 because of 24Ways’ script. Knowing alpha transparency works perfectly in this browser I think we can disregard that minor bug.
