Solved

floating modal

Posted on 1998-09-28
41
546 Views
Last Modified: 2012-08-13
I know you can display modal dialogues, but this question gets a little more indepth. Anyone know how to display a Floating Modal? One that the user can drag around and leave anywhere on the screen. I basically want this modal to always be on top of whatever is in the background.
0
Comment
Question by:deans
  • 13
  • 13
  • 8
  • +4
41 Comments
 
LVL 10

Expert Comment

by:MasseyM
Comment Utility
Add this to the modal window.

<BODY OnBlur="focus();">

</BODY>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
MasseyM's solution is good for a modal window that has to be dismissed in order for you to access the window that opened it. (will give an error in IE3 unless you code <BODY OnBlur="if (window.focus) self.focus();"> )

If you mean one that stays on top but you were you can interact with the page underneath, that is not really possible (MSIE has some extended window functionality - look at http://msdn.microsoft.com/scripting/)
Consider a layer instead. Good example at GeoCities

Michel

Michel
0
 

Author Comment

by:deans
Comment Utility
You can't really maintain a focus on something that is no longer within the display area. I don't think what I am asking is possible to do, I've tried a lot of different things and so far I've had no luck.
0
 

Author Comment

by:deans
Comment Utility
Michel,

I've been all over the scripting site at MS, I will go back a take a look at the layer idea. Thanks

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Do you need the focus on the modal (I know modal is normally implemented with the focus in the modal window)? If so, why isn't MasseyM's suggestion valid - AFAIK you can move that window around... The example at geocities is cool since it stays floating on top of anything, even when you scroll the page underneath... Exactly what effect  are you trying to achieve?

Michel
0
 

Author Comment

by:deans
Comment Utility
When a modal dialog is open you can't access any of the windows underneath it. It holds control until you close it. At least that is my assumption. If I am wrong here and MasseyM's answer is correct I would be more than happy to give him the points.

What is the URL to get to this example at GeoCities?
0
 
LVL 10

Expert Comment

by:MasseyM
Comment Utility
With my code, you can interact with the page beneath, the modal window will just stay on top...

Just make sure your modal window is smaller that the window beneath.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
MasseyM: With your code, the focus will jump back to the modal each time the user clicks outside the window.

The example is using the following:

(Base href is 'http://www.geocities.com/')

<DIV CLASS="GeoBranding" ID="GeoBranding" STYLE="position:absolute;top:1;visibility:hide;" ALIGN="right">
<A HREF="/Avenues/Arts_and_Literature/?source=watermark&browser=Netscape" TARGET="_top"><IMG SRC="/images/branding/geocities.gif" ALT="Click to see more great pages on Arts and Literature." BORDER="0"></A><BR>
</DIV>
<SCRIPT LANGUAGE="javascript1.2" SRC="/include/branding/default_ns.js">
</SCRIPT>
0
 

Author Comment

by:deans
Comment Utility
Creates a dialog box and displays in it the HTML document given by URL. The dialog box is a special window that is modal, meaning it retains the input focus until the user closes it.


That is the description of a Modal Dialogue. Also I went to geocities I don't see any use of a floating Modal/div, etc. Are you sure that it is at the main page?
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
If you visit www.geocities.com with a 4+ browser, wait for it to load and then look at the lower right hand corner.  There is a logo which says geocities.  Scroll the window and you'll notice that it remains.  That is what mplungjan was referring to.  They use a layer (div) which detects the scrolling and changes it's position to compensate for the moved document, so that it remains for the most part in that same position (this updating of it's position can be a little slow so it can be kind of jerky)
-Josh
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Sorry I didn't make myself more clear...

Thanks josh.

Michel
0
 

Author Comment

by:deans
Comment Utility
Who said anything about a div that remains at the lower part of a screen? I can do that with a Frame or a Div that stays put. I don't see how one can drag that around or have it has a floating window? It isn't even close to what I am looking for. Maybe I didn't make myself more clear.

Here is the synopsis of what I am doing. I've written an online leasing system which has 50+ screens of data input, reporting, etc. I want to have a floating window that is totally independant of what is behind it and has the user moves through the application this window is always on top of the one they are interacting with. It is displaying the contract information only. They will never make any changes to it, they will only read it and use it for quick reference of information relating to this particular lease. I've created a few divs that are always in the same location, the GEOCITIES example is one that can be produced very easily. The whole idea of the floating div is that it doesn't take up any screen space. If it is in the way of information that they want they can just drag it elsewhere.  Do you understand now what I am looking for?

Thanks for the help.

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
The geocities div has code to put it back in place, if you replaced that code with a drag and drop code, the user could move the div around (in the confines of the window, but still).

What I read that you want is a stay on to but no focus window.

I canot help you there - I can only think of a modified onblur, something like
<BODY onLoad="setInterval("self.focus;self.blur",1000);" but I would go crazy using it. Alternatively initially create your legal window in the corner of the screen or use frames.

I am sorry if I am not helping. I would like to know what you decide to use when you do decide (if?)

Michel
0
 

Author Comment

by:deans
Comment Utility
I understand what you mean, I am not trying to be difficult.The problem with only being able to drag it around in the window is that the window changes all the time. I don't want to have to support multiple code. I was planning on writing an DHTML Object for it if all else fails. If I do write it I will post the code for it here. Thanks for the help.
0
 
LVL 2

Expert Comment

by:Grdv
Comment Utility
here's the script... took a while to figure out... it's based on a script from insidedHTML and documentation on how to do event handling in NS

<script language="javascript">
layername = "mylay"
if (document.layers) {
function doNSMouseDown (e) {
        objSelected=theNSOne(e.pageX,e.pageY);
        if (objSelected != "null"){
                document.captureEvents(Event.MOUSEMOVE);
                document.onmousemove=doNSMouseMove;
        oldX=e.pageX;
        oldY=e.pageY;
        return false;
        }
}
function doNSMouseUp (e) {
        if (objSelected != "null"){
        document.onmousemove=0;
        document.releaseEvents(Event.MOUSEMOVE);
                objSelected="null";
                return false;
        }
}
function doNSMouseMove(e) {
        if (objSelected != "null"){
        obj.offset(e.pageX - oldX, e.pageY - oldY);
        oldX = e.pageX;
        oldY = e.pageY;
        }
}
//Capture events
document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
document.onmousedown= doNSMouseDown;
document.onmouseup= doIEMouseUp;
//Find out which element was clicked on
function theNSOne(clickX,clickY){
        eval('obj=document.layers["' +layername+ '"]');
        if ( (clickX > obj.left) && (clickX < obj.left+obj.clip.width) && (clickY > obj.top) && (clickY < obj.top+obj.clip.height)){
                return obj;
        }
}
} else if (document.all!=null){
var elDragged = null  // Track current item.
function doIEMouseMove() {
  // Check if mouse button is down and if an element is being dragged
  if ((1 == event.button) && (elDragged != null)) {
    // Move the element
    // Where the mouse is in the document
    var intTop = event.clientY+document.body.scrollTop;
    var intLeft = event.clientX + document.body.scrollLeft;
    // Calculate what element the mouse is really in
    var intLessTop  = 0; var intLessLeft = 0;
    var elCurrent = elDragged.offsetParent;
    while (elCurrent.offsetParent!=null) {
      intLessTop+=elCurrent.offsetTop;
      intLessLeft+=elCurrent.offsetLeft;
      elCurrent = elCurrent.offsetParent;
    }
    // Set new position
    elDragged.style.pixelTop = intTop  - intLessTop - elDragged.y;
    elDragged.style.pixelLeft = intLeft - intLessLeft  - elDragged.x;
    event.returnValue = false;
  };
};
function theIEOne(elCheck) {
  // Check if the clicked inside an element that supports dragging
  while (elCheck!=null) {
    if (elCheck.getAttribute("ID")==layername)
      return elCheck
    elCheck = elCheck.parentElement
  }      
  return null
}
function doIEMouseDown() {
  // Store element on mousedown.  Called from click handler in code below .
  var elCurrent = theIEOne(event.srcElement)
  if (null!=elCurrent) {
      elDragged = elCurrent;
      // Determine where the mouse is in the element
      elDragged.x = event.offsetX
      elDragged.y = event.offsetY
      var op = event.srcElement
      // Find real location in respect to element being dragged.
      if ((elDragged!=op.offsetParent) && (elDragged!=event.srcElement)) {
        while (op!=elDragged) {
          elDragged.x+=op.offsetLeft
          elDragged.y+=op.offsetTop
          op=op.offsetParent
        }
      }
  }
}
function doIESelectStart() {
  // Don't start text selections in dragged elements.
  return (null==checkDrag(event.srcElement) && (elDragged!=null))
}
// Process mousemove.
document.onmousedown = doIEMouseDown;
document.onmousemove = doIEMouseMove;
// Reset element on mouseup.
document.onmouseup = new Function("elDragged=null");
document.onselectstart = doIESelectStart;
}
</script>

all you have to do is to define the name of the layer in the top of the script and then create a layer with that name and then... save page and... drag & drop... :)

I hop you're satisfied with the answer...

// Gustav
0
 
LVL 10

Expert Comment

by:MasseyM
Comment Utility
DOES NOT WORK IN IE!

0
 
LVL 2

Expert Comment

by:Grdv
Comment Utility
oops... supposed to be a div with that ID...
b/c it's identified as a layer with that name i IE and a object with that ID in NS...
one of the few possible sollutions are to make an div with that ID...

hope there are no more troubles or faults on this one

// Gustav
0
 
LVL 2

Expert Comment

by:Grdv
Comment Utility
woops, suppose it'll be many comments here today from my side... :(

document.onmouseup= doIEMouseUp;

should be changed to:

document.onmouseup= doNSMouseUp;

// Gustav
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
MasseyM: No need to shout - ..

Michel
(ps MM:I have posted a question for you in the lounge)
0
 
LVL 2

Expert Comment

by:Grdv
Comment Utility
MasseyM:
my script does to work in IE.... at least on my computer... :)

