PDA

View Full Version : Alphabetical besed category menu



vasu
03-23-2009, 01:49 AM
Hi all,

Anybody have an idea how to make an alphabetical based category menu. I saw that menu on many cosmetic websites.

Example : http://www.fragrancenet.com/f/net/womens_fragrances.html

Just see on left hand side that navigation.


Thanks in advance

vasu
03-25-2009, 12:32 AM
Is there any one who knows about this??

vwphillips
03-25-2009, 06:32 PM
CSS


#tst {
position:relative;width:130px;height:110px;border:solid black 1px;
}

#tst DIV {
position:absolute;height:15px;width:15px;background-Color:#CCFFFF;border:solid black 1px;text-Align:center;font-Size:12px;
}

#list {
width:130px;height:200px;border:solid black 1px;
}

#list DIV {
height:20px;background-Color:#CCFFFF;border-Bottom:solid black 1px;
}



HTML

<body onload="zxcInit('tst',6,4,'list','090325');">
<input type="button" name="b" value="Test" onclick="zxcAjax('090325A.txt','list',null)"/>
<div id="tst" ></div>
<div id="list" ></div>


Code

function zxcInit(id,cols,s,lid,url){
var obj=document.getElementById(id);
var letters='ABCDEFGHIJKMKNOPQRSRUVWXYZ';
var A=zxcES('DIV',{left:s+'px',top:s+'px'},obj,'A');
A.onclick=function(){ zxcAjax(url+'A.txt',lid); }
var sz=A.offsetHeight+s;
for (var l,z0=1;z0<letters.length;z0++){
l=zxcES('DIV',{left:((sz)*(z0%cols))+s+'px',top:Math.floor(z0/cols)*sz+s+'px'},obj,letters.charAt(z0));
l.onclick=function(){ zxcAjax(url+this.firstChild.data+'.txt',lid); }
}
}


function zxcAjax(url,obj){
var request=false
if (window.ActiveXObject){
try { request=new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e){
try { request=new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e){}
}
}
else if (window.XMLHttpRequest) request=new XMLHttpRequest();
else return false;
request.onreadystatechange=function(){ zxcPopulate(request,obj); }
request.open('GET',url+'?'+new Date().getTime(),true);
try { request.send(null); }
catch (e){}
}

function zxcPopulate(request,obj){
if (request.readyState==4&&(request.status==200||window.location.href.indexOf("http")==-1)){
var txt=request.responseText.split('#');
var obj=document.getElementById(obj);
while (obj.firstChild) obj.removeChild(obj.firstChild);
for (var t,d,a,z0=0;z0<txt.length;z0++){
t=txt[z0].split('^');
d=zxcES('DIV',{},obj);
a=zxcES('A',{},d,t[0]);
a.href=t[1];
}
}
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}





File 090325A.txt

A Item 1^http://www.vicsjavascripts.org.uk/#
A Item 2^http://www.vicsjavascripts.org.uk/

File 090325B.txt

B Item 1^http://www.vicsjavascripts.org.uk/#
B Item 2^http://www.vicsjavascripts.org.uk/#
B Item 3^http://www.vicsjavascripts.org.uk/

vasu
03-26-2009, 02:32 AM
Thanks vwphillips,

Can u plz explain the position of the codes. I am sorry i am new and learning these codes.

I know abt css and that html codes. what abt all those function codes and File 090325A.txt where to put them

Thanks again for ur help

vwphillips
03-26-2009, 10:27 AM
For now, put the JavaScript code within the header tags of your page.
The .txt files go in the same directory as your HTML page, you will need one for each letter.