Modifying mouseover / hover events for iPad

[potion]

1) Script Title:
Horizontal Accordion Script

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

3) Describe problem:
Accordion panels slide open on mouseover / hover events. Pressure/presence sensing mobile devices like iPad have no mouseover / hover sensing capability. How should the DD haccordion script be modified to accommodate iPads?

With the recent surge in uptake of mobile browsing devices, this has become a much broader and important issue affecting many other DD scripts.

Denis

[ddadmin]

A common approach to fixing this is to detect when the user is using a mobile device, and for such devices, change the triggering event from mouseover to onclick instead. With that said, try the below modified .js file, which does this. The official script is also updated with the modified file.

[vwphillips]

using mouseup

	init:function($, config){
			haccordion.accordioninfo[config.accordionid]=config //cache config info for this accordion
			var $targetlis=$('#'+config.accordionid).find('ul:eq(0) > li') //find top level LIs
			config.$targetlis=$targetlis
			config.selectedli=config.selectedli || [] //set default selectedli option
			config.speed=config.speed || "normal" //set default speed
			$targetlis.each(function(i){
				var $target=$(this).data('pos', i) //give each li an index #
				$target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
				$target.mouseup(function(){
						haccordion.expandli(config.accordionid, this)
					config.$lastexpanded=$(this)
				})
				if (config.collapsecurrent){ //if previous content should be contracted when expanding current
					$target.mouseleave(function(){
//						$(this).stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
					})
				}
			}) //end $targetlis.each
			var selectedli=haccordion.urlparamselect(config.accordionid) || ((config.selectedli[1] && haccordion.getCookie(config.accordionid))? parseInt(haccordion.getCookie(config.accordionid)) : config.selectedli[0])
			selectedli=parseInt(selectedli)
			if (selectedli>=0 && selectedli<config.$targetlis.length){ //if selectedli index is within range
				config.$lastexpanded=$targetlis.eq(selectedli)
				config.$lastexpanded.css('width', config.$lastexpanded.data('hpaneloffsetw')) //expand selected li
			}
			$(window).bind('unload', function(){ //clean up and persist on page unload
				haccordion.uninit($, config)
			}) //end window.onunload
	},

[Elle Smith Fagan]

A common approach to fixing this is to detect when the user is using a mobile device, and for such devices, change the triggering event from mouseover to onclick instead. With that said, try the below modified .js file, which does this. The official script is also updated with the modified file.

http://www.dynamicdrive.com/dynamici...m#.UkhP-fHsrSQ
I love it, but the controls at the foot of the image are important - and they do not appear at all in iPad. The images will respond to the click to the hyperlink and back and that is that.

Please make a fix for it and let me know where to set it and what to delete from the original script.

ALTERNATIVELY, please send a url for a script like it that will be good in iPad / iPhone arrays.

thanksomuch

elle