I'm working on making an application with adobe air and I have a div that uses overflow-y. In order for the UI to look nice and sexy, what's the best way to replace the ugly default scrollbar [link broken] with a creation of my own?
Thanks
EDIT: Everyone remember that this is on adobe air, not on a browser (I know better than to to mess with a scrollbar, that's way web -4.2)
Don't.
Users know how to to use the default platform UI widgets: they know what they look like, how they behave, etc. And the platform ones work really well.
They won't know how to use your widget. And even if you try and copy the platform one except for appearance, your widget will behave as a cheap knockoff; it will be missing features the user expects:
Does your scroll thumb grow/shrink to show the length of the document, with a minimum size such that its always grab-able — but only on platforms where that is expected?
Does middle-click scroll to the position clicked, left-click scroll down only, and right-click scroll up only, and each in proportion to where clicked on the scrollbar — on the platform where this is expected?
Does clicking in the blank space between the thumb and up or down arrow work? Does it scroll by the amount the user is expecting, which varies by platform?
Does scrolling go at the speed the user expects when the scroll buttons are held down?
How is the user dragging the thumb handled when the mouse goes outside the scrollbar? Or middle-click, on the before-mentioned platform.
Does your custom scroll bar follow the visual theme the user selected e.g., because he needs extra-high-contrast and/or extra-large widgets due to disability?
The answer to most of those is probably "no". At least, that's been my experience with web sites where the designer decided the platform scroll bars aren't cute enough.
Skin them, like you would any other flex component. To keep your code nice any clean you can specify the embed the skin files through a style in a css file.
Edit: A link on how to skin a scrollbar
Related
I am developing chat and call application in my project.
So there are 3 tabs.
people to chat
dialer to dial to particular person
chat / call history
in this tabs there are 3 portions.
header
chat / call / history portion.
tab changer navigator.
I make middle portion scrollable.
I want to make that scrollbar thinner. I don't want to use browser's default scrollbar.
For this I find "::-webkit-scrollbar" which is perfect only for chrome.
I want to apply this css to all browsers.
I find scroll plugins but I don't want to use any external plugin. I want to solve this by using jquery / css/ javascript.
is there any property or anything which can solve my issue?
The ::webkit-scrollbar pseudo element is NON-Standard and there is no way to make this cross-browser-compatible at the moment. There are good reasons why this hasn't evolved as standard yet. Just imagine some touch devices having browsers without scrollbars or with scrollbars, which are hidden by default and shown only when scrolling (to save valuable space). Custom styling would need to fit all these use cases.
Therefore I'd generally recommend you not to style the browser scrollbar with this hack. If you really need a solution, you could try jquery.scrollbar. IMHO this is no robust solution, however. It relies purely on JavaScript and may be jiggling around on some devices.
edit: further info on MDN
How can I add mouse scroll option in my angular app similar to what's present for touch screen devices in which you scroll via holding screen alongside some left or right swipe movement. How can I implement similar scroll technique using mouse so that user can click at some empty area than while holding down the click move mouse in a specific direction to scroll respectively.
Similar to what's available for trello.com:
I would prefer to implement this behavior using pure CSS as chrome's inspector tools also provides this feature while testing site's responsiveness for different screen sizes. So if its possible via CSS it would be great.
If it won't be possible via CSS then I would like to implement using JavaScript or TypeScript.
You could use this library: http://hammerjs.github.io/. It covers a large range of gestures you might be interested in.
this might be sort of a random question. I'm developing a mobile web application and I want to give it as much of a native-app feel as possible. My problem is that i have elements on the website that is supposed to be centered both vertically and horizontally in the viewport but Safari's IOS browser snackbar (see picture) is ruining the look and feel.
(OBS this is obviously not my webpage)
The list that appears at the bottom of the browser, is placed on top of the website so that it overlays its content. This is problematic since the element doesn't appear to be centered anymore when this happens.
My question is. Is it in anyway possible to make the snackbar push up/ compress the content of the website instead of overlaying it? I have seriously no idea what to google.
Thank you
So it sounds like you want the minimal-ui property back, but unfortunately Apple has removed this. However all is not lost there are some hacks you can do.
Probably the most popular trick is to scroll down a pixel so safari hides the bars automatically.
Version 1:
window.scrollTo(0,1);
Version 2:
/mobile/i.test(navigator.userAgent)
&& !location.hash
&& setTimeout(function() {
window.scrollTo(0, 1);
}, 300);
The other option is to use a 3rd party plugin like Brim, which can essentially force the screen to rotate orientations and then rotate back extremely quickly.
I'm building a CMS based on Zurb Foundation, and one thing I'd really like to do is allow the user to switch between large/medium/small layouts via a button so that they can both preview how the page looks at this size, but also so they can set up columns etc. for different breakpoints.
Media queries are predicated on the window width, and I've been so far able to build something that my users find quite intuitive, and I feel that asking them to resize their browser window to change the mode seems a bit iffy.
An immediate way that I can think of would be to use an iframe for the main edit view, but the problem is that the page interactions I have are quite complex, drag & drop, drag to resize etc. - I have all of these working at present with both mouse and touch, and in order to drag & drop between the parent and an iframe I'd have to rewrite a significant amount of code. So I'd rather avoid this if at all possible.
I'm looking for suggestions/advice on how I could make this work - workarounds and hacks are fine.
This is how it looks at the moment, to give you an idea of the kind of interface I currently have - no live link that I can share atm, sorry:
OK - this is the solution I've come up with so far - the whole page, not just the editor area goes in an iframe.
https://gist.github.com/nrkn/00e1fb7cc4c7b43329a3
https://cdn.rawgit.com/nrkn/00e1fb7cc4c7b43329a3/raw/69a85b12dda7cece2b7ed602503c45d16f898d15/iframe-rawgit.html
How can I make my scroll bar black for a <div>?
Is there anything that will work in Webkit, IE7 to IE9 and Firefox?
You cannot do this in Firefox. Only IE and webkit browsers support modifying the scrollbar.
See http://msdn.microsoft.com/en-us/library/ie/ms531153%28v=vs.85%29.aspx on how to do it in MSIE and http://www.webkit.org/blog/363/styling-scrollbars/ on how to do it in webkit.
You cannot style the scrollbar of the browser. It's not universally supported (although IE did try to implement it).
Also, it's a bad idea to do so from an accessibility perspective. Think of (old) people who cannot see your very slim, almost invisible custom scroll bar or don't know that what you have there is actually a scroll bar.
You can use custom scrollbar plugins in JS like this one. It's all over the place
As Pez Cuckow said:
I imagine that custom scrollbar is implemented in javascript, it looks
very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at:
http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this
includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly
what you want) with Javascript and jQuery:
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at
http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
I agree you shouldn't tamper with the visibility (I'm looking at you Apple) of the scrollbar of a scrollable region. Sometimes, a box with scrollable text fits just inside the boundaries and there is no visual clue letting a user know that it scrolls thereby confusing the user. Is it really a good idea to prevent the user from being able to use your application? Most likely not, but you can also argue back that your target demographic wont have any problems; an application for extreme inline competition is probably not going to be used by people who aren't able to see very well. However there are accessibility/usability concerns that go beyond visual hinderances; cognitively impaired, or non tech-savvy, individuals might be very good at said aggressive inline and want to compete in your upcoming event but wont be able to because the black-on-black scrollbar looks awesome.
That all said, do what make you happy. That's what I do.