[HTML/JS] Waarom is dit popupscherm niet 100%?

Pagina: 1
Acties:
  • 157 views sinds 30-01-2008
  • Reageer

  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Ik heb dus het volgende scriptje geschreven:

Hier te vinden als voorbeeld <- kan zijn dat de server down is, in dat geval gewoon ff copy-pasten van hieronder...
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
index.html:

<script>
 popupWindow = window.open( "", "", "fullscreen = 1, toolbar = 0, location = 0, directories = 0, status = 0, menubar = 0, scrollbars = 0, resizable = 0, width = 320, height = 240" );
 popupWindow.window.moveTo( 5000, 0 );
 popupWindow.window.resizeTo( 320, 240 );
 popupWindow.moveTo( window.screen.width / 2 - 160, window.screen.height / 2 - 120 );
 
 popupContent =  "<html>\n";
 popupContent += " <head>\n";
 popupContent += "  <title>Popup</title>\n";
 popupContent += " </head>\n";
 popupContent += " <frameset rows = \"18, *\" border = \"0\">\n";
 popupContent += "  <frame name = \"top\" src = \"top.html\" scrolling = \"no\" noresize>\n";
 popupContent += "  <frame name = \"main\" src = \"about:<body bgcolor = '#aaaaaa'>Hier dus de content...</body>\" scrolling = \"no\" noresize>\n";
 popupContent += " </frameset>\n";
 popupContent += "</html>\n";
 
 popupWindow.document.open();
 popupWindow.document.write( popupContent );
 popupWindow.document.close();
</script>


code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
top.html:

<html>
 <head>
  <style>
  body
  {
   background-color: #999999;
   margin: 0;
  }
  
  table
  {
   border: 1 solid;
   border-color: #444444;
  }
  
  td
  {
   font: bold 8pt verdana;
  }
  </style>
 </head>
 <body>
  <table cellspacing = "0" width = "100%">
   <tr>
    <td id = "titleBar" align = "center" style = "border-right: 0;">Titel</td>
    <td width = "14" style = "border-left: 0;"><img src = "close.gif" onclick = "parent.window.close()"></td>
   </tr>
  </table>
 </body>
 
 <script>
  winStatus = "up";
  
  titleBar.onmousedown = new Function( "winStatus = \"down\"; movePopup();" );
  titleBar.onmouseup = new Function( "winStatus = \"up\"; movePopup();" );
  titleBar.onselectstart = new Function("return false;");
  titleBar.ondragstart   = new Function("return false;");
  titleBar.oncontextmenu = new Function("return false;");
  titleBar.onmousemove   = movePopup;
    
  function movePopup()
  {
   if( winStatus == "down" ) 
   {
    ofx =  event.x
    ofy =  event.y
    winStatus = "drag"
   }
   else if( winStatus == "drag" ) 
   {
    px = event.screenX - ofx;
    py = event.screenY - ofy;
    parent.window.x = px;
    parent.window.y = py;
    parent.window.moveTo( px , py );
   } 
   else 
   {
    winStatus = "up"
   }
  }
 </script>
</html>

Maar ik heb nu het probleem dat wanneer ik dit scherm wil verplaatsen op de een of ander manier uit het window raak, met als gevolg dat het scherm blijft staan (voor exact probleem open de link en verplaats het popup window).

Wat kan ik hieraan doen zodat het wel werkt?

=( Protected by witchcraft )=


  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Hallo? Waar is iedereen?

ik zit dus nog steeds met het probleem dat de horizontale beweging wel goed gaat maar de verticale niet... Help?

=( Protected by witchcraft )=


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

Het probleem is dat het window niet snel genoeg met de muis meebeweegt; zodra je dan met je muis buiten de titlebar komt worden de events niet meer gecaptured in je JS, en staat je window stil.
Wat je eraan kan doen zou ik echter niet weten...

Intentionally left blank


  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Op maandag 10 december 2001 21:39 schreef crisp het volgende:
Het probleem is dat het window niet snel genoeg met de muis meebeweegt; zodra je dan met je muis buiten de titlebar komt worden de events niet meer gecaptured in je JS, en staat je window stil.
Wat je eraan kan doen zou ik echter niet weten...
Tot die conclusie was ik helaas ook gekomen, maar het gaat er nu juist om wat ik er aan kan doen... Plz anybody...

