Hello,
I get this message from firefox when the javascript function
loadContent is called:
An error exists inside your "ontoggle" function:
ReferenceError: loadContent is not defined
Aborting execution of function.

I have an animated menu (#left) that expands and collapse (the text in
#tavira) and loads with a fed in-out animation some content in a DIV
(#right).

Here the javascript code

Code:
<script type="text/javascript">
animatedcollapse.ontoggle=function($, divobj, state){ //fires each
time a DIV is expanded/contracted
if (divobj.id=="tavira" && state=="block") {
   $('#load').remove();
   $('#right').fadeOut(300,loadContent);
   $('#left').append('<span id="load">LOADING...</span>');
   $('#load').fadeIn(300);
   var toLoad = divobj.id+'.html #right_in';
   function loadContent() {
         $('#right').load(toLoad,'',showNewContent());
   }
   function showNewContent() {
         $('#right').fadeIn('normal',hideLoader());
   }
   function hideLoader() {
         $('#load').fadeOut('normal');
   }


}
}

animatedcollapse.init();

</script>




Here also the html code

Code:
<div id="left">
<div id="left_in">
<div style="width:408px;"> <a href="javascript:animatedcollapse.toggle
('tavira')"><img src="picts/tavira.jpg" alt="tavira" width="222"
height="26" border="0" /></a></div>
<div id="tavira" style="width:408px;  height:150px; background: #fff;
text-align:justify; padding-left:10px; padding-right:10px;   padding-
top:5px; padding-bottom:5px;">
Some text here... </div>
</div>
</div>

<div id="right">
<div id="right_in">
<div style="padding-top:170px; padding-bottom:170px"><img src="picts/
projekte/tavira/POR-A4.jpg" width="561" height="401" /></div>
<div style="padding-top:72px; padding-bottom:72px"><img src="picts/
projekte/tavira/POR-A1.jpg" width="427" height="596" /></div>
</div>
</div>


Since it works just fine in safari I guess is a small code error, but
to be honest I´m not very familiar with javascript so I hope someone
can help me.

Thanks

Reply via email to