ipad - Different height sliding drawer div using different negative margins with different screensizes in jQuery? -



ipad - Different height sliding drawer div using different negative margins with different screensizes in jQuery? -

i have slideshow using supersized plugin has sliding drawer header div horizontal top navigation want hide off screen while slides playing. little strip @ bottom of div visible user can hover on have div slide downwards revealing navigation buttons. however, there big number of buttons , on smaller screens, ipad example, causes problems. on smaller screens buttons stack vertically instead. because of sliding drawer div needs 2 different sizes, 1 screens above 1024px , 1 screens below 1024px.

the negative margin on sliding drawer needs increment accommodate taller div sliding when screen resized below 1024px.

because it's hover effect mouse there needs ability slide div on touch device.

so far have this...

$(document).ready(function() { if ( screen.width < 1025 ){ $('#header_wrapper').stop().delay(4000).animate({'margintop':'-161px'},500); $('#header_wrapper').hover( function () { $(this).stop(true).animate({'margintop':'0'},500); }, function () { $(this).stop().delay(500).animate({'margintop':'-161px'},500); } ) //ipad , iphone prepare if((navigator.useragent.match(/iphone/i)) || (navigator.useragent.match(/ipod/i)) || (navigator.useragent.match(/ipad/i))) { $('#header_wrapper').bind('touchstart', function(){ $(this).stop(true).animate({'margintop':'0'},500); }); $('#header_wrapper').bind('touchend', function(){ $(this).delay(5000).animate({'margintop':'-161px'},500); }); } } else{ $('#header_wrapper').stop().delay(4000).animate({'margintop':'-80px'},500); $('#header_wrapper').hover( function () { $(this).stop(true).animate({'margintop':'0'},500); }, function () { $(this).stop().delay(500).animate({'margintop':'-80px'},500); } ); } });

which works on ipad ok, isn't picking larger margin when resized on big screen. know mess, i'm n00b, , appreciate help.

jquery ipad animation screen-resolution slidingdrawer

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -