ipad - Vertical Scroll Bar that moves content sideways -
first time post on stackoverflow.com, shame considered computer science student. first , foremost, thank have provided me via other's inquiry answering own questions. today have own real question post's title may hard understand. challenge.
</introduction> abstract: using content of website somethingmedia.co on artist / philosophy pages; create more user friendly display special consideration of mobile devices.
method: alter blocked 'div' content virtually inline , allow side scrolling. please visit here clear representation [demo] , see below explanation[a]
alteration: while allowing touch , hold sensitivity options seen in [method] allow scrolling occur mouse wheel. please see [demo2] , visit explanation[b] below.
functionality: in addition [method] , [alteration], allow scrolling occur upon users' movement of pages scroll bar itself. except (and here tricky part), make scroll bar vertical, yet move content left , right. scroll bar visible on non mobile devices (i.e. pc / laptops / macintosh / etc).
conclusion: making websites , though have never taken formal class websites (since 6th grade) continue learn new things based on find unique , interesting. therefore, curious know if there way implement design in simple , elegant fashion. though computer science experience limited java , python in school, have independent experience in css, html, java script , bit of cgi. if you're challenge me ask you: "what first step?"
</concept> explanation[a]: code.comunicatek.com/en/tekslider_a_touch_focused_slider.html
explanation[b]: css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
the question's little confusing, assuming mean is, "how can have page uses vertical scroll bars scroll page horizontally," i'd try this:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>vertizontal scrolling</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> <script> $(document).ready(function() { $('#page-scroll').height($('#page-wrap').outerwidth()); $(window).scroll(function() { $('#page-wrap').css('left',-1 * $(window).scrolltop()); }); }); </script> <style type="text/css" style="display: none !important;"> #page-wrap { position:fixed; left:0; top:0; z-index:10; } #page-scroll { z-index:1; } </style> </head> <body> <div id="page-scroll"> <!--- intentionally empty ---> </div> <div id="page-wrap"> <!--- wide content goes here ---> </div> </body> </html>
Comments
Post a Comment