Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    darkening a whole page like Lightbox

    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. i found a forum with a guy who wants to do the same and heres the code...

    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What browser will you be using primarily? If you are using Firefox then you can create a usercontent stylesheet then just run the javascript.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What is the reason behind you wanting to do this? Sounds like you are trying to hide something.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    !!!

    i am making a browser in xcode using these directions

    http://www.macdevcenter.com/pub/a/ma...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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    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';
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok so put that between <script> tags and place it where the <style> tags use to be?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •