1

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:

  1. user clicks the bookmarklet and they are able to hover over certain elements of the page where they highlight (think Firebug inspect)
  2. user hovers over the correct div (where the video is) and clicks it
  3. that area that they click remains "see-through" while the rest of the visible browser page goes black (or say 90% opaque.)
  4. 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.

Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
stursby
  • 871
  • 2
  • 12
  • 23
  • 2
    isn't that... a little sophisticated for a bookmarklet? idk what the exact length constraints are on bookmark urls, but this could very well push it to its limit. :P – Joseph Marikle Sep 06 '11 at 21:51
  • 1
    oh boy: http://support.microsoft.com/kb/q208427/ and http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url – Joseph Marikle Sep 06 '11 at 21:52
  • With minification, that could work. – Eric Sep 06 '11 at 21:56
  • @Joseph: Simple sidestep: Create ` – Nightfirecat Sep 06 '11 at 22:18
  • yea, I was just about to say, you can have the bookmarklet load external scripts, therefor making the character limit obsolete. I was just looking at this basic tutorial on how to set that up http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/ – stursby Sep 06 '11 at 22:24

1 Answers1

1

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.

someone
  • 1,468
  • 8
  • 9
  • That's close to what I want. Except the user wouldn't need to see the page structure elements. Ideally it would highlight different areas, then they would click the "video" area and it would do what you said above... just not sure how to actually do that – stursby Sep 06 '11 at 22:25
  • You would have to modify the code from the page I linked to so that it highlighted the elements, rather than just displaying the name. You may want to try something simpler before attempting this ([here](https://developer.mozilla.org/en/javascript)'s a good javascript tutorial/reference). – someone Sep 06 '11 at 22:37
  • A couple of things to keep in mind when doing this: Z-index can be arbitrarily high, and some sites already use stupidly high z-index values (like 1k or 1M). Also, it's not sufficient to lift only the clicked element, you also have to check that its parents don't have z-index set. Many flash elements don't have wmode set, so they will layer themselves in front of everything else despite your best efforts, unless you set the wmode param in your script. – sethobrien Sep 07 '11 at 03:35