=( Protected by witchcraft )=


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

Ik heb al wat dingen uitgeprobeerd; als je de content-area samenvoegt met de title-bar area in 1 document gaat het verplaatsen naar onderen goed. Naar boven toe blijf je er echter snel 'uitschieten'. Geen idee of dit op snellere pc's (hier een 500 Mhz) beter is.
Je kan er ook een div van maken binnen een full-screen window, dan kan je de cursorpositie altijd afvragen.

Intentionally left blank


  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Op dinsdag 11 december 2001 09:31 schreef crisp het volgende:
Ik heb al wat dingen uitgeprobeerd; als je de content-area samenvoegt met de title-bar area in 1 document gaat het verplaatsen naar onderen goed. Naar boven toe blijf je er echter snel 'uitschieten'. Geen idee of dit op snellere pc's (hier een 500 Mhz) beter is.
Je kan er ook een div van maken binnen een full-screen window, dan kan je de cursorpositie altijd afvragen.
Het is dus niet de bedoeling dat het een pagina wordt ivm scrolling. En het maakt ook niets uit hoe snel of langzaam het systeem wel of niet is, heb het op diverse systemen geprobeerd, blijft hetzelfde probleem.

=( Protected by witchcraft )=


  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Is er nou echt niemand die mij kan helpen?

Ik ben inmiddels zover gekomen dat het wel werkt in IE6 maar nu nog in eerdere versies. Nu vraag ik me af wa er zoveel anders aan is dat het niet werkt...

Nieuwe code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
index.html:

<script>
 popupWindow = window.open( "", "", "fullscreen = 1, toolbar = 0, location = 0, directories = 0, status = 0, menubar = 0, scrollbars = 0, resizable = 0, width = 320, height = 240" );
 popupWindow.window.moveTo( 5000, 0 );
 popupWindow.window.resizeTo( 320, 240 );
 popupWindow.moveTo( window.screen.width / 2 - 160, window.screen.height / 2 - 120 );
 
 popupContent =  "<html>\n";
 popupContent += " <head>\n";
 popupContent += "  <title>Popup</title>\n";
 popupContent += " </head>\n";
 popupContent += " <frameset rows = \"18, *\" border = \"0\">\n";
 popupContent += "  <frame name = \"top\" src = \"top.html\" scrolling = \"no\" noresize>\n";
 popupContent += "  <frame name = \"main\" src = \"about:<body bgcolor = '#aaaaaa'>Dit is een voorbeeld van de nieuwe popups voor het configuratie beheer. Deze zijn ook te verplaatsen!!!</body>\" scrolling = \"no\" noresize>\n";
 popupContent += " </frameset>\n";
 popupContent += "</html>\n";
 
 popupWindow.document.open();
 popupWindow.document.write( popupContent );
 popupWindow.document.close();
</script>


code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
top.html:

<html>
 <head>
  <style>
  body
  {
   background-color: #999999;
   margin: 0;
  }
  
  table
  {
   border: 1 solid;
   border-color: #444444;
  }
  
  td
  {
   font: bold 8pt verdana;
  }
  </style>
 </head>
 
 <script>
  winStatus = "up";

  function movePopup()
  {
   if( winStatus == "down" ) 
   {
    document.body.style.backgroundColor = "#9999a9";
    ofx =  event.x;
    ofy =  event.y;
    winStatus = "drag"
   }
   else if( winStatus == "drag" ) 
   {
    px = event.screenX - ofx;
    py = event.screenY - ofy;
    
    parent.window.opener.window.status = "X-Pos: " + px + " Y-Pos: " + py + "; I-Left: " + titleBar.style.left + " I-Top: " + titleBar.style.top;
    parent.window.opener.window.document.title = "X-Pos: " + px + " Y-Pos: " + py + "; I-Left: " + titleBar.style.left + " I-Top: " + titleBar.style.top;
    
    //parent.window.x = px;
    //parent.window.y = py;
    parent.window.moveTo( px , py );
   } 
   else 
   {
    document.body.style.backgroundColor = "#999999";
    winStatus = "up"
   }
  }
 </script>

 <body>
  [img]"header.gif"[/img]
 </body>
 
 <script>
  titleBar.onmousedown = new Function("winStatus = 'down'; movePopup;");
  titleBar.onmouseup = new Function("winStatus = 'up';");
  titleBar.onselectstart = new Function("return false;");
  titleBar.ondragstart = new Function("return false;");
  titleBar.oncontextmenu = new Function("return false;");
  titleBar.onmousemove = movePopup;
 </script>
