Comments (4)
Interesting! I don't have a desktop computer with touch so feedback like this is very valuable. There is a fix to prevent selecting/highlighting of the elements in the scroller that I apply in the CSS for the elements inside the scrollable area:
#makeMeScrollable div.scrollableArea *
{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
If you remove the prevent dragstart fix and apply the CSS above, does it work or do you need both? It would be great if you could test this for me! Thanks in advance!
/Thomas
from smooth-div-scroll.
Hi /Thomas
First up the dragstart fix does work without the CSS - which I hadn't realised.
Without the dragstart fix the CSS works for some elements of my slides and not others. Each of my slides are made up of h2, h3 and img elements all contained inside a link element:
<a class="slide">
<h2>...</h2>
<h3>...</h3>
<img />
</a>
Interestingly, if I click and drag the img the CSS fix works but if I click and drag the header elements FF thinks I want to move the whole link element off the page and this gets in the way of the iTouch effect.
I should point out at this point that my desktop is not a touch device, I'm reporting on the effect of using iTouch on my regular desktop browser (Firefox 15.0.1)
Be happy to do more testing. Thanks for the code. It's great!
Laurence
from smooth-div-scroll.
Hi!
Hmm, this is a tricky one.
What happens if you change the CSS to:
#makeMeScrollable div.scrollableArea a
{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
...i.e. changing the "*" to an "a" to more precisely match your setup?
/Thomas
from smooth-div-scroll.
Hi /Thomas
I've amended my CSS - good call, there was no need to use a wildcard.
This doesn't change anything drag/select-wise. There is still a confusion when I click the titles to drag them but the images behave well if I drag them instead.
The dragstart-prevent-default solution seems to be a goodun:
My code looks like this:
$(document).ready(function () {
$("div#slides").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
hotSpotScrolling: false,
touchScrolling: true,
manualContinuousScrolling: true
});
// Prevents slides being selected.
$('div#slides').bind('dragstart', function(e) { e.preventDefault(); });
});
from smooth-div-scroll.
Related Issues (20)
- jScrollPane and Smooth Div Scroll
- Click to center image function not working in scroll gallery HOT 1
- How to change horizontal scroll to vertical scroll in Smooth Div Scoll HOT 2
- Responsive Height
- scroll stopping when mouse out from left and right icons
- I've used this as a navbar on mobile devices and it's worked great until recently...
- Wrong setting when using kinetic.js
- Uncaught TypeError: Cannot read property 'show' of undefined HOT 2
- HTML5 Validation Messages Not Displayed
- Enable vertical Page-Scrolling HOT 4
- Can we use this plugin in commercial website? Is it free? Thanks. HOT 1
- pauseOnHover option when autoScrollingMode: "always" is applied HOT 1
- Still cannot click on href on touchscreens HOT 1
- The last div doesn't show up
- When touch scrolling is enabled, links within an individual block aren't clickable
- Auto Scroll Speed when Mouse approaches ARROWS
- jQuery 3 broke plugin... HOT 2
- Uncaught TypeError: $(...).smoothDivScroll is not a function HOT 1
- Uncaught TypeError: $(...).smoothDivScroll is not a function HOT 1
- Can possible to provide React integration example
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from smooth-div-scroll.