CSS Codes
CSS Layouts
Results 1 to 5 of 5

Thread: Animated Collapse help with positioning.

  1. 01-13-2011, 01:09 AM #1
    JosephHales
    JosephHales is offline New Comer (less than 5 posts)
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Animated Collapse help with positioning.

    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 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
    Last edited by jscheuer1; 01-13-2011 at 01:36 AM. Reason: add link to script
    Reply With Quote Reply With Quote
  2. 01-13-2011, 03:17 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Add the highlighted as shown:

    Code:
     . . . 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.

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


      Code:
       . . . 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 . . .

    2. 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):

      Code:
       . . .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 . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    JosephHales (02-23-2011)
  4. 02-23-2011, 03:51 PM #3
    JosephHales
    JosephHales is offline New Comer (less than 5 posts)
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
  5. 02-28-2011, 06:29 PM #4
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, get rid of this:

    Code:
    <!DOCTYPE HTML>
    and this:

    Code:
    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):

    Code:
    <body onload="goforit()">
    Replace this:

    Code:
    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:

    Code:
    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:

    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="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:

    Code:
    <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>
    Last edited by jscheuer1; 03-01-2011 at 03:39 PM. Reason: code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    JosephHales (03-27-2011)
  7. 03-27-2011, 01:44 PM #5
    JosephHales
    JosephHales is offline New Comer (less than 5 posts)
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules