javascript - How to scroll content horizontally left or right when you swipe it with your finger -


i developing mobile application , want swipe image inside div when user swipe finger, div should scroll. here in example entire page scrolling scroll of div. want div scroll "http://smoothtouchscroll.com/" ` jquery smoothtouchscroll

    <!-- css smooth touch scroll -->     <link rel="stylesheet" type="text/css" href="../css/smoothtouchscroll.css" />      <!-- styles specific scrolling content -->     <style type="text/css">         #touchscroller         {         top:70%;             width:100%;             height: 30%;             /* position: relative; */             position:absolute;             background-color:red;         }          /* replace last selector type(s) of element(s) have in            scroller.            if have images use #touchscroller div.scrollablearea img,            if have div's use #touchscroller div.scrollablearea div,            if have links use #touchscroller div.scrollablearea a,            or add several selectors if have mixed content            ...and on. */         #touchscroller div.scrollablearea         {             position: absolute;             float: left;             margin: 0;             padding: 0 5px;             /* if don't want images in scroller selectable, try following                block of code. it's nice feature prevent images                accidentally becoming selected/inverted when user interacts scroller. */             -webkit-user-select: none;             -khtml-user-select: none;             -moz-user-select: none;             -o-user-select: none;             user-select: none;             overflow-x: scroll;             overflow-y: hidden; white-space: nowrap;         }      </style>     <!-- jquery - google api's -->     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>     <!-- jquery ui - contains widget -->     <script src="../js/jquery-ui-1.10.3.custom.min.js"></script>     <!-- jquery kinetic -->     <script src="../js/jquery.kinetic.min.js"></script>     <!-- smooth touch scroll -->     <script src="../js/jquery.smoothtouchscroll.min.js"></script>     <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <p style="position:fixed"> welcome yourstory pvt ltd </p>     <div id="touchscroller">         <a href="#"><img src="images/field.jpg" alt="demo image" id="field" style="left:0%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>         <a href="#"><img src="images/gnome.jpg" alt="demo image" id="gnome" style="left:30%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>         <a href="#"><img src="images/pencils.jpg" alt="demo image" id="pencils" style="left:60%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>         <a href="#"><img src="images/golf.jpg" alt="demo image" id="golf" style="left:90%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>         <a href="#"><img src="images/river.jpg" alt="demo image" id="river" style="left:120%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>         <a href="#"><img src="images/train.jpg" alt="demo image" id="train" style="left:150%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>         <a href="#"><img src="images/leaf.jpg" alt="demo image" id="leaf" style="left:180%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>         <a href="#"><img src="images/dog.jpg" alt="demo image" id="dog" style="left:210%;width:30%;height:100%;position:absolute;background-size:100% 100%;"/></a>     </div>      <script>         $(function() {              $("#touchscroller").smoothtouchscroll({ continuousscrolling: true });         });     </script> </body>

`

first put <div id="touchscroller"> inside div ie <div class="sliderdiv"><div id="touchscroller"></div><div>. , place 'sliderdiv' per wish in page. , change style below mentioned . dont give touchscroller position absolute.       #touchscroller { width: 100%; height: 330px; position: relative; background-color: red; }      #touchscroller div.scrollablearea { position: relative; float: left; margin: 0; padding: 0 5px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; }

-

Comments

Post a Comment

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

Image
in code below when try execute main.java getting exception: exception in thread "main" org.hibernate.unknownentitytypeexception: unable locate persister: com.np.vta.test.pojo.users @ org.hibernate.internal.sessionfactoryimpl.locateentitypersister(sessionfactoryimpl.java:792) @ org.hibernate.internal.sessionimpl.locateentitypersister(sessionimpl.java:2637) @ org.hibernate.internal.sessionimpl.access$2500(sessionimpl.java:164) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2575) @ org.hibernate.internal.sessionimpl$identifierloadaccessimpl.<init>(sessionimpl.java:2562) @ org.hibernate.internal.sessionimpl.byid(sessionimpl.java:1044) @ org.hibernate.internal.sessionimpl.get(sessionimpl.java:955) @ com.app.test.main.main(main.java:20) but if uncomment cfg.addclass( users.class ).addresource( "com/np/vta/test/pojo/users.hbm.xml" ); code works fine. why not reading <mapping...
Read more

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

i'm using (for first time) scikit library , got error: valueerror: empty vocabulary; perhaps documents contain stop words file "c:\users\a605563\desktop\velibprojetpreso\traitementtwitterdico.py", line 33, in <module> x_train_counts = count_vect.fit_transform(filetweets) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 804, in fit_transform self.fixed_vocabulary_) file "c:\python27\lib\site-packages\sklearn\feature_extraction\text.py", line 751, in _count_vocab raise valueerror("empty vocabulary; perhaps documents contain stop words but don't understand why that's happening. import sklearn sklearn.feature_extraction.text import countvectorizer import pandas pd import numpy import unicodedata import nltk tweetsfile = open('tweets2015-08-13.csv', 'r+') f2 = open('analyzer.txt', 'a') print tweetsfile.readline() count_vect = countvectorizer(strip_accents='ascii...
Read more

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -

Image
i'm trying build precimonious on ubuntu 16.04.3 x64. allocated 1gb memory it. file structure looks like ~ |--- llvm/ |--- precimonious/ where llvm on version 3.0 mentioned @ https://github.com/corvette-berkeley/precimonious#requirement . followed steps on readme command make ended with ... llvm[1]: linking debug shared library libllvm-3.0.so collect2: fatal error: ld terminated signal 9 [killed] compilation terminated. ... i went through answers online , might because there's not enough memory perform link. memory usage the gcc version on machine gcc version 5.4.0 20160609 (ubuntu 5.4.0-6ubuntu1~16.04.4) , installed via apt-get install build-essential . fresh droplet created on digitalocean btw. appreciated. it memory exhaustion. sampling interval memory measurement not small enough covers exact point oom killer kicks in. depending on container/vm technology, may able set vm.overcommit_memory=2 before build, process not killed (but doing requires m...
Read more