Results 1 to 2 of 2

Thread: Accordion Ajax problems

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

    Default Accordion Ajax problems

    1) Script Title: Accordion Content script (v1.9) again

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

    3) Describe problem: I have accordions within accordions to present sub-information. I'm loading the subcontent via ajax, but the top level div thinks it should load the "hiddenajaxlink" it finds. So let's say there's a main category called Sports with sub-categories soccer, baseball, and football- when you open sports it just loads the soccer page because it thinks that link is supposed to be loaded in that div not the sub-category's div. So I added a parameter called ajax class name to make the ajax loading unique to each menu

    Code:
    	headerclass: "sportsmenu", //Shared CSS class name of headers group
    	contentclass: "sportsdiv", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	ajaxclassname: "sports",
    I added the unique name to the css hiding mechanism

    Code:
    document.write('a.'+config.ajaxclass+'hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
    Then I tried to add that unique name to the jquery that determines whether or not to load via ajax. I don't understand the syntax fully, how can I make it look for the unique name instead of just the "hiddenajaxlink"?

    Code:
    			$header.attr('headerindex', index+'h') //store position of this header relative to its peers
    			$subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
    			var $subcontent=$subcontents.eq(index)
    			var $ajaxsearchterm = 'a.'+$ajaxclass+'hiddenajaxlink:eq(0)'; //trying to find specific to the current accordian
    			var $hiddenajaxlink=$subcontent.find($ajaxsearchterm) //see if this content should be loaded via ajax
    		
    			if ($hiddenajaxlink.length==1) {
    				$header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
    			}

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

    Smile

    I solved it.

    You can grab the modified ddaccordion: http://httu.co/scripts/ddaccordion.js

    Usage:

    Code:
    //Initialize main menu:
    ddaccordion.init({
    	headerclass: "hobies", //Shared CSS class name of headers group
    	contentclass: "hobbiesdiv", //Shared CSS class name of contents group
    	revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
    	ajaxclassname: "hobies",
    	mouseoverdelay: 300, //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: [], //index of content(s) open by default [index1, index2, etc]
    	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: false, //persist state of opened contents within browser session?
    	toggleclass: ["hobiesclosed", "hobiesopen"], //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: "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
    	}
    })
    
    //Initialize home menu:
    ddaccordion.init({
    	headerclass: "sports", //Shared CSS class name of headers group
    	contentclass: "sportsdiv", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	ajaxclassname: "sports",
    	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: [], //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: false, //persist state of opened contents within browser session?
    	toggleclass: ["sportsclosed", "sportsopen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	//togglehtml: ["prefix", "<a href=\"#\" name=\"subclosed\"></a>", "<a href=\"#\" name=\"subopened\"></a>"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "fast", //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
    		//donothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    html:

    Code:
    <div class="hobbies">Sports</div>
    <div class="hobbiesdiv">
    	<div class="sports">Football</div>
    	<div class="sportsdiv">
            <a class="sportshiddenajaxlink" href="sports/football.html">Loading football div. The hobbies div knows this isn't meant for it.</a>
    	</div>
    	<div class="sports">Soccer</div>
    	<div class="sportsdiv">
            <a class="sportshiddenajaxlink" href="sports/soccer.html">Loading soccer div. The hobbies div knows this isn't meant for it.</a>
    	</div>
    	
    </div>
    
    <div class="hobbies">Crafts</div>
    <div class="hobbiesdiv">
    
    <a class="hobbieshiddenajaxlink" href="crafts.html">Loading the crafts div. The hobbies div knows it's meant for it.</a>
    
    </div>
    I'm sure my code isn't optimal, but it works :-)

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
  •