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.
Related
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
How to make element change behavior depending on screen position? For example, imagine an input/select that opens an option box or a button that shows a dialog box, as in the image below, but notice that when the same element is at the bottom of the page, it opens the boxes to the side that has space , as a native input/select does.
I noticed this bug in even famous libraries with millions of weekly downloads, that if the element is at the bottom of the page, two unwanted situations happen: Either the element doesn't appear (it stays off the screen), or it expands the area, increasing the screen and distorting the layout.
Anyway, boxes should always open in reaction to the main element, like a "position: relative + position: absolute".
The preferred solution should be just HTML + CSS (as "pure" as possible), but if that's not possible then you can use javascript, too. How can I do this?
How can I do this?
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
I want to open a window popup on second monitor automatically. I try to open it with javascript but the popup recline to my first screen's right top. When I use mouse it can fit on second screen but I dont want to use mouse, I want to do it automatically
my javascript code:
window.open("Pop.aspx", "Pop.aspx", "width=10,height=10,screenX=1800,screenY=0");
I change screenX property many times but it didn't work.
Any Idea?
So I'm working on my first bookmarklet and had a few questions.
The goal of the bookmarklet is to overlay a video player on any website to essentially dim the lights everywhere except the actual player.
The user flow would go something like this:
user clicks the bookmarklet and they are able to hover over certain elements of the page where they highlight (think Firebug inspect)
user hovers over the correct div (where the video is) and clicks it
that area that they click remains "see-through" while the rest of the visible browser page goes black (or say 90% opaque.)
clicking the bookmarklet again would clear the selection and allow the user to start over.
Another idea would be to allow the user to "drag / draw" a rectangle where the video would be and then step 3 would occur after making a selection on the page.
I'm just looking for any ideas / snippets / anything else that might be out there to get me going in the right direction.
Try putting an opaque/near-opaque black div over the entire screen, then setting the z-index of the video to something higher than the black div.
You can use something like what's at this page to determine what element the mouse is over and highlight it.