Advanced Search

Results 1 to 4 of 4

Thread: Accordion Conent Script

  1. #1
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Accordion Conent Script

    1) Script Title: Accordion

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

    3) Describe problem: I'm trying to modify the script to go to an anchor when one of the headers is fully expanded. So far I've succeeded in doing this BEFORE the content is done expanding, however I'd like the div to be fully expanded before the script goes to the anchor. I have no objection to a timer, however when I tried this nothing happened (see the comented code).

    Code:
    expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){
    		var ajaxinfo=$targetHeader.data('ajaxinfo')
    		if (ajaxinfo){ //if this content should be fetched via Ajax
    			if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
    				this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
    			else if (ajaxinfo.status=="cached"){
    				$targetContent.html(ajaxinfo.cacheddata)
    				ajaxinfo.cacheddata=null
    				ajaxinfo.status="complete"
    			}
    		}
    		this.transformHeader($targetHeader, config, "expand")
    		$targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
    			config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
    			if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
    				var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
    				if (targetLink) //if this header is a link
    					setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
    			}
    
    		})
    		function gotohash(thehash)
    		{
    		window.location.hash=thehash;
    		}
    		
    		var thehash = config.headerclass+$targetHeader.attr('headerindex');
    		gotohash(thehash); //this works but does it as the div is expanding
    
    // setTimeout(gotohash(thehash)", 500); //when this code isn't commented, is does nothing, I assume something changes where that function is no longer available after the time has passed
    			
    	},
    Any help would be greatly appreciated.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    Firstly, try changing the "revealtype" option within the initialization code for your Accordion Content to "clickgo", so the script navigates to the expanded header's URL once it's expanded, for example:

    Code:
    //Initialize Arrow Side Menu:
    ddaccordion.init({
    	headerclass: "menuheaders", //Shared CSS class name of headers group
    	contentclass: "menucontents", //Shared CSS class name of contents group
    	revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(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
    	}
    })
    This works for regular "http://" header URLs; in order to get it to also work with in-page anchors, now use the modified attached .js file in place of the original instead.
    DD Admin

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

    larrysanders (01-21-2011)

  4. #3
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    Firstly, try changing the "revealtype" option within the initialization code for your Accordion Content to "clickgo", so the script navigates to the expanded header's URL once it's expanded, for example:

    Code:
    //Initialize Arrow Side Menu:
    ddaccordion.init({
    	headerclass: "menuheaders", //Shared CSS class name of headers group
    	contentclass: "menucontents", //Shared CSS class name of contents group
    	revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(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
    	}
    })
    This works for regular "http://" header URLs; in order to get it to also work with in-page anchors, now use the modified attached .js file in place of the original instead.
    Thank you for the response. I think my problem was unclear. Everything works except for the delay. I want to do exactly what I'm doing now only delay the gotohash(thehash); function or make it happen after the header is done expanding. It looked like the slidedown animation was a built in js function so that's probably not a solution.

    Essentially I don't know why gotohash(thehash); works by itself but when I put setTimeout(gotohash(thehash)", 500); nothing happens.
    Last edited by larrysanders; 01-20-2011 at 09:17 AM. Reason: grammar correction

  5. #4
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    Thank you for the response. I think my problem was unclear. Everything works except for the delay. I want to do exactly what I'm doing now only delay the gotohash(thehash); function or make it happen after the header is done expanding.
    Hmm actually the modified .js file I posted should do that already- that is, go to the anchor link specified inside the expanded header after it has fully expanded. The setting "revealtype=clickgo" does this for regular links, so the modified .js file just extends this behavior to in page anchor links as well.
    DD Admin

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
  •