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.
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
If I have an html page with a number of images displayed, and a user drag-selects several images (i.e. highlights them as selected) with a mouse, can I identify those images via JavaScript or otherwise?
In other words, the use-case is that I want to "tag" multiple images at once and allow a user to use a mouse to click anywhere on the screen, then hold the mouse button down while moving the mouse, creating a highlighted rectangle, thus selecting all items displayed on the page within that rectangle. The goal is then to identify only images that were selected, and present a pop-up to the user, allowing her to "tag" those highlighted images.
Sorry if this is confusing, I'm just not sure what the common terminology is to describe what I want.
i tried a lot of examples but nothing works as i want it to be.
It's for touch screen only devices (app) and i use jquery 1.8.3.
What i do is i upload a photo and it fetches the photo from the server and put it in a div.
In that div, i need to be able to move the photo around to whatever i want it to be.
When i click next it will cut the part out of the photo that i selected (the server can do this).
I tried canvas, but it doesn't work on touchscreen devices.
What i try to ask is:
Is there a way to move the background in a div, and what i see in the div (user point of view) is what the picture is going to be, get the cordinates and submit them to the server.
The server will cut a square out that picture (with that cordinates) and maybe even a rotate and saves it.
The server part is not an issue, it's the moving in div en getting cordinates.
Or does anyone have a better idea (i want the instagram like how to select a square out of a picture)
You could make the element in the background draggable. Once it's draggable, then the user can drag it around any certain way.
Finally, when the submit button is clicked, you can check to see what part of the picture is inside the box.
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
I have an html page where I set the focus on the first input element on load. I can see that the focus is set because I ask the background of the element to go orange and I can see the orange background. However, the cursor is not shown in the element.
Then when I click on the other input elements, I can see the focus move to them but still no cursor is shown. The cursor only appears when I use the tab key.
Please could someone explain to me why this happens and how I can make this cursor appear without having to use the tab key?
This is for IE8 only. (It's an intranet site)
Code as requested for how I'm setting focus:
$(document).ready(function(){
$('#rachel').focus();
});
EDIT
I didn't think to mention that the problem is happening on a popup window that looks to be implemented like a layer. Is it possible for layers to block the cursor?