We Keep Coding

how in javascript/jquery do I show a pop-up element relative to the viewport, rather than the web-page?

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

move element in DOM but not on screen

I am creating a lightbox style plugin that opens an image in fullscreen and adds text about it next to it. I need a zoom animation, that just zooms the small image up to fill the screen. Since the small image is in a column layout, i need to move it out of the current dom structure. However i am unable to do so while doing the zoom animation.
So my question is:
Is there any way to move an element in the dom, or just change its position to fixed and keep its position on screen? I have jQuery avaliable

If all you want to do is get it done, this plugin could do the job.
magnific-popup
Otherwise, I'd put the image in a container of the same size so that you can change the image display property without having your layout get screwed up.
You don't need to move the element in your DOM. Just change the css.
Also this stackoverflow question could possibly help you.

How to get coordinates of the draggable image from a div?

I have a small div (overflow:hidden) in which I'm showing a big image which is draggable.
I want to crop the Image in the exact position in which it is visible in the div.
NOTE: I know I can use html2canvas, but I want to crop the Image in its original size.

See this link to get the position of a DOM element:
Get the position of a div/span tag
It sounds like you'll need to get the position of several different elements to calculate the relative coordinates you want.

How to fit a webpage to different screen sizes without disturbing its original width?

I was flirting with an idea of making a bookmark app which might let users bookmark only a section of a page like in this image. They will click twice on the page to mark two horizontal lines. Area between these lines will be highlighted to show the selected portion of the page.
I will be saving the y-coordinates of the two lines. That's it.
But what if:
The user opens the bookmark in a bigger or smaller screen afterwards. The webpage will re-size to fit the new width and some of the elements will definitely change their position. Then the coordinates will mismatch and wont show the original selected area.
The page content on the url changes later on.
The webpage is responsive. Then the mobile view will be completely different. It might not contain some of the elements from the original normal monitor screen.
Solution for problem 2 can be that we save a permanent copy of the page and then set coordinates on it. I have figured out this part of saving the webpage to a single html file which looks very much like the original.
And for 1 and 3 points I am thinking if it can be possible to somehow fix the width of the webpage to show against the screen width. i.e. just stretch or shrink the original page width according to the screen width. Is there a way to do this? I did some experimentation with viewport meta tag but it didn't work.
Do you guys have any idea? Anything else according to you that can go wrong? Any extra add-on?

How to enable clicking on layered svg images

My app uses up to 6 svg images layered to create an interactive image. I have found that I cannot mouseclick on any images below the first.
** Edit. Excess code and text removed.

You can make an element insensitive for mouse events by setting the pointer-events attribute to none (see Tinkerbin):
svg > *{opacity:.5}

In essence I cannot do what I want this way. Stacking embedded images results in only the top layer being clickable by the mouse.
An image map works, with some mucking about.
I created a clear image calling it clearOverlay and gave is a usemap value tying it to my image map.
My imagemap I created using a free online app http://www.image-maps.com which took my image allowed me to create my clickable zones and generated the html for me. After cleaning it up and swapping the href values for onclick functions I added the map to my code.
Next problem was getting it to overlay my existing images. I eventually used style="position:relative; top:-300px" forcing it to sit squarely on my image. I'm sure there must be a better way, but at this point that worked for me.
For anyone else doing this don't forget to either place the clearOverlay last in your image list or set the css z-index to higher than everything else to make sure it is sitting on top.
So I now have a stacked svg image, where I can manipulate each svg according to where the user clicks. Its only taken me 5 days! I'm kinda over this coding by yourself lark.
** My image map above will not scale to different sized screens. The next time I try this, I will experiment using a transparent svg with fill zones where I wish to click.