drewgraham
20 Sep 2006, 08:38 AM
I'm trying to perfect the menu on my site and I'm nearly there, I'm hoping you can help me finish it off.
The menu's DIVs and JavaScript (Booo! I know, but it's a must) and an example is here (http://mauleverer.websites.drewgraham.net/about.php).
My JavaScript knowledge is at the Ctrl C, Ctrl V stage :(
I'm trying to make the menu:
- Auto close on load (I'm going to add <noscript> bits for accessability when it's working later) without popping up fully open for a split second
- Remember its structure as the user navigates around the site
At the moment it kind of auto closes, but pops up fully open for a second, and it seems to kind of remember its structure (using session cookies), but for each page; I want it to remember one structure for the whole site.
how do I get tweak the JavaScript to get it to do this?
CSS properly formatted (http://mauleverer.websites.drewgraham.net/showsource.php#css)
div#buying_collecting {
display: block;
text-align: center;
}
div#mauleverer_collection {
display: block;
text-align: center;
}
div#how_we_work {
display: block;
text-align: center;
}
JavaScript properly formatted (http://mauleverer.websites.drewgraham.net/showsource.php#js)
<script type="text/javascript">
/***********************************************
* Switch Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* 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="no" //Collapse previously open content when opening present? (yes/no)
var contractsymbol='- ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
var expandsymbol='+ ' //HTML for expand symbol.
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}
function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}
function sweeptoggle(ec){
var thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}
function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}
function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}
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 revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
inc++
}
}
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"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
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 (ccollect.length>0 && statecollect.length>0)
revivestatus()
}
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
</script>
HTML properly formatted (http://mauleverer.websites.drewgraham.net/showsource.php#html)
<img src="images/nav/line.jpg" alt="Horizontal Line" width="250" height="1">
<img src="images/nav/buying_collecting.gif" alt="Buying and Collecting" name="buyingcollecting" width="250" height="16" hspace="0" vspace="2" border="0" id="" onClick="expandcontent(this, 'buying_collecting')" style="cursor:hand; cursor:pointer" onMouseOver="MM_swapImage('buyingcollecting','','images/nav/buying_collecting_2.gif',1)" onMouseOut="MM_swapImgRestore()"></a>
<div id="buying_collecting" class="switchcontent">
<a href="bcoak.php"><img src="images/nav/oak.gif" alt="Oak" name="bcoak" width="250" height="16" hspace="0" border="0" id="bcoak" onMouseOver="MM_swapImage('bcoak','','images/nav/oak_2.gif',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="bcpewter.php"><img src="images/nav/pewter.gif" alt="Pewter" name="bcpewter" width="250" height="16" hspace="0" vspace="2" border="0" id="bcpewter" onMouseOver="MM_swapImage('bcpewter','','images/nav/pewter_2.gif',1)" onMouseOut="MM_swapImgRestore()"></a>
</div>
The menu's DIVs and JavaScript (Booo! I know, but it's a must) and an example is here (http://mauleverer.websites.drewgraham.net/about.php).
My JavaScript knowledge is at the Ctrl C, Ctrl V stage :(
I'm trying to make the menu:
- Auto close on load (I'm going to add <noscript> bits for accessability when it's working later) without popping up fully open for a split second
- Remember its structure as the user navigates around the site
At the moment it kind of auto closes, but pops up fully open for a second, and it seems to kind of remember its structure (using session cookies), but for each page; I want it to remember one structure for the whole site.
how do I get tweak the JavaScript to get it to do this?
CSS properly formatted (http://mauleverer.websites.drewgraham.net/showsource.php#css)
div#buying_collecting {
display: block;
text-align: center;
}
div#mauleverer_collection {
display: block;
text-align: center;
}
div#how_we_work {
display: block;
text-align: center;
}
JavaScript properly formatted (http://mauleverer.websites.drewgraham.net/showsource.php#js)
<script type="text/javascript">
/***********************************************
* Switch Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* 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="no" //Collapse previously open content when opening present? (yes/no)
var contractsymbol='- ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
var expandsymbol='+ ' //HTML for expand symbol.
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}
function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}
function sweeptoggle(ec){
var thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}
function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}
function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}
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 revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
inc++
}
}
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"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
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 (ccollect.length>0 && statecollect.length>0)
revivestatus()
}
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
</script>
HTML properly formatted (http://mauleverer.websites.drewgraham.net/showsource.php#html)
<img src="images/nav/line.jpg" alt="Horizontal Line" width="250" height="1">
<img src="images/nav/buying_collecting.gif" alt="Buying and Collecting" name="buyingcollecting" width="250" height="16" hspace="0" vspace="2" border="0" id="" onClick="expandcontent(this, 'buying_collecting')" style="cursor:hand; cursor:pointer" onMouseOver="MM_swapImage('buyingcollecting','','images/nav/buying_collecting_2.gif',1)" onMouseOut="MM_swapImgRestore()"></a>
<div id="buying_collecting" class="switchcontent">
<a href="bcoak.php"><img src="images/nav/oak.gif" alt="Oak" name="bcoak" width="250" height="16" hspace="0" border="0" id="bcoak" onMouseOver="MM_swapImage('bcoak','','images/nav/oak_2.gif',1)" onMouseOut="MM_swapImgRestore()"></a>
<a href="bcpewter.php"><img src="images/nav/pewter.gif" alt="Pewter" name="bcpewter" width="250" height="16" hspace="0" vspace="2" border="0" id="bcpewter" onMouseOver="MM_swapImage('bcpewter','','images/nav/pewter_2.gif',1)" onMouseOut="MM_swapImgRestore()"></a>
</div>