Solved

floating modal

Posted on 1998-09-28
41
548 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
ID: 1271520
Add this to the modal window.

<BODY OnBlur="focus();">

</BODY>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1271521
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
ID: 1271522
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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 

Author Comment

by:deans
ID: 1271523
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
ID: 1271524
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
ID: 1271525
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
ID: 1271526
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
ID: 1271527
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
ID: 1271528
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
ID: 1271529
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
ID: 1271530
Sorry I didn't make myself more clear...

Thanks josh.

Michel
0
 

Author Comment

by:deans
ID: 1271531
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
ID: 1271532
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
ID: 1271533
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
ID: 1271534
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
ID: 1271535
DOES NOT WORK IN IE!

0
 
LVL 2

Expert Comment

by:Grdv
ID: 1271536
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
ID: 1271537
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
ID: 1271538
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
ID: 1271539
MasseyM:
my script does to work in IE.... at least on my computer... :)

0
 

Author Comment

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

0
 

Author Comment

by:deans
ID: 1271541
How does one delete a question
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1271542
Ask customer exchange

Sorry we couldn't help you more...

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1271543
I of course meant customer services...
0
 
LVL 2

Expert Comment

by:Grdv
ID: 1271544
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
ID: 1271545
"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
ID: 1271546
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
ID: 1271547
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
ID: 1271548
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
ID: 1271549
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
ID: 1271550
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
ID: 1271551
Not a problem.
0
 

Author Comment

by:deans
ID: 1271552
Not a problem.
0
 
LVL 11

Expert Comment

by:kmartin7
ID: 1271553
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
ID: 1271554
kmartin7: Good call - very cool effect.

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

Michel
0
 

Author Comment

by:deans
ID: 1271555
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
ID: 1271556
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
ID: 1271557
0
 

Author Comment

by:deans
ID: 1271558
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
ID: 3762029
what was your solution?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 3791515
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Explain how this javascript function works 1 47
how can i count words? 2 44
Help with removing item from Session Array 3 24
asp.net mvc5 6 17
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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

803 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