animatedcollapse.js show/hide problem

**cassettenova** · 02-08-2011, 04:55 PM

1) Script Title: animatedcollapse.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:

I'm using animatedcollapse.js to fade in a dock at the bottom of this page: http://nottwomu.ch/yrg-test/

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?

Code:

<head>
<script type="text/javascript">
animatedcollapse.addDiv('dock','fade=1,speed=1400,hide=1')
animatedcollapse.init()
</script>
</head>
<body>

<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="javascript:animatedcollapse.show('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="http://www.nottwomu.ch/yrg-test/template.php?iframe=true&amp;width=800&amp;height=600" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Education</a></li>
      			<li><a href="http://www.google.com?iframe=true&amp;width=600&amp;height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Construction/Design</a></li>
      			<li><a href="http://www.facebook.com?iframe=true&amp;width=600&amp;height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Communities</a></li>
      			<li><a href="http://www.facebook.com?iframe=true&amp;width=600&amp;height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Business/Operations</a></li> 
      			<li><a href="http://www.facebook.com?iframe=true&amp;width=600&amp;height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Marketing/Media</a></li></ul>
  			</div></dd></dl>
		<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();
		?></li>
	
	</ul>
	
</div>


<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>
  	</div>
  </div> 
</div>


<!--dock menu JS options -->
<script type="text/javascript">	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 80,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
		}
	);
</script>

</body>

**ddadmin** · 02-08-2011, 09:04 PM

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:

Code:

<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?

Thread: animatedcollapse.js show/hide problem

Thread Tools

Search Thread

animatedcollapse.js show/hide problem

Bookmarks

Bookmarks

Posting Permissions