Refresh page Using Javascript

we can Refresh a page Using Meta tag and javascript

By Meta tag

<meta http-equiv="refresh" content="600">

By Javascript

<a href="javascript:location.reload(true)">Refresh this page</a>

Click here to Refresh this page

How to Get Current Category in Magento

There are Many way to get Current category in magento

I am showing here two way

If you wish to check the current category in everypage(including Homepage as default category is 2) then you can write these code
$_cat = new Mage_Catalog_Block_Navigation();

$curent_cat = $_cat->getCurrentCategory();

$curent_cat_id = $curent_cat->getId();

$category = Mage::registry('current_category')->getName();

By the Help of registry()function of magento we can get the Current category ,For get name of that category we can use getName() function .If you need the Id then write getId() instead of getName();

How to Use Custom Font By CSS

Most of the programmer use Machine font like Verdana, Aria, Tahoma, Times New Roman, Georgia, Trebuchet MS etc...This is because Every Operating system have this font. But They never use other font Like "OCR A Extended" , "Tempus Sans ITC" etc. If anybody wants to use these fonts then they needs to paste this font into the Server, And by css they can use that font into their website.

First paste the font into your website with proper location/path. e.g :- I have paste "OCR A Extended.ttf" file into a font folder then I wrote my css like the example given below.

@font-face {
 font-family: OCR;
 src: url(../fonts/OCR A Extended.ttf); /* For IE */
 src: url(../fonts/OCR A Extended.ttf) format("opentype");
 /* For non-IE */
}

body{font-family:OCR;}

You can change URL/path according to your website . Now you can see the effect in every Operating System

Enable Template Path Hints in Magento

Template Path Hints is the one of the most Use full Feature in Magento for the Magento Developer and Designer .It Helps to show the Phtml file's path.For example:- if you want to Modify header of a Magento template then Template Path Hints will help you to find the actual location where the Phtml file located. To show the Template Path Hints you need to
log in to the admin panel of your Magento site
Go to System tab ->From the drop down select Configuration
select Main website from the left top Current Configuration Scope
scroll down towards footer there you will find Developers -> Click on it and again scroll up to wards Header.
Expand the Debug Tab
Set Template Path Hints to Yes. Now got to your Frontend and refresh your page You will see all the path hints of your template

How to add Javascript or Css file into Magento

By default there already some css and Javascript file included in the page.xml. If you want to add some more new css file then write

<action method="addCss"><stylesheet> css/Yourcss.css </stylesheet> </action>

into the page.xml which is inside Your app/design/Frontend/base/default/layout/Page.xml (in Magento 1.4.0.0 or Higher version of Magento).
If you want to add a javascript then you can directly write that code into your header.Phtml file which is in the app/design/frontend/base/default/template/page/html/header.phtml .Open the file and write

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/yourjs.js')?>"></script>

and upload/paste your js into Skin/frontend/default/default/js Folder.

Add a css Class Using Jquery

To use Css Class in an HTML Tag we can use a Jquery function addClass(). This function add a css class into your HTML tag.The most intresting things is that you can use this class on a eventhandler also, To get effects when a client/user response on it.

This is an example to add a css class into a Html Tag

<script type="text/javascript">

$(document).ready(function(){

$('.click').click(function(){

$('p').addClass('green');

});

});

</script>

<style type="text/css">

.green{ color:green;}

</style>

Write this code into your body tag

<button class="click">Click Me</button>

What is Jquery and How it Works

Jquery is a Library fucntion of Javascript.It's very easy to write and very much faster than Javascript. When we use onLoad event handler on body tag ,the onload function will fired when all body content will download successfully ,that means all the image should download completely,then only this event will fired.But in Jquery when your Html DOM(Document Object Model) will load completely than the Jquery function can be fired,it's no need to wait for downloading any Image.That is why it is very nuch popular than other language/script.

For example I am going to give red color into all h1 tag When this page will loaded. For that i will write

<script type="text/javascript">

$(document).ready(function(){

$('h1').css('color','red');

});

</script>

Before Run this script You need to link JQUERY Library into your page which you can get from these links

http://code.jquery.com/jquery-1.4.2.min.js

or you can use this one

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Attach any one of this script then You can see the effect only