PDA

View Full Version : Modifying mouseover / hover events for iPad



potion
01-05-2012, 12:24 PM
1) Script Title:
Horizontal Accordion Script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/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
01-05-2012, 12:59 PM
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
01-05-2012, 01:00 PM
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
11-01-2013, 01:25 AM
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/dynamicindex4/simplegallery.htm#.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