Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 739
  • Last Modified:

Floating menu relative to point in web page content.


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.

3 Solutions
<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?
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
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);

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now