Solved

How to make a div that always stay on top

Posted on 2007-03-23
5
4,928 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.

895 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now