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...
Scott
· 3 years ago
position: fixed might likely take care of it, however it's quirky with IE
Darcy Taranto
· 3 years ago
ha ha aha ha
Ash
· 3 years ago
Use position:fixed; instead of position:absolute;
Rosstipher
· 3 years ago
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.
Rob
· 3 years ago
Rather than running some JS to hide it on load, why not just add display: none; to the CSS?
...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
anonymous
· 3 years ago
try litebox, or lightbox, or one of its variants that allow pages to be shown. much more effective.
Nick
· 3 years ago
This is why everyone should dump IE (all versions) and move to FF.
There's also thickbox... however it's a good simple tutorial. :)
Jeff
· 3 years ago
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
Bryan Brown
· 3 years ago
add this to your css to make IE fade: filter:alpha(opacity: 70);
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 1024x768 here and it doesn't stretch if I scroll down.
Just suggestions.
RyeBrye
· 3 years ago
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.
Pete
· 3 years ago
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".
Number_5
· 3 years ago
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 ?
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.
Pode
· 3 years ago
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.
Guido
· 3 years ago
some of these effects can hang an older system, at least when using IE
israelnyc
· 3 years ago
it's document.getElementById - not document.getElementsById (Elements with an "s")
It works nice in Opera, though the images load a bit slow (you could precatch them)
Chris Pietschmann
· 3 years ago
Sounds neat, but could you post a code snippet that works? Instead of just describing how to do it?
pulse
· 3 years ago
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.
whitenkhaki
· 3 years ago
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.
DavidK
· 3 years ago
Looks great when visiting with noscript turned on.... NOT!
Vib
· 3 years ago
@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.
estocastica
· 3 years ago
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!
Orism
· 3 years ago
Like every thing else, it won't work over select boxes in IE. Every thing else is nothing special.
Bramus!
· 3 years ago
What 32teeth said:
element { opacity: 0.7; /* Safari, Opera */ -moz-opacity:0.70: /* FireFox */ filter: alpha(opacity=70); /* IE */ }
pulse
· 3 years ago
and when he gets older, he'll still be a dillhole.
Jay
· 3 years ago
Ha, I was at work when I originally tried this example. Why we still use i.e. is so sad. Works fine FF....
TC
· 3 years ago
Wow people are dicks. Give this dude a break.
andris
· 3 years ago
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
aj
· 3 years ago
this is just fantastic i like it!!!!! contains all the moods keep it up!!!!
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!
laurence
· 3 years ago
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
charles
· 3 years ago
You can find many CSS and computer free online books here
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.
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...
That was well said. Always appreciate your indepth views. Keep up the great work!
John
Florian
· 2 years ago
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 :)
Sten36948
· 2 years ago
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.
Andrew Dutko
· 2 years ago
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.
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.
acaniaUncox
· 2 years ago
[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:
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
dotovatte
· 2 years ago
[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:
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
schemingturkey
· 2 years ago
hey everyone,
i just joined and wanted to say hi. :)
georgetui
· 2 years ago
Hello, Great forum! I found a lot of interesting information here. Does this forum helpful for you also?
Tom
· 2 years ago
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?
izabum
· 2 years ago
One hand, mr. On herlips. There was feeding chunks offlat bread keeley hazell wallpaper smeared.
Hello everybody, my name is Damion, and I'm glad to join your conmunity, and wish to assit as far as possible.
Brian
· 1 year ago
Works great in IE7. Thanks!
Westomkew
· 1 year ago
Hey,
great site friends! )
Fildermac
· 1 year ago
Somebody know some good game sites?
Jay
· 1 year ago
great share!!!
googlewe
· 1 year ago
to dine damage caught it my dad up across were about
Attirefrecini
· 1 year ago
Как известно, есть фундаментальный и технический анализ, можно играть на новостях, можно на глобальных тенденциях, но ни кто не застрахован от спекуляций и интервенций, проводимых крупными финансовыми учреждениями и даже странами... Какой бы торговой стратегии Вы не придерживались, Вам будет интересно познакомиться с результатами данной работы, сравнить отношение уровня прибыли и уровня просадки торговых счётов, посмотреть на стабильность заработка нашей торговой системы. Предоставляем открытый доступ к реальным счетам, которыми управляют наши Советники PDV-mini и PDV-expert. Сайт в профиле.
mcipcyf
· 1 year ago
You know about, threesome positions right. Her. I have to spend the house was hyper.
All Comments
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
background-color: rgb(0, 0, 0) repeat-x;
.....etc...
I think that should do it no?
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 1024x768 here and it doesn't stretch if I scroll down.
Just suggestions.
Just because YOU use it doesn't mean 90% of people use it.
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".
To the Author: Have you tried y-repeat on your background-repeat ?
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
...
#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.
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.
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!
Every thing else is nothing special.
element {
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70: /* FireFox */
filter: alpha(opacity=70); /* IE */
}
contains all the moods
keep it up!!!!
:))
Thanks!
welcom to my
http://monopolizer.us/
-moz-opacity:0.70: /* FireFox */
The colon at the end should be a semi colon:
-moz-opacity:0.70; /* FireFox */
Very nice 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
http://kickjava.com/books/style.htm
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.
I like!
cbmeeks
http://www.codershangout.com
.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.
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/inte...
Nice info, big thx.
That was well said. Always appreciate your indepth views. Keep up the great work!
John
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 :)
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; }
Somebody could come up and win it all from nowhere. But please enough of Florida already!
I want to all of you know, World is mine, and yoursite good
G'night
$(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);
}
});
hahah i love mi job what abou yuo
I can do CRUD but I can't quite get my artistic flare to light up
jeesh
http://www.codershangout.com
IE7 only accept this CSS style:
position:absolute;
Try it! All the best!
width: expression( ( document.documentElement.clientWidth)+ 'px' );
height: expression( ( document.documentElement.clientHeight)+ 'px');
but how should i implement it?????
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
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
i just joined and wanted to say hi. :)
Great forum!
I found a lot of interesting information here.
Does this forum helpful for you also?
25481
f
2549
[b][url=http://bestchristmasgift.info/archive/unique-christmas-gifts.html]>> UNIQUE CHRISTMAS GIFTS
Click through the links below!
[b][url=http://buyphentermineonline.in/archive/buy-phentermine.html]>> BUY PHENTERMINE
Click through the links below!
[b][url=http://buyphentermineonline.in/archive/buy-phentermine.html]>> BUY PHENTERMINE
Cheers,
Dennison
and wish to assit as far as possible.
great site friends! )
Какой бы торговой стратегии Вы не придерживались, Вам будет интересно познакомиться с результатами данной работы, сравнить отношение уровня прибыли и уровня просадки торговых счётов, посмотреть на стабильность заработка нашей торговой системы.
Предоставляем открытый доступ к реальным счетам, которыми управляют наши Советники PDV-mini и PDV-expert.
Сайт в профиле.
http://css-lessons.ucoz.com/css-layer-propertie...
i found it very useful for a little almost insignificant detail: "expanded" close button.
yeap... just for that i had to replace my thickbox implementation with this technique, very usefull...
you're not reinventing the wheel, this is totally new as other javascript modules show new pages, you can view content from the same page.
good work!
thinks.