</html>

=( Protected by witchcraft )=


  • r0bert
  • Registratie: September 2001
  • Laatst online: 11-08 16:19
Bij mij werkt het prima (zelf zowel met de linker- als rechtermuisknop)

gebruik ie 5.5

  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Op dinsdag 11 december 2001 13:07 schreef r0bert het volgende:
Bij mij werkt het prima (zelf zowel met de linker- als rechtermuisknop)

gebruik ie 5.5
Maar in ie5.0 zou het ook moeten werken en doet hij dus niet :(

=( Protected by witchcraft )=


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

Ik heb thuis ook ie 5.5 maar heb het probleem dus wel (ook) - misschien beweegt r0bert zijn muis wel tergend langzaam; dan gaat het nl wel goed. Dat het in IE6 wel goed gaat kan ik niet testen (komt er bij mij voorlopig nog niet op :P ), maar het lijkt me gewoon een timing probleem (feature?) in IE5.5 en lager.

Intentionally left blank


  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Op dinsdag 11 december 2001 13:59 schreef crisp het volgende:
Ik heb thuis ook ie 5.5 maar heb het probleem dus wel (ook) - misschien beweegt r0bert zijn muis wel tergend langzaam; dan gaat het nl wel goed. Dat het in IE6 wel goed gaat kan ik niet testen (komt er bij mij voorlopig nog niet op :P ), maar het lijkt me gewoon een timing probleem (feature?) in IE5.5 en lager.
:( Nu een beetje positief nieuws met betrekking tot dit script :? Dat hij bijvoorbeeld WEL werkt?

=( Protected by witchcraft )=


  • r0bert
  • Registratie: September 2001
  • Laatst online: 11-08 16:19
Op dinsdag 11 december 2001 13:59 schreef crisp het volgende:
Ik heb thuis ook ie 5.5 maar heb het probleem dus wel (ook) - misschien beweegt r0bert zijn muis wel tergend langzaam; dan gaat het nl wel goed. Dat het in IE6 wel goed gaat kan ik niet testen (komt er bij mij voorlopig nog niet op :P ), maar het lijkt me gewoon een timing probleem (feature?) in IE5.5 en lager.
Ik heb m'n muis rondgeslingerd, als een homo in een donker bos .. maar bij mij deed ie 't gewoon.

En, zoals al gezegd werd, werkt het dus niet in 5.0

De reden kan ik zo 1, 2, 3 ook niet verzinnen en kan het ook niet testen, want ik heb alleen maar 5.5 en 6.0 :|

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

OK, wat leuker nieuws: ik vind het effect wel gaaf :) (jammer dat het niet even goed werkt ;) )

Intentionally left blank


  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Ik ga wel even druk aan het scripten...

=( Protected by witchcraft )=


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

ff bezig geweest met versie 2 hier thuis onder IE5.5; dit werkt dus idd perfect.
Wat blijkt nu: het plaatje hoeft helemaal niet op -500, -500 te beginnen en zo breed en hoog te zijn; gewoon transparant over de dragarea leggen is al voldoende. Vreemd dat de TD als dragarea zo'n raar effect geeft.
Anyway, zo heb ik ook de titel en het knopje erin en werkt het hier goed; morgen eens onder IE5.0 checken:

In top.html:
code:
1
2
3
4
5
6
7
8
9
 <body>
  <table cellspacing=0 width = "100%" height=18>
   <tr>
    <td align="center">Titel</td>
   </tr>
  </table>
  [img]"transparant.gif"[/img]
  [img]"close.gif"[/img]
 </body>

