Contractible Headers Script and onmouseout

[ManojGoel]

Script: Contractible Headers Script
http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

Hi,

I have change dthe script to use onmouseover instead of onclick, that part works fine.

I also added mouseout event so that when mouse moves out the header close. but the problem is that I can't select the sub menu as it closes it.

var collapseprevious="yes" in the js script

This is what I have on my page

span onmouseover="expandcontent('sc3')" onmouseout="contractAll()"

and this is the code in

function contractAll(){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display="none"
inc++
}
}


I wanted that on mouseout beyond certain region the sub menu or contractible stuff closes, how can i do that.

so if my meny looks like

------------------
monthly Statistics |
Case Load |
------------------

if I hover beyond the region the menu should close.

Hope I explained my requirement clearly.

Any help will be greatly appreciated.

Thanks

Mo

[jscheuer1]

Basically I get the idea that once the content expands, if you mouse over the expanded content it contracts because you have simultaneously moused out of the area that expanded it in the first place. If I've got the picture about right then the solution is to either expand the sphere of the controlling element to encompass the expandable content as shown in the following abstract representation:

<div onmouseover="expand('c1')" onmouseout="contract('c1')">Title for Expandable Content:
<div id="c1">Appearing/Disappearing content goes here</div>
</div>

or to give control to the expandable content as well as the controlling element:

<span onmouseover="expand('c1')" onmouseout="contract('c1')">Title for Expandable Content:</span>
<div id="c1" onmouseover="expand('c1')" onmouseout="contract('c1')">Appearing/Disappearing content goes here</div>

Please Note: The above is not intended as a drop in replacement, rather as an idea of two possible approaches to solving the problem, assuming I understood the problem to begin with.

[ManojGoel]

Hi John,

You understood correctly what I want. I tried your solution but it does not work.

I think we have to write some script where it knows the boundaries and closes the sub menus if the mouse is beyond that region.

Thanks

Manoj

[jscheuer1]

Actually, I pretty sure one of my two suggested methods will work. It is the method employed by many mouseover activated content scripts. It may need a little tweaking. Post a link to your page and I'll have a go at making it work.

[ManojGoel]

Hi john,

I can't send you the link as the site is with in intranet.

The file was a jsp file but you can make a html file and test
But I am sending you the code :


<br>
<!-- CONTENT -->
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td bgcolor="#990000" class="tableHead" height="20" align="center">
<!-- THE HEADING WITH NAME & NUMBER COMES HERE -->
&nbsp;&nbsp; Reports - Please Click on the links below to view reports
</td>
</tr>
</table>

<table align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#cccccc">
<tr>
<td valign="top" height="25"><img src="images/spacer.gif" width="2" height="15"></td>
</tr>
<tr>
<td align="left">
<div onmouseover="expandcontent('sc1')" class="mainL"><img border="0" src="images/arrow.gif"> Monthly Statistics</div>
<div id="sc1" class="switchcontent"
style="width:250px;background-color:#E0F9D5;font: normal 12px/1.5 Verdana" >
<ul>
<li><a href="">Monthly Combined Workload Statistics</a></li>
</ul>

</div>
</td>
</tr>
<tr>
<td>
<div onmouseover="expandcontent('sc2')" class="mainL"><img border="0" src="images/arrow.gif"> Conference</div>
<div id="sc2" class="switchcontent" style="width:250px;background-color:#E0F9D5;font: normal 12px/1.5 Verdana" >
<ul>
<li><a href="">Conference By Type</a></li>
<li><a href="">Conference Roster (vendor)</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<span onmouseover="expandcontent('sc3')" onmouseout="contractcontent('sc3')" class="mainL"><img border="0" src="images/arrow.gif"> Caseload</span>
<div id="sc3" class="switchcontent" style="width:250px;background-color:#E0F9D5;font: normal 12px/1.5 Verdana" >
<ul>
<li><a href="">PT/OT Waitlist</a></li>
<li><a href="">PT/OT Caselist</a></li>
<li><a href="">PT/OT Vendor Patients</a></li>
<li><a href="">PT/OT w/Assistants</a></li>
<li><a href="">PT/OT w/Assistants (PTA)</a></li>
<li><a href="">PT/OT - OTC Only</a></li>
<li><a href="">PT/OT Monitoring</a></li>
<li><a href="">PT/OT Technician Caseload</a></li>
<li><a href="">PT/OT Therapist</a></li>
<li><a href="">Private MD - No Therapy Report</a></li>
<li><a href="">CCS Clinic - No Therapy Report</a></li>
<li><a href="">Master Status</a></li>

