69632

trying to make navigation bar for tablet site

Question:

I'm designing a navigation bar for a tablet website. The navigation bar holds elements displayed horizontally, and I want to be able to display new elements with a swipe (kind of like a cover flow) without the window moving. This is the code I'm using now (jQuery Mobile):

//Tablet Features $('#navHolder').bind('swipe', function(e) { $('#navHolder').animate({left:thisLeft - 100}); } );

I dont think I can trigger a swipe without first disabling scroll, but I'm open to all suggestions. Please help.

Answer1:

Set the parent container of the element you are scrolling to overflow : hidden so no scroll-bars appear. Then swipe events should work fine since you won't be able to use native scrolling to scroll the content.

HTML --

<div id="navHolder-container"> <div id="navHolder">

content in here

</div> </div>

CSS --

#navHolder { position : absolute; width : 1000px; } #navHolder-container { position : relative; overflow : hidden; height : 100px; width : 100%; }

JS --

$(function () { var convert = { swipeleft : '-=100', swiperight : '+=100' }; $('#navHolder-container').bind('swipeleft swiperight', function(e) { $('#navHolder').animate({ left: convert[e.type]}); }); });

Here is a demo: <a href="http://jsfiddle.net/B8PQn/1/" rel="nofollow">http://jsfiddle.net/B8PQn/1/</a>

Recommend

  • Real Fullscreen with Android 4 Tablets
  • failed: dlopen failed: cannot locate symbol “signal” referenced by “libSDL2.so”
  • Media queries in CSS
  • Android device not shown with adb
  • AJAX Chat Box Scrolling Up Issue
  • jQuery, Calling multiple animations in a row on click
  • Change the width of the JQM panels
  • Variant from android-autofittextview library : scaling makes strange behaviour
  • cordova build android throws error on Ubuntu 12.04
  • Unique SMS sender id?
  • jQueryMobile, Ajax Navigation, and MVC
  • Which browser have this strange user agent? (IOS device)
  • Better Indy for Dephi 2007
  • Compare struct to a constant in C
  • Activation Function choice for Neural network
  • Knockout custom binding handler
  • Application level floating views with navigation in Android
  • Row to Column conversion in Talend
  • jQuery Orbit - How to make a Random Slideshow?
  • Does Mobilefirst provide a provision to access web services directly?
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Bad request using file_get_contents for PUT request in PHP
  • Disable Enter in editText android
  • jQuery show() function is not executed in Safari if submit handler returns true
  • How to redirect a user to a different server and include HTTP basic authentication credentials?
  • How to check if every primary key value is being referenced as foreign key in another table
  • Can I make an Android app that runs a web view in Chrome 39?
  • jQuery tmpl and DataLink beta
  • How to disable jQuery.jplayer autoplay?
  • python regex in pyparsing
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How to get Windows thread pool to call class member function?
  • LevelDB C iterator
  • Linking SubReports Without LinkChild/LinkMaster
  • Is there any way to bind data to data.frame by some index?
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?