cassettenova
02-08-2011, 04:55 PM
1) Script Title: animatedcollapse.js
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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?
<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&width=800&height=600" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Education</a></li>
<li><a href="http://www.google.com?iframe=true&width=600&height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Construction/Design</a></li>
<li><a href="http://www.facebook.com?iframe=true&width=600&height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Communities</a></li>
<li><a href="http://www.facebook.com?iframe=true&width=600&height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Business/Operations</a></li>
<li><a href="http://www.facebook.com?iframe=true&width=600&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>
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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?
<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&width=800&height=600" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Education</a></li>
<li><a href="http://www.google.com?iframe=true&width=600&height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Construction/Design</a></li>
<li><a href="http://www.facebook.com?iframe=true&width=600&height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Communities</a></li>
<li><a href="http://www.facebook.com?iframe=true&width=600&height=300" rel="prettyPhoto[iframe]" onclick="javascript:animatedcollapse.hide('dock')">Business/Operations</a></li>
<li><a href="http://www.facebook.com?iframe=true&width=600&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>