Tutorial: How to produce the grey out effect using javascript and css

When i surf the net and saw all these fantastic feature where the screen went black-out when a user click certain link or button always makes me wonder how does it actually work? But i always do not have the time and knowledge to understand these things since my css knowledge has always been at the basic stage where understanding of it is just too little for me due to the working time that always occupate me. Recently, i have quit my job and went back to school which leaves me with a lot of space time. This has given me the chance to pump up my knowledge on css which i'm always weak in since the starting of my web programming. i would like to show my appreciation to the author of Hunlock who produce a great tutorial on this topic.

18 thoughts on “Tutorial: How to produce the grey out effect using javascript and css

  1. Instead of adding style parameters to the created object directly, why not create the new div (or just code it into the page in the first place), give it an "id" attribute, and then describe its properties in a real CSS file? Then all the Javascript has to do is find the element and toggle it from visible to invisible (and back again), possibly by just adding or removing the class name "visible".

  2. Hi Mike,

    I agree with you on this one. It will make the entire code smaller and easier to maintain. Maybe for his tutorial purposes, throwing all the code and styling in one place makes the explanation of the overall gray out function more clearly? Nonetheless, i still think this is a good tutorial for beginners to understand how the flow works. But for improvement purposes what you have bring up is exactly what this particular code should have done.

    Cheers,
    Clay

  3. this code doesnt work, it only works if scrollbars are working,
    other than that it always takes the height of all content in the
    page and if the contents arent scrolling, it wont grey out the
    whole page

  4. oh..this is most probably caused by the display rule in CSS, just
    change it to fixed like this, instead of writing
    tnode.style.position='absolute'; change it to
    tnode.style.position='fixed';

  5. you just have to set the image z-index at a higher value than the greyed screen. This will make it visible above the greyed screen. And in order to make it center aligned, you can set the margin to 0 auto for horizontal alignment. If you are using the code above, you can try the following,

    var verticleHeight = screen.height/2;
    var myImage = document.getElementById("imageID");
    myImage.position ="absolute";
    myImage .zIndex = zIndex+1;
    myImage.margin = verticleHeight +"px auto 0px";

    Please take note that if your position are not absolute, zindex cannot be used. On the other hand, if you are using position fixed to fix the scrolling problem, the above code will have the same issue initially as the scrolling problem will reoccurs on the loading image. (the code has not been tested but it should work)

  6. Although it's not using CSS as it should, I like this script for its portability. I don't want to have to include a CSS file every time I use a grayed background.

  7. Hi!

    I'm trying to use this effect, but in IE7 it greys out even the thing I want to show, and makes it inclickable. For me the effect has a z-index of 50 and the div I want to show is 60, but I also tried with 2 and 1. In Firefox it works well, it's clickable (which is required to disable the effect) and it's not grayed out. I also tried to show the div before I turned on the effect. Any solutions?

  8. Hey Sanyynn,

    I have updated the method above so that a box can be appeared above the grey out box as many seems to be unsure the reason why the above method doesn't work well when there is a box on top of it. Since this grey out div box is within the body tag, anything that is hardcoded within the html will not bring the additional box above the grey out effect. This is because the grey out div box is at a higher level than the box we usually placed into the html by hard (since the grey out box is a DHTML approach of inserting a div into the body). By using the same approach to insert the div box will eliminate this problem(IE is weird). There are other ways of solving this problem too but I did this last minute at 4:12AM over here and tested it over firefox and IE 7, hope this solve your problem. Any issue you can always bring it up on here and i shall try my best to help.

    Cheers
    Clay

  9. Hi!

    Thank you for your fast reply, I'm so sad that I can't bring you good news (mainly because I'm stupid).

    I'm using jquery on my website, and I'm quite unsure how to use your solution on it.

    Here's my code:
    $("#profkep1").click(function(){grayOut(true);$("#profkepn1").show("slow");});
    $("#profkepn1").click(function(){grayOut(false);$("#profkepn1").hide("slow");});

    profkep1 is a thumbnail of an image
    profkepn1 is the same image in larger size.

    Sorry for wasting your time.

  10. well..this is kind of off topic but i will still help! please
    send me a email regarding your question. From the look of your
    declaration, if you use the exact same code from this post, it
    will gray out your screen and a box will appear which you click
    will return you to your original display. Your declaration code
    shown on your comment will not help you achieve this. Thus, the
    correct approach way is to modify the following stuff on the
    code,

    document.getElementById("box").style.width = "300px";
    document.getElementById("box").style.height = "100px";

    change the above to profkepn1 image size.

    msgnode.style.top= screen.height/3+'px';
    msgnode.style.left=screen.width/3+'px';

    adjust the position by doing some math regarding your width and
    height of your image verses your large image size.

    document.getElementById("box").style.background="url('path
    of your image')";

    the above background declaring is a CSS style shortcut term to
    tell the browser regarding the background of the box. That will
    help a bit, you do not have to use jQuery hide and show function
    since the method i post above already attached a event handler on
    the box (which is the large image on your case) which will hide
    and show respectively.

  11. This is very good information. I'm using your example and it works, but the first time I invoke the script on the page it hangs for about 5 seconds. After that it is immediate. Any ideas? I've exhausted all possibilities I could think.
    Thanks!

  12. hmm..that's pretty odd. Is there any other script or code in your page that may be causing the conflict? Try initialize the demo in this article and see whether it hang for 5 sec. The code above doesn't do anything other than basic click and CSS declaration. It shouldn't have caused the 5 sec delay.

  13. Clay,
    This was just great of you to post. It works in Firefox and IE7. I am thrilled!!

    But, I have a situation and a question. I have a very long webpage. When I activate your code from the bottom of my webpage, the box is placed off the current visible screen and at the top of the webpage that is not visable, unless one scrolls back up.

    How can I center the box vertically in the visable screen area for the user to immeidately see?

    Thank you for your help,
    Maggie

  14. Hi Maggie,

    I have updated the script for you. Now, the box will align center wherever you go! I have also updated this article 🙂

    Clay

  15. Thank you Clay for your recent update for vertically centering the box.

    I have another question and it is outside of the original intent of your article. However, I thought you might know the answer, so I must ask.

    My webpage uses your function, grayOut(), 3 times as 3 different called functions: function grayOut1(); function grayOut2(); function grayOut3()

    Each function is coded as you have provided, all the same, except for the name of the function and the box specifics of width and height and offsets. Makes the box of each function displayed a different size.

    Situation is that the box width and height displayed when the first function is called, is the same whenever one of the other functions is called. The box width and height does not change to the new size of the newly called function. The box always remains the same.

    Should I somehow clear this box width and height value at the end of each function? If yes, how can I do that?

    Thank you in advance,
    Maggie

  16. Maggie, i will advice you to only use this function one time. Just modify the parameter to take in the width and height for the box then divide them by half for the margin. Something like this,

    function grayOut(vis, options, extra, w, h) {
    ...
    msgnode.style.width = w;
    msgnode.style.height = h;
    msgnode.style.marginLeft= "-"+w;
    msgnode.style.marginTop= "-"+h;
    ...
    }

    this will help overwrite the method with each different call and its more efficient than duplicating codes.

    Cheers
    Clay

Comments are closed.