Floating menu relative to point in web page content.

Posted on 2003-02-27
Medium Priority
Last Modified: 2007-12-19

I am trying to develop a floating menu that will move along the x axis relative to the page content.  The site will be 800x600 and centred on the page, and I am looking to have the menu float up and down in a defined area of the page.  Viewing the page at 1024x768, however, menans that the menu's give coordinates are no longer within this area.

Is it possible to 'anchor' it to a point from which it's positional reference can be calculated from?  I would ideally like to insert a point on the page so that irrespective of screen resolution, the menu will still appear at teh designated position.

Also, is it possible to find out the x,y coordinated of the <div> / <layer> to reference pop up menu component positions so that as the menu floats down the page, the the popups remain in position relative to the menu?

Sorry if I am a little confusing with my explanation of my problem, as you can imagin I do not totally understand it :).

Any guidance on any of these points would be greatly appreciated.

Question by:mattisimo
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

Accepted Solution

hexagon47 earned 100 total points
ID: 8035019
<script type="text/javascript">
function checkAndDisplay()
if ((screen.width>=1024) && (screen.height>=768))
document.getElementById('floatingDiv').style.pixelLeft =500;
document.getElementById('floatingDiv').style.pixelTop =200;
document.getElementById('floatingDiv').style.display ='block';
<body onload="checkAndDisplay()">
<div id="floatingDiv" style="left:0px; top:0px; position:absolute; width:150px; display:none; background-color:#696969; border:1px solid black">my floating menu</div>

obviously you will have to play around with the values  bit

did it help?

Assisted Solution

zerofill earned 100 total points
ID: 8037120
There is no need of Javascript. It is also too relative because there is no garantee that you can take user's resolution.
You can solve your problem in this way:
Create your page and where you want to put the menu insert a table. Put the <div></div> into the table and it will be restricted to  borders of that table.
Here is an exaple code:
<table width="770" border="1" align="center">
    <td> &nbsp;
      <div id="Layer1" style="position:absolute; width:200px; height:16px; z-index:1">Text in div</div>

!!! Do not set left: X px; top: Y px because it will depend on how far from border of the browser is, which is your problem. In the other case it will depend on table's borders.
Hope this help

Assisted Solution

MusicMan earned 100 total points
ID: 8054089
Here is a nice scrlling menu using a mix of DHTML, JAVA and style sheets.  It will float the menu at the top left of the page, but it position can be changed by altering the relevant values.  I think you pop up problem may be a bit harder to solve though.


<style TYPE="text/css">
#slide {
                Position: Absolute;
                Left: 5;
                Top: 5;
                Visibility: Visible;

A:LINK            {text-decoration: none;}
A:VISITED      {text-decoration: none;}
TD            {font-family:arial;}
BODY            {Margin-Left: 120;}

<span ID="slide">

<TR><td><HR NOSHADE></TD></tr>
<td><A HREF="url 1">option 1</A><BR></td>
<td><A HREF="url 2">option 2</A><BR></td>
<td><A HREF="url 3">option 3</A><br></td>
<td><A HREF="url 4">option 4</A><br></td>
<td><A HREF="url 5">option 5</A><br></td>
<TR><td><HR NOSHADE></TD></tr>

<script LANGUAGE="JavaScript">

        currentX = currentY = 0;  
        whichIt = null;          
        lastScrollX = 0; lastScrollY = 0;
        NS = (document.layers) ? 1 : 0;
        IE = (document.all) ? 1: 0;
        function heartBeat() {
                if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
            if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
                if(diffY != lastScrollY) {
                        percent = .1 * (diffY - lastScrollY);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                                        if(IE) document.all.slide.style.pixelTop += percent;
                                        if(NS) document.slide.top += percent;
                        lastScrollY = lastScrollY + percent;
                if(diffX != lastScrollX) {
                        percent = .1 * (diffX - lastScrollX);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                        if(IE) document.all.slide.style.pixelLeft += percent;
                        if(NS) document.slide.left += percent;
                        lastScrollX = lastScrollX + percent;

        function checkFocus(x,y) {
        var totalY, totalX;
                floatx = document.slide.pageX;
                floaty = document.slide.pageY;
                floatwidth = document.slide.clip.width;
                floatheight = document.slide.clip.height;
                        if(20 == 0) totalY = floatheight;
                        else totalY = 20;
                        if(0 == 0) totalX = floatwidth;
                        else totalX = 0;
                if( (x > floatx && x < (floatx+totalX)) && (y > floaty && y < (floaty+totalY))) return true;
                else return false;
        function grabIt(e) {
                if(IE) {
                        whichIt = event.srcElement;
                        while (whichIt.id.indexOf("slide") == -1) {
                                whichIt = whichIt.parentElement;
                                if (whichIt == null) { return true; }
                        whichIt.style.pixelLeft = whichIt.offsetLeft;
                    whichIt.style.pixelTop = whichIt.offsetTop;
                        currentX = (event.clientX + document.body.scrollLeft);
                        currentY = (event.clientY + document.body.scrollTop);
                        if(20 == 0) totalY = whichIt.style.pixelHeight;
                        else totalY = 20;
                        if(0 == 0) totalX = whichIt.style.pixelWidth;
                        else totalX = 0;
                        if(!(event.clientX > whichIt.offsetLeft && event.clientX < whichIt.offsetLeft + totalX) ||
                        !(currentY > whichIt.offsetTop && currentY < whichIt.offsetTop + totalY)) whichIt = null;
                } else {
                if(checkFocus (e.pageX,e.pageY)) {
                        whichIt = document.slide;
                        FloatTouchedX = e.pageX-document.slide.pageX;
                        FloatTouchedY = e.pageY-document.slide.pageY;
            return true;
        function moveIt(e) {
                if (whichIt == null) { return false; }
                if(IE) {
                    newX = (event.clientX + document.body.scrollLeft);
                    newY = (event.clientY + document.body.scrollTop);
                    distanceX = (newX - currentX);    distanceY = (newY - currentY);
                    currentX = newX;    currentY = newY;
                    whichIt.style.pixelLeft += distanceX;
                    whichIt.style.pixelTop += distanceY;
                        if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
                        if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
                        if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
                        if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
                        event.returnValue = false;
                } else {
                if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
                if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
                if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
                if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
                return false;
            return false;
        function dropIt() {
                whichIt = null;
            if(NS) window.releaseEvents (Event.MOUSEMOVE);
            return true;

        if(NS) {
                window.onmousedown = grabIt;
                window.onmousemove = moveIt;
                window.onmouseup = dropIt;
        if(IE) {
                document.onmousedown = grabIt;
                document.onmousemove = moveIt;
                document.onmouseup = dropIt;
        if(NS || IE) action = window.setInterval("heartBeat()",1);

LVL 53

Expert Comment

ID: 9350324
This question has been classified abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

Unless it is clear to me that the question has been answered I will recommend delete.  It is possible that a Grade less than A will be given if no expert makes a case for an A grade. It is assumed that any participant not responding to this request is no longer interested in its final disposition.

If the user does not know how to close the question, the options are here:



Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
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…
Suggested Courses

764 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