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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question AnimatedCollapse error: Not Defined

    Hi all!

    I am having an issue with Javascript AnimatedCollapse code. I am quite a newbie to Javascript but from searching forums, I can see others have had a similar error but doesn't seem to be the same problem.

    I have the Animated Collapse working on my first two pages. I have 3 "drop downs" with a fade in/out using some basic code from Dynamic Drive

    Using CMSMS, I have a template which I have used for my first two pages, and then for my 3rd page. This template calls the javascript and so is not different for any of the pages.

    On my 3rd page, my drop downs just don't work - nothing happens when I click the link. Instead I am getting the error "Uncaught ReferenceError: animatedcollapse is not defined". I have even tried copying the exact 1st page that works, but the copy does not.

    This leads me to believe the code is not incorrect for a singular page, but when using the Javascript for multiple pages, should I be loading it at a certain time or have repeated code?


    My first & 2nd pages (that work), and my 3rd page (that doesn't work) I have the following in my <head> tag:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="collapse/animatedcollapse.js">// <![CDATA[
    /***********************************************
    * Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    // ]]></script>
    <script type="text/javascript">// <![CDATA[
    animatedcollapse.addDiv('drop1', 'fade=1,height=auto')
    animatedcollapse.addDiv('drop2', 'fade=1,height=auto')
    animatedcollapse.addDiv('drop3', 'fade=1,height=auto')
    animatedcollapse.addDiv('drop4', 'fade=1,height=auto')
    
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    	//$: Access to jQuery
    	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    	//state: "block" or "none", depending on state
    }
    
    animatedcollapse.init()
    // ]]></script>
    Then, in my <body> tags for the page that does not work, I have the following:

    Code:
    <div class="contentbox-noshading"><br/>
        <p>The VideoCloud Professional Virtual Meeting Rooms offer ...... with unlimited usage.</p>
        <p> </p>
        <br/>				
     </div>
    
    <a href="javascript:animatedcollapse.toggle('drop1')">
        <div class="dropbox-link">What Services are available?</div>
    </a>
    <div class="dropbox-noshading"><br/>
        <div id="drop1" style="display:none;"><p>The VideoCloud Profes......</p>
              <ul>
                   <li>4 par...</li>
                   <li>6 par...</li>
              </ul>
              <p>The Vi..... end.</p>
              <br/>
        </div>				
    </div>
    with drop2 and drop3 also (meant to be) appearing further down.

    What confuses me is that this code all works fine on my other pages. Am I missing some Javascript basics?!

    This is the page that is not working and has some dummy text in for drop 2 and drop 3 whilst I try and work out how to sort this.

    Whereas this page is working, and is how I would like other pages to work when using the same template...

    Many thanks for your time in reading my post and I look forward to hearing from you soon!

    Emily

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <script type="text/javascript" src="http://www.videocloud.vc/collapse/animatedcollapse.js">
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Thanks for your reply Vic!

    I have actually uploaded the animatedcollapse.js to my website file manager in that location, so this doesn't seem to be the problem.

    And also the page that works is calling the same script, as it is using the same header, as it is working from a template...

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I tried Vics suggestion, and this stopped the original pages from working, so I changed it back ( removed the www.videocloud.vc part) and all pages began working...

    I am unsure why these are now working... unless it was something stuck in my cache when testing earlier.

    Thanks for reading, if I find out what happened or this happens again somewhere else I will keep the page updated. It would be good to hear anyones thoughts on why this may have happened in the first place though anyway!


  •  

    Tags for this Thread

    Posting Permissions

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