SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Non-flickering always on top popup

    Hello,

    I generated a popup in a fixed position of a window that does not obstruct the user while working in the page. (a block in a div tag).

    I made the popup to remain in the bottom-right corner of the window even if I scroll the page.

    My problem is it flickers when i scroll the page.
    I want it to be like popup in gmail chat that is always fixed in bottom-right corner of the window and does not flicker while scrolling.


    Please Help

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Line 78 in your code is coded incorrectly.

  3. #3
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7stud, I guess you are trying to refer some other posts.

    Does any body have any idea how gmail does it ?

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think he meant that you should post your code...

  5. #5
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure i'll post my codes.
    But i was looking for a new solution.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>

    <script language="javascript">
    window.onscroll=Reposition;
    function Reposition()
    {
    document.all["mydiv"].style.top=WindowSize('height')/2+GetScrollTop()+"px";
    document.all["mydiv"].style.left=WindowSize('width')/2+GetScrollLeft()+"px";
    }



    //Determine window size
    function WindowSize(dimension)
    {
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' )
    {

    myWidth = document.documentElement.clientHeight>window.innerHeight?window.innerWidth-20:window.innerWidth;
    myHeight = document.body.scrollWidth>window.innerWidth?window.innerHeight-20:window.innerHeight;

    }
    else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
    {

    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;

    }
    else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
    {

    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;

    }

    if(dimension=='width')
    return myWidth

    else if(dimension=='height')
    return myHeight
    }

    //Determine position of scrollbar
    function GetScrollTop()
    {
    return filterResults (
    window.pageYOffset ? window.pageYOffset : 0,
    document.documentElement ? document.documentElement.scrollTop : 0,
    document.body ? document.body.scrollTop : 0
    );
    }
    function GetScrollLeft()
    {
    return filterResults (
    window.pageXOffset ? window.pageXOffset : 0,
    document.documentElement ? document.documentElement.scrollLeft : 0,
    document.body ? document.body.scrollLeft : 0
    );
    }
    function filterResults(n_win, n_docel, n_body)
    {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
    n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
    }
    </script>
    </head>

    <body>

    <form name="f1">
    <div id="mydiv" style="position:absolute; z-index:1;"><table height=100 width=250 bgcolor="#CCCCCC" bordercolor="#000000"><tr><td align="center">
    Scroll this page.<br><br>
    I dont want to flicker when you scroll.<br>
    Please help.
    </td></tr></table></div>
    <script language="javascript">
    Reposition();
    </script>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </form>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    No response for days.
    Atleast some one could suggest me something.
    Cause i know its possible.

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are some pure css solutions out there. In FF, you can use the css style position:fixed to keep an element fixed on the page when you scroll.

    position:fixed doesn't work in IE6, but you can use IE conditional comments to impose an IE hack:
    Code:
    <!--[if lte IE 6]>
    <style type="text/css">
    
    html, body	{
    	height: 100&#37;;
    	overflow: auto;
    	}
    
    .fixedDiv {
    	position: absolute;
    	top: 5em;
    	left: 5em;
    	background-color: blue;
    }
    </style>
    <![endif]-->
    The hack only works if you have a DOCTYPE declaration on your page(which triggers standards mode rendering), e.g.
    Code:
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" 
      xml:lang="en" lang="en">
    <head><title></title>
    As described here: http://home.tampabay.rr.com/bmerkey/...ion-fixed.html
    Last edited by 7stud; Jan 15, 2007 at 03:44.

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another website employs a hack that works with quirksmode rendering:

    http://tagsoup.com/cookbook/css/fixed/

    1) It triggers quirksmode rendering by putting a comment on the line prior to the DOCTYPE declaration(also works by eliminating the DOCTYPE declaration altogether).

    2) Then it creates a <div> surrounding all the content that should scroll normally.

    3) Any <div> placed outside the <div> in 2) will remain fixed and it can be positioned using position:absolute.

    Code:
    <html>
    <head><title></title>
    <style type="text/css">
    
    .fixedEffect{
    	position: fixed;
    	top: 10em;
    	left: 5em;                      ///this is for FF
    	color: white;
    	background-color: blue;
    }
    
    /*  To fix IE6: ***************/
    
    body{
      margin: 0;
    }
    
    </style>
    
    <!--[if lte IE 7]>
    <style type="text/css">
    
    body{
       overflow: hidden;
    }
    
    .regularEffect{
    	width: 100&#37;;
    	height: 100%;
    	overflow: auto;
      }
    
    .fixedEffect{
    	position: absolute;
    	
    	top: 10em;
    	left: 5em;
    	color: white;
    	background-color: blue;
    }
    	
    
    </style>
    <![endif]-->
    
    
    
    <script type="text/javascript" >
    
    
    </script>
    </head>
    
    <body>
    
    <div class="fixedEffect">This doesn't move</div>
    
    
    <div class="regularEffect">
    <div>this scrolls since inside regular effect div</div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    
    </div>
    
    
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thank you very much 7stud.

    That solved my problem for FF.

    The solutions were great but i wont be able to use it in IE because I'll have to change many design in my project if i use it.

    Thank you once again.

  10. #10
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I realized it wasnt that complicated.
    Now it works perfectly on both IE and FF.

    Thank you very much

  11. #11
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good for you. Which one did you use?

  12. #12
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the second one.

  13. #13
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •