Log in

View Full Version : Animated Collapse help with positioning.


JosephHales
01-13-2011, 01:09 AM
I'm sure this is really simple but I can't figure it out.
I have created this website http://josephhales.co.uk/NEW/ using the DD Animated Collapse (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm) javascript. I love how it closes one when you open the next, however I would like it always put the open link (div) to the top of the page (like an anchor) so you don't have to scroll back to the top. Does anybody know how to do this?

I'd appreciate any help.

Thanks in advance.

Joe
jscheuer1
01-13-2011, 03:17 AM
Add the highlighted as shown:


. . . dDiv('AT', 'fade=0,speed=1000,group=pets,persist=1,work')
animatedcollapse.addDiv('AT', 'fade=0,speed=1000,group=work,hide=1')

animatedcollapse.addDiv('VM', 'fade=0,speed=1000,group=work')
animatedcollapse.addDiv('VM', 'fade=0,speed=1000,group=pets,persist=1,work')
animatedcollapse.addDiv('VM', 'fade=0,speed=1000,group=work,hide=1')





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
var dobjoff = $(divobj).parents('.underlinemenu').offset().top;
if(state === 'block' || dobjoff > $(window).height()){
window.scrollTo(0, dobjoff);
}
}

animatedcollapse.init()

</script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="bookmarkscroll.js">

/***********************************************
* Scrolling HTML bookmarks- © Dynamic Driv . . .

There are two unrelated errors on the page that jumped out at me.


Only one DOCTYPE allowed per page, so get rid of the highlighted here:



. . . eEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
body,td,th {
font-size: 13px;
color: #000;
}
</style>
<!-- InstanceEndEditable -->




<!DOCTYPE HTML>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic D . . .



And the body tag's onload function is undefined. It may be left over from a previous version of the page. If so, get rid of it (highlighted):


. . .xt/javascript" src="bookmarkscroll.js">

/***********************************************
* Scrolling HTML bookmarks- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>


</head>
<body onload="goforit()">





<div id="containe . . .
JosephHales
02-23-2011, 03:51 PM
Thank you so much for all your help - it has been a real help.

I've updated http://josephhales.co.uk/ it's still a bit glitchy and I'm not really sure why.

Do you know why some of the Animated Collapses don't open right at the top?
Also is there anyway of making it open and go to the 'top' in one movement?

Thanks again for your help.

Best,
Joe
jscheuer1
02-28-2011, 06:29 PM
OK, get rid of this:


<!DOCTYPE HTML>

and this:


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
var dobjoff = $(divobj).parents('.underlinemenu').offset().top;
if(state === 'block' || dobjoff > $(window).height()){
window.scrollTo(0, dobjoff);
}
}

and this (highlighted):


<body onload="goforit()">

Replace this:


animatedcollapse.addDiv('name','fade=0,group=work')
animatedcollapse.addDiv('name', 'fade=1,group=GROUP,persist=1,work')
animatedcollapse.addDiv('name', 'fade=1,group=work,hide=1')


animatedcollapse.addDiv('VEFFECKT', 'fade=0,speed=1000, group=work')
animatedcollapse.addDiv('VEFFECKT', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('VEFFECKT', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('TEAM', 'fade=0,speed=1000')
animatedcollapse.addDiv('TEAM', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('TEAM', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('playground1', 'fade=0,speed=1000')
animatedcollapse.addDiv('playground1', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('playground1', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('playground', 'fade=0,speed=1000')
animatedcollapse.addDiv('playground', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('playground', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('Orozco', 'fade=0,speed=1000')
animatedcollapse.addDiv('Orozco', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('Orozco', 'fade=0,speed=1000, group=work,hide=1')



animatedcollapse.addDiv('Tate_Film', 'fade=0,speed=1000')
animatedcollapse.addDiv('Tate_Film', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('Tate_Film', 'fade=0,speed=1000, group=work,hide=1')



animatedcollapse.addDiv('Tate_Legacy', 'fade=0,speed=1000')
animatedcollapse.addDiv('Tate_Legacy', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('Tate_Legacy', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('Tate_Archive', 'fade=0')
animatedcollapse.addDiv('Tate_Archive', 'fade=0,speed=800, group=GROUP,persist=1,work')
animatedcollapse.addDiv('Tate_Archive', 'fade=0,speed=800, group=work,hide=1')


animatedcollapse.addDiv('Ascension', 'fade=0,speed=800')
animatedcollapse.addDiv('Ascension', 'fade=0,speed=800, group=GROUP,persist=1,work')
animatedcollapse.addDiv('Ascension', 'fade=0,speed=800, group=work,hide=1')


animatedcollapse.addDiv('NoZine', 'fade=0,speed=800')
animatedcollapse.addDiv('NoZine', 'fade=0,speed=800, group=GROUP,persist=1,work')
animatedcollapse.addDiv('NoZine', 'fade=0,speed=800, group=work,hide=1')


animatedcollapse.addDiv('Wound', 'fade=0,speed=800')
animatedcollapse.addDiv('Wound', 'fade=0,speed=800, group=GROUP,persist=1,work')
animatedcollapse.addDiv('Wound', 'fade=0,speed=800, group=work,hide=1')


animatedcollapse.addDiv('SSYK', 'fade=0,speed=1300')
animatedcollapse.addDiv('SSYK', 'fade=0,speed=1300, group=GROUP,persist=1,work')
animatedcollapse.addDiv('SSYK', 'fade=0,speed=1300, group=work,hide=1')


animatedcollapse.addDiv('V', 'fade=0,speed=1000')
animatedcollapse.addDiv('V', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('V', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('OP', 'fade=0,speed=1000')
animatedcollapse.addDiv('OP', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('OP', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('Albany', 'fade=0,speed=1000')
animatedcollapse.addDiv('Albany', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('Albany', 'fade=0,speed=1000, group=work,hide=1')



animatedcollapse.addDiv('JW', 'fade=0,speed=1000')
animatedcollapse.addDiv('JW', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('JW', 'fade=0,speed=1000, group=work,hide=1')



animatedcollapse.addDiv('RB', 'fade=0,speed=1000')
animatedcollapse.addDiv('RB', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('RB', 'fade=0,speed=1000, group=work,hide=1')



animatedcollapse.addDiv('AT', 'fade=0,speed=1000')
animatedcollapse.addDiv('AT', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('AT', 'fade=0,speed=1000, group=work,hide=1')



animatedcollapse.addDiv('VM', 'fade=0,speed=1000')
animatedcollapse.addDiv('VM', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('VM', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('DSL', 'fade=0,speed=1000')
animatedcollapse.addDiv('DSL', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('DSL', 'fade=0,speed=1000, group=work,hide=1')


animatedcollapse.addDiv('OZ', 'fade=0,speed=1000')
animatedcollapse.addDiv('OZ', 'fade=0,speed=1000, group=GROUP,persist=1,work')
animatedcollapse.addDiv('OZ', 'fade=0,speed=1000, group=work,hide=1')

animatedcollapse.addDiv('BM', 'fade=0,speed=800')
animatedcollapse.addDiv('BM', 'fade=0,speed=800, group=GROUP,persist=1,work')
animatedcollapse.addDiv('BM', 'fade=0,speed=800, group=work,hide=1')

with this:


animatedcollapse.addDiv('name', 'fade=1,group=work');
animatedcollapse.addDiv('VEFFECKT', 'speed=1000, group=work');
animatedcollapse.addDiv('playground1', 'speed=1000, group=work');
animatedcollapse.addDiv('playground', 'speed=1000, group=work');
animatedcollapse.addDiv('Orozco', 'speed=1000, group=work');
animatedcollapse.addDiv('Tate_Film', 'speed=1000, group=work');
animatedcollapse.addDiv('Tate_Legacy', 'speed=1000, group=work');
animatedcollapse.addDiv('Tate_Archive', 'speed=800, group=work');
animatedcollapse.addDiv('Ascension', 'speed=800, group=work');
animatedcollapse.addDiv('NoZine', 'speed=800, group=work');
animatedcollapse.addDiv('Wound', 'speed=800, group=work');
animatedcollapse.addDiv('SSYK', 'speed=1300, group=work');
animatedcollapse.addDiv('V', 'speed=1000, group=work');
animatedcollapse.addDiv('OP', 'speed=1000, group=work');
animatedcollapse.addDiv('Albany', 'speed=1000, group=work');
animatedcollapse.addDiv('JW', 'speed=1000, group=work');
animatedcollapse.addDiv('AT', 'speed=1000, group=work');
animatedcollapse.addDiv('VM', 'speed=1000, group=work');
animatedcollapse.addDiv('DSL', 'speed=1000, group=work');
animatedcollapse.addDiv('OZ', 'speed=1000, group=work');
animatedcollapse.addDiv('BM', 'speed=800, group=work');

Replace this:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="bookmarkscroll.js">

/***********************************************
* Scrolling HTML bookmarks- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>

with this:


<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){
var bodyselector = window.opera? 'html' : 'html, body', re = /javascript:animatedcollapse\.toggle\('([^']+)'\)/,
isie = (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})();
$('a[href^=javascript:animatedcollapse.toggle]').click(function(e){
var id; if(!(id = re.exec(this.href)) || !(id = id[1])){return true;}
var t = $(this), $divobj = $('#' + id), y = 0, lasttoggle = false, targetgroup, $lasttoggle, y2, h = 0, wh, ielt;
if((targetgroup = animatedcollapse.divgroups[$divobj.attr('groupname')]) && (lasttoggle = targetgroup.lastactivedivid)){ //if this is a group and the last activated data exists
if(lasttoggle !== id && ($lasttoggle = $('#' + lasttoggle)).css('display') === 'block'){ //if one is open
if($lasttoggle.offset().top < t.offset().top){ //if the opened one is above the new one
h = $lasttoggle.height() + (ielt = $('a[href*="(\'' + lasttoggle + '\')"]')).height(); //calculate extra height of opened one
if(lasttoggle === 'name' || (isie && $.browser.version < 8)){h -= ielt.outerHeight(true) / 2;}
}
y = 1; //scroll to it as it opens
} else if($divobj.css('display') !== 'block'){ //if none are open and this one will open
y = 1; //scroll to it as it opens
}
} else if(lasttoggle !== false && $divobj.css('display') !== 'block'){ //if this is a group and none are open and this is the first time
y = 1; //scroll to it as it opens
} else return true; //it's a standalone, open or close it normally
e.preventDefault(); //it's in a group, so the actions computed will occur in the final two lines so prevent the default toggle
//y will still be 0 if we're simply closing an open item, page will scroll to top
if(!y && (y2 = t.offset().top) + (h = t.height()) > (wh = $(window).height())){ //but if we're just closing and the trigger is below the bottom of the page
y = 'close';
y2 = y2 + 3 * h - wh; //calculate an offset that will bring it's trigger into view
}
animatedcollapse.toggle(id);
$(bodyselector).animate({scrollTop: !y? 0 : y === 'close'? y2 : t.offset().top - h}, 1000);
});
});
/* ]]> */
</script>
JosephHales
03-27-2011, 01:44 PM
Dear John,

THANK YOU!

I'm so please to finally have my site function as I wanted it to and I couldn't have done it without your help.

With thanks and best wishes,
Joe