I found this awesome plugin https://github.com/inuyaksa/jquery.nicescroll that turns the scrollbar into one that is styled similar to OSX scrollbars.
Unfortunately it only works vertically. I was wondering if anyone figured out how to make this work horizontally.
You want to use that library in particular ? You can checkout iScroll javascript library
https://github.com/cubiq/iscroll
Related
I'm having a problem with some JavaScript that makes the rollover menu on the right (aligning with the tick mark) work on an Elementor site I'm working on. I had a another dev work on the JavaScript, and I didn't notice this error right away. Now I can't get ahold of him.
The right nav looks perfect and it does exactly what it needs to do in Chrome and Firefox. But I see now that the right nav and tick link does not work in Safari.
Elementor support was kind enough to take a look at it and they said, "...your page has custom CSS for the fixed layout menu and also I found a console error regarding a snippet for the dividers. It seems there is custom code applied to the Elemtor dividers to style the fixed layout menu. This is more a Safari and the custom code/CSS is applied to the page issue.
Despite there being a known issue with the position: fixed CSS rule not working as intended in Safari, I have seen people find a workaround to it. However, the fixed layout menu has many custom CSS and custom code applied. I wasn't able to find an immediate workaround for the many customizations you have.
The only solution I found was to remove the custom CSS position fixed which will depend much on the needs and requirements of the site."
Can anyone point me in the right direction for a fix? Have you come across this problem before with your sites?
Thanks in advance for any help.
The site is here:
[http://farallon-dev.com]
I need to add horizontal scrollbar. It should have same interface for all browsers and compatible with android, windows, tablets etc.
Customize the scrollbar and make it cross-browser it's still complicated with full CSS.
Webkit-based browser make the customisation possible with CSS only as you do. But your snippet doesn't work even on Firefox, for example.
Maybe you should have a look to some JS plugins, in particular this one what I had to use in the past.
Demo
Don't be afraid with the theme, you can create yours. You'll find a tutorial to do it here.
Hope this helped you, even if it's not a full-CSS solution but this is the only way I know to deal with stylised scrollbar.
I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.
I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!
anyone know a plug in that can make a similar thing that is showed is the second example - (JC Play List Minimal Skin)
http://www.jumpeyecomponents.com/Flash-Components/User-Interface/JC-Play-List-285/examples.htm
only the scroll, not the background image
i have some problems with flash :)
thanks!
How about the HoverScroll jQuery Plugin? There's also this plugin, which isn't exactly the same as the Flash example.