DotNetGnat
Programmer
guys,
I have the following simple code. It might look lengthy but i tried to keep it as simple as possible. Just copy and paste the code and you can see it running.
Currently the below example refers to the static lists. But i want the values to be fetched from database.
Can anyone please help me out with this.
my database tables
table1 -> catid|catname
table2 -> listid|catid|listname
when initally loaded i want to display all category names and then on clicking a category i want to display corresponsing list names and then when a list name is clicked i want to show the content related to current selection, which means i must be able to get hold of the selection values catid and listid.
Please let me know any suggestions if you have.
Thanks
-DNG
I have the following simple code. It might look lengthy but i tried to keep it as simple as possible. Just copy and paste the code and you can see it running.
Currently the below example refers to the static lists. But i want the values to be fetched from database.
Can anyone please help me out with this.
Code:
<html>
<head>
<style type="text/css">
div#mlcontent p{line-height:1.4}
div#mlwrapper{float:right;width: 100%;margin-left: -400px}
div#mlcontent{margin-left: 400px}
div#mlleft2{float:right;width:200px}
div#mlleft1{float:right;width:200px}
#catlistdiv{
float:left;
/*height:410px;*/
overflow:auto;
width:200px;
border:1px solid #000;
background-color:#FFF;
}
.catlist{
margin:0px;
padding:2px;
}
.catlist li{ /* General layout article in list */
list-style-type:none;
border:1px solid #999;
background-color:#EEE;
height:30px;
margin:1px;
padding:2px;
color:#333;
cursor:pointer;
}
.catlist li.listMouseOver{
border:1px solid #000;
color:#000;
}
.catlist li.listClick{
border:1px solid #000;
color:#000;
background-color:#317082;
color:#FFF;
}
#sublistdiv{
float:left;
/*height:410px;*/
overflow:auto;
width:200px;
border:1px solid #000;
background-color:#FFF;
}
.sublist{
margin:0px;
padding:2px;
}
.sublist li{ /* General layout article in list */
list-style-type:none;
border:1px solid #999;
background-color:#EEE;
height:30px;
margin:1px;
padding:2px;
color:#333;
cursor:pointer;
}
.sublist li.listMouseOver{
border:1px solid #000;
color:#000;
}
.sublist li.listClick{
border:1px solid #000;
color:#000;
background-color:#317082;
color:#FFF;
}
</style>
<script type="text/javascript">
window.onload = getlists;
var activeList = false;
var clickedList = false;
function getlists()
{
var mlcobj = document.getElementById('mlwrapper');
var slobj = document.getElementById('mlleft2');
slobj.style.visibility = "hidden";
mlcobj.style.visibility = "hidden";
listObj = document.getElementById('catlist');
var lists = listObj.getElementsByTagName('LI');
for(var i=0;i<lists.length;i++){
lists[i].onmouseover = mouseoverList;
lists[i].onclick = selectList;
}
}
function mouseoverList()
{
if(this==clickedList)return;
if(activeList && activeList!=this){
if(activeList==clickedList)
activeList.className='listClick';
else
activeList.className='';
}
this.className='listMouseOver';
activeList = this;
}
function selectList()
{
var slobj = document.getElementById('mlleft2');
slobj.style.visibility = "visible";
sublistObj = document.getElementById('sublist');
var sublists = sublistObj.getElementsByTagName('LI');
for(var i=0;i<sublists.length;i++){
sublists[i].onmouseover = mouseoverList;
sublists[i].onclick = selectsubList;
}
if(clickedList && clickedList!=this)clickedList.className='listMouseOver';
this.className='listClick';
clickedList = this;
}
function selectsubList()
{
var mlcobj = document.getElementById('mlwrapper');
mlcobj.style.visibility = "visible";
}
</script>
</head>
<body>
<div id="mlwrapper">
<div id="mlcontent">
Please select the category and list to your left.
</div>
</div>
<div id="mlleft2">
<div id="sublistdiv">
<ul id="sublist" class="sublist">
<li id="1">List 1</li>
<li id="2">List 2</li>
<li id="3">List 3</li>
</ul>
</div>
</div>
<div id="mlleft1">
<div id="catlistdiv">
<ul id="catlist" class="catlist">
<li id="1">Cat 1</li>
<li id="2">Cat 2</li>
<li id="3">Cat 3</li>
</ul>
</div>
</div>
</body>
</html>my database tables
table1 -> catid|catname
table2 -> listid|catid|listname
when initally loaded i want to display all category names and then on clicking a category i want to display corresponsing list names and then when a list name is clicked i want to show the content related to current selection, which means i must be able to get hold of the selection values catid and listid.
Please let me know any suggestions if you have.
Thanks
-DNG