0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:deans
Comment Utility
Div's won't work. At least not that I can see. I'm going to remove this question.

0
 

Author Comment

by:deans
Comment Utility
How does one delete a question
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Ask customer exchange

Sorry we couldn't help you more...

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I of course meant customer services...
0
 
LVL 2

Expert Comment

by:Grdv
Comment Utility
why won't div's work??

wait one second... you asked for something which could stay on top in the window all time and I did it, then you're removing the question?? well, well, do you see
the only reason I can think of doing that, is if you don't want to have the question answered...

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
"drag around and leave anywhere on the screen."

a div is bound by the browser window, obscsuring what is beneat it...

Michel
0
 

Author Comment

by:deans
Comment Utility
Listen GRDV. If you read the initial question is stated quite clearly that I want a FLOATING MODAL DIALOGUE, a div is no good because it uses space on the display window. I won't want to use any space which is why I need the floating window.

I don't see this question being answered in a manner which I can use it. I've been working on this problem for quite some time with no success. I have no problem giving up these points for an answer which is correct.  If you don't like that, then don't try to answer my questions.

I'll tell you what. mplugjan has tried the most on this question. mplugjan if you propose an answer any answer I will give you these points.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Thanks! I think however that I would rather receive 50 points for the effort and GRVD at least came up with some code.

