Is it possible to programatically access a Div's scrollbar handle and change its size?
--Edit: Is there a mootools plugin for something like this?
I'm trying to implement a lazy pagination mechanism, where a div's content will be updated onscroll, but I'd like the handle on the scrollbar to show the final size. Meaning, if there will be only 10 elements in the div, the handle will be rather large, and if there will be 1000, the handle will be as small as possible, even if the user hasn't loaded all the 1000 elements yet.
I found this site, but I want to avoid using this class.
Thanks!
You would have to use a custom solution for something like this. You won't be able to change the actual native scrollbar height. The plugin you referenced is more along the lines of the route you need to go to acheive the desired results.
Another solution you could implement would be to show the number of results via some other visual method, and not the scrollbar. If you are showing 75 of 100 elements, you could make a fixed div span 75% across the screen.
You could put an empty div inside your scrolled element, and set its height dynamically to something proportional to the actual content size.
You don't get any interface to the scrollbar itself from JavaScript, but it sounds like you can certainly get what you want simply by making the scrolled content as tall as 1000 elements. To reduce the slowness of scripting a thousand items you could replace the above-and-below-the shown-items items with a single top and bottom margin of the same height as that many items, and catch the scroll event to fill in new items to replace them.
Related
I have 4 div elements on the same line, each set at 25% width to fit the screen. When I click on a div it should disappear, which I have achieved using jQuery. Then, I manually set the width of each of the divs to 33%.
I can keep on doing this manually for more clicks, but is there a way the divs automatically resize them selves like this using jQuery and even continue when 2 divs are on screen so each would should be 50%?
Creating tables will solve this problem. Table columns will automatically resize when you delete one of them. You can easly make div's behave like table.
http://snook.ca/archives/html_and_css/getting_your_di
In that case, you don't need to specify fix width e.g 25, 33.. just set it to auto:
width: auto
That should do the trick for as far as i could understand your question. If that didn't help, you should include your css and html code in the question.
I decided to use a card UI in a project and checked a few Masonry-like libraries, it seems that all of these use position: absolute for arranging elements.
IMO this method is not the right tool for some purposes, for example my cards are expand/collapsible (like Google plus post comments) and although this can be animated in Masonry, it causes complete rearrangement in elements (it doesn't simply push elements down, elements jump from column to column).
I took a look at G+'s markup, they dynamically insert 1, 2 or 3 DIVs as columns depending on screen width (for responsiveness) then fill this columns with elements. In this way elements have their normal position and behavior, so if you need to add, remove or expand/collapse just insert the element into the DOM or change the height and browser does the positioning.
They also take care of overall height, so in the next Ajax loading, it calculates and distributes elements in columns in a way that columns height grow at nearly same total height (just like Masonry)
Do they use any specific library?
Is there any responsive framework/library that work in similar way?
I had the exact same problem and I think Salvattore is exactly what you are looking for.
It automatically creates some columns and puts all your grid elements into the right column.
The styling is then totally up to you, so no need for any position:absolute.
In fact thats all the styling you need:
.size-1of3 {
width: 33.333%;
}
Check it out: http://salvattore.com
I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
I would like to have a couple of divs that scroll in sync with each other in a manner similar to the diff tool, meld. Note: as this is a static image, when you move the slider, the corresponding slider moves in sync with the other slider. I need to do this both horizontally and vertically.
This is for a highly customized diff tool, some of the diffed lines are very long, and horizontal scrolling needs to happen. This is within a web page, I use jQuery, but any css/JavaScript approach would be appreciated.
It should be as easy as binding to the scroll event of each div and set the .scrollTop & .scrollLeft of the other div equal to scrolled div's scrollTop & scrollLeft.
See https://developer.mozilla.org/en/DOM/element.scrollTop && https://developer.mozilla.org/en/DOM/element.scrollLeft
Edit: Here is an example:
http://jsfiddle.net/dHvJJ/
I assume that you have a fixed font size. I also assume that the two containers are 2 divs.
here's my approach (in order to support webpage resizing properly):
convert the font-size from px to em
spit out an array of correspondences from the code (for example, you should already know that lines 32-33 from the first div correspond to line 22 in the second)
add event handlers for onscroll on both divs. Now the 'magic' is to calculate where the corresponding scrollbar should be, based on your info - it's pretty safe to assume that in order to scroll to line 32, you have to scroll 22 lines on the left side and so on.
For the horizontal scroll I don't think it should be anything hard, simply scroll the corresponding div at the same scrollLeft position
I would need to build a html table that has a horizontally scrollable column. The scroll should be placed in the column's header.
My first question is: do you know any jQuery plug-in that is able to do this?
My second question: is this possible using a single table? I've heard that in order to do this you need to use multiple synchronized tables that look like a single one from the user's perspective.
Any idea/advice would be welcomed.
I've only seen something like this using jqGrid, but that was two tables (the master table has a second scrollable table within it). I'd like to know a plugin for this as well...
I would do as you suggested and use 2 containers. They'd both be set to overflow:scroll and have a set width, but the top one would simply contain a div that you can set to be the same width as your table. You can then bind to the "scroll" event in jquery, and set the scroll position of the divs to match each other in that event. Honestly I haven't tried this so I don't know how reliably that event fires, but in theory it should work.
Alternatively, you could do without the standard browser scrollbar and write your own scrollbar that uses javascript to set the position of your table in the overflow:scroll div. If you want draggable behavior (not just left/right arrows), it could be somewhat difficult, but wouldn't be impossible.