Is it possible to let the content of a cell in a react-virtualized Collection stick to a side when scrolling? I normally do this by using position sticky but this does not work for the content in a Collection.
I'm building a Grid TV Guide like the one in the image below. When scrolling the content of the most left visible cell of a row should stick to the left side of the screen.
I am able to get this working without using react-virtualized, but after scrolling through the guide for a while too much data is rendered and the page becomes very slow.
Can any of you help me? I would be very grateful.
Thx in advance!
One possible approach is to make an extra element that looks like the column that is to be sticky, and positioning it over it, e.g. https://codesandbox.io/s/l5z0wvpj77
Related
I am developing a react web page, where I am using this kind of layout.
But the height of the page could be even more than 4k px because I do not exactly know how many "boxes" will be displayed. Therefore, I added scrollbar to the page.
Now I would like to have aligned items to the bottom (top is already aligned by default) when the user is scrolling.
To achieve this, every column must scroll independently but synchronized at the same time.
Does someone have any suggestions on how to achieve this goal? It is some kind of parallax in combination with the masonry effect.
Thanks for any ideas.
An idea would be to contain each of the columns in their own div and then use the parallax effect to scroll all of them together.
So, I am having trouble with iframes, I included in the dropdown navigation and the alignment of these iframes according to the navigation length, but its going across the horizontal way.
I am quite new to HTML and don't know how to solve this. I have attached the picture too as a reference. I want the result on the same page so I don't have to scroll.
here i don't know the technically what will call but will try to explain the scenario what i want to achieve. following is the image what i am facing issue
when page right boundary is not touching the list it is showing like this.
when i minimize the browser window from any side i want list should come in the visible area of the page it should change the position now it is clipping the list like this
Please help me how i will change the position of the list as its touching to the any boundary of page like top, left, right, bottom. using jquery or css
Put your table inside a div and for div add css rule overflow:auto
Yes, You can achieve that things,
For that you have to use Shuffle.js
Please refer this Link
(Sorry in advance for the long post)
I'm trying to help an open source CMS project called N2 CMS modernize its drag & drop toolbox. I'm not sure what the best way to do this is, but I basically want to take a floating menu and "dock" it against the left side of a web page, such that the entire body of the page is shrunk in width. However, the functionality of this panel depends on the user's ability to drag something out of the panel and drop it onto the page.
This is what it looks like currently. There is an outer "management" page wrapper (the blue bar that is visible at the top) and an inner iframe which wraps the content page being edited. The drag & drop panel is a floating div that is rendered by including some code in the content page akin to #{ RenderToolbox(); } (it basically just writes the div + some inline CSS out to the page)
This is what I'd like it to look like, ideally. You can see how the toolbox now has the whole left column (so the page isn't obstructed) and the whole width of the page has shrunk.
Is it possible to accomplish this by injecting a <div> into the page? Maybe some kind of jquery that can re-parent the whole body inside of a <div> container? Is this even the best way of going about this sort of thing?
I guess something like this would be possible:
jQuery(function(){
$('body').wrapInner('<div class="wrap" />')
})
However, we are worried that it might be hard to make this look good on all layouts, e.g. layouts that use absolute positioning or html/body margins.
Therefore, we are turning to the larger Stack Overflow community for any advice and thoughts on this problem. Your guidance is much appreciated!
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?