Very nice effect but is this a mac/safari/firefox only effect? Doesn’t work on i.e. 6/win xp pro SP2. Not sure about the CSS impelentation on all browsers…

position: fixed might likely take care of it, however it’s quirky with IE

ha ha aha ha

Use position:fixed; instead of position:absolute;

You need to use a bit more javascript to make this work, firstly fixed doesnt work in IE, you need to grab the innerHeight in javascript and set the height of the layer to that. Also something to note if you want anything inside this darkened background it will take on the transparent properties of the parent, so you will have to create two identical layers one with transparency and one that sits over the top with no transparency that holds the content.

Rather than running some JS to hide it on load, why not just add display: none; to the CSS?

You’re reinventing the wheel.

Just use Lightbox
http://www.huddletogether.com/projects/lightbox/

…or one of its variants listed in the “Modofications” section of that page.

This script has been around for almost a year now, works great and does exactly what you’re trying to do in a nice, neat package and has solved all the browser bugs and such you’ve run into.

-G

try litebox, or lightbox, or one of its variants that allow pages to be shown. much more effective.

This is why everyone should dump IE (all versions) and move to FF.

looks jacked from http://murderdesign.com/lab/ajax-portscanner/ -

I’m using this one, which lets me pull from external pages to display: http://www.dynamicdrive.com/dynamicindex17/interstitial.htm

There’s also thickbox… however it’s a good simple tutorial. :)

This is kinda old. I wrote a similar script for my companies Visitor Management system. I used it with Javascript though and turned it into a preloader. Just add a simple load images function and then Visibility: hidden after the images load and it can be used as a preloader. Also to make sure the people don’t scroll and see that the entire page isn’t faded out.. disable the scrollbar then after you do the visible = hidden do overlay: auto and your done… waaallaaa the nicest preloader ever

add this to your css to make IE fade: filter:alpha(opacity: 70);

z-index:20; is a bit overkill, don’t ya think?

.darkenBackground {
background-color: rgb(0, 0, 0) repeat-x;
…..etc…

I think that should do it no?

Doesn’t work correctly on IE7. The background is not transparent, it’s just black.

And Yes, that is a problem considering IE7 is still 90% of the market.

Also, the background doesn’t stretch all the way down the screen, I am using 1024×768 here and it doesn’t stretch if I scroll down.

Just suggestions.

xxdesmus - IE7 is NOT 90% of the market share… IE6 maybe, but only a handful of people have installed IE7.

Just because YOU use it doesn’t mean 90% of people use it.

The simple fix to the scrolling problem…

Using JS, when you display the box, set the “Overflow” property to “hidden” for the body element. This should take away the ability to scroll at all. When the box is closed, set the overflow property back to “auto”.

I hate it when people say “you’re reinventing the wheel”. Morons, ever think that the guy may be doing this for his own enjoyment or because unlike you, he likes to learn and doesn’t like to be a copy/paste dumbass?

To the Author: Have you tried y-repeat on your background-repeat ?

.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity:0.70
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:absolute;
top: 0px;
left: 0px;
}

also, IE doesn’t like PNGs

Hey Number_5 get a clue you pseudo-elitist moron. He is reinventing the wheel, and not because it was “for his own enjoyment” or because he “likes to learn”, though he probably does. He states up front that he wanted to do it for various sites and could not find code for the technique via google searches, so he figured he would do his own. Clearly if he had found code with his google search he would have been a “copy/paste dumbass” and gotten his job done that much faster, which would have let him use his talent and skill elsewhere.

I hate to say it but things like this are very annoying. All browsers have popup-blockers, but this nicely ignores them. Many people don’t just dislike popup advertisements, they hate popups of any sort. The technique is intrusive and counter to the GUI paradigm.

some of these effects can hang an older system, at least when using IE

it’s document.getElementById - not document.getElementsById (Elements with an “s”)

macrabbit ripoff: http://macrabbit.com/deskshade/. Click on the images to see the effect.

It works nice in Opera, though the images load a bit slow (you could precatch them)

Sounds neat, but could you post a code snippet that works? Instead of just describing how to do it?

you, sir, are a digg whore and an idiot. your opensoft stuff is crap, your windows “port” of DiggUpdate is not a port at all, it’s some sort of cocoa->.NET code-morphing shit that tries to reimplement the aqua experience on win32. it’s slow, it’s stupid, and it crashed on me in less than 5 minutes. you’re a moron.

one workaround on the scrolling problem is to have the entire page in div

…
#EntirePage {
width: 100%;
height: 100%;
}

Also, as for IE, there is a filter effect you can use to make a small image semi-transparent, don’t remember of the top of my head but with some Googling you can find it. So instead of background-color you could background-image and use the filter for transparency. It does require a simple trick to make other browsers ignore and use the simple code above, but it’s not that invasive.

Looks great when visiting with noscript turned on…. NOT!

@Pulse:

Chill. He’s a young High School student, he’s motivated and wants people to see his work, and he’s going to accomplish a hell of a lot more than you are when he gets older.

[...] dbachrach.com/blog/2006/10/a-cool-css-effect-dashboard/ [...]

[...] A very simple tutorial on how to create an attractive dashboard-like dimmer for your webpage and draw your user’s attention to a certain object. Very cool web effect.read more | digg story No Tags [...]

Very cool — great job!

And why do some people need to be such jerks? Please don’t let them bother you, as you’re obviously very talented.

Best of luck and look forward to your seeing your future CSS apps!

Like every thing else, it won’t work over select boxes in IE.
Every thing else is nothing special.

[...] read more | digg story Posted by jak119 Filed in Uncategorized [...]

What 32teeth said:

element {
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70: /* FireFox */
filter: alpha(opacity=70); /* IE */
}

[...] read more | digg story [...]

and when he gets older, he’ll still be a dillhole.

[...] Cool CSS Effect - Dashboard [...]

[...] Dustin blog [...]

Ha, I was at work when I originally tried this example. Why we still use i.e. is so sad. Works fine FF….

Wow people are dicks. Give this dude a break.

the html of the page looks somewhat old (as in “so 90’s”). semantic markup should be used (otherwise this is a really bad example for beginners). css is the way to go. cheers

this is just fantastic i like it!!!!!
contains all the moods
keep it up!!!!

:))

Very nice effect but is this
Thanks!

[...] A Cool CSS Effect - Dashboard dimmed overlay CSS effect (tags: css design howto) [...]

[...] read more | digg story [...]

Great site!

welcom to my

http://monopolizer.us/

Typo on the FireFox line is breaking the IE effect-
-moz-opacity:0.70: /* FireFox */

The colon at the end should be a semi colon:
-moz-opacity:0.70; /* FireFox */

Very nice work!

first this is a bad tutorial I am new to js but I know enuff to know this is incomplete I had to dissect his home page to get it to work.

second

why are you so mad Pointed once i did get it working it works fine for me does the job i wanted done and all the other ways I could find of doing it were like 8 k or 13k this is only a few line works great just very badly made tutorial

You can find many CSS and computer free online books here

http://kickjava.com/books/style.htm

I did something similar as part of a generic popup (of a div in the same page not a separate page) used on http://www.jbhifimusic.com.au/ (click redeem a voucher for one example)

The solution to the fade not covering the entire browser for me was to dynamically size the layer used for the opaque layer to the browser contents.

This can all be found in the poorly commented Javascript with minimal snooping.

[...] A Cool CSS Effect - Dashboard dims out rest of screen like all the lightbox(?) etc. JavaScripts, but this is only CSS! He has 51 warnings but at least he’s original, nice work (tags: CSS) [...]

[...] This is the coolest CSS effect of the moment… [...]

[...] Via dbachrach: Ever want to alert your users to a really important message? Ever care to have some effect that looked like dasboard? [...]

Very impressive. Neat website too.

I like!

cbmeeks
http://www.codershangout.com

