custom scrollbar not working on touch device - javascript

following problem. im using a simple jquery plugin located here
it works fine so far, problem is when im testing it on a touch device (eg ipad2) its not possible to scroll within a div. it does not work with 2 finger swipe too!
i guess the behaviour is not the same to the "standard" scrollbar. but is there any solution to make this touchable?
im in the testing phase, which means the body code is pretty simple
$(document).ready(function() {
function appenddiv() {
var $scrolling = $('<div id="test" class="scrolling">A lot of text in here ...<div id="scroll2"><img src="../images/31670035.jpg"></div></div>');
$scrolling.appendTo($('#container')).scrollbar();
}
$('#scrollbar-link').on('click', function() {
appenddiv();
});
});
<body>
Klick mich!
<div id="container">
</div>
</body>
Do i need something like a "touchable" script which makes it possible to swipe the scroller?
Thanks

:-) Yes, this is definetly an issue...
The root problem is the following:
To create custom scrollbars you need to make DIV overflow: hidden - to hide sys scrollbars. This is OK. BUT on mobile (iPad too) devices from this point your DIV will not be scrollable. It will be (only), if you use overflow: auto ... This is logical - more or less. But drives you to the headache you have now :-)
So, you have to make a choice at this point..
a) you forget your custom scrollbar on touch devices - keep overflow: auto there
b) you implement a drag&drop feature manually - if you detect a mobile device
version b) would be tricky - again. since the event we know as "mousedown" event works differently on touchscreens. There is not only one mousedown - in fact there may be an array of "mousedown"s since you touche the screen with your finger, then you touch the screen with another finger, and so on... so on touchscreens this is a touch[] array...makes sense absolutely, but complicates things...
Either way, I don't know about any less complex solutions... If anyone does, I'm curious about that too!! :-)
We did a lot of testing and put many effort into this issue (and to other issues too) while was working on our NiceScrollbars library project...
I'm here if you would like to discuss this problem deeper! Will try to help

Either way, I don't know about any less complex solutions... If anyone
does, I'm curious about that too!! :-)
In theory, we could add a div with opacity=0.000000000001, z-index -1 (-1 index from the original div. i.e. the original div has a z-index of 10, then the new div would have a z-index of 9) and scroll=auto. The new div would be a copy of the div with scroll=hidden attributes in terms of content and css.
The scroll event would fire via the hidden div and then update the visible div.
Too bad we have to go to that extend, but it seems to be another clean solution/hack beside the fact that you have to duplicate the content or create an element that holds the content height.

Related

CSS Skill Bar Animation on Scroll

