Advanced Search

Results 1 to 6 of 6

Thread: Accordion Content Script (v-2.0) with added option ("scrolltoheader")

  1. #1
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Accordion Content Script (v-2.0) with added option ("scrolltoheader")

    1) Script Title: accordion.js

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

    3) Describe problem: The v2 scrolltoheader function does not work on page load.
    My page opens the relevant tab, but if it is too far down the page, the user may not realise it has opened. See www.patronomy.com/faqs.asp?returntab=17 for an example
    Does anyone know how to make it work so that the tab is scrolled to the top when the page loads please?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "subapple", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 500, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	scrolltoheader: true,
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    	defaultexpanded: [17], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: true, //Should contents open by default be animated into view?
    	persiststate: false, //persist state of opened contents within browser session?
    	toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "slow", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
         var o=headers[expandedindices],p=[0,0];
         setTimeout(function(){
         while(o){
          p[0]+=o.offsetLeft;
          p[1]+=o.offsetTop;
          o=o.offsetParent;
         }
          window.scrollTo(p[0],p[1]);
         },500); // try increasing the delay 500 to account for the page load time
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    snappy (12-25-2013)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    .

    Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.


    This:

    Code:
    <script type="text/javascript" src="assets/ddaccordion.js"></script>
    Should be:

    Code:
    <script type="text/javascript" src="assets/ddaccordion.js">
    
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    After fixing that, just add the highlighted:

    Code:
    <script type="text/javascript">
    
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "subapple", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 500, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	scrolltoheader: true,
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    	defaultexpanded: [17], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: true, //Should contents open by default be animated into view?
    	persiststate: false, //persist state of opened contents within browser session?
    	toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "slow", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    jQuery(window).load(function(){
    	var $ = jQuery;
    	setTimeout(function(){$('html, body').animate({scrollTop: $('.selected').offset().top});}, 100);
    });
    </script>
    - John
    ________________________

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

  5. #4
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks to both of you and John, the credit has been inserted, with apologies for the oversight.

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Thanks for restoring the credit. You might want to combine the two methods:

    Code:
    <script type="text/javascript">
    
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "subapple", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 500, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	scrolltoheader: true,
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    	defaultexpanded: [17], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: true, //Should contents open by default be animated into view?
    	persiststate: false, //persist state of opened contents within browser session?
    	toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "slow", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		var $ = jQuery;
    		$(window).load(function(){
    			setTimeout(function(){$('html, body').scrollTop($(headers[expandedindices[0]]).offset().top);}, 100);
    		});
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    </script>
    Guarantees that it will wait until page load. Alternatively:

    Code:
    <script type="text/javascript">
    
    ddaccordion.init({
    	headerclass: "silverheader", //Shared CSS class name of headers group
    	contentclass: "subapple", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 500, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	scrolltoheader: true,
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    	defaultexpanded: [17], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: true, //Should contents open by default be animated into view?
    	persiststate: false, //persist state of opened contents within browser session?
    	toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "slow", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		var $ = jQuery;
    		$(window).load(function(){
    			setTimeout(function(){$('html, body').animate({scrollTop: $(headers[expandedindices[0]]).offset().top});}, 100);
    		});
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    </script>
    Doing it that way will give a smooth scrolling action to the selected header while still guaranteeing it waits until page load.
    - John
    ________________________

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

  7. #6
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thanks John

    All methods work well, just testing with alt browsers but can't see any issues. Good to get prompt replies too!
    I'm a Classic ASP guy mostly if you ever need any help.

Similar Threads

  1. Accordion Content Script (v-2.0) with added option ("scrolltoheader")
    By Rui Belo in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-08-2012, 08:55 AM
  2. Replies: 1
    Last Post: 03-20-2010, 10:48 AM
  3. defaultexpanded option in Accordion Content script doesn't work
    By urbini in forum Dynamic Drive scripts help
    Replies: 24
    Last Post: 06-25-2009, 05:55 PM
  4. Tab Content Script Option When Javascript is Disabled
    By bell1 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 05-18-2006, 04:26 PM

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
  •