Results 1 to 2 of 2

Thread: animatedcollapse.js show/hide problem

  1. #1
    Join Date
    Feb 2011
    Thanked 0 Times in 0 Posts

    Default animatedcollapse.js show/hide problem

    1) Script Title: animatedcollapse.js

    2) Script URL (on DD):

    3) Describe problem:

    I'm using animatedcollapse.js to fade in a dock at the bottom of this page:

    When you click on "about", the dock is exposed. The problem is that I want to have it hidden when you click on anything else, so I have an onclick function on the other links as shown below, but it keeps re-hiding the div everytime I click on it, instead of just fading out the div or keeping the hidden div hidden.

    How can I only have the div appear when I'm under the "about" section and not any of the others?

    <script type="text/javascript">
    <div id="container">
    <div id="nav">
    	<ul id="menu" class="gallery clearfix">
    		<!-- if you want to add/remove a menu item, be sure to add/remove a function from aux-scrollTo.js -->
    		<li class="menu-item first"><a href="#anchor1" onclick="javascript:animatedcollapse.hide('dock')" id="link1" >Home</a></li>
    		<li class="menu-item last"><a href="#anchor8" id="link8" onclick="'dock')">About</a></li>
    		<li class="menu-item"><dl class="dropdown">
    			<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"><a href="#anchor7" id="link7" onclick="javascript:animatedcollapse.hide('dock')">Services</a></dt>
      			<dd id="one-ddcontent" onmouseover="cancelHide('one',1)" onmouseout="ddMenu('one',-1)">
       			 <div id="navsmall"><ul>
          			<li><a href=";width=800&amp;height=600" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Education</a></li>
          			<li><a href=";width=600&amp;height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Construction/Design</a></li>
          			<li><a href=";width=600&amp;height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Communities</a></li>
          			<li><a href=";width=600&amp;height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Business/Operations</a></li> 
          			<li><a href=";width=600&amp;height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Marketing/Media</a></li></ul>
    		<li class="menu-item"><a href="#anchor5" id="link5" onclick="javascript:animatedcollapse.hide('dock')">Media</a></li>
    		<li class="menu-item"><a href="#anchor4" id="link4" onclick="javascript:animatedcollapse.hide('dock')">Events</a></li>	
    		<li class="menu-item"><a href="#anchor6" id="link6" onclick="javascript:animatedcollapse.hide('dock')">Contact</a></li>
    		<li class="menu-item" onclick="javascript:animatedcollapse.hide('dock')"><?php
    			$c = new nuggetzControl();
    <div class="dock"> 
    <div id="dock">
      <div class="dock-container">
    	  <a class="dock-item" href="#"><img src="images/Laurenbiopic_11-02-10.jpg" alt="Lauren" /><span>Lauren</span></a> 
    	  <a class="dock-item" href="#"><img src="images/j_radoff.jpg" alt="contact" /><span>Josh</span></a> 
    	  <a class="dock-item" href="#"><img src="images/j_carney.jpg" alt="portfolio" /><span>Jenny</span></a> 
    	  <a class="dock-item" href="#"><img src="images/b_grech.jpg" alt="music" /><span>Brittany</span></a> 
    	  <a class="dock-item" href="#"><img src="images/abakshi.jpg" alt="video" /><span>Arpan</span></a> 
    	  <a class="dock-item" href="#"><img src="images/s_pandya.jpg" alt="history" /><span>Seema</span></a> 
    	  <a class="dock-item" href="#"><img src="images/s_singh.jpg" alt="calendar" /><span>Shillpa</span></a> 
    	  <a class="dock-item" href="#"><img src="images/b_stanley.jpg" alt="rss" /><span>Ben</span></a>
    	  <a class="dock-item" href="#"><img src="images/j_franken.jpg" alt="rss" /><span>Jason</span></a> 
    	  <a class="dock-item" href="#"><img src="images/k_dykema.jpg" alt="rss" /><span>Kelly</span></a>
    <!--dock menu JS options -->
    <script type="text/javascript">	
    					maxWidth: 80,
    					items: 'a',
    					itemsText: 'span',
    					container: '.dock-container',
    					itemWidth: 40,
    					proximity: 90,
    					halign : 'center'

  2. #2
    Join Date
    Aug 2004
    Thanked 1,008 Times in 993 Posts
    Blog Entries


    Hmm calling animatedcollapse.hide() shouldn't first reveal the target DIV before hiding it again each time- it should just hide it. My suspicion is that there is another function on your page that's revealing the dock each time one of the menu links is clicked on before Animated Collapsible DIV script hides it again. To test out this theory, what if you remove the code in red from one of your menu links below:

    <li class="menu-item"><a href="#anchor6" id="link6" onclick="javascript:animatedcollapse.hide('dock')">Contact</a></li>
    Now click on "Contact" again on your page when the dock is hidden- does the dock reappear again?
    DD Admin


Posting Permissions

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