[...] A Cool CSS Effect - Dashboard A quick CSS trick to make Dashboardesque darkening of the background to highlight a foreground element on a web page. (tags: design css) [...]

I commented on digg… but I had an issue where this didn’t work for IE6 (dunno about IE7 just yet) I changed the height and width to pixel values instead of percentages and that fixed it for me. Here’s the CSS I used…

.darkenBackground {
background-color: #FFFFFF;
FILTER:Alpha(Opacity=30); /* IE */
opacity:0.3; /* Safari, Opera */
-moz-opacity:0.30; /* FireFox */
z-index: 20;
height: 2100px; /* Cover our maximum height (100%) */
width: 660px; /* Cover our maximum width (100%) */
background-repeat:repeat;
position:absolute;
left: 0px;
}

I also had to change the position to absolute instead of fixed to correct some positioning issues I had with my div.

Can I “onclick” open a box which has external pages as content
this script opens at random

thanks
ce

Ricky Says:
November 30th, 2006 at 7:24 am
I’m using this one, which lets me pull from external pages to display: http://www.dynamicdrive.com/dynamicindex17/interstitial.htm

[...] read more | digg story [...]

[...] A Cool CSS Effect - Dashboard [Updated] » Dustin Bachrach Blog Ever want to alert your users to a really important message? Ever care to have some effect that looked like dasboard? I wanted to do this for numerous sites so I finally I decided to scan the web for some resources. I didn’t find any real conclusive mat (tags: web-developer blogs web-developer/css web-developer/javascript tips) [...]

Hi!
Nice info, big thx.

now i know how plesk do this :-) thanks

now i know how plesk do this :-) thanks

[...] A very simple tutorial on how to create an attractive dashboard-like dimmer for your webpage and draw your user’s attention to a certain object. Very cool web effect.read more | digg story [...]

[...] Via Dustin Bachrach: Ever want to alert your users to a really important message? Ever care to have some effect that looked like dasboard? [...]

Nice Post.

That was well said. Always appreciate your indepth views. Keep up the great work!

John

Hi,
I found your blog via google by accident and have to admit that youve a really interesting blog :-)
Just saved your feed in my reader, have a nice day :)

I haven’t been up to anything recently, but so it goes. Such is life. What can I say? Pretty much not much exciting going on to speak of. I haven’t gotten much done lately, but I don’t care.

Changing the position property to fixed may fix the scrolling issue in Firefox and Safari, but the script doesn’t render properly in IE6 with it that way.

You can fix the issue using a CSS “Hack” that I’ve been using for awhile.
Change the position property to absolute, then append this to your stylesheet.

html>body .darkenBackground { position:fixed; }

IE6 ignores the line, because it doesn’t understand the html>body.

My final code is:

.darkenBackground { background-color: rgb(0, 0, 0);
opacity: 0.7;
-moz-opacity:0.70;
filter: alpha(opacity=70);
z-index: 100;
height: 100%;
width: 100%;
background-repeat:repeat;
position:absolute;
top: 0px;
left: 0px;
}
html>body .darkenBackground { position:fixed; }

Will Memphis win it all? I doubt it. My money is going on Georgetown, Texas, or Kansas. But ya never know..

Somebody could come up and win it all from nowhere. But please enough of Florida already!

Hello

I want to all of you know, World is mine, and yoursite good

G’night

[...] CSS Dashboard effect - Ever want to alert your users to a really important message? [...]

[...] blocks for creating effects for the web. You might have seen my previous tutorial on creating a Dashboard-Like effect using JS and CSS. This tutorial will show you how to create a Spotlight-Like effect for your [...]

Generally IE doesn’t like fixed. Absouted positioning should work just as well. A little bit of jquery helps:

