I am working on a Netflix/Amazon Prime Video style popup. How would I update the position of the popup based on the availability of the screen. That is, as seen on the image below, when the link is towards the top of the window, the popup gets cut off. Similar thing happens when the primary content is near the bottom/left/right viewport. So I was wondering how detect the edges of the viewport/window and push the popup window up/down dynamically.
Website: https://movie-popup-dinethh.c9users.io/
Issue:
Code: https://github.com/DinethH/Movie-Popup
Related
Consider a scenario when you have a responsive design, with 3 columns.
On desktop:
left menu
main column (whole page is scrollable)
right menu
On mobile:
top menu
main column (scrollable)
bottom menu
On desktop when scroll event occurs anywhere on the page - I would like to be able to scroll the content inside the content column. On mobile, we scroll the content within the main column itself.
Here is the example: https://jsfiddle.net/sf8m97L2/5/
https://user-images.githubusercontent.com/20644772/165400320-e26e7157-3014-4dda-800d-2e441c98c654.mp4
So here comes my issue/question - is it possible somehow to propagate scroll events from anywhere on the page to the perfect-scrollbar target location (in my case, form body to the content column)?
Currently if the user wants to scroll the content in the main column the user has to hover the mouse over that area specifically. I would like to allow scrolling when the cursor is outside the default zone. Please check the fiddle.
Using latest version 1.5.5
You can use Sticky-sidebar to do what described.
Of course, the scroll bar will not be in blocks, but in the main window, but you can scroll while holding the cursor at any position of the document
See example:
https://blixhavn.github.io/sticky-sidebar-v2/examples/basic.html
I'm creating a mapping app that places a marker image on a canvas and scrolls to it. I'm using the browser's pinch zooming and scrolling to zoom in/out of the map. However, I've noticed that there's some bizarre behavior, and I'm wondering how to get around it.
This is a little tough to explain, but here we go.
Let's imagine that you're at the standard zoom level on a webpage (you can't zoom out any further). Let's imagine that the area your browser window is showing is the "invisible box". There's some stuff you can see, and some stuff that's out of view (that you need to scroll to get to). Once you pinch-zoom in, the browser still pretends that your viewport is still at 100% zoom (i.e. Your browser is essentially cropping into that invisible box, but the invisible box stays in the same place.) Any JS on the page sees the scroll position as the same, no matter where you pan around within the invisible box. However, once you scroll to the edge, you start to push the edges of the invisible box. If you use JS to set the scroll position (window.scrollTo(xPos, yPos)), it sets the position of the invisible box, but the portion of the invisible box you see is still relative. This means that if you set the scroll position to (0,0) and your cropped-in view is not at the precise top left of the invisible box, the portion you see will NOT be at (0,0).
The issue I'm having is that I need to move the zoomed-in view to a specific spot. Since setting the position of the invisible box isn't really working, is there a way to force the browser to get rid of the invisible box, pinch-zoom all the way out, or maybe detect where the zoomed-in portion is within the invisible box? I'm stumped.
I am generating a dialog box via JS and positioning it center, for an non scrollable page, but when I open it on mobile page, the problem occurs is when I zoom the page the the Dialog div also zooms and move out of the window, thus making it inaccessible.
What is the way to always make it fixed in the center or inside regardless of zooming, so that the content is accessible and readable.
I'm trying to center vertically (or put at an arbitrary vertical position) an image in a window that has already been scrolled to the bottom.
For example, the user is on a page reading, clicking, etc. and is now, after multiple screens of content, at the bottom of the page and about to click the last button. I want an image to pop up centered in the window.
When I try:
http://www.w3.org/Style/Examples/007/center-example
or:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
the image is centered on the first screen of content, i.e. you have to scroll the page all the way back up to see it centered in the window. I would like the image centered within their current point of scroll. This is intended to be part of a Javascript function.
A fixed position will do that (position:fixed in css). Here`s a jsfiddle in which a modal popup is centered that way on the screen.
Use position:fixed;, and the content will be centered relative to the window.
I have a dynamic page where clicking a link triggers some javascript that sets some page elements to display:none, and thus changes the height of the page. The typical browser behavior for this is that the scroll position from the top of the page is retained. I want to retain the scroll position from the bottom instead, because the link is near the bottom of the page and I would like the user's cursor to remain over the link after it is clicked.
The code I have to do this is:
var scrollBottom=getDocHeight()-getScrollTop();
//do stuff to change height
window.scrollTo(0,getDocHeight()-scrollBottom);
(using cross-browser functions I found to obtain document height and scroll position).
This works fine in chrome and internet explorer, but in firefox, there is a small delay between the page height changing and the scroll position changing. As a result there is a flicker as the page quickly realigns itself, which is bothering me a great deal.
Can anyone suggest a fix or a more natural way to remember the scroll position from the bottom of the page instead of the top?
Thank you.