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.
Related
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!
Original Web-page with no pop up menus
Web-page after adding pop up menus
Hello, I am working on building a web page that shows statistics to a user depending on what option they chose. instead of having the components glued in one position I am using react-new-window to open them up in pop up menus which will allow the user to move it to a different location on the screen if they wish to do so.
My problem is that when I open up the application all of my pop up boxes are on the left hand side of the screen. How can I get them into the original positions that they were in before I started using react-new-window? Thank you!
I have a web-page that contains a table of videos and pictures, which when any one of these items is clicked, the clicked item shows in a floating pop-up display area, but currently this area shows near the top of the web-page, so is often partially off screen when the user has the web-page scrolled so that the table of videos and pictures is fully scrolled into view, and so the user has to scroll the page up to view the floating pop-up display area, away from the row item they clicked in the table, where they can edit information concerning that item.
I would rather that the pop-up display area be displayed near the top of the viewport, so that it can fully be seen without the user having to scroll it into view, and the table of videos and pictures now under the pop-up display stay where it was before the user clicked any of the items in the table.
I've seen this topic Set element to top of viewport in javascript [duplicate], but I don't want to fix the display area, as the user should be able to scroll the web-page normally, and the pop-up display area move with the rest of the elements on the page.
Once this is accomplished, I will want to make the pop-up area draggable, so the suggested solution(s) should be compatible with doing this. I plan on using How TO - Create a Draggable HTML Element rather than using a jQuery or other type library. This way I can optimize the code for the pop-up element that is the only draggable item on the page.
Thank you
I was also facing the same issue. Then I found a CSS trick which I used.
.elements:nth-last-child(-n + 3) {
// Insert CSS you want to apply
}
.elements:nth-last-child(n + 3) {
// Insert CSS you want to apply
}
It helped me achieve the desired solution. Without any change in JavaScript and View. You just have to do calculations with n number.
For reference you can use below documentation -
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
Let me try and make sense. I have a search page that returns lots of search results just like Google. Each of those search results have a trigger (via an icon using onmouseover) to access more info in a popup window that pops up to the right of all the search results, just like google. Here is what I want from the popup window:
No matter if I am looking at the first search result at the top of the page, or the last search result way down at the bottom of the page, I want the popup window to align itself with the top edge of the screen, regardless of where I am vertically on the page (similar to fixed)
BUT, if the popup window happens to contain more data then the vertical screen height allows, instead of the popup window creating scrollbars internally, I want the popup window to scroll right along with everything else on the page (similar to absolute)
The problem is that fixed chops off data that goes below the bottom of the visible browser window height making it inaccesible without internal scrollbars. With absolute, the popup scrolls along with all the other stuff on the page which is great and what I want, but it always appears at the very top of the page, even when I am at the bottom of the page, making it invisible to the user if the results list is very long.
Its like I am trying to combine the two methods in a way. So to summarize:
When I trigger a popup via onmouseover, the popup window should affix itself to top edge always no matter where I am vertically, but if its content is vertically taller than the screen allows, I should be able to scroll the entire page down to see the rest of it. I should not have to use internal scrollbars within the popup window like fixed.
Is this possible and how should I go about it? Thanks!
You're going to need JavaScript.
First, make set the popup divs to position: absolute. This will act like fixed in that it can go anywhere on the page easily through left and top, but it still scrolls with the page.
On link hover, make the JS detect the browser's scroll position (through window.offsetY or $(window).scrollTop() in jQuery). Apply this offset to the popup:
$('.link').on('click', function () {
$('.preview').css('top', $(window).scrollTop());
});
Remember also to tweak the other CSS properties of the popup to suit your needs - however, most of that can be done in CSS; the only JS you really need is for the top property.
Fiddle: http://jsfiddle.net/GWvNx/
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