SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div center of screen.

    Hello,

    I have tried few ways, but it didn't work out too well. I'd like to know the best and simple way to keep a div center of screen(both horizontal and vertical), even when scrolling the page?

    Help greatly appreciated.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cssExp, can you possibly post some sample code?


  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops.. double post


  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    cssExp, can you possibly post some sample code?
    if i knew how to do it or have the code, would i be asking help here? :P

    i can't seem to get anything close to what i want(from google searches). I'd say best example of what i want is the light green+white box(one with the 'close') on sitepoint marketplace's "My Shortlist".

    It stays center even when you scroll, and yes i also want to know how to center it(horizontal/vertical).

    Thanks.

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'll have a play when I get home.


  6. #6
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    i'll have a play when I get home.
    great, looking forward to it

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've created this but it's a little laggy.

    When you first open the page, it resizes the div, and then sets the top position. When you resize the page, it does the same again. And when you scroll it just sets the top position.

    The top position is the laggy bit, it flickers sometimes, so not sure how to deal with that unfortunately.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    
    <style type="text/css">
        #text {
            width: 100&#37;;
            height: 1234px;
        }
        #hover {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ccc;
        }
    </style>
    <script type="text/javascript">
    
        function SetHover(resize) {
            var hover = document.getElementById('hover');
            
            if(resize) {
                var wHeight = 0;
                var wWidth = 0;  
                if( typeof( window.innerWidth ) == 'number' ) {
                    wWidth = window.innerWidth;
                    wHeight = window.innerHeight;
                } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                    wWidth = document.documentElement.clientWidth;
                    wHeight = document.documentElement.clientHeight;
                } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                    wWidth = document.body.clientWidth;
                    wHeight = document.body.clientHeight;
                }
    
                hover.style.width = wWidth;
                hover.style.height = wHeight;
            }
    //        alert(document.body.scrollTop);
            hover.style.top = document.body.scrollTop;
        }
    
        window.onscroll = function() {
            SetHover(false);
        };
        window.onresize = function() {
            SetHover(true);
        };
        window.onload = function() {
            SetHover(true);
        };
    
    </script>
    
    </HEAD>
    
    <BODY>
    
        <div id="hover">
            <div id="hover_inner">Test</div>
        </div>
        <div id="text">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce risus sem, luctus id, semper eu, posuere at, lacus. Maecenas nibh. Nulla suscipit, pede sit amet ullamcorper egestas, diam augue vulputate libero, sed porta quam lectus in eros. Vivamus sem ipsum, feugiat a, gravida nec, suscipit vitae, nisi. Etiam lectus. Cras laoreet adipiscing enim. Etiam convallis accumsan erat. Maecenas commodo auctor urna. In tempus dignissim pede. Vivamus turpis arcu, ullamcorper ac, lobortis et, gravida vitae, augue. Aenean sodales mauris et diam. Donec vulputate pede id dui.
            </p>
            <p>
                Donec ultricies hendrerit ligula. Ut nec felis. Aliquam ut erat sit amet dolor aliquam pretium. Maecenas venenatis rutrum sapien. Praesent at sem non lacus eleifend varius. Donec ut erat eget urna auctor elementum. Donec pulvinar ipsum eget tellus. Donec auctor tristique neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec id metus. Sed volutpat eros ut ante. Curabitur ipsum ligula, tempus ac, sollicitudin ut, dictum in, arcu. Morbi posuere sapien quis purus. Etiam vel eros sed justo commodo luctus. Cras eu neque eu velit elementum imperdiet. In tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tristique pellentesque felis. Aenean in dui. Nam blandit sodales nisl.
            </p>
            <p>
                Pellentesque pharetra. Fusce lectus ligula, suscipit vel, posuere vitae, commodo mattis, dui. Donec dolor mi, gravida quis, accumsan eu, sagittis blandit, magna. Suspendisse fermentum congue neque. Nam nulla dolor, semper et, sodales mollis, imperdiet at, massa. Curabitur blandit, tellus eget condimentum venenatis, sem justo commodo leo, ac iaculis elit libero nec metus. Ut in leo vitae urna euismod aliquet. Curabitur et elit vitae ligula ultricies gravida. Vestibulum commodo placerat orci. Nulla non elit. In sed mauris. Vivamus pellentesque sollicitudin erat. Morbi elementum tincidunt mi. In magna lacus, pharetra at, pretium id, consequat at, magna. Pellentesque turpis eros, ornare vel, rutrum id, dapibus sed, massa. Nulla dapibus luctus ligula. Vivamus leo tortor, mattis ut, ullamcorper eget, luctus in, purus. Pellentesque non ante. Nam turpis felis, malesuada et, tincidunt nec, vehicula at, justo.
            </p>
            <p>
                Maecenas pede odio, accumsan non, fringilla at, consectetuer in, massa. Morbi metus. Sed at massa. Nulla dolor est, bibendum sit amet, cursus id, vehicula faucibus, ligula. Nulla quis nibh. Sed ut libero ut sem porttitor mollis. Sed quis tellus. Praesent sodales risus a pede. Nunc sagittis, purus sit amet hendrerit semper, massa nisi tristique diam, ac vulputate ligula magna et magna. Sed malesuada urna. Praesent id sapien ac nulla consequat tristique.
            </p>
            <p>
                Praesent in tortor. In quis arcu. Nullam ac dui id mauris nonummy nonummy. Nulla porttitor nisl. Aenean et diam eu justo pulvinar egestas. Suspendisse adipiscing. Pellentesque faucibus sem quis eros. Sed est urna, ultrices ac, feugiat eu, varius vel, turpis. Sed lobortis tincidunt sapien. Donec nonummy imperdiet turpis. Praesent est. Aenean porta tellus. Vestibulum eleifend. Ut ac magna. Nam ante. Vestibulum sit amet leo. Vivamus ac sem. Aenean pharetra quam in quam. Duis felis ante, mollis in, commodo lobortis, rhoncus sit amet, mauris.
            </p>
        </div>
    
    </BODY>
    </HTML>


  8. #8
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    will give it a try, and let you know, thanks for going through the trouble of coding it all

  9. #9
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks good, and i don't mind the little lag.

    sorry, i can't seem to make it work the way i want, or even make it work with a script i already come up with.

    Here's what i have, could you help me archive this properly, if your time permits it?

    fav.css

    Code CSS:
    .favAreaBg
    {
     border: 0px;
     padding: 0px;
     width: 500px;
     height: 400px;
     position: absolute;
     background-color: #FFFFFF;
    }

    functions WindowHeight() and WindowWidth() - calculates window height and width.

    Code JavaScript:
    function favAreaWidth()
    {
     var favAreaw = document.getElementById("favArea");
     var favAreaoffsetWidth = favAreaw.offsetWidth;
     var favAreaWidth = WindowWidth() - favAreaoffsetWidth;
     favAreaMarginLeft = favAreaWidth/2;
     favAreaw.style.marginLeft = favAreaMarginLeft;
    }

    Code JavaScript:
    function favAreaHeight()
    {
     var favAreah = document.getElementById("favArea");
     var favAreaoffsetHeight = favAreah.offsetheight;
     var favAreaHeight = WindowHeight() - favAreaoffsetHeight;
     favAreaMarginTop = favAreaHeight/2;
     favAreah.style.marginTop = favAreaMarginTop;
    }

    on page.
    Code HTML4Strict:
    <body onload="pHeight(); favAreaWidth(); favAreaHeight();">
    <div id="favArea" class="favAreaBg">test</div>

    here on ie7 and 0pera 9.21, the div is at the center of the window,, but no scrolling or resizing, it just stays there in 'favAreaMarginTop px' from top. even when put on onscroll/resize event, i thought it was odd at first, but now since i looked over it again i know why, it only stays at 'favAreaMarginTop px' marginTop from top. no mater how much one scrolls, have to make some way for it to stay 'favAreaMarginTop px' from top of window and not 'favAreaMarginTop px' from top of page.

    Also, it isn't aligning horizontally or vertically in firefox with this code. I think i might be doing something wrong, i'm not experienced in javascripting much. Could you(or anyone else) help me?

  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damn sitepoint... right, if you could possibly post some sample code that we could look at, rather then writing code that may or may not work with your situation.


  11. #11
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    Damn sitepoint... right, if you could possibly post some sample code that we could look at, rather then writing code that may or may not work with your situation.
    what do you mean gRoberts?, this is the code that currently works more or less good for me. Except that i can't get it to scroll + resize. What i want is a way to make it property work. the code above is exactly the same in my .js file and my .php page and not made up.

  12. #12
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My example works fine in both Firefox and Internet Explorer. Without seeing how you have adapted your code to include mine, I am helpless.


  13. #13
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    My example works fine in both Firefox and Internet Explorer. Without seeing how you have adapted your code to include mine, I am helpless.
    yes I'm very greatfull for the example you made, i think you got me wrong and i'm of course not totally ignoring your example.

    But how can i center it in your example?



    It doesnt have to be (certain height from top)/(certain width from left), but the result would have to be like above. and work with scroll+resize.

    I can't figure out how to do it with your script. With the script i wrote i could get the effect on ie7 and opera, but it doesn't work with scrolling+resizing. And also not work at all on firefox.

    If you think I'm taking up your time, then by all means don't have to help me, I'll still be greatfull for what you've done so far.
    Attached Images Attached Images

  14. #14
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry its again a little jumpy:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    
    <style type="text/css">
        #text {
            width: 100&#37;;
            height: 1234px;
        }
        #hover {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ccc;
        }
        #hover_inner {
            width: 300px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            border: solid 1px;
            background-color: #FFF;
        }
    </style>
    <script type="text/javascript">
    
        function SetHover(resize) {
            var hover = document.getElementById('hover');
            var hover_inner = document.getElementById('hover_inner');
            var wHeight = 0;
            var wWidth = 0;  
    
            if( typeof( window.innerWidth ) == 'number' ) {
                wWidth = window.innerWidth;
                wHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                wWidth = document.documentElement.clientWidth;
                wHeight = document.documentElement.clientHeight;
            } else if( document.body && ( document.body.clientWidth || ocument.body.clientHeight ) ) {
                wWidth = document.body.clientWidth;
                wHeight = document.body.clientHeight;
            }
            if(resize) {
                hover.style.width = wWidth;
                hover.style.height = wHeight;
            }
            hover.style.top = document.body.scrollTop;
            hover_inner.style.left = (hover.offsetWidth/2 - hover_inner.offsetWidth/2);
            hover_inner.style.top = (hover.offsetHeight/2 - hover_inner.offsetHeight/2);
        }
    
        window.onscroll = function() {
            SetHover(false);
        };
        window.onresize = function() {
            SetHover(true);
        };
        window.onload = function() {
            SetHover(true);
        };
    
    </script>
    
    </HEAD>
    
    <BODY>
    
        <div id="hover">
            <div id="hover_inner">Test</div>
        </div>
        <div id="text">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce risus sem, luctus id, semper eu, posuere at, lacus. Maecenas nibh. Nulla suscipit, pede sit amet ullamcorper egestas, diam augue vulputate libero, sed porta quam lectus in eros. Vivamus sem ipsum, feugiat a, gravida nec, suscipit vitae, nisi. Etiam lectus. Cras laoreet adipiscing enim. Etiam convallis accumsan erat. Maecenas commodo auctor urna. In tempus dignissim pede. Vivamus turpis arcu, ullamcorper ac, lobortis et, gravida vitae, augue. Aenean sodales mauris et diam. Donec vulputate pede id dui.
            </p>
            <p>
                Donec ultricies hendrerit ligula. Ut nec felis. Aliquam ut erat sit amet dolor aliquam pretium. Maecenas venenatis rutrum sapien. Praesent at sem non lacus eleifend varius. Donec ut erat eget urna auctor elementum. Donec pulvinar ipsum eget tellus. Donec auctor tristique neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec id metus. Sed volutpat eros ut ante. Curabitur ipsum ligula, tempus ac, sollicitudin ut, dictum in, arcu. Morbi posuere sapien quis purus. Etiam vel eros sed justo commodo luctus. Cras eu neque eu velit elementum imperdiet. In tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tristique pellentesque felis. Aenean in dui. Nam blandit sodales nisl.
            </p>
            <p>
                Pellentesque pharetra. Fusce lectus ligula, suscipit vel, posuere vitae, commodo mattis, dui. Donec dolor mi, gravida quis, accumsan eu, sagittis blandit, magna. Suspendisse fermentum congue neque. Nam nulla dolor, semper et, sodales mollis, imperdiet at, massa. Curabitur blandit, tellus eget condimentum venenatis, sem justo commodo leo, ac iaculis elit libero nec metus. Ut in leo vitae urna euismod aliquet. Curabitur et elit vitae ligula ultricies gravida. Vestibulum commodo placerat orci. Nulla non elit. In sed mauris. Vivamus pellentesque sollicitudin erat. Morbi elementum tincidunt mi. In magna lacus, pharetra at, pretium id, consequat at, magna. Pellentesque turpis eros, ornare vel, rutrum id, dapibus sed, massa. Nulla dapibus luctus ligula. Vivamus leo tortor, mattis ut, ullamcorper eget, luctus in, purus. Pellentesque non ante. Nam turpis felis, malesuada et, tincidunt nec, vehicula at, justo.
            </p>
            <p>
                Maecenas pede odio, accumsan non, fringilla at, consectetuer in, massa. Morbi metus. Sed at massa. Nulla dolor est, bibendum sit amet, cursus id, vehicula faucibus, ligula. Nulla quis nibh. Sed ut libero ut sem porttitor mollis. Sed quis tellus. Praesent sodales risus a pede. Nunc sagittis, purus sit amet hendrerit semper, massa nisi tristique diam, ac vulputate ligula magna et magna. Sed malesuada urna. Praesent id sapien ac nulla consequat tristique.
            </p>
            <p>
                Praesent in tortor. In quis arcu. Nullam ac dui id mauris nonummy nonummy. Nulla porttitor nisl. Aenean et diam eu justo pulvinar egestas. Suspendisse adipiscing. Pellentesque faucibus sem quis eros. Sed est urna, ultrices ac, feugiat eu, varius vel, turpis. Sed lobortis tincidunt sapien. Donec nonummy imperdiet turpis. Praesent est. Aenean porta tellus. Vestibulum eleifend. Ut ac magna. Nam ante. Vestibulum sit amet leo. Vivamus ac sem. Aenean pharetra quam in quam. Duis felis ante, mollis in, commodo lobortis, rhoncus sit amet, mauris.
            </p>
        </div>
    
    </BODY>
    </HTML>
    It was me who misread your replies. I completely forgot to add the floating box.

    Sorry.


  15. #15
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah great, i think i could work it out with this. Thank you very much, you've been most helpful

  16. #16
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    umm.. hope I'm not making a pest of myself, but could you modify so that the 'hover' isn't there and only floating div? i tried to but it didn't work well.

    i wish i was more experienced in javascript. It always troubles me when i ask other's help, it makes me feel i'm being a burden.

  17. #17
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Click the second paragraph.

    hth

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    
    <style type="text/css">
        #text {
            width: 100&#37;;
            height: 1234px;
        }
        #hover {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ccc;
            display: none;
        }
        #hover_inner {
            width: 300px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            border: solid 1px;
            background-color: #FFF;
        }
    </style>
    <script type="text/javascript">
    
        function SetHover(resize) {
            var hover = document.getElementById('hover');
            var hover_inner = document.getElementById('hover_inner');
            var wHeight = 0;
            var wWidth = 0;  
    
            if( typeof( window.innerWidth ) == 'number' ) {
                wWidth = window.innerWidth;
                wHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                wWidth = document.documentElement.clientWidth;
                wHeight = document.documentElement.clientHeight;
            } else if( document.body && ( document.body.clientWidth || ocument.body.clientHeight ) ) {
                wWidth = document.body.clientWidth;
                wHeight = document.body.clientHeight;
            }
            if(resize) {
                hover.style.width = wWidth;
                hover.style.height = wHeight;
            }
            hover.style.top = document.body.scrollTop;
            hover_inner.style.left = (hover.offsetWidth/2 - hover_inner.offsetWidth/2);
            hover_inner.style.top = (hover.offsetHeight/2 - hover_inner.offsetHeight/2);
        }
        function toggleFloater() {
            var hover = document.getElementById('hover');
            hover.style.display = (hover.style.display == 'none') ? 'none' : 'block';
            SetHover(true);
        }
    
        window.onscroll = function() {
            SetHover(false);
        };
        window.onresize = function() {
            SetHover(true);
        };
    
    </script>
    
    </HEAD>
    
    <BODY>
    
        <div id="hover">
            <div id="hover_inner">Test</div>
        </div>
        <div id="text">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce risus sem, luctus id, semper eu, posuere at, lacus. Maecenas nibh. Nulla suscipit, pede sit amet ullamcorper egestas, diam augue vulputate libero, sed porta quam lectus in eros. Vivamus sem ipsum, feugiat a, gravida nec, suscipit vitae, nisi. Etiam lectus. Cras laoreet adipiscing enim. Etiam convallis accumsan erat. Maecenas commodo auctor urna. In tempus dignissim pede. Vivamus turpis arcu, ullamcorper ac, lobortis et, gravida vitae, augue. Aenean sodales mauris et diam. Donec vulputate pede id dui.
            </p>
            <p><a href="javascript:void(0);" onclick="toggleFloater();">
                Donec ultricies hendrerit ligula. Ut nec felis. Aliquam ut erat sit amet dolor aliquam pretium. Maecenas venenatis rutrum sapien. Praesent at sem non lacus eleifend varius. Donec ut erat eget urna auctor elementum. Donec pulvinar ipsum eget tellus. Donec auctor tristique neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec id metus. Sed volutpat eros ut ante. Curabitur ipsum ligula, tempus ac, sollicitudin ut, dictum in, arcu. Morbi posuere sapien quis purus. Etiam vel eros sed justo commodo luctus. Cras eu neque eu velit elementum imperdiet. In tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tristique pellentesque felis. Aenean in dui. Nam blandit sodales nisl.</a>
            </p>
            <p>
                Pellentesque pharetra. Fusce lectus ligula, suscipit vel, posuere vitae, commodo mattis, dui. Donec dolor mi, gravida quis, accumsan eu, sagittis blandit, magna. Suspendisse fermentum congue neque. Nam nulla dolor, semper et, sodales mollis, imperdiet at, massa. Curabitur blandit, tellus eget condimentum venenatis, sem justo commodo leo, ac iaculis elit libero nec metus. Ut in leo vitae urna euismod aliquet. Curabitur et elit vitae ligula ultricies gravida. Vestibulum commodo placerat orci. Nulla non elit. In sed mauris. Vivamus pellentesque sollicitudin erat. Morbi elementum tincidunt mi. In magna lacus, pharetra at, pretium id, consequat at, magna. Pellentesque turpis eros, ornare vel, rutrum id, dapibus sed, massa. Nulla dapibus luctus ligula. Vivamus leo tortor, mattis ut, ullamcorper eget, luctus in, purus. Pellentesque non ante. Nam turpis felis, malesuada et, tincidunt nec, vehicula at, justo.
            </p>
            <p>
                Maecenas pede odio, accumsan non, fringilla at, consectetuer in, massa. Morbi metus. Sed at massa. Nulla dolor est, bibendum sit amet, cursus id, vehicula faucibus, ligula. Nulla quis nibh. Sed ut libero ut sem porttitor mollis. Sed quis tellus. Praesent sodales risus a pede. Nunc sagittis, purus sit amet hendrerit semper, massa nisi tristique diam, ac vulputate ligula magna et magna. Sed malesuada urna. Praesent id sapien ac nulla consequat tristique.
            </p>
            <p>
                Praesent in tortor. In quis arcu. Nullam ac dui id mauris nonummy nonummy. Nulla porttitor nisl. Aenean et diam eu justo pulvinar egestas. Suspendisse adipiscing. Pellentesque faucibus sem quis eros. Sed est urna, ultrices ac, feugiat eu, varius vel, turpis. Sed lobortis tincidunt sapien. Donec nonummy imperdiet turpis. Praesent est. Aenean porta tellus. Vestibulum eleifend. Ut ac magna. Nam ante. Vestibulum sit amet leo. Vivamus ac sem. Aenean pharetra quam in quam. Duis felis ante, mollis in, commodo lobortis, rhoncus sit amet, mauris.
            </p>
        </div>
    
    </BODY>
    </HTML>


  18. #18
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    Click the second paragraph.

    hth

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    
    <style type="text/css">
        #text {
            width: 100%;
            height: 1234px;
        }
        #hover {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #ccc;
            display: none;
        }
        #hover_inner {
            width: 300px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            border: solid 1px;
            background-color: #FFF;
        }
    </style>
    <script type="text/javascript">
    
        function SetHover(resize) {
            var hover = document.getElementById('hover');
            var hover_inner = document.getElementById('hover_inner');
            var wHeight = 0;
            var wWidth = 0;  
    
            if( typeof( window.innerWidth ) == 'number' ) {
                wWidth = window.innerWidth;
                wHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                wWidth = document.documentElement.clientWidth;
                wHeight = document.documentElement.clientHeight;
            } else if( document.body && ( document.body.clientWidth || ocument.body.clientHeight ) ) {
                wWidth = document.body.clientWidth;
                wHeight = document.body.clientHeight;
            }
            if(resize) {
                hover.style.width = wWidth;
                hover.style.height = wHeight;
            }
            hover.style.top = document.body.scrollTop;
            hover_inner.style.left = (hover.offsetWidth/2 - hover_inner.offsetWidth/2);
            hover_inner.style.top = (hover.offsetHeight/2 - hover_inner.offsetHeight/2);
        }
        function toggleFloater() {
            var hover = document.getElementById('hover');
            hover.style.display = (hover.style.display == 'none') ? 'none' : 'block';
            SetHover(true);
        }
    
        window.onscroll = function() {
            SetHover(false);
        };
        window.onresize = function() {
            SetHover(true);
        };
    
    </script>
    
    </HEAD>
    
    <BODY>
    
        <div id="hover">
            <div id="hover_inner">Test</div>
        </div>
        <div id="text">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce risus sem, luctus id, semper eu, posuere at, lacus. Maecenas nibh. Nulla suscipit, pede sit amet ullamcorper egestas, diam augue vulputate libero, sed porta quam lectus in eros. Vivamus sem ipsum, feugiat a, gravida nec, suscipit vitae, nisi. Etiam lectus. Cras laoreet adipiscing enim. Etiam convallis accumsan erat. Maecenas commodo auctor urna. In tempus dignissim pede. Vivamus turpis arcu, ullamcorper ac, lobortis et, gravida vitae, augue. Aenean sodales mauris et diam. Donec vulputate pede id dui.
            </p>
            <p><a href="javascript:void(0);" onclick="toggleFloater();">
                Donec ultricies hendrerit ligula. Ut nec felis. Aliquam ut erat sit amet dolor aliquam pretium. Maecenas venenatis rutrum sapien. Praesent at sem non lacus eleifend varius. Donec ut erat eget urna auctor elementum. Donec pulvinar ipsum eget tellus. Donec auctor tristique neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec id metus. Sed volutpat eros ut ante. Curabitur ipsum ligula, tempus ac, sollicitudin ut, dictum in, arcu. Morbi posuere sapien quis purus. Etiam vel eros sed justo commodo luctus. Cras eu neque eu velit elementum imperdiet. In tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tristique pellentesque felis. Aenean in dui. Nam blandit sodales nisl.</a>
            </p>
            <p>
                Pellentesque pharetra. Fusce lectus ligula, suscipit vel, posuere vitae, commodo mattis, dui. Donec dolor mi, gravida quis, accumsan eu, sagittis blandit, magna. Suspendisse fermentum congue neque. Nam nulla dolor, semper et, sodales mollis, imperdiet at, massa. Curabitur blandit, tellus eget condimentum venenatis, sem justo commodo leo, ac iaculis elit libero nec metus. Ut in leo vitae urna euismod aliquet. Curabitur et elit vitae ligula ultricies gravida. Vestibulum commodo placerat orci. Nulla non elit. In sed mauris. Vivamus pellentesque sollicitudin erat. Morbi elementum tincidunt mi. In magna lacus, pharetra at, pretium id, consequat at, magna. Pellentesque turpis eros, ornare vel, rutrum id, dapibus sed, massa. Nulla dapibus luctus ligula. Vivamus leo tortor, mattis ut, ullamcorper eget, luctus in, purus. Pellentesque non ante. Nam turpis felis, malesuada et, tincidunt nec, vehicula at, justo.
            </p>
            <p>
                Maecenas pede odio, accumsan non, fringilla at, consectetuer in, massa. Morbi metus. Sed at massa. Nulla dolor est, bibendum sit amet, cursus id, vehicula faucibus, ligula. Nulla quis nibh. Sed ut libero ut sem porttitor mollis. Sed quis tellus. Praesent sodales risus a pede. Nunc sagittis, purus sit amet hendrerit semper, massa nisi tristique diam, ac vulputate ligula magna et magna. Sed malesuada urna. Praesent id sapien ac nulla consequat tristique.
            </p>
            <p>
                Praesent in tortor. In quis arcu. Nullam ac dui id mauris nonummy nonummy. Nulla porttitor nisl. Aenean et diam eu justo pulvinar egestas. Suspendisse adipiscing. Pellentesque faucibus sem quis eros. Sed est urna, ultrices ac, feugiat eu, varius vel, turpis. Sed lobortis tincidunt sapien. Donec nonummy imperdiet turpis. Praesent est. Aenean porta tellus. Vestibulum eleifend. Ut ac magna. Nam ante. Vestibulum sit amet leo. Vivamus ac sem. Aenean pharetra quam in quam. Duis felis ante, mollis in, commodo lobortis, rhoncus sit amet, mauris.
            </p>
        </div>
    
    </BODY>
    </HTML>
    but it still has the grey layer, is it possible for the 'inner_hover' to be center like that without 'hover'?


Bookmarks

Posting Permissions

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