I'm searching for a jQuery plugin which adds custom scrollbars to a div. I know, there are tons of plugins like this out there and i tried about 10 of them now with no success because i need a plugin with some very special features and i was wondering if anyone knows one which comes near.
Its very important that the plugin does not poll for changes of its content (setInterval) or that it can at least be disabled.
It must be possible to tell the plugin to update itsself manually when i know that its contents has been changed
The most important thing (which seems to be the thing that is missing on most plugins): the original element reference must be kept.
So if i do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
the plugin needs to recognize this. In the best case, the plugin takes the jquery element i applied the plugin on as its content pane to recognize any manipulation done on the element.
What i can't do:
$("#myElement").coolScrollbarPlugin();
$("#myElement").coolScrollbarPlugin("getConentElement").append("<h1>New Content</h1>");
$("#myElement").coolScrollbarPlugin("update");
This limitation is due to the surrounding application framework which will do manipulations on the scrollable elements that i'm not able to affect.
Are there any plugins that you know matching all this criteria?
Are there other ideas on how to achieve this?
If you get scrollable element by id or assign element to variable before applying scrollbar, you can try jQuery Scrollbar. The only change that is made - element is wrapped into another element with the same classes (to apply CSS styles of source element's height/width & design for scrollbar).
You can disable content/container size cheking using option autoUpdate:false and call init function to recalculate scrollbar sizes after update.
Related
When I dynamically add option elements to a select element with a size of say 10 on IE, a scrollbar does not appear once my list of options exceeds the height of my select element, and I am unable to scroll to the rest of the options. This only happens on IE and is an issue when dynamically adding/removing options. Anyone know of workarounds? I've tried creating wrappers and one approach that might work is re-rendering the entire select element each time, but that is wasteful
I don't know the solution to this specific problem,
but you get to ignore a lot of the hassle with cross-browser support on UI elements by using jQuery UI.
If it's possible, you should take a look at https://jqueryui.com/selectmenu/
It's more easily customizable, so if the default select-box' off-by-one pixels annoy you, you can get around that too by using it :)
In my angular app, I'm using ui-sortable to sort an <ul>.
The elements itself are resizable.
This is similar to the setup I have:
And I would like that "4" and "5" use the space on top of them:
Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.
Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.
So how can I achieve this?
Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
What are my options without getting rid of the libraries I already have?
What are my options getting rid of the libraries I already have?
I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout
We are working on a mobile crossplatform application and want to be able to set an elements height as a percentage of the screenwidth.
So we have to use javascript for it.
To make it a little bit more maintainable we want to implement a custom css property: wheight. This should be a percentage value, the javascript should calculate the correct value and layout the containers.
Now we are stuck at the beginning:
We need to be a able to select all elements with the wheight css attribute. We would like to do this without traversing the dom in it's whole.
Does anybody know a method on how to do this performance friendly?
I've been searching for a way to remove the scrollbars on a page while still allowing scrolling, but I've found that the general consensus is that you'd need to add additional elements that wrap your existing content.
Maybe I'm missing something. Is there any way, using CSS and JS, to remove the vertical scrollbars while still allowing scrolling without adding additional elements around my content?
The reason I ask is because I'm hoping to implement it into a jQuery plugin that effectively hides the scrollbars in favor of the plugins functionality, and I'd rather not wrap the plugin-user's page with additional elements for the sake of conflicting with their styling.
Any help is much appreciated.
Currently there isn't. Browsers don't support it. Facebook and other sites that implemented their own scrollbar functionality replacing the browser's use a technique to push the browser provided scrollbar out of the visible container and render their own scrollbar to be visible.
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.