floating modal

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.
deansAsked:
Who is Participating?
 
MasseyMCommented:
Add this to the modal window.

<BODY OnBlur="focus();">

</BODY>
0
 
Michel PlungjanIT ExpertCommented:
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
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
deansAuthor Commented:
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
 
deansAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
deansAuthor Commented:
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
 
MasseyMCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
deansAuthor Commented:
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
 
jbirkCommented:
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
 
Michel PlungjanIT ExpertCommented:
Sorry I didn't make myself more clear...

Thanks josh.

Michel
0
 
deansAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
deansAuthor Commented:
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
 
GrdvCommented:
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
 
MasseyMCommented:
DOES NOT WORK IN IE!

0
 
GrdvCommented:
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
 
GrdvCommented:
woops, suppose it'll be many comments here today from my side... :(

document.onmouseup= doIEMouseUp;

should be changed to:

document.onmouseup= doNSMouseUp;

// Gustav
0
 
Michel PlungjanIT ExpertCommented:
MasseyM: No need to shout - ..

Michel
(ps MM:I have posted a question for you in the lounge)
0
 
GrdvCommented:
MasseyM:
my script does to work in IE.... at least on my computer... :)

0
 
deansAuthor Commented:
Div's won't work. At least not that I can see. I'm going to remove this question.

0
 
deansAuthor Commented:
How does one delete a question
0
 
Michel PlungjanIT ExpertCommented:
Ask customer exchange

Sorry we couldn't help you more...

Michel
0
 
Michel PlungjanIT ExpertCommented:
I of course meant customer services...
0
 
GrdvCommented:
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
 
Michel PlungjanIT ExpertCommented:
"drag around and leave anywhere on the screen."

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

Michel
0
 
deansAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
GrdvCommented:
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
 
GrdvCommented:
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
 
GrdvCommented:
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
 
deansAuthor Commented:
Not a problem.
0
 
deansAuthor Commented:
Not a problem.
0
 
kmartin7Commented:
Try http://developer.netscape.com/docs/examples/dynhtml/toolbar/toolbar.htm.  Is this something of the effect you are looking for?
0
 
Michel PlungjanIT ExpertCommented:
kmartin7: Good call - very cool effect.

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

Michel
0
 
deansAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
deans: Try looking at that page again - it is probably exactly what you want...

ichel
0
 
deansAuthor Commented:
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
 
drittichCommented:
what was your solution?
0
 
Michel PlungjanIT ExpertCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.