home *** CD-ROM | disk | FTP | other *** search
/ PC Active 2009 April / PCA224.ISO / intface / popup.js < prev    next >
Encoding:
Text File  |  2008-01-31  |  16.7 KB  |  507 lines
  1. // debugging... functie onderaan pagina
  2. debug = false;
  3. /*
  4. versie 1.5 dHTML: Andre van Groenestein
  5. versie 2.0: algemene scripts toegevoegd (popupVenster)
  6. versie 2.5: idem (rollovers)
  7. 6 - 9 - 00 functies dw en ldw: write vervangen door writeln
  8. versie 3.0: compatibiteit met DOM tbv Netscape 6
  9. versie 4.0: navigatie via toetsenbord toegevoegd
  10. */
  11.  
  12. // Nummer van de uitgave: gebruikt in o.a. oops (ophalen.htm) en webinzendingen
  13. var pcaNummer = 187;
  14.  
  15. var isIE     = (navigator.appName.indexOf('Microsoft')   != -1);
  16. var isIE4    = (navigator.appVersion.indexOf('MSIE 4')   != -1);
  17. var isIE55   = (navigator.appVersion.indexOf('MSIE 5.5') != -1);
  18. var Netscape = (navigator.appName == 'Netscape');
  19.  
  20. var dom1, dom2; dom1 = dom2 = false;
  21. if (document.getElementById)
  22. {    dom1 = dom2 = true;
  23. }
  24.  
  25. var drag = false; // bij bepaalde objecten wordt deze true tijdens een mousedown event
  26. var X; // positie van het drag & drop venster
  27. var Y;
  28. var objX; // uitgangspositie v/h object tijdens mousedown
  29. var objY;
  30. var mouseX; // uitgangspositie v/d muis tijdens mousedown
  31. var mouseY;
  32. var huidigObject; // het venster dat getoond/verplaatst moet worden
  33.  
  34. LAYERS    = (isIE) ? "document.all"             : "document.layers";
  35. HIDDEN    = (isIE) ? "hidden"                   : "hide";
  36. VISIBLE   = (isIE || dom1) ? "visible"          : "show";
  37. ZICHTBAAR = (isIE || dom1) ? "style.visibility" : "visibility";
  38.  
  39. // DOM controle (NS => 5.0, IE => 5.0)
  40. if (dom1)
  41. {    LAYERS = document.getElementById;
  42. }
  43.  
  44. //if (document.getElementsByTagName("*")) // geeft foutmelding in IE4...
  45. //{    LAYERS = document.getElementById;
  46. //}
  47.  
  48.  
  49. // breedte van het huidige venster
  50. function getVensterBreedte()
  51. {    if (debug)
  52.     {    dbg_functie     = arguments.callee.toString();
  53.         eind            = dbg_functie.indexOf("{") - 1;
  54.         dbg_functieNaam = dbg_functie.substr(0, eind);
  55.         dbg('<b>' + dbg_functieNaam + '</b>')
  56.         for (var i = 0; i < arguments.length; i++)
  57.         {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  58.         }
  59.         dbg('<p>');
  60.     }
  61.  
  62.     if (isIE) return document.body.clientWidth;
  63.     else      return window.innerWidth;
  64. }
  65.  
  66. // hoogte van het huidige venster
  67. function getVensterHoogte()
  68. {        if (debug)
  69.         {    dbg_functie     = arguments.callee.toString();
  70.             eind            = dbg_functie.indexOf("{") - 1;
  71.             dbg_functieNaam = dbg_functie.substr(0, eind);
  72.             dbg('<b>' + dbg_functieNaam + '</b>')
  73.             for (var i = 0; i < arguments.length; i++)
  74.             {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  75.             }
  76.             dbg('<p>');
  77.         }
  78.  
  79.     if (isIE) return document.body.clientHeight;
  80.     else      return window.innerHeight;
  81. }
  82.  
  83. // breedte van het huidige object
  84. function getObjectBreedte(obj)
  85. {        if (debug)
  86.         {    dbg_functie     = arguments.callee.toString();
  87.             eind            = dbg_functie.indexOf("{") - 1;
  88.             dbg_functieNaam = dbg_functie.substr(0, eind);
  89.             dbg('<b>' + dbg_functieNaam + '</b>')
  90.             for (var i = 0; i < arguments.length; i++)
  91.             {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  92.             }
  93.             dbg('<p>');
  94.         }
  95.     if (dom1 && !isIE) return parseInt(obj.style.width);
  96.     else if (isIE) return obj.clientWidth + 2; // 2 bij optellen, want width klopt niet...?
  97.     else      return obj.clip.width + 2;  // heeft mogelijk met de padding te maken!
  98. }
  99.  
  100. // lengte van het huidige object
  101. function getObjectHoogte(obj)
  102. {        if (debug)
  103.         {    dbg_functie     = arguments.callee.toString();
  104.             eind            = dbg_functie.indexOf("{") - 1;
  105.             dbg_functieNaam = dbg_functie.substr(0, eind);
  106.             dbg('<b>' + dbg_functieNaam + '</b>')
  107.             for (var i = 0; i < arguments.length; i++)
  108.             {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  109.             }
  110.             dbg('<p>');
  111.         }
  112.  
  113.     if (dom1 && !isIE) return parseInt(obj.style.height);
  114.     else if (isIE) return obj.clientHeight + 2; // 2 bij optellen, want height klopt niet...?
  115.     else      return obj.clip.height + 2;  // heeft mogelijk met de padding te maken!
  116. }
  117.  
  118. // plaats object op positie x, y
  119. function setPositie(obj, x, y)
  120. {        if (debug)
  121.         {    dbg_functie     = arguments.callee.toString();
  122.             eind            = dbg_functie.indexOf("{") - 1;
  123.             dbg_functieNaam = dbg_functie.substr(0, eind);
  124.             dbg('<b>' + dbg_functieNaam + '</b>')
  125.             for (var i = 0; i < arguments.length; i++)
  126.             {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  127.             }
  128.             dbg('<p>');
  129.         }
  130.     if(dom2)
  131.     {    obj.style.left = x + 'px';
  132.         obj.style.top  = y + 'px';
  133.     }
  134.     else if (Netscape) obj.moveTo(x, y);
  135.     else
  136.     {    obj.style.pixelLeft = x;
  137.         obj.style.pixelTop  = y;
  138.     }
  139. }
  140.  
  141. function getPositieX(obj)
  142. {    if (Netscape)
  143.     {    n = obj.style.left.indexOf('px');
  144.         l = obj.style.left.substring(0, n);
  145.         return l;
  146.     }
  147.     else
  148.     {    return obj.style.pixelLeft;
  149.     }
  150.  
  151. }
  152.  
  153. function getPositieY(obj)
  154. {    if (Netscape) // obj.style.top; plaatst 'px' achter het getal...
  155.     {    n = obj.style.top.indexOf('px');
  156.         l = obj.style.top.substring(0, n);
  157.         return l;
  158.     }
  159.     else
  160.     {    return obj.style.pixelTop;
  161.     }
  162. }
  163.  
  164. function setBoundaries(obj)
  165. {    objectBreedte = getObjectBreedte(obj);
  166.     objectHoogte  = getObjectHoogte(obj);
  167.     // als de popup buiten beeld valt, moet de popup verplaatst worden
  168.     if (objectBreedte > (getVensterBreedte() - dX) )
  169.         dX = getVensterBreedte() - objectBreedte - 5;
  170.     if (objectHoogte > (getVensterHoogte()  - dY) )
  171.         dY = getVensterHoogte() - objectHoogte - 5;
  172. }
  173.  
  174. function getPopupNotatie(popup)
  175. {    if (dom1)
  176.         return "(" + popup + ").";
  177.     else
  178.         return "['" + popup + "'].";
  179. }
  180.  
  181. function sluitPopup(nummer)
  182. {        if (debug)
  183.         {    dbg_functie     = arguments.callee.toString();
  184.             eind            = dbg_functie.indexOf("{") - 1;
  185.             dbg_functieNaam = dbg_functie.substr(0, eind);
  186.             dbg('<b>' + dbg_functieNaam + '</b>')
  187.             for (var i = 0; i < arguments.length; i++)
  188.             {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  189.             }
  190.             dbg('<p>');
  191.         }
  192.  
  193.     var popup = "popup" + nummer;
  194.     if (dom1)
  195.     {    document.getElementById(popup).style.visibility = 'hidden';
  196.     }
  197.     else
  198.         eval(LAYERS + "['" + popup + "']." + ZICHTBAAR + "= '" + HIDDEN + "'");
  199. }
  200.  
  201. function toonPopup(nummer)
  202. {        if (debug)
  203.         {    dbg_functie     = arguments.callee.toString();
  204.             eind            = dbg_functie.indexOf("{") - 1;
  205.             dbg_functieNaam = dbg_functie.substr(0, eind);
  206.             dbg('<b>' + dbg_functieNaam + '</b>')
  207.             for (var i = 0; i < arguments.length; i++)
  208.             {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  209.             }
  210.             dbg('<p>');
  211.         }
  212.     var popup = "popup" + nummer;
  213. //    popup = getPopupNotatie(popup);
  214.     if (dom1)
  215.         document.getElementById(popup).style.visibility = 'visible';
  216.     else
  217.         eval(LAYERS + "['" + popup + "']." + ZICHTBAAR + "= '" + VISIBLE + "'");
  218. }
  219.  
  220. // open de popup op de plek waar de muis zich bevond tijdens de aanroep
  221. function openPopup(nummer)
  222. {        dbg_functie = arguments.callee.toString();
  223.         eind = dbg_functie.indexOf("{") - 1;
  224.         dbg_functieNaam = dbg_functie.substr(0, eind);
  225.         dbg('<b>' + dbg_functieNaam + '</b>')
  226.         for (var i = 0; i < arguments.length; i++)
  227.         {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  228.         }
  229.         dbg('<p>')
  230.     var popup = "popup" + nummer;
  231.     if (dom1)
  232.         huidigObject = document.getElementById(popup);
  233.     else
  234.         huidigObject = eval(LAYERS + "['" + popup + "']");
  235.     // X en Y positie van de muis wordt voor IE hieronder bepaald
  236.     // voor NS wordt deze in de functie muisNS() bepaald, die al
  237.     // is aangeroepen.
  238.     if (isIE) X = eval(window.event.clientX + 8);
  239.     if (isIE) Y = eval(window.event.clientY + 17);
  240.     setBoundaries(huidigObject);
  241.     setPositie(huidigObject, X, Y);
  242.     toonPopup(nummer);
  243. }
  244.  
  245. function dragDrop()
  246. {    if (dom1)
  247.     {    huidigObject = document.getElementById('floatingPopup');
  248.         if (isIE)
  249.         {    dX = window.event.clientX;
  250.             dY = window.event.clientY;
  251.         }
  252.         else
  253.         {    dX = nsX;
  254.             dY = nsY;
  255.         }
  256.     }
  257.     else
  258.         huidigObject = eval(LAYERS + "['floatingPopup']");
  259.     if (drag)
  260.     {    dX = objX + dX - mouseX;
  261.         dY = objY + dY - mouseY;
  262.         setBoundaries(huidigObject);
  263.         setPositie(huidigObject, dX, dY);
  264.         return false; // zonder deze wordt de mousedown doorgegeven aan Windows
  265.     }
  266. }
  267.  
  268. // drag & drop venster
  269. function initDrag(evt)
  270. {    if (dom1)
  271.         huidigObject = document.getElementById('floatingPopup');
  272.     else
  273.         huidigObject = eval(LAYERS + "['floatingPopup']");
  274.     drag   = true;
  275.     if (isIE)
  276.     {    mouseX = event.clientX;
  277.         mouseY = event.clientY;
  278.     }
  279.     else
  280.     {    mouseX = nsX;
  281.         mouseY = nsY;
  282.     }
  283.     objX = parseInt(getPositieX(huidigObject));
  284.     objY = parseInt(getPositieY(huidigObject));
  285.     document.onmousemove = dragDrop;
  286. }
  287.  
  288. if (dom1)
  289. {    document.onmouseup = new Function("drag = false")
  290. }
  291.  
  292. function closeFloatingPopup()
  293. {    if (dom1)
  294.         document.getElementById('floatingPopup').style.visibility = "hidden";
  295.     else
  296.         document.floatingPopup.visibility = "hide";
  297. }
  298.  
  299.  
  300. // toont een andere image bij mouseOver. Toont de originele bij mouseOut.
  301. var actief = false;
  302. function muis(nummer)
  303. {    if (actief) document["img" + nummer].src = eval("img" + nummer + "off.src");
  304.     else        document["img" + nummer].src = eval("img" + nummer + "on.src");
  305.     actief = (!actief);
  306. }
  307.  
  308. // bepaal X en Y coordinaat van de muis en roep vervolgens de originele functie aan
  309. function muisNS(evt)
  310. {    nsX = eval(evt.pageX + 8);
  311.     nsY = eval(evt.pageY + 17);
  312.     routeEvent(evt);
  313. }
  314.  
  315.  
  316. // ***  Eind dHTML vensters  *** //
  317.  
  318.  
  319. // coordinaten van de linkerbovenhoek van de interface
  320. var search    = top.location.search.substring(1);
  321. variabelen    = search.split(",");
  322. PCAinterfaceX = variabelen[3];
  323. PCAinterfaceY = variabelen[4];
  324.  
  325. //PCAinterfaceX = (screen.availWidth - 640) / 2;
  326. //PCAinterfaceY = (screen.availHeight - 480) / 2;
  327.  
  328.  
  329. // algemene weergave van de popups
  330. var PopupWeergave       = "resizable=no,status=no,scrollbars=yes";
  331. var PopupWeergaveScroll = "resizable=no,status=no,scrollbars=yes";
  332.  
  333. PositieX = (isIE) ? "left" : "screenX";
  334. PositieY = (isIE) ? "top"  : "screenY";
  335.  
  336. // definitie van de vensternaam voor popups
  337. var lokaalVenster = null;
  338.  
  339. // sluit alle openstaande html popups en verwijder selecties rondom knoppen
  340. function sluitLokaleVensters()
  341. {    if (lokaalVenster != null && lokaalVenster.open)
  342.         lokaalVenster.close();
  343.     if (parent.menu && parent.menu.lokaalVenster != null && parent.menu.lokaalVenster.open)
  344.          parent.menu.lokaalVenster.close(); // in HandsOn's staat de window.open in het menu-frame
  345. }
  346.  
  347. function scriptFout()
  348. {   var geenMelding = false;
  349.     var foutString  = 'Er is iets foutgegaan.\n'
  350.     foutString += 'Als u deze problemen vaker hebt of de cd-rom niet\n'
  351.     foutString += 'goed kan gebruiken, mail dan onderstaande gegevens\n'
  352.     foutString += 'naar de redactie via het reactieformulier op\n'
  353.     foutString += 'http://www.pc-active.nl/reactie.\n'
  354.     if (arguments[0].indexOf('RPC') != -1) // remote procedure call: venster is al gesloten, maar IE heeft dat nog niet door...
  355.         geenMelding = true;
  356.     if (!geenMelding)
  357.     {    fout = '\n';
  358.         fout += '\nRegel: ' + arguments[2];
  359.         fout += '\nFout: ' +  arguments[0];
  360.         fout += '\nPagina: ' + arguments[1];
  361.         fout += '\nUitgave: ' + pcaNummer;
  362.         fout += '\nbrowser: ' + navigator.appName + ' ' + navigator.appVersion;
  363.         alert(foutString + fout);
  364.     }
  365.     return true;
  366. }
  367. window.onfocus = sluitLokaleVensters;
  368. window.onerror = scriptFout;
  369.  
  370.  
  371.  
  372. // ***  Fontgrootte aanpassen  *** //
  373. fontGrootte = 10;
  374.  
  375. function setFontGrootte(dx)
  376. {    for (var i = 0; i < document.styleSheets.length; i++)
  377.     {    var styleSheet = document.styleSheets[i];
  378.         for (var j = 0; j < styleSheet.rules.length; j++)
  379.         {    var rule = styleSheet.rules[j];
  380.             if ("" + rule.style.fontSize != "null")
  381.             {    fontGrootte = parseInt(rule.style.fontSize, 10) + dx;
  382.                 if (fontGrootte < 1)
  383.                     fontGrootte = 1;
  384.                 rule.style.fontSize = fontGrootte + "pt";
  385.             }
  386.         }
  387.     }
  388. }
  389.  
  390.  
  391. // ***  Begin standaardfuncties  *** //
  392.  
  393. function niets() { void(parent.menu.focus()); }
  394.  
  395. function dw(string) { document.writeln(string); }
  396.  
  397. function ldw(string) { lokaalVenster.document.writeln(string); }
  398.  
  399. // images van de 4 hoofdschermen
  400. imgxon = new Image(); imgxon.src = "../media/images/menu_hm1.gif";
  401. imgaon = new Image(); imgaon.src = "../media/images/menu_sw1.gif";
  402. imgbon = new Image(); imgbon.src = "../media/images/menu_ol1.gif";
  403. imgcon = new Image(); imgcon.src = "../media/images/menu_pc1.gif";
  404. imgdon = new Image(); imgdon.src = "../media/images/menu_cd1.gif";
  405.  
  406. imgxoff = new Image(); imgxoff.src = "../media/images/menu_hm.gif";
  407. imgaoff = new Image(); imgaoff.src = "../media/images/menu_sw.gif";
  408. imgboff = new Image(); imgboff.src = "../media/images/menu_ol.gif";
  409. imgcoff = new Image(); imgcoff.src = "../media/images/menu_pc.gif";
  410. imgdoff = new Image(); imgdoff.src = "../media/images/menu_cd.gif";
  411.   
  412. menux = new Image(); menux.src = "../media/images/hfd_hm1.gif"
  413. menua = new Image(); menua.src = "../media/images/hfd_sw.gif"
  414. menub = new Image(); menub.src = "../media/images/hfd_ol.gif"
  415. menuc = new Image(); menuc.src = "../media/images/hfd_pc.gif"
  416. menud = new Image(); menud.src = "../media/images/hfd_cd.gif"
  417.  
  418. // image functies van de 4 hoofdschermen
  419. function rollIn(imgName)
  420. { if (KnoppenGeladen) document[imgName].src = eval(imgName + "on.src"); }
  421.  
  422. function rollOut(imgName)
  423. { document[imgName].src = eval(imgName + "off.src"); }
  424.  
  425. function DualImageChange(imageID, imageName, imageID2, imageName2)
  426. {        if (debug)
  427.         {    dbg_functie     = arguments.callee.toString();
  428.             eind            = dbg_functie.indexOf("{") - 1;
  429.             dbg_functieNaam = dbg_functie.substr(0, eind);
  430.             dbg('<b>' + dbg_functieNaam + '</b>')
  431.             for (var i = 0; i < arguments.length; i++)
  432.             {    dbg('<br>   argument ' + i + ': ' + arguments[i])
  433.             }
  434.             dbg('<p>');
  435.         }    if (KnoppenGeladen)
  436.     {    document.images[imageID].src = eval(imageName + ".src");
  437.         document.images[imageID2].src = eval(imageName2 + ".src");
  438.     }
  439. }
  440.  
  441. // debugging unit
  442. if (debug)
  443. {    var geopend = true;
  444.     var debugTimeoutID;
  445.     debugWeergave = "top=0,left=0,"+"resizable=yes,status=no,scrollbars=yes";
  446.     schermBreedte = 380; //(screen.availWidth - 640) / 2;
  447.     schermHoogte  = screen.availHeight - 28; // 28 voor de taakbalk :-(
  448.     debugVenster  = window.open("", "Debugwindow", "width=" + schermBreedte + ",height=" + schermHoogte + debugWeergave);
  449.     debugVenster.document.write("<html><body bgcolor=white><font face=helvetica size=2>")
  450.     debugVenster.document.write('<p><b>Debugscript ingeladen vanuit:</b><br>');
  451.     debugVenster.document.write(location.href + '<br>');
  452.     focus();
  453. }
  454. function dbg(string)
  455. {    if (debug)
  456.     {    if (!geopend)
  457.         {    debugVenster.document.open();
  458.             debugVenster.document.write("<html><body bgcolor=white><font face=helvetica size=2>")
  459.             geopend = true;
  460.         }
  461.         debugVenster.document.write(string)
  462.         if (debugTimeoutID)
  463.             debugVenster.clearTimeout(debugTimeoutID);
  464.         debugTimeoutID = setTimeout("debugVenster.document.close(); geopend = false;", 2500);
  465.     }
  466. }
  467.  
  468. function schrijfDebugMelding(string)
  469. {    debugVenster.document.write(string + '<br>');
  470. }
  471. // eind debugging unit
  472.  
  473.  
  474. // vang mouseover en mouseouts af om X en Y coordinaat te bepalen
  475. if (Netscape)
  476. {   document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  477.     document.onmouseover = muisNS;
  478.     document.onmouseout  = muisNS;
  479. //    window.onresize      = opnieuwLaden;
  480. }
  481.  
  482. var inhoudVenster = null;
  483. function setInhoudPosition()
  484. {    if (Netscape && !dom1)
  485.     {   dx = window.screenX - PCAinterfaceX;
  486.         dy = window.screenY - PCAinterfaceY;
  487.         PCAinterfaceX = window.screenX;
  488.         PCAinterfaceY = window.screenY;
  489.         if (inhoudVenster != null && inhoudVenster.open) 
  490.         {    inhoudVenster.moveBy(dx, dy);
  491.         }
  492.     }
  493. }
  494.  
  495. // detectie van browsermovement om inhoudsopgave te positioneren
  496. // IE (kent onmove niet), Netscape 6 kent geen van beide
  497. if (Netscape && !dom1)
  498. {    window.onmove           = setInhoudPosition; }
  499. else if (isIE)
  500. {    top.document.onmouseout = setInhoudPosition; }
  501.  
  502.  
  503. function load()
  504. {    focus();
  505. }    window.onload = load;
  506.  
  507.