I'm using this plugin for adding custom scrolling function into my web page.
(http://manos.malihu.gr/jquery-custom-content-scroller/)
At some section I need a newspaper-like content/post with columns to be scrolled horizontally, but the problem :
Media-queries and responsiveness of the layout doesn't apply
Language of my content is RTL (Persian) I want the scrolling to start from right to left, but it naturally starts from left, so there's a huge space from left and we have to scroll to reach the original content.
I'd be grateful if I can get a solution from you guys :)
Thanks in advance.
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.
I have developed a custom react data table component which displays headersData, rowData and footerData in the table dynamically.
When it comes to the scrolling I am trying to achieve the below 2 points:
Horizontal scrolling -
A) First two columns should be fixed and from third column till the last column, horizontal scrolling should be enabled.
B) Horizontal scrolling should always be visible at the bottom of the window. There is a max-height of 300px and it should
be always visible at the bottom.
Vertical scrolling -
The header row should be fixed at the top when we are scrolling vertically.
The custom react data table and my attempt is there in the below CodeSandBox link. I have achieved the first point mentioned in Horizontal scrolling but could not achieve the second point mentioned in the horizontal scrolling and the vertical scrolling with the fixed header at the top. Tried for many days and couldn't figure out. For this reason, thought of seeking help and posted the question here. Kindly let me know your thoughts on how we can implement this feature. Thanks in advance.
CodeSandBox link:
https://codesandbox.io/s/custom-react-data-table-970ed?file=/src/tableContainer/DataTableContainer.tsx
Note: It doesn't need to support in IE.
Expecting the scrolling behavior to be like shown in the below link:
https://jsfiddle.net/6qxcaemu/5
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
So I have about 8 pages, more or less that I want the user to be able to scroll to each one horizontally. However each one of those 8 pages is also pretty long and needs a vertical scroll bar in each page as well. So when the user uses the horizontal scroll bar they should be able to navigate the different pages, but when using the vertical scroll bar they should be able to just scroll up and down on the page that they're viewing.
I looked at at fullpage.js and sly.js and I'm not really sure which one would be the best to achieve this kind of design. Also if anyone has any other suggestions on how to do this that'd be great too.
If you go for fullpage.js, it doesn't provide any horizontal scroll bar. You can scroll horizontally form one slide to another by using the keyboard arrows or by using any visual element in your site.
fullpage.js provides arrows by default to do so. But you can substitute them for any other element.
Then you can use the option scrollOverflow:true to allow the vertical scrolling within the slides.
Helo to all, i have been searching all over the web for some jquery or javascript tutorial or plugin for a horizontal scrollbar and i have found many of plugin asnd tutorial but not the one i want.
Now im using tinyscroll and i have found it has alot of bugs, can somebody help me with the next effects.
Mouseover: At mouseover at the right or left it scrolls by itself.
Shadow at hiding: When a image hides at the left or right a shadow effect that gives a "it got in the bottom of this layer" effect.
Scrollbar: simple bar that has a 80% opacity
mouse scroll: that mouse scroll can be used with it.
I need something like the movie scroller in this page:
Cuevana.tv
And i know html and css but css -webkit styling can't do this effects.
I really dont have any codes to start with, please help.
Try this one.
It has the horizontal scrollbar and the mouse scroll works.
With css you could get it to look exactly like the one in the link you posted. (positioning the left and right carets up by the image container and etc...)
I'm quoting a good SOF answer here: jquery horizontal scroll
Try hoverscroll jQuery plug-in - http://rascarlito.free.fr/hoverscroll/
Also try Smooth Div Scroll - http://www.smoothdivscroll.com/demo.html