Develop Reference

hover does not active when trying to see hidden qr code bar?

I am trying to clone a website and here is this website's link
https://shopee.vn/
as you can see in this picture, when I hover the mouse to the line name "tải ứng dụng"
it will show the QR code
picture about problem 1
my problem is, I want to use some extensions like page ruler redux to measure the QR code's size, but it disappear when I move the mouse to another position (I click to the hover at the force element state, but it still disappear).
I think that when I click to the hover at the force element state, it must show the QR code and it will not disappear ?
Could you please give me some way to make it display to measure it?
Thank you very much for your time.

The Chrome/Edge Dev tools have a built-in measurement function, hopefully this gets what you want.
Right-click => Inspect element on the link, expand the div and click on the :after selector
Making sure the inspect element page is in focus (the last thing you clicked on), hover over the link
With only the arrow keys on your keyboard, navigate the element tree (up/down to move up and down, left/right to expand, enter if you want to copy a property, like the image url). As long as you don't click, the element stays up.

find the QR code element node by chrome devtools, as you can see in this picture, the div html which one has a classname be named shopee-drawer__contents
picture about how to find element node name
In chrome devtools console, you can print it out or use document method to measure it.
For instanse document.getElementByClass('shopee-drawer__contents').getBoundingClientRect()
print out width & height

Overriding full screen f11 browser button to launch Iframe

I was wondering if it was possible to override the f11 button to make it that instead of the browser becoming full screen. An element within the browser becomes full screen. The element is an Iframe within.
To be more specific, the element is a slide show presentation within a web page that does have a button that allows it to become full screen. But I would like to make it that f11 can also make the slide show full screen.

Popup position based on viewport availability

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

Simple Modal autoresize when window size changes

I have a problem with the Simple Modal (Eric Martin) modal window.
I have a window that needs a scrollbar. I have found the having autoResize set to true correctly sets the scrollbars when the browser window is shrunk down.
However if I then resize the browser window large again, the modal window stays at the shrunk size.
If I have autoResize turned off and include the following code
$(window).resize(function() {
$("#simplemodal-container").css("height","auto");
$(window).trigger('resize.simplemodal');
});
then the resize works correctly. However I need autoResize to be turned on in order to get the scrollbars to appear when the browser window is shrunk down.
Any help would be very much appreciated.
Thanks,

Ok, I have managed to answer my own question. If I define the modal window with the minHeight property set then the modal window will naturally expand back to the correct size when the browser window is re-expanded.
Doing this I don't even need the resize function mentioned above.

Fancybox can't scroll to overflow

I have a Fancybox dialog that loads AJAX content. The user can click a "+" to add a row inside. As the rows add up, the dialog becomes higher than the screen size. A scrollbar appears, but the dialog can't be scrolled down, it keeps going back up.
How do I fix this?

Sorry guys, my bad. For future reference, here's the fix.
Never try to dynamically update and reposition your Fancybox.
What I tried
$('#stuff').fancybox({
... stuff
onUpdate: function() {
$.fancybox.update();
$.fancybox.reposition();
}
});
Ultimately, on every update, the Fancybox should center itself and reposition itself.
However! In reality it attempts to do this every few milliseconds. That causes Chrome's inspector to freeze whenever the Fancybox is active and also causes the scrolling to fail (it keeps trying to update the size/position while you're trying to scroll it causing a fail).
The correct way
Update every time you expect your size to change manually.
When changing the dialog content (if it's an AJAX)
When showing inside-errors or adding new divs inside
etc