Would you care to ask customer exchange to remove this and at the same time ask for an addtional 50 points for splitting - then you can post a 'For the effort' question to GRVD and me and save yourself 150 points.

I appreciate the offer, but I would much rather give a correct answer for that kind of points.

Thanks in advance,

Michel
0
 
LVL 2

Expert Comment

by:Grdv
Comment Utility
I'm sorry if I've misunderstood...
it's just that, when you demented the idea someone came up with involving divs this was in your response:

The whole idea of the floating div is that it doesn't take up any screen space. If it is in the way of information that they want they can just drag it elsewhere.

that's why...
but if you want another thing... hmm.. then I think the best thing to do is to create a program of some kind, always on top program... :)
I could probably do that for you... if I'd have to but as I said before...
I misunderstood... terribly sorry for getting mad so quickly...
// Gustav
0
 
LVL 2

Expert Comment

by:Grdv
Comment Utility
now that I have understood, I realise I shouldn't have any points for the thing I did...
well at least I have a great script to use :)
do whatever you feel like deans
<< Gustav
0
 
LVL 2

Expert Comment

by:Grdv
Comment Utility
now that I have understood, I realise I shouldn't have any points for the thing I did...
well at least I have a great script to use :)
do whatever you feel like deans
\< Gustav
0
 

Author Comment

by:deans
Comment Utility
Not a problem.
0
 

Author Comment

by:deans
Comment Utility
Not a problem.
0
 
LVL 11

Expert Comment

by:kmartin7
Comment Utility
Try http://developer.netscape.com/docs/examples/dynhtml/toolbar/toolbar.htm.  Is this something of the effect you are looking for?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
kmartin7: Good call - very cool effect.

Two things: It uses signed scripts and it is not MSIE compatible...

Michel
0
 

Author Comment

by:deans
Comment Utility
I can't open that site at the moment. I will try again later.
Im starting to think there is no answer to this question. I need IE 5.0, IE 4.xx just has too many limitations.

Thanks for the site info kmartin7. Its appreciated.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
deans: Try looking at that page again - it is probably exactly what you want...

ichel
0
 
LVL 11

Accepted Solution

by:
kmartin7 earned 200 total points
Comment Utility
0
 

Author Comment

by:deans
Comment Utility
I've coded around this problem. This question is no longer required. However it hasnt been removed.

Congrats. You win the points based on the fact I no longer want to have to check on this question. Thanks for the help everyone it was appreciated.
0
 
LVL 8

Expert Comment

by:drittich
Comment Utility
what was your solution?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Next time do not bother giving a D, just delete the question. It is not very cool to give a D to a question to get rid of it - sort of like leaving 10 cents tip...

Michel

0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 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

17 Experts available now in Live!

Get 1:1 Help Now