PDA

View Full Version : Accordion Content Script (v-2.0) with added option ("scrolltoheader")



snappy
12-24-2013, 12:34 PM
1) Script Title: accordion.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.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?

vwphillips
12-24-2013, 05:26 PM
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
}
})

jscheuer1
12-24-2013, 07:11 PM
.

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), 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:


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

Should be:


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


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

snappy
12-25-2013, 09:12 AM
Thanks to both of you and John, the credit has been inserted, with apologies for the oversight.

jscheuer1
12-26-2013, 03:25 AM
Thanks for restoring the credit. You might want to combine the two methods:


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


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

snappy
12-26-2013, 08:18 AM
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.