multiple-select openning upwards and downwards problem - javascript

I use the multiple-select plugin on the website I made with html js (https://multiple-select.wenzhixin.net.cn/docs/en/options). When it comes to the bottom of the page, select should open upwards, but it opens downwards.How can i solve this?
when i scrool to page boottom,select input hawe to opening upwards, but it is openning downwards

Related

When scrollbar appears, it pushes all content to left. How to instead make scrollbar appear to right of existing container?

This is for a Chrome Extension I'm working on.
The scrollbar isn't coded into the HTML/CSS/Javascript anywhere in its present form. When enough elements get added to the Extension memory, and a button is clicked to reveal a user's saved items, the default browser scrollbar simply appears there.
When it does appear, it pushes all previously visible content left, shifting it all from its previous position, and it's pretty visually clunky and unattractive.
How could I instead make this scrollbar appear to the right of the pop-up div container -- with everything inside of there remaining in their original position?
Thanks!

Scroll the page, then begin to scroll a div inside another div and then the page again. How

I'm trying to find the right jquery or js plugin to create an effect like this:
I have a long screen capture from a smartphone, is a huge image.
I want to put this image inside a scrolling div placed on top of a smartphone background image to simulate the screen.
I cannot find a way to manage the scrolling: I want to place this image in the middle of the page, and when the user scroll to the "smartphone" the windows scroll stop and my captured image placed inside the vertical scrolling div begin to scroll. At the end the page start to scroll again.
Is there something i can use?

Absolute viewport for messi pop up

Suppose, I have a web page which consists table of item long enough to use a scroll bar to move up and down the page.
So, when I am trying to use messi pop up in it with default viewport and clicking on item which results into opening of a messi pop-up.
The problem is:
On keeping default viewport, pop up always appears in middle of the web page irrespective of where it is clicked. What viewport should I set, so that I always get my popup in middle of the screen of my laptop, not in middle of the whole web page.
Link to messi pop up web page is here
used jquery .position() to set the viewport to dynamic. It was not an messi popup specific issue. it was a general issue.

Javascript scrolling menu that starts only after a certain ways down the page

I want a scrolling menu that begins at a certain part of the page (like under the header), but stays there till you scroll down and it hits the top of your browser window, then follows you down the rest of the page.
Anyone have any clue how to do this? I can't find it anywhere on the net. I've seen others similar to it, but none that move to the top of the window.
There's a great example on gmail when you are viewing an email. The toolbar stays at the top of the email box, but once you scroll past the email box, it follows you down the page.
I know that position:absolute;top:0; will make it stay at the top without the fluid motion (I hate it because it looks sloppy).
** edit **
I really only need to know how to detect that the menu div is at the top of your page. I can do a mock thing where if you scroll down how ever far the menu div is, it will start scrolling down, but I'd rather actually get whether the menu div is past the browser window or not.
It's a mixed position of fixed and absolute, you will handle.scroll event and switch between that.
You can find an example here
Creating a floating box which stays within a div

jScrollPane JS Library - Why "end" button disables the input field at the bottom of the page?

We have a pop up iframe (using prettyPhoto) inside of which we use jScrollPane for a custom vertical scroll bar. Scroll bar works fine except 2 problems.
1) When you go to the end of the page by pressing "end" key, the input field, which is located at the bottom of the page doesn't work properly. You can activate it (you see the flashing cursor), but when you try to type anything, it won't work. When you use slider or arrow keys to get to the bottom of the page, it works fine.
2) When new content is appended to the bottom of the page using $.append() or scroll_bar.getContentPane(), it doesn't recalculate the height of the page, and the scrollable area stays same (which is less than real height). I tried to reinitialize jScrollPane, but it didn't help either.

Categories