I'm looking to do something like this. I'm using code from this answer here but the answer is never made entirely clear. They are suggested to use this jquery plugin here but I haven't been able to get it to work. I would go with the first example's code, only, I'm using Foundation 4 and the progress bars are something that come with it and are simpler to create. Also, the animation code provided in the second example is a lot cleaner-- overall, the first example is kinda messy, code heavy, and redundant.
My code is live here. I'm working with the skill bars in the about section. Before the user gets to this point, the animation should be paused. Once the user scrolls to this part of the page, the animation should play.
EDIT: Also, if you have any suggestions to stop the bars from "breaking" out of their containers when you scale the page (this site is meant to be responsive), I would appreciate that as well.
EDIT2: I've noticed as I've been playing with this that overflow: hidden; on .progress fixes my "breaking" issue.. however, when you resize the window, the sizes stay at what they initialized at. I know realistically users visiting my site likely won't be resizing the window a whole lot, but for employers looking at it, it'll kinda be lame if it doesn't work properly. I'm having this same issue with the grumpy-cat button overlays where it initializes at the first size and doesn't resize the overlay after that. Suggestions to this would be really, really appreciated!
If you know where your skill bar is and you know where your screen is at, you only need javascript. (no plugins or weird stuff)
To get the vertical position of your screen it's simple:
window.pageYOffset
To get the vertical position of your div, you just need
div.offsetTop
In your case, I would give an id to the div that wraps all the skill bars and set a loop (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ) to check if you're within reach of the div (say, if the difference between the window offset and the div is less than some amount).
If the answer is yes, trigger the animation.
The best way to do the animation is by a css transition. (if you need a good intro to css animations here's a video that i found helpful: http://www.youtube.com/watch?v=VoncDvOfUkk )
You can set css animations from javascript.
The idea is that you would set all your "meter" widths to 0. Then in javascript do something like:
div.style.transition = "width 1s";
div.style.width = someValue;
My recommendation for the value to include in the div is some constant fraction of the "progress" div, as in with % as opposed to em or px. This technique should work. (in case you still have issues, you have a window.requestAnimationFrame loop going on so you can recalculate the values at each timestep... although... beware performance).
The reason you were recommended jQuery is because when you're going to have to update all the divs in order to animate them, just writing $(this).find('.meter') and then addClass('.expand') is so much easier.
Hope this helps

Prevent Body Element From Scrolling On Touch Devices

The Problem:
I have a web application on the iOS homescreen so there is no browser window and it looks and functions very well. I've figured out how to make inner div elements do the touch scrolling events and use the momentum/bounce style in iOS, and that works perfectly... the issue I run into now is that the bounce scrolling (again, iOS-only) is messing up any fixed elements or site-related animations I have on the page.
When I try the following:
document.ontouchmove = function(e) {e.preventDefault()};
The issue stops, but now I can't scroll anywhere on my application.
What I Need:
I want the body to be completely locked in place... If someone grabs, say, my sidebar or navbar and then pulls on the page, the body bounces! But if someone is inside the content area, there is no issue at all--the application scrolls flawlessly and looks great. If I stop scrolling on the sidebar or navbar or body, all scrolling in the application will not working and is essentially nonfunctional.
tl;dr: Body bounces on scroll. I want a scrolling content area and no scroll anywhere else. The body should NEVER move, but elements I deem scrollable within the body should.
As a sidenote, I've browser the following popular questions/solutions posted (among many others):
1
2
3
I just wanted to post that up before people assumed I didn't do any searching... I've been at this for hours now and have seen even more solutions than posted above, but I wanted to get the most popular ones listed above so no one thought this was a duplicate question.
I figured this out a few days ago and have this handy jsbin set up to demonstrate what I did to make this work:
My Working jsbin Example
When you open this link on an iPad, the text should be scrollable. Try tugging around the rest of the screen when there is no current touchmove event currently working.
If you play around with it, you'll notice that only the inner textfield moves as expected. This is determined by putting my .scrollable class within the .container class. The .scrollable class takes up the full height of it's parent container.
Now make the container a larger height, like height: 500px. The goal here is to make it large enough to have no overflow yet small enough to have other whitespace on the iPad still. Try scrolling it or pulling it... No touchmove events are fired and the screen stays in place.
My JS determines if an object has overflow after being touched. If it does, it scrolls. If it does not, it does not send a scroll event.
Play with it and let me know if I can provide any better examples and also if you run into any bugs... Right now the only one I know of is if you're really trying to break it and start tugging around the site while a current touchmove event is being fired, or the page is first loading... I wouldn't count those as "bugs", but if you can find a fix for those too, I'm all ears!

Imitate a iPhone swipe view on a webapp (like the weather app)

I'm trying to find a Javascript snippet that I can archive the UIScrollView + UIPageControl effect of the iOS using Javascript and CSS3.
Generating the page control to a dot to each view and do the switching is very easy, but the complicated part it is to do the elastic movement.
I would want to do this myself, but it seems to much work to me, like hours of work, tried googling, but I not found anything. I don't like JQuery but the mobile framework doesn't seems to do this.
If I had to do this by myself, do you guys have any suggested approach? I'm thinking in using a parent div, with a bunch of divs inside for each view. Use the parent with overflow: hidden;
and attach event to the parent view and listen to drags and bind to the horizontal scroll offset. This would be a good way? or using css transitions with left or translate-x would be more smooth?
EDIT:
This is what I tried (not working very well): JSFIDDLE
Yeah,
Im not sure about touch swipes, although i think the 'activate' or 'touchstart' handler might be useful. Using CSS3 transitions to achieve the elastic movement is quite smooth, just alter the left or right style property of your internal div and the transfom will move from its current position to where you need it to be.
This is not the worlds bestt example but have a look here
villasanrafael.eu/Gallery.php

Hiding and showing div during page scroll on iphone

Need to display an element (div) ontop of webpage. During scroll the element should disappear and reappear after scroll ends.
To add to the complexity:
our code is a guest code (thus we cannot manipulate DOM structure etc).
our code is intended to work on iPhone/iPad (mobile Safari browser)
We've tried to listen to touchstart event on document / body and hide the element (div) in our dedicated handler. However, in some sites, (when DOM structure becomes reasonably complex) the scroll response time increases significantly, even if handler implementation is entirely empty.
We are looking for the proper way to manage the element (re)appearance with a minimal affect of the user experience while scrolling.
I would think Javascript is your best solution. You can dynamically insert your DIV to any content using document.createElement, then also add some javascript to listen for onScroll...
You could even populate the DIV using custom HTML built from the native code if you want.
Any help?
I don't know if you are a jQuery user, but this .scroll() function may help you do exactly what you want to do. Check out the demo to see how it works.
http://api.jquery.com/scroll/
In recent iOS version (5.x) fixed positioning (position:fixed in CSS) is fluently supported, so that your element will be positioned on screen coordinates. That might be a good starting point for solving your troubles.

Problem moving whole html-page down! margin-top to html element doesn't work on all pages

i have a strange css, JS problem. My chrome-extension should move the hole website some pixels down, so i can display a toolbar on top of it.
This works for most pages, but doesn't work for a few. And i can't find out what's the problem. The code for moving the page down is really simple. Just this line, which adds a margin-top to the html-element:
document.getElementsByTagName('html')[0].style.marginTop = '36px !important';
It's easiest explained and seen if you install the addon and browse to www(dot)interspar(dot)at (here it works) and to www(dot)weinwelt(dot)at (here it doesn't work). The addon is found here https://chrome.google.com/webstore/detail/pilobbegphefikcgjpajnneiiahhejam
Please don't consider this as spam, as this addon is only useful for german speaking people and i think there aren't many around here ;)
It doesn't work on that site because its whole content is positioned absolutely (look at <div class="parent">). You need to loop through the whole DOM looking for absolutely positioned elements that have top property and increase its value accordingly as well.
That's only a tip of the iceberg though, as some sites would be adding absolutely positioned elements to the page dynamically, so you would need to listen to dom changes (DOMSubtreeModified event) as well and do all repositioning again.
Try it on the BODY instead;
document.getElementsByTagName('body')[0].style.marginTop = '36px !important';
HTML tag can't have a margin on it.
According to following link "!important" is only supported by safari.
http://hungred.com/how-to/jquery-javascript-css-important/

Categories