Intentionally left blank


  • OzBoz
  • Registratie: Maart 2000
  • Laatst online: 09-09 19:36

OzBoz

.:.H.:.I.:.P.:.

IE 6 werkt ie ook niet.. at least, slecht. Sorry ;)

My Fizion | My 3D prints | LinkedIn


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

En deze popup? (duurt even voordat je wat ziet ivm preloaden van plaatjes)

Intentionally left blank


  • CoiLive
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:47
Ik heb het tot nu to so.

Alles met HTML, CSS en Javascript.
Ook met dingen van hier natuurlijk.

Klik hier

  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Op woensdag 12 december 2001 00:00 schreef crisp het volgende:
En deze popup? (duurt even voordat je wat ziet ivm preloaden van plaatjes)
Deze werkt dus echt perfect en supersnel... Mag ik rippen :P? (zo nee, doe het lekker toch >:))
Op woensdag 12 december 2001 02:45 schreef FiZz_ het volgende:
Ik heb het tot nu to so.

Alles met HTML, CSS en Javascript.
Ook met dingen van hier natuurlijk.

Klik hier
Deze werkt ook niet echt lekker, maar zowieso ook in IE6 een beetje langzaam met verplaatsen enzo. Maar voor de rest wel cool.

=( Protected by witchcraft )=


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

Op woensdag 12 december 2001 09:04 schreef Dryw.Filtiarn het volgende:

Deze werkt dus echt perfect en supersnel... Mag ik rippen :P? (zo nee, doe het lekker toch >:))
Sure be my guest :)
Ik was zelf zwaar verbaasd dat deze het wel lekker deed in IE5.0 - misschien omdat het geen frameset is.
Deze werkt ook niet echt lekker, maar zowieso ook in IE6 een beetje langzaam met verplaatsen enzo. Maar voor de rest wel cool.
Bij mij ook een beetje schokkerig. In IE5.0 is het menu ook niet zoals 'ie zijn moet. Ik ben zelf nog bezig om een windowsachtig menu te maken in DHTML. Voorbeeldje hier (om de dialogs aan/uit te zetten).

Intentionally left blank


  • CoiLive
  • Registratie: Maart 2000
  • Laatst online: 15-09 18:47
het gekke is.. Als je hem verticaal of diagonaal verplaatst doet die het perfect, maar horizontaal schokt die als een gek in IE6

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

Op woensdag 12 december 2001 15:31 schreef FiZz_ het volgende:
het gekke is.. Als je hem verticaal of diagonaal verplaatst doet die het perfect, maar horizontaal schokt die als een gek in IE6
Volgens mij omdat het een frameset is; probeer het eens zonder frameset.

Intentionally left blank


  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Hey crisp ik heb nu dat scriptje van jou in gebruik en het werkt perfect, ook met frameset... Het enige "grote" verschil dat ik in ieder geval kan ontdekken is dat je in dat script van jou een div hebt om vast te pakken in plaats van een img zoals bij mij...

=( Protected by witchcraft )=


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

Op woensdag 12 december 2001 15:53 schreef Dryw.Filtiarn het volgende:
Hey crisp ik heb nu dat scriptje van jou in gebruik en het werkt perfect, ook met frameset... Het enige "grote" verschil dat ik in ieder geval kan ontdekken is dat je in dat script van jou een div hebt om vast te pakken in plaats van een img zoals bij mij...
Nee hoor, het is een IMG (transparant) in een DIV; hiermee vang ik echter alleen de onMouseDown af; de rest - onMouseMove en onMouseUp - vang ik af in de body. Misschien is dat het wel...

Intentionally left blank


  • Dryw.Filtiarn
  • Registratie: September 2001
  • Laatst online: 18-03 12:10
Op woensdag 12 december 2001 20:05 schreef crisp het volgende:

[..]

Nee hoor, het is een IMG (transparant) in een DIV; hiermee vang ik echter alleen de onMouseDown af; de rest - onMouseMove en onMouseUp - vang ik af in de body. Misschien is dat het wel...
Ah, whatever, feit is dat het werkt :) en daar ben ik al lang blij van, nog maals thanks...

=( Protected by witchcraft )=

Pagina: 1