There are currently jQuery plugins that make a system's native scroll bar look like the iOS scroll bar (http://rocha.la/jQuery-slimScroll and others). Example code for these platforms makes it look like they need a fixed height to work.
$('#example').slimScroll({
height: '250px'
});
I want to adopt the new flexbox standard (2012-2013) edition. The height and width of the container can change. Is it possible to overwrite the native scroll bar in a similar manner to jQuery slim scroll? I know webkit has this http://css-tricks.com/custom-scrollbars-in-webkit/, but I want to have support across the modern browsers (as of the time of this post, IE11, FF26, Chrome 31, Safari 7).
Is this possible? Or will I have to overwrite the DOM hacking that jQuery slim scroll seems to do?
Probably not an easy task, my friend. The cross browser solutions are probably replacing the element with a bunch of little divs that look like a scrollbar, and then calculating how much to scroll the content by using the overall height VS the viewable height.
Related
I am trying to make an animation of the effect of an opening door. Is there any known algortihms for doing this? If not, I need to alter a rectangular div making the right side longer than the left side, and the top and bottom lines connecting the right to left side of the div would be diagonal, and the contents of the div, are stretched proportionally. Is there a way to change the height properties like so, for a div?
You can do it using CSS Transform however it won't support older browsers.
Here is a good tutorial for that: http://24ways.org/2010/intro-to-css-3d-transforms/
Your best bet is making an animation using several images and changing them.
You can use the css "transform" property, if you don't need to support older browsers.
Have a look at the w3c specification | mozilla dev, and also at this tutorials: css 3d tutorial series.
An alternative solution for older browsers would be a canvas, which is more supported (still not in all browsers).
If you need to support almost all browsers, you could use flash, but I really not recommend that.
I'm looking for an responsive image slider for a particular case.
This is what I would look to happen on desktop/tablet/mobile.
You can also swipe through the images on tablet/mobile.
It's important that the images don't need to have the same width. (height is always the same)
Does someone knows a js library for this?
I searched but most of the time you only have view of 1 image.
How's this?
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
It supports IE6+ and is very lightweight. You can easily make it responsive by wrapping it in a div with overflow: hidden; that varies in width as you require. Alternatively, you could have a go at rewriting it as you require (it's quite a lightweight script!)
The lemmon slider works great with Touch Swipe. The instructions to add this are here:
https://github.com/lemmon/Lemmon-Slider/issues/5#issuecomment-25177163
On my site, http://www.merkato.hu, the header has a fixed position. On desktop browsers, this works well - but on mobile devices, zooming the page makes the header unusable due to the fixed positioning.
I have tried a method for making the height and html absolute positioned to header and content, and overflow set to scroll - but there are scripts which need the body to be scrollable.
What is the best way to accomplish a fixed-header for mobile? None of what I'm finding seems worthwhile for iDevices.
This is a difficult problem. Support for fixed positioning is broken or missing in most mobile devices. First mobile browsers that support that came with devices produced this year, or so.
I remember that jQuery Mobile team struggled with fixed headers and footers for quite a while.
They got it working, so I recommend either using jQuery Mobile (or some other framework that can do that obviously) or digging into their JS and CSS to find out how that works.
Anyway, without about 20 different test devices you won't be able to be sure it works. So unless you have a respectable budget, you have to stick to the well-tested open-source solutions.
I have a div that is overflow-y: hidden; overflow-x: auto; and rendering a scrollbar exactly the way I want. I have all of the scrolling functionality and everything I want perfect already. Now, all I want to do is replace the default browser scrollbar with a custom one.
It needs to work in PC IE7+ and Firefox and Mac Safari so it'll need to be JavaScript or jQuery. I've already tried four different plugins that I've found, but none of them worked either because of the version of jQuery (1.6.2), didn't work in all the browsers necessary, or wouldn't work for a horizontal scrollbar, etc. The ones I tried were jQuery UI's slider, jQuery Custom Scrollbar, Tiny Scrollbar and jScrollPane.
I'm hoping there's a simple plugin out there, but I can't seem to find it.
I've used Flexcroll several times and it works great. Good browser support and it handles touch events for mobile devices as well.
The appearance of the scrollbars is handled with a sprite that's pretty easy to customize. It's 17.5KB which comes out to about 8KB when it's compressed so it's nice not having the overhead of a whole library when this is all you want.
http://www.hesido.com/web.php?page=customscrollbar
How can i have a section in iPhone web site(header) to remain in a fixed position and rest of the site to scroll(preventDefault or watever) so that it behaves like a native app...any safari api's or javascript that i can use to do this?
I think i found the solution for you: iScroll by Matteo Spinelli (Demo)
The overflow:scroll for mobile webkit.
Project started because webkit for
iPhone does not provide a native way
to scroll content inside a fixed size
(width/height) div. So basically it
was impossible to have a fixed
header/footer and a scrolling central
area. Until now.
If I understand that right you want an element staying at a fixed position? Have you tried creating a div and setting it's css attribute position to fixed? See here: CSS Property Position