...

View Full Version : darkening a whole page like Lightbox



oliver
12-08-2006, 04:48 AM
hi guys i am a beginner so please go easy on me.

im really need help getting javascript to darken the whole page. kinda like these guys do it (http://www.huddletogether.com/projects/lightbox2/). i found a forum with a guy who wants to do the same and heres the code...


var str= "#myStyle{position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; filter:alpha(opacity=60); opacity: 0.6;}"
var pa= document.getElementsByTagName('head')[0] ;
var el= document.createElement('style');
el.type= 'text/css';
el.media= 'screen';
if(el.styleSheet) el.styleSheet.cssText= str;// IE method
else el.appendChild(document.createTextNode(str));// others
pa.appendChild(el);
can anyone check to see if this is right? it doesn't work for me.

_Aerospace_Eng_
12-08-2006, 05:47 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#FFF;
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.85em;
height:100%;
}
#myStyle {
position:absolute;
top: 0;
left: 0;
z-index:1;
width:100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=60);
opacity: 0.6;
display:none;
}
#myStyle a.close {
float:right;
position:relative;
filter:alpha(opacity=100);
opacity:1.0;
margin-right:3px;
display:inline;
}
</style>

</head>
<body>
<div id="myStyle"><a href="#" class="close" onclick="document.getElementById('myStyle').style.display = 'none';return false">Close Me</a></div>
<a href="#" onclick="document.getElementById('myStyle').style.display = 'block';return false">Darken Page</a>
</body>
</html>

oliver
12-08-2006, 03:22 PM
wow NICE! this will definitely help, but i was hoping i could do it without dealing with <style> tags because i want to be able to make a page dark using pure javascript like what i showed in 1st post.

the reason i want to do this is b/c then i can make ANY webpage dark that i visit, just by evaluaating some javascript.

_Aerospace_Eng_
12-08-2006, 07:16 PM
What browser will you be using primarily? If you are using Firefox then you can create a usercontent stylesheet then just run the javascript.

oliver
12-08-2006, 07:37 PM
nah im on a mac....i would like to do it with safari and then ie too. cant you do it like my code does it? except in a way that works lol.

_Aerospace_Eng_
12-08-2006, 07:56 PM
What is the reason behind you wanting to do this? Sounds like you are trying to hide something.

oliver
12-08-2006, 08:01 PM
!!!

i am making a browser in xcode using these directions

http://www.macdevcenter.com/pub/a/mac/2004/01/23/webkit.html

and there is a method in webkit called evaluatejavascriptfromstring or something like that which executes javascript on whatever page your on.

so i wanna be able to load a page and darken it (i will try other stuff later). to do that, i need to have it all pure javascript.

and webkit is safari so its gotta be safari.

_Aerospace_Eng_
12-08-2006, 08:10 PM
I don't think IE for Mac supports the filters so this probably won't work there. If Safari supports opacity then this should work

var createDiv = document.createElement('div');
createDiv.setAttribute('id','myStyle');
var createLink = document.createElement('a');
createLink.setAttribute('href','#');
createLink.onclick = function(){ document.getElementById('myStyle').style.display = 'none';return false };
createLink.className = 'close';
var linkText = document.createTextNode('Close Me');
createLink.appendChild(linkText);
createDiv.appendChild(createLink);
var createStyle = document.createElement('style');
createStyle.setAttribute('type','text/css');
var theheight = document['body'].scrollHeight + 'px';
var createProps = document.createTextNode('html, body {'+
'margin:0;'+
'padding:0;'+
'background:#FFF;'+
'color:#000;'+
'font-family:Verdana, Arial, Helvetica, sans-serif;'+
'font-size:0.85em;'+
'height:100%;'+
'}'+
'#myStyle {'+
'position:absolute;'+
'top: 0;'+
'left: 0;'+
'z-index:1;'+
'width:100%;'+
'background-color: #000;'+
'filter:alpha(opacity=60);'+
'opacity: 0.6;'+
'-moz-opacity: 0.6;'+
'-khtml-opacity: 0.6;'+
'text-align:right'+
'}'+
'#myStyle a.close {'+
'margin-right:3px;'+
'color:#FFF;'+
'}');
createStyle.appendChild(createProps);
document.getElementsByTagName('head')[0].appendChild(createStyle);
document.getElementsByTagName('body')[0].appendChild(createDiv);
document.getElementById('myStyle').style.height = document['body'].scrollHeight +'px';
}

oliver
12-08-2006, 09:40 PM
ok so put that between <script> tags and place it where the <style> tags use to be?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum