I am trying to create a skewed div with scrolling content inside of it.
You can take a look at my code here:
http://jsfiddle.net/kDv45/1/
Originally I had it hidden by placing the content inside of a smaller div, but the skewing made the scrollbar visible again.
If I set the css overflow as hidden, it hides the scrollbar but it is no longer able to scroll. Can you guys think of a workaround for this problem?
I suggest you to use overflow : hidden on both x and y. And use JavaScript events for scrolling.
Related
I am trying to change the position of my slip element via animation transition whenever a user scrolls to the bottom of the page. The problem that I'm having is that I don't know how to switch the positioning from flex to relative. The slip element needs to be positioned above the footer.
I've managed to achieve this with only switching classes but I don't like the jerking animation so I wanted to add some transition but now I don't know how to make it stick above the footer.
How do I make the slip element stick on top of the footer and not be fixed when a user scrolls to the bottom of the page? The goal is to achieve this with a smooth transition/animation.
Here is my stackblitz example of the problem.
This isn't really a ReactJS question, it's more of a question about HTML and CSS styling.
I would get the position of the footer: footer.offsetTop, and then I could get the user's scroll position: window.scrollY and the window height: window.innerHeight. Using all of these values, I would determine if the user has scrolled to the point where the footer is visible, and if so, make the slip element have an absolute position where the bottom is set to the footer.offsetTop
That should, in theory, work.
I actually found a stack overflow question just for determining if an element is scrolled into view: How to check if element is visible after scrolling? so that should help some.
Before i start, I wanted to let you know that I have been searching high and low for a solution to my issue but the closest thread I've found is unfortunately without the answer to the actual problem - Position absolute inside div with overflow-x scroll and overflow-y visible
Essentially I got main page where I am dynamically loading some other pages and on some of them I used dropdown listboxes. It happened that I haven't noticed it earlier as content any of the pages wasn't wide enough for me to spot the problem.
The problem I face is absolutely positioned div (which contain dropdown) and visible horizontal scroll bar on the parent of this div. When I scroll my page horizontally the dropdown div stays in the same place on the screen. I read about "popping out" absolute divs under this link:https://css-tricks.com/popping-hidden-overflow/ but even there, I can observe similar issue I am currently facing, which is appearing of the vertical scroll on the parent element. I am trying to achieve similar effect like here:
http://jsfiddle.net/matcygan/4rbvewn8/7/ but stop vertical scroll bar to appear when the listbox is expanded - instead it should overflow the box and party cover horizontal scroll bar. Here I've found another prompt example how can I achieve it http://jsfiddle.net/b5fYH/ but when i try to play with it and make red boxes scrollable with content as well as overflowing outside of the content vertically, without creating vertical scrollbar, I am failing... I am also fine with using JS if CSS on it's own can't deliver such effect.
In the end after 3 days battle, the CSS won and I need to ask for a help...
Any support will be greatly appreciated.
Thanks in advance.
I need to disable ANY kind of vertical scrolling within an overflown DIV (I would still be able to scroll it horizontally).
overflow:hidden with CSS won't work since you can still scroll with the mouse wheel click / smartphone touch scroll. The only thing this does is hide the scroll bar, not disable it.
Is there any way to do this with Javascript or jQuery?
Thanks in advance.
Have you tried reducing the height of the div so there is no where to scroll.
You could put the screen height into a variable (or slightly less) and then make the div the same height therefore cutting off any content with the overflow hidden.
Using the jQuery popbox library (http://gristmill.github.io/jquery-popbox/index.html) I encountered the following problem:
I have a huge div which has it's overflow set to auto. It is actually a tournament grid displaying a lot of matches to be played. Each match (separate divs) has a small info icon and upon clicking, I'm using the Popbox to display additional information in the window that comes up.
This is all working correctly, however, whenever I press the info icon on a div that's close to the bottom side or the left side of the parent div which has it's overflow set to auto, part of the popbox window is not visible as it ends up outside of the parent div. I'm looking for a user-friendly way to solve this issues.
Setting the parent's div overflow to visible is not an option as I need the scroll bars to appear if it gets too large. It would be nice though if I could make the Popbox window go outside of the parent div and be completely visible.
The other idea that I can think of right now is to set special classes to the info icons close to the edges and adjust the popbox window to the right/top so it is visible in the parent div regardless of its overflow.
I suggest you to use some special classes and make the popover "pop" on top/right.
You can see an example here: http://getbootstrap.com/javascript/#popovers
If you want to use Bootstrap you can make a custom build here: http://getbootstrap.com/customize/?id=6493526
Popover css+js is only additional ~ 10k min+gzip
Does anyone out there have a good example of a vertical content rotator in jQuery or Javascript? Especially ones with navigation arrows and thumbnails?
Most that I've seen are horizontal.
jCarousel will do this for you. Here's an example showing the vertical functionality (with arrows).
I'll make a suggestion for you. Create a div with a defined height and overflow set to hidden. Create another div inside the defined height div and place your content with it. Using the animate function of jquery, animate the child div upwards with marginTop or top with relative positioning. Use some creativity to make it pretty or dynamically load content.
If you really need a script i'll make one for you. But you can just get any horizontal carusel and change the left/right attributes with top/bottom (the ones in animation). Also jCarousel is a good example. (the one Andrew suggested).