</ul>
</div>
</td>
</tr>
<tr>
<td>
<div onmouseover="expandcontent('sc4')" onmouseout="contractcontent('sc4')" class="mainL"><img border="0" src="images/arrow.gif"> Evaluation</div>
<div id="sc4" class="switchcontent" style="width:250px;background-color:#E0F9D5;font: normal 12px/1.5 Verdana">
<ul>
<li><a href="">OT/PT Evaluation</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<span onmouseover="expandcontent('sc5')" onmouseout="contractcontent('sc5')" class="mainL"><img border="0" src="images/arrow.gif"> Case Management</span>
<div id="sc5" class="switchcontent" style="width:250px;background-color:#E0F9D5;font: normal 12px/1.5 Verdana">
<ul>
<li><a href="">OT/PT RX</a></li>
<li><a href="">Medical Record</a></li>
<li><a href="">School</a></li>
<li><a href="">District</a></li>
<li><a href="">Frequency</a></li>
<li><a href="">Patient Address List</a></li>
<li><a href="">Home Program Due</a></li>
<li><a href="">OT/PT Status</a></li>
<li><a href="">DX</a></li>
<li><a href="">Vendor Clients</a></li>
<li><a href="">Master List</a></li>
<li><a href="">MTU Caseload</a></li>
<li><a href="">Chart Review</a></li>
<li><a href="">Chart Review (New)</a></li>
<li><a href="">Review Closed/Open Status Cases</a></li>
<li><a href="">IEP/IFSP/504 Report</a></li>
<li><a href="">Age Report (Select Age)</a></li>
<li><a href="">No Therapy</a></li>
<li><a href="">DME - Follow Up</a></li>
<li><a href="">No PT/OT - MTU Pending</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td valign="top" height="30" colspan="2" align="center"><img src="images/spacer.gif"></td>
</tr>
<tr>
<td valign="top" colspan="3" align="center"><img src="images/dhslogo.gif"></td>
</tr>
<tr>
<td valign="top" height="120" colspan="2"><img src="images/spacer.gif"></td>
</tr>

</table>

<!-- END CONTENT -->

<%@ include file="html/footer.html" %>

<!-- FOOTER ENDS -->
===============================
This is the javascript


/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function contractAll(){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display="none"
inc++
}
}


function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

======================================

Since there was no attachment facility (not that I know of) I had to paste all the code.

Thank you so much for taking the time to work on my problem. really appreciate that.

Manoj

[jscheuer1]

I don't see any headers in that. I already adapted one script to do this sort of thing (see archived thread):

http://www.dynamicdrive.com/forums/a...hp/t-2800.html

Refers to script:

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

As the archives remove code formatting, here are my instructions for the above script reformatted:

Change this line in the script:

cur=ns6? e.target : event.srcElement

to:

cur=ns6? e : event.srcElement

and get rid of these two lines:

if (ie4||ns6)
document.onclick=checkcontained

Now, the html markup has to change, where it once looked like this:

<li id="foldheader">News</li>

make it look like this:

<li id="foldheader"><span onmouseOver="checkcontained(this.parentNode)">News</span></li>

Make this change only for those li's that have the foldheader id. That's all there is to it. I have a feeling you will either want further modifications though, or decide that onclick wasn't so bad after all.

One other thing I left out but, it is only to allow it to degrade more gracefully in browsers that do not support its features. These lines should be added:

if (!(ie4||ns6))
return;

right after this line:

function checkcontained(e){

[ManojGoel]

Hi John,

the script I was using was:
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

and not navigate2.html

So that is why the headers were not there. Even then I changed it to use the script you suggested but still the same problem. Either I am not doing right or we still have a problem.

script 2 is little better as it shows the images instead of bullets which you get because of li element. I might have to modify the script 1 to show those images.

Thanks

Manoj