Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How to make a div that always stay on top

Posted on 2007-03-23
5
4,931 Views
Last Modified: 2012-08-13
Anyone has an idea about how to make a div which always stay on top right corner of the browser window, just like the red message saying "Loading..." on the top right corner of GMAIL ?

This can be achieve easily with Firefox and IE7. How about < IE6 ?
0
Comment
Question by:khoama
  • 3
5 Comments
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18784143
What works in IE 7?

Maybe we can tweak it for IE 6 (which I still haven't upgraded)

My initial thought is absolute positioning with a top set at 0 and the left set at clientX - the divisions width - 22 with a z-index of a very large number.
0
 
LVL 2

Author Comment

by:khoama
ID: 18784213
The problem is when users scroll down it no longer stay at the top right corner.
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18784247
Ah... might have something for you.

You'll need to attach an event to the body for onscroll.

say something like:

if (document.body.attachEvent) {
        document.body.attachEvent(onscroll, doScroll);
} else {
      if (document.body.addEventListener) {
              document.body.addEventListener("scroll", doScroll, true);
     }
}

 
var newTop = 0;

function doScroll(e) {
        if (window.screenTop) {
            newTop = window.screenTop;  // IE
      } else {
            try {
                  newTop = (e.screenY) ? e.screenY : 0;  // DOM
            } catch(f) {}      
      }
        document.getElementById('divId').style.top=newTop;
}

0
 
LVL 13

Accepted Solution

by:
Mark_FreeSoftware earned 125 total points
ID: 18786307

take a look at this page:
http://www.cssplay.co.uk/layouts/fixed.html


what gmail does,
is with javascript checking the browser version,
and trough some ajax framework delivers browser specific code
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 18786440
Nice!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question