Dim the lights script - jQuery
Submitted by Jack on Wed, 09/16/2009 - 22:29
Another useful for script for somebody!
This makes the most of flash's WMODE and the jQuery library to create a sexy "turning the lights off" effect.
When the "WMODE" of a flash object is set to "window" (or maybe "opaque") the flash object will sit above every other element on a page. Sometimes this is annoying... but sometimes we can use it to our advantage!
The demo for the script is here
Sorry for the weird video... its the only .flv i could find to test with!
I'm only going to attach my html file... you'll have to figure out your own flash player, embedding the movie as well as downloading the jQuery library... all on your own ;-)
Enjoy! (and let me know how you use it!)
update
There is a new version of this script on my new website
http://beacon9.ca/labs/scripts/jquery-dim-lights-script
It resolves a few browser inconsistencies and is generally much tidier.
New Version Released
version 1.2 is available now. just go to the demo and view the source.
Changes?
Can you please tell us the changelog or something like that.
What I noticed:
lightsOn no longer has all those css properties. Why?
Z-index was added?
Also no margins!? That's great!
changes
most of the changes are just CSS optimizations.
the buttons need to have position:absolute set to stick above the overlay... if you haven't set position relative around the parent div.... it can mess the layout up... So I placed them in a div that has position:relative set.
Check out this article (point 7) for more info - http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-...
I set z-index because safari users were having trouble getting the video to appear above the overlay... z-index seems to clear that up. The article mentioned above explains that property as well, if you are unfamiliar with it.
Got it to work...
I had a typo i think, anyways it works now, but i really suggest you update the version, there is some bugs.
When i moved the margin with jquery the lightsOn disappeared
Good news
Thats great! Thanks for the advice... I will try and release my new version tomorrow.
Some Problems...
This is very cool and all, but the "the turn the lights on" is all the way at the top and also, how do u make it cover 100%, the height:100%; didn't work
height 100%
The css style 'height:100%' only works when you assign the same style to its parent element.
In this case the body tag has height 100% as well... if you have other parent elements (spans or divs) around the then it will only grow to its parents height.
Hopefully that makes sense... if not then check out this link.
http://www.webmasterworld.com/forum83/200.htm
Wrong Place...
The LightsOn appears at the top of the page instead of where the margin tells it to go.
position:absolute
I think that might be because its being positioned absolutely. you can go ahead and remove that style... for this example. Let me know how you get on.
I'm going to post an updated version of the script in the next couple of days... with a few ammendments.
Doesnt work...
the only position that worked was inherit, but as we all know, that doesnt work in IE.
Im waiting on the new version. Thanks
Very smooth mate.
Very smooth mate.
There'll be some changes
did some browser testing as well as trying to integrate them into a live site yesterday... needless to say there'll be version 1.1 coming very soon!