Solved

How to make a div that always stay on top

Posted on 2007-03-23
5
4,935 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
[X]
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
  • 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
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…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

622 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