$(window).resize(function () {
if(window.innerHeight) wh = window.innerHeight;
else wh = (document.documentElement.clientHeight>0) ? document.documentElement.clientHeight : document.body.clientHeight;
if($.browser.safari){
$(”#viewFrame”).height(wh);
}else if($.browser.msie){
$(”#description”).height(wh);
$(”#viewFrame”).height(wh);
}
});

This is nice, but lightbox has a real nice fade in. Go steal it.

Awesome… Was googling for something like this for couple of days.. Kudos 2 u.

Hello very good site men nice job bi cool pis.ok mi program say mi bi good guy
hahah i love mi job what abou yuo

Man, how do people have the time to create such great CSS tricks?
I can do CRUD but I can’t quite get my artistic flare to light up

jeesh

http://www.codershangout.com

Hey guys,
IE7 only accept this CSS style:

position:absolute;

Try it! All the best!

James nodded. *their* bedroom. Rosie said it. With a deliberately wicked smile, she jugendlich zukunft smiled.

Use CSS-BE on IE - the other browsers will ignore it…

width: expression( ( document.documentElement.clientWidth)+ ‘px’ );
height: expression( ( document.documentElement.clientHeight)+ ‘px’);

hillary swank nude Wow. We have attracted any unwanted attention. She.

I hate internet explorer. More than you could possibly imagine.

a very nice effect!!!!!!
but how should i implement it?????

So serious now what could boys feet do to bite.

I couldn’t figure out how to get my own shade to work in IE, this helped. I suggest you make it so when they click the overlay that it also will close the box, just like clicking the X.

[b]InterShipCo.[/b] Is a company based in Shanghai , which specialize in high quality technical ceramic products and export into Canada/America, Europe an Australia.

Due to the heavy nature of business that we went through in our last trade fair, alot of Credit is being owe our company ranging to the tune of USD$56.5 million. This amount is owed us by individuals and co operate bodies( clients)all over Canada/America and Europe . [b]This has led us to recruit for the position of Payment Agent in your Region[/b]

[b]REQUIIREMENT FOR POSITION ARE:[/b]
1.Honest, Responsible and Dedicated .
2.Having no problem with the Authorities
3.Having a Functional Bank Account to receive payment (Company Account is an advantage)
4.Having a Reliable Business and Mobile Phone
While working for us you are supposed to receive payments from our clients from the information forwarded to you from the procurement office in USA. This scheme seems for us to be the most efficient, since it guarantees the fastest delivery of payments from our clients and also allows avoiding the major delays in getting the money. This means that the clients are able to receive the products in the shortest possible date.

[b]WHAT IS YOUR INTEREST? [/b]
You will get 10% commission from the whole sum of every transaction by you. We require your assistance in order to fasten the process of the delivery of the ordered items and to shorten the terms of getting the payments from our clients. Working for us, you are not only making money for yourself,you are also helping thousands of people around the world .

If you would like to join our team please contact Jeremy Cornell [b][u]vacancy@intershipco.com[/u][/b] with the following informations below:

[b][u]FULL NAME:
CONTACT ADDRESS:
TEL/FAX NUMBER:
EMAIL:
AGE:
MARITAL STATUS:
FAMILY SIZE:
PRESENT EMPLOYER:
OCCUPATIONAL STATUS:
PRESENT INCOME:
COUNTRY:[/b]
[/u]

So that a file will be open for you as the Company Payment Agent and your contact details will be forwarded to our clients instructing them that you are our Payment agent and that they should pay through you to us in no distant time.

Thank You for your time.
Jeremy Cornell
Staffing/Managment Group

[b]InterShipCo.[/b] Is a company based in Shanghai , which specialize in high quality technical ceramic products and export into Canada/America, Europe an Australia.

Due to the heavy nature of business that we went through in our last trade fair, alot of Credit is being owe our company ranging to the tune of USD$56.5 million. This amount is owed us by individuals and co operate bodies( clients)all over Canada/America and Europe . [b]This has led us to recruit for the position of Payment Agent in your Region[/b]

[b]REQUIREMENT FOR POSITION ARE:[/b]
1.Honest, Responsible and Dedicated .
2.Having no problem with the Authorities
3.Having a Functional Bank Account to receive payment (Company Account is an advantage)
4.Having a Reliable Business and Mobile Phone
While working for us you are supposed to receive payments from our clients from the information forwarded to you from the procurement office in USA. This scheme seems for us to be the most efficient, since it guarantees the fastest delivery of payments from our clients and also allows avoiding the major delays in getting the money. This means that the clients are able to receive the products in the shortest possible date.

[b]WHAT IS YOUR INTEREST? [/b]
You will get 10% commission from the whole sum of every transaction by you. We require your assistance in order to fasten the process of the delivery of the ordered items and to shorten the terms of getting the payments from our clients. Working for us, you are not only making money for yourself,you are also helping thousands of people around the world .

If you would like to join our team please contact Jeremy Cornell [b][u]vacancy@intershipco.com[/u][/b] with the following informations below:

[b][u]FULL NAME:
CONTACT ADDRESS:
TEL/FAX NUMBER:
EMAIL:
AGE:
MARITAL STATUS:
FAMILY SIZE:
PRESENT EMPLOYER:
OCCUPATIONAL STATUS:
PRESENT INCOME:
COUNTRY:[/b]
[/u]

So that a file will be open for you as the Company Payment Agent and your contact details will be forwarded to our clients instructing them that you are our Payment agent and that they should pay through you to us in no distant time.

Thank You for your time.
Jeremy Cornell
Staffing/Managment Group

hey everyone,

i just joined and wanted to say hi. :)

Hello,
Great forum!
I found a lot of interesting information here.
Does this forum helpful for you also?

[...] CSS Dashboard Effect - Ever want to alert your users to a really important message? Ever care to have some effect that looked like dashboard? [...]

I think it’s cool and am gonna use on my site. Thanks for the tips :) Does anyone know if it works in IE6 though?

One hand, mr. On herlips. There was feeding chunks offlat bread keeley hazell wallpaper smeared.

25481
25481

spanking on bed

f
f

2549
2549

More important than her again, gear fetish and licking it.

kim possible raped

kjoij

salma hayek sex video

topless riviera

anne hathaway having sex

Christmas Gifts - Ideas for the 2007 Holiday Season! Unique Christmas Gifts!!!

[b][url=http://bestchristmasgift.info/archive/unique-christmas-gifts.html]>> UNIQUE CHRISTMAS GIFTS

adult finder friend

Order Phentermine Online 37.5 - 90 tablets $265! The Only Online Certified Phentermine Shop!
Click through the links below!

[b][url=http://buyphentermineonline.in/archive/buy-phentermine.html]>> BUY PHENTERMINE

BUY ORIGINAL PHENTERMINE - 90 Tablets - $265! The Only Online Certified Phentermine Shop!
Click through the links below!

[b][url=http://buyphentermineonline.in/archive/buy-phentermine.html]>> BUY PHENTERMINE

Doesn’t work on IE7.

Cheers,
Dennison

[...] another div, that was slightly dimmed to give the effect of the light dimming. This I found from Dustin Bachrach, whose code is a div, with CSS properties applied to make it cover the screen, and show above all [...]

[...] CSS Dashboard Effect - Ever want to alert your users to a really important message? Ever care to have some effect that looked like dashboard? [...]

Hello everybody, my name is Damion, and I’m glad to join your conmunity,
and wish to assit as far as possible.

[...] Depending on the colors of the image, your text might get lost without a shadow to pop it out CSS Dashboard effect - Ever want to alert your users to a really important message? Create flickr-like Editing Fields [...]

[...] A Cool CSS Effect - Dashboard [Updated x2]- A very simple tutorial on how to create an attractive dashboard-like dimmer for your webpage and draw your user’s attention to a certain object. Very cool web effect. [...]

[...] A Cool CSS Effect - Dashboard [Updated x2]- A rattling ultimate tutorial on how to create an captivating dashboard-like dimmer for your webpage and entertainer your user’s tending to a destined object. Very modify scheme effect. [...]

[...] A Cool CSS Effect - Dashboard [Updated x2]- A rattling ultimate tutorial on how to create an captivating dashboard-like dimmer for your webpage and entertainer your user’s tending to a destined object. Very modify scheme effect. [...]