Results 1 to 2 of 2

Thread: Accordion Content Menu Collapse and Smartphone Issues

  1. #1
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Accordion Content Menu Collapse and Smartphone Issues

    1) Script Title: Accordion Content Script

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


    3) Describe problem: The menu is almost perfect. I am using it on this site so you can visually see the issues: http://mcdowelldentistryaz.com/dev/

    Please keep in mind that I have not connected all the links, just the home, our office and dr ayoub to test links.

    Here is what I need help with:

    1. I want the top level links set to "clickgo", and I have it set so that the opened menu will stay open on the destination page. How do I set the js to just have it stay open rather than close and reopen on destination page. You can see this clearly if you click on the "Our Office" link.

    2. After going to the "Our Office" page, if you click on the logo to go back to home or hit back button, the menu does not collapse. Is it possible to have the submenus close when going back to home page, refreshing page, or hitting back button?

    3. In Android Smartphone, if you click on Office page, you get to the destination page but the menu collapses. Can't get to the submenu.

    Thanks very much for your help,

    Vickie

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,780
    Thanks
    2
    Thanked 413 Times in 407 Posts

    Default

    a cookie is being used on both pages to restore the last sum menu

    this modification

    allows one page to set the cookie but not read it
    and the other to read it but not set it

    replace the init function with

    Code:
    	init:function(config){
    	document.write('<style type="text/css">\n')
    	document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
    	document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
    	document.write('<\/style>')
    	jQuery(document).ready(function($){
    		ddaccordion.urlparamselect(config.headerclass)
    		var persistedheaders=ddaccordion.getCookie(config.headerclass)
    		ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
    		ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
    		ddaccordion.$docbody=(window.opera)? (document.compatMode=="CSS1Compat"? jQuery('html') : jQuery('body')) : jQuery('html,body')
    		var $headers=ddaccordion.headergroup[config.headerclass]
    		var $subcontents=ddaccordion.contentgroup[config.headerclass]
    		config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
    		config.revealtype=config.revealtype || "click"
    		config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
    		if (config.revealtype=="clickgo"){
    			config.postreveal="gotourl" //remember added action
    			config.revealtype="click" //overwrite revealtype to "click" keyword
    		}
    		if (typeof config.togglehtml=="undefined")
    			config.htmlsetting={location: "none"}
    		else
    			config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
    		config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
    		config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
    		var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
    		var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.readcookie && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
    		if (typeof expandedindices=='string'){ //test for string value (exception is config.defaultexpanded, which is an array)
    			expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
    		}
            if (expandedindices.length==1 && expandedindices[0]=="-1"){ //check for expandedindices value of [-1], indicating persistence is on and no content expanded
    			expandedindices=[]
    		if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
    			expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
    		}
            if (config["onemustopen"] && expandedindices.length==0){ //if at least one content should be open at all times and none are, open 1st header
    			expandedindices=[0]
    		}
            $headers.each(function(index){ //loop through all headers
    			var $header=$(this)
    			if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
    				$('<span class="accordprefix"></span>').prependTo(this)
    				$('<span class="accordsuffix"></span>').appendTo(this)
    			}
    			$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 $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //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
    			}
    			var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
    			if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
    				ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
    				lastexpanded={$header:$header, $content:$subcontent}
    			}  //end check
    			else{
    				$subcontent.hide()
    				config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
    				ddaccordion.transformHeader($header, config, "collapse")
    			}
    		})
    		//if (config["scrolltoheader"] && lastexpanded.$header)
    			//ddaccordion.scrollToHeader(lastexpanded.$header)
    		$headers.bind("evt_accordion", function(e, isdirectclick, scrolltoheader){ //assign CUSTOM event handler that expands/ contacts a header
    				var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
    				if ($subcontent.css('display')=="none"){
    					ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick, false, scrolltoheader) //2nd last param sets 'isuseractivated' parameter
    					if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
    						ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
    					}
    					lastexpanded={$header:$(this), $content:$subcontent}
    				}
    				else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
    					ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
    				}
     		})
    		$headers.bind(config.revealtype, function(){
    			if (config.revealtype=="mouseenter"){
    				clearTimeout(config.revealdelay)
    				var headerindex=parseInt($(this).attr("headerindex"))
    				config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex, config.scrolltoheader)}, config.mouseoverdelay || 0)
    			}
    			else{
    				$(this).trigger("evt_accordion", [true, config.scrolltoheader]) //last parameter indicates this is a direct click on the header
    				return false //cancel default click behavior
    			}
    		})
    		$headers.bind("mouseleave", function(){
    			clearTimeout(config.revealdelay)
    		})
    		config.oninit($headers.get(), expandedindices)
    		$(window).bind('unload', function(){ //clean up and persist on page unload
    			$headers.unbind()
    			var expandedindices=[]
    			$subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
    				expandedindices.push($(this).attr('contentindex'))
    			})
    			if (config.setcookie!==false && $headers.length>0){ //persist state?
    				expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
    				ddaccordion.setCookie(config.headerclass, expandedindices)
    			}
    		})
    	})
    	}
    Code:
    ddaccordion.init({
    	headerclass: "mypets", //Shared CSS class name of headers group
    	contentclass: "thepet", //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: 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?
    	scrolltoheader: false, //scroll to header each time after it's been expanded by the user?
    //	persiststate: true, //persist state replaced by setcookie and readcookie
    	setcookie: true, // true = set the persist state of opened contents within browser session?   default = false
    	readcookie:false, //read and use the persist state of opened contents within browser session? default = true
    	toggleclass: ["", "openpet"], //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: "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
    		//do nothing
    	},
    	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/

Similar Threads

  1. Collapse Menu on Accordion DD Glossy
    By michmich in forum JavaScript
    Replies: 1
    Last Post: 09-27-2011, 02:07 AM
  2. Resolved Accordion Menu collapse all headers
    By MrSlash in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-19-2011, 01:27 PM
  3. Accordion Content script collapse on mouse-out?
    By jumpingflea in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-15-2010, 04:15 PM
  4. DD Accordion Menu - Collapse when going to non-expanding item
    By markox in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 09-08-2009, 12:14 AM
  5. Accordion Content can't collapse all
    By Sebarry in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-02-2009, 10:27 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
  •