Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    funcion not defined problem in firefox

    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 in advance

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Since loadContent is defined inside the "if" block, Javascript won't create it unless the "if" condition is true. Functions which are defined outside any "if" statement get created right up front, so the solution is to put all your function definitions outside of any "if" blocks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •