JavaScript Error in IE
Hello Experts, Trying to get this code to work. it works fine with my old code but now with the redesign of the navigation for the FAQ section of my site it fails. Works in FF but still produces the errof. in IE it don't work at all. Can someone look at it and point me in the right direction?
More info: the {literal}{/literal} tags are for smarty templates, should not effect anything.
More info: the {literal}{/literal} tags are for smarty templates, should not effect anything.
<div style="width:650px; height:30px; float:left"><em>
<h2 class="products_title"><a name="theTop"> Help </a></h2>
</em>
</div>
<div style="float:left; height: 6px; width:650px;"><img src="/images/linie.jpg" /></div>
<br>
{literal}
<script language="JavaScript" type="text/javascript">
function ShowSub(SubId)
{
var divs = new Array('general','order','payment','policies','registration','shipping','technical','downloads','color');
for ( keyVar in divs )
{
curr = divs[keyVar];
//alert(curr);
CurrElemnt = document.getElementById(curr);
// if (CurrElemnt == null) alert("NO SUCH ELEMENT: '"+curr+"'!");
if (curr == SubId)
{
if (HasClassName(CurrElemnt,'hidden'))
{
//alert ("removing class name hidden from "+curr+".");
RemoveClassName(CurrElemnt,'hidden');
titleElemnt = document.getElementById(curr+"_link");
AddClassName(titleElemnt,'topic_link_curr');
RemoveClassName(titleElemnt,'topic_link');
}
}
else
{
if (!HasClassName(CurrElemnt,'hidden'))
{
//alert ("Adding class name hidden to "+curr);
AddClassName(CurrElemnt,'hidden');
titleElemnt = document.getElementById(curr+"_link");
//alert(curr+"_link");
RemoveClassName(titleElemnt,'topic_link_curr');
AddClassName(titleElemnt,'topic_link');
}
// alert ("NOT Adding class name hidden to "+curr);
}
}
}
// ----------------------------------------------------------------------------
// HasClassName
//
// Description : returns boolean indicating whether the object has the class name
// built with the understanding that there may be multiple classes
//
// Arguments:
// objElement - element to manipulate
// strClass - class name to add
//
function HasClassName(objElement, strClass)
{
alert(objElement);
// if there is a class
if ( objElement.className )
{
// the classes are just a space separated list, so first get the list
var arrList = objElement.className.split(' ');
// get uppercase class for comparison purposes
var strClassUpper = strClass.toUpperCase();
// find all instances and remove them
for ( var i = 0; i < arrList.length; i++ )
{
// if class found
if ( arrList[i].toUpperCase() == strClassUpper )
{
// we found it
return true;
}
}
}
// if we got here then the class name is not there
return false;
}
// ----------------------------------------------------------------------------
// AddClassName
//
// Description : adds a class to the class attribute of a DOM element
// built with the understanding that there may be multiple classes
//
// Arguments:
// objElement - element to manipulate
// strClass - class name to add
//
function AddClassName(objElement, strClass, blnMayAlreadyExist)
{
// if there is a class
if ( objElement.className )
{
// the classes are just a space separated list, so first get the list
var arrList = objElement.className.split(' ');
// if the new class name may already exist in list
if ( blnMayAlreadyExist )
{
// get uppercase class for comparison purposes
var strClassUpper = strClass.toUpperCase();
// find all instances and remove them
for ( var i = 0; i < arrList.length; i++ )
{
// if class found
if ( arrList[i].toUpperCase() == strClassUpper )
{
// remove array item
arrList.splice(i, 1);
// decrement loop counter as we have adjusted the array's contents
i--;
}
}
}
// add the new class to end of list
arrList[arrList.length] = strClass;
// add the new class to beginning of list
//arrList.splice(0, 0, strClass);
// assign modified class name attribute
objElement.className = arrList.join(' ');
}
// if there was no class
else
{
// assign modified class name attribute
objElement.className = strClass;
}
}
// ----------------------------------------------------------------------------
// RemoveClassName
//
// Description : removes a class from the class attribute of a DOM element
// built with the understanding that there may be multiple classes
//
// Arguments:
// objElement - element to manipulate
// strClass - class name to remove
//
function RemoveClassName(objElement, strClass)
{
// if there is a class
if ( objElement.className )
{
// the classes are just a space separated list, so first get the list
var arrList = objElement.className.split(' ');
// get uppercase class for comparison purposes
var strClassUpper = strClass.toUpperCase();
// find all instances and remove them
for ( var i = 0; i < arrList.length; i++ )
{
// if class found
if ( arrList[i].toUpperCase() == strClassUpper )
{
// remove array item
arrList.splice(i, 1);
// decrement loop counter as we have adjusted the array's contents
i--;
}
}
// assign modified class name attribute
objElement.className = arrList.join(' ');
}
// if there was no class
// there is nothing to remove
}
</script>
<style type="text/css">
.row1 a{
display:block;
width:182px;
height:30px;
float:left;
}
.row1-1 a{
background: transparent url(http://dev.ipromo.com/images/help1.jpg);
}
.row1-2 a{
background: transparent url(http://dev.ipromo.com/images/help2.jpg);
}
.row1-3 a{
background: transparent url(http://dev.ipromo.com/images/help3.jpg);
}
.row1-4 a{
background: transparent url(http://dev.ipromo.com/images/help4.jpg);
}
.row1-5 a{
background: transparent url(http://dev.ipromo.com/images/help5.jpg);
}
.row1-6 a{
background: transparent url(http://dev.ipromo.com/images/help6.jpg);
}
.row1-7 a{
background: transparent url(http://dev.ipromo.com/images/help7.jpg);
}
.row1-8 a{
background: transparent url(http://dev.ipromo.com/images/help8.jpg);
}
.row1-9 a{
background: transparent url(http://dev.ipromo.com/images/help9.jpg);
}
.row1 a:hover {
background-position: 0 -30px;
}
.container {
margin-top:5px;
margin-bottom:20px;
}
</style>
{/literal}
<div align="center" style="width:550; padding-top:15px;">
<ul class="faq_topics">
<div class="row1 row1-1" id="general_link"><a href="#" onclick="ShowSub('general'); return false;"></a></div>
<div class="row1 row1-2" id="order_link"><a href="#" onclick="ShowSub('order'); return false;"></a></div>
<div class="row1 row1-3" id="shipping_link"><a href="#" onclick="ShowSub('shipping'); return false;"></a></div>
<div class="row1 row1-4" id="technical_link"><a href="#" onclick="ShowSub('technical'); return false;"></a></div>
<div class="row1 row1-5" id="payment_link"><a href="#" onclick="ShowSub('payment'); return false;"></a></div>
<div class="row1 row1-6" id="registration_link"><a href="#" onclick="ShowSub('registration'); return false;"></a></div>
<div class="row1 row1-7" id="policies_link"><a href="#" onclick="ShowSub('policies'); return false;"></a></div>
<div class="row1 row1-8" id="downloads_link"><a href="#" onclick="ShowSub('downloads'); return false;"></a></div>
<div class="row1 row1-9" id="color_link"><a href="#" onclick="ShowSub('color'); return false;"></a></div>
</div>
<div style="clear:both;""></div>
<br>
<br>
{foreach item=SUB key=key from=$subpages}
{include file=$SUB}
{/foreach}
<div class="faq_title"> </div>SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
robinu,
Thank you again for another attempt. But no luck. What you suggest doing would get rid of my navigation links which is not what i'm looking to do.
Take a look at a live example of what i'm working on my dev server on. It can be found at http://www.ipromo.com/?fuseaction=faq.main
I can let see exactly what i'm talking about on my dev server if you give me your current ip address, as my dev is controlled via .htaccess and allow/deny rules.
That is my faq section, the navigation at the top of the main content section works great there, but what i'm looking to do is replace those ugly navigation links with a pretty css rollover menu that has background images as the links.
The reason your suggestion does not work is that the s with the id="general" etc are loaded with the following code
{foreach item=SUB key=key from=$subpages}
{include file=$SUB}
{/foreach}
this goes through an array of location pointers (created in the fbx_Switch.php as part of fuseaction):
$smarty->assign('PAGE',"fa
if (!isset($Fusebox["fuseacti
$subpage = 'general';
else $subpage = htmlentities($Fusebox["fus
$subpages=array('order'=>"
$smarty->assign('SUBPAGE',
$smarty->assign('subpages'
//if (isset($_GET['debug'])) $smarty->debugging = true;
$smarty->display("index.ht
and includes the files.
Each include file has a like so:
#####CONTENT#####
These are the divs that the JavaScript should be hiding, and it is in FF (even though it gives an error that i posted above) in IE however it just gives an error and does not hide the current div and "unhide" the one that the navigation dictates.
This is probably very confusing as I'm not a English Major, hope you were able to follow along.
Thank you again for another attempt. But no luck. What you suggest doing would get rid of my navigation links which is not what i'm looking to do.
Take a look at a live example of what i'm working on my dev server on. It can be found at http://www.ipromo.com/?fuseaction=faq.main
I can let see exactly what i'm talking about on my dev server if you give me your current ip address, as my dev is controlled via .htaccess and allow/deny rules.
That is my faq section, the navigation at the top of the main content section works great there, but what i'm looking to do is replace those ugly navigation links with a pretty css rollover menu that has background images as the links.
The reason your suggestion does not work is that the s with the id="general" etc are loaded with the following code
{foreach item=SUB key=key from=$subpages}
{include file=$SUB}
{/foreach}
this goes through an array of location pointers (created in the fbx_Switch.php as part of fuseaction):
$smarty->assign('PAGE',"fa
if (!isset($Fusebox["fuseacti
$subpage = 'general';
else $subpage = htmlentities($Fusebox["fus
$subpages=array('order'=>"
$smarty->assign('SUBPAGE',
$smarty->assign('subpages'
//if (isset($_GET['debug'])) $smarty->debugging = true;
$smarty->display("index.ht
and includes the files.
Each include file has a like so:
#####CONTENT#####
These are the divs that the JavaScript should be hiding, and it is in FF (even though it gives an error that i posted above) in IE however it just gives an error and does not hide the current div and "unhide" the one that the navigation dictates.
This is probably very confusing as I'm not a English Major, hope you were able to follow along.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you for the attempt, but no luck. Here's what i have now, but still get the error on this line of the HasClassName function: iif ( objElement.className )
It seems that JS is thinking that i'm not sending it an object for the HasClassName function. Here's what firebug tells me:
objElement is null
HasClassName(null, "hidden") dev.ipromo.com (line 623)
ShowSub("downloads") dev.ipromo.com (line 569)
onclick()dev.ipromo.com (line 1)
[Break on this error] if ( objElement.className )
Open in new window