Hi, I'm modifying for our newly CSS-oriented site a script that shows/hides content in a radio button (optionally) fashion, with either matching or different images serving to show the state of a particular button. As many other folks do, my script uses the display:none property to hide the content, and that part is working just fine, since it didn't change (right now, It just sets it to display:block, which is not very elegant, since maybe someone might want it to display differently, but I'm the only one using it so that's back-burner).
The part that's giving me trouble is in having it set the backgroundImage of the div in my script. It generated an error. Looking at it in the venkman debugger (in Mozilla), it seems that I do have the element's style object, so it would seem that I'm accessing that correctly, but when I try to assign a url, it throws an error.
A page that demonstrated the problem is here:
http://www.megalodon.com/art-department-sp...per-stocks.htmlYou'll notice that the little "plus sign" boxes don't switch out to "minus" when you open the link on the left. The box background is initially set in the stylesheet.
Here's the script:
(the show/hide functions are at the end.)
CODE
//expando menu object
//version 6/27/06 dc
//Thanks to Chet Nickerson (http://www.bardichouse.com/) for introducing me to the "expando" trick
// set up a style to make all the expando items hide right off the bat (optional, but I get flashed before the script hide everything otherwise)
function turnOffExpandoClass(){
document.write("<style TYPE='text/css'>");
document.write(".expando {display: none}");
document.write("</style>");
}
function errorFunction(obj,errorObj){
return;
alert("error: "+errorObj+"\nindicatorID: "+
obj.indicatorID+"\nelement: "+
document.getElementById(obj.targetID)+"\nstyle: "+
document.getElementById(obj.indicatorID).style+"\nparentNode: "+
document.getElementById(obj.indicatorID).parentNode+"\nparentNode.innerHTML: "+
document.getElementById(obj.indicatorID).parentNode.innerHTML+"\nbackgroundImage: "+
document.getElementById(obj.indicatorID).style.backgroundImage+"\ntrying to put: "+
obj.indicatorURLon
);
}
//alert("running temp version of expando, for debugging");
canSee='block';
//MAIN EXPANDO OBJECT
function expandoMenu() {
this.supported = (document.getElementById || document.all);
if (!this.supported){return false;}
this.radio=true; // behaves as radio buttons by default
this.indicatorURLoff='';
this.indicatorURLon='';
this.indicatorProperty = "";//'backgroundImage' is the option for modifying by style, leave blank to use old method of img src
this.memberList=function(){}; //empty object - we'll fill this up with properties (menu item names) later
//SET ON INDICATOR
this.setONindicator=setONindicator;
function setONindicator(targetID,url){
this.memberList[targetID].indicatorURLon=url;
};
//SET OFF INDICATOR
this.setOFFindicator=setOFFindicator;
function setOFFindicator(targetID,url){
this.memberList[targetID].indicatorURLoff=url;
};
// setONindicators -- set all items to have same indicator
this.setONindicators=setONindicators;
function setONindicators(url){
if (!this.supported){return false;}
for (var thisTargetID in this.memberList)
{
this.setONindicator(thisTargetID,url);
}
}; // end of setONindicators
// setOFFindicators -- set all items to have same indicator
this.setOFFindicators=setOFFindicators;
function setOFFindicators(url){
if (!this.supported){return false;}
for (var thisTargetID in this.memberList)
{
this.setOFFindicator(thisTargetID,url);
}
}; // end of setONindicators
//ADD MENU ITEM
this.addMenuItem=addMenuItem;
function addMenuItem(targetID, indicatorID){
this.memberList[targetID]=new this.menuItem(targetID,indicatorID);
};
// CLOSE ALL BUT -- closes all items but the one targeted
this.closeAllBut =closeAllBut;
function closeAllBut(memberIDtoskip){
if (!this.supported){return false;}
for (var i in this.memberList)
{
try
{
if (!(this.memberList[i].targetID==memberIDtoskip))
{
this.memberList[i].hide();
}
}
catch(err)
{
// just go on, for example in safari, there will be a 'prototype' property to deal with
}
}
}; // end of closeall
// show
this.show = show;
function show(memberIDtoshow){
if (!this.supported){return false;}
this.memberList[memberIDtoshow].show();
}; // end of show
// TOGGLE VISIBILITY
this.toggleVisibility = toggleVisibility;
function toggleVisibility(memberIDclicked){
var shown=this.memberList[memberIDclicked].shown();
if (!this.supported){return false;}
if (this.radio)
{
if( !shown){this.memberList[memberIDclicked].show();
this.closeAllBut(memberIDclicked);
}
// if not shown then nothing
}
else
{
if (shown)
{this.memberList[memberIDclicked].hide();}
else
{this.memberList[memberIDclicked].show();}
}
};
// ////////// ///////// ///////// ///////// //////// ///////// Menu Item object
this.menuItem = menuItem;
function menuItem(aTargetID, anIndicatorID){
this.usesIndicator=false;
if (anIndicatorID!='') {this.usesIndicator=true; }
this.desc='';
this.indicatorID=anIndicatorID;//can be blank, ('') if not using a marker
this.targetID=aTargetID;//id of the area to be expandoed
this.indicatorURLoff='';
this.indicatorURLon='';
//shown
this.shown=shown;
function shown(){
if (document.getElementById)
{var ele = document.getElementById(this.targetID);}
else if (document.all)
{var ele = document.all[this.targetID];}
try{
if(ele.style.display==canSee)
{return true;}
else if (ele.style.display=="none")
{return false;}
}
catch(er)
{}
}
// showING FUNCTION
this.show=show;
function show(){
try{
if (this.usesIndicator&&this.indicatorURLon !=''){
if(this.indicatorProperty != "backgroundImage"){
document.images[this.indicatorID].src = this.indicatorURLon;}//open icon
else{
document.getElementById(this.indicatorID).style.backgroundImage = "url(" + this.indicatorURLon + ")";}
}
}
catch(er){errorFunction(this,er);}
try{
if (document.getElementById)
{document.getElementById(this.targetID).style.display = canSee;}
else if (document.all)
{document.all[this.targetID].style.display = canSee;}
}
catch(er){errorFunction(this,er);}
}
// HIDING FUNCTION
this.hide=hide;
function hide(){
try{
if (this.usesIndicator&&this.indicatorURLon !=''){
if(this.indicatorProperty != "backgroundImage"){
document.images[this.indicatorID].src = this.indicatorURLoff;}//closed icon
else{
document.getElementById(this.indicatorID).style.backgroundImage = "url(" + this.indicatorURLoff + ")";}
}
}
catch(er){errorFunction(this,er);}
try{
var current = 'none';
if (document.getElementById)
{document.getElementById(this.targetID).style.display = current;}
else if (document.all)
{document.all[this.targetID].style.display = current;}
}
catch(er){errorFunction(this,er);}
}// end of hide function
};//end of menu item
}// end of Expando Object
Here's the code in the page that launches it:
CODE
<script type="text/javascript" src="/Scripts/ExpandoMenu-temporary.js"></script>
<script type="text/javascript"><!--
// Side Menu
turnOffExpandoClass();//defined in the expando script
var expandoMenu = new expandoMenu();
expandoMenu.indicatorProperty = "backgroundImage";
//for debug only
//var expandoMenu = false; alert("expando disabled");
expandoMenu.radio=false;
// the item names 'item[n] work with the template expressions in the our templpates
expandoMenu.addMenuItem('item0','item0IND');
expandoMenu.addMenuItem('item1','item1IND');
expandoMenu.addMenuItem('item2','item2IND');
expandoMenu.addMenuItem('item3','item3IND');
expandoMenu.addMenuItem('item4','item4IND');
expandoMenu.addMenuItem('item5','item5IND');
expandoMenu.addMenuItem('item6','item6IND');
expandoMenu.addMenuItem('item7','item7IND');
expandoMenu.addMenuItem('item8','item8IND');
expandoMenu.addMenuItem('item9','item9IND');
expandoMenu.setOFFindicators("/page_art/nav/boxMenuControlPlus.gif");
expandoMenu.setONindicators("/page_art/nav/boxMenuControlMinus.gif");
function expandoPageLoad(){
popups.closeAllBut('item0');
}
//-->
</script>
Here's the HTML that it applies to:
CODE
<div id="expandoMenuBlock">
<ul>
<li>
<!-- NOTE this block uses template expressions to populate the ids -->
<div id="item0IND" class="FeatureHeader" onclick="expandoMenu.toggleVisibility('item0'); return false; ">
<h4>Aqueous Finish<br />
Standard and Glossy</h4>
</div>
<div class="expando" id="item0">
<p>Type_your_expando_content_here</p>
</div>
</li>
<li>
<!-- NOTE this block uses template expressions to populate the ids -->
<div id="item1IND" class="FeatureHeader" onclick="expandoMenu.toggleVisibility('item1'); return false; ">
<h4>Aqueous Finish<br />
Matte, Varnish</h4>
</div>
<div class="expando" id="item1">
<p>Type_your_expando_content_here</p>
</div>
</li>
<li>
<!-- NOTE this block uses template expressions to populate the ids -->
<div id="item2IND" class="FeatureHeader" onclick="expandoMenu.toggleVisibility('item2'); return false; ">
<h4>Lamination<br />
High Gloss & Matte Lamination</h4>
</div>
<div class="expando" id="item2">
<p>Type_your_expando_content_here</p>
</div>
</li>
<li>
<!-- NOTE this block uses template expressions to populate the ids -->
<div id="item3IND" class="FeatureHeader" onclick="expandoMenu.toggleVisibility('item3'); return false; ">
<h4>No Finish<br />
Uncoated Stock & Fiberboard</h4>
</div>
<div class="expando" id="item3">
<p>Type_your_expando_content_here</p>
</div>
</li>
</ul>
</div>
I don't think my existing stylesheets are messing it up somehow, because I get the problem if I comment out the style sheets links on the page.
Hope to hear from someone soon showing me what dumb thing I've done to cause the problem. I'm at my wit's end.
Any help appreciated.
| 