collapsable menu and Iframe

[savis]

I have created a collapsing sidemenu which, on selection of an option,expands a submenu and also jumps to a new url.

The new url also contains the same sidemenu. But the menu collapses as a result of new window load. I would like the menu to stay expanded.I have placed menu in Iframe.

<script type="text/javascript">
<!--
// expand and collapse definition lists
function dlcollapse(){
// check for necessary function
if (document.getElementsByTagName){
// grab all lists and loop through them
var lists=document.getElementsByTagName('dl');
for (var i=0;i<lists.length;i++){
// only act on lists with 'collapsable' class
if(/collapsable/.test(lists[i].className)==true){
// if they have got this far, javascript is enabled, so collapse everything
var nodelist = lists[i].childNodes;
for(var j=0;j<nodelist.length;j++){
toggleCollapse(nodelist[j]);
}
// grab all <dt>s and loop through them
var dts=lists[i].getElementsByTagName('dt');
for(var j=0;j<dts.length;j++){
// add javascript events to dynamically add/remove styles based on mouse events
dts[j].onclick=function(){
// first change the <dt>
toggleCollapse(this);
// then change all the <dd>'s until we reach the end of the list or the next <dt>
var nextSib = this.nextSibling;
while (nextSib!= null){
if(nextSib.nodeType==1){ //Mozilla includes #text nodes in sibling list
if(nextSib.nodeName.toLowerCase()=="dd"){
toggleCollapse(nextSib);
}
else{
break;
}
}
nextSib = nextSib.nextSibling;
}
}
// make it obvious that they can click on <dt>'s
if(document.body.style.cursor){
dts[j].onmouseover=function(){
document.body.style.cursor="pointer";
}
dts[j].onmouseout=function(){
document.body.style.cursor="default";
}
}
}
}
}
}
}

function toggleCollapse(element){
if(/collapsed/.test(element.className)==true){
element.className = element.className.replace(/\s*collapsed/,'');
}
else{
if(element.className == ""){
element.className = "collapsed";
}
else{
element.className += " collapsed";
}
}
}
window.onload = dlcollapse;
-->
</script>

This is the javascript code for used for collapsable menu

<dl class="collapsable">
<dt>Company</dt>
<dd>About Us</dd>
<dd>Photo Gallery</dd>
<dd>Press Coverage</dd>
<dt>Business Groups</dt>
</dl>

and this is the code calling above javascript fuction

Plz gimme solution.

Regards,
savi

[Lynque]

Hi Savis,

It looks like you are collapsing the menu every time the page loads "window.onload = dlcollapse;"

Treat the Iframe as an independant page that doesn't necassarily have to reload.

If you've worked with framesets it is kind of the same thing, static menu page that loads a main frame with content.

You could have the menu Iframe load pages outside of it while maintaining the expanded menu.

Try googling Iframes, there is loads of info on them.

Good Luck

[savis]

Hi,

Is there anyway not to refresh the child frame(Iframe) when a main frame in loaded.

thanks,
savi

[Lynque]

Sorry for the delay in responding,

I think if you target the frame in which you are trying to load the new page it should solve your problem...

i.e.
a href="javascript:parent.framename.location.href='page-to-loadhtml'")

This should only load the new page in the frame specified, instead of reloading the whole window.

Try it out and let us know how you make out