home *** CD-ROM | disk | FTP | other *** search
/ PC Active 2002 December / pca1412.iso / intface / interactie.js < prev    next >
Encoding:
Text File  |  2002-10-22  |  17.8 KB  |  545 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 = 1412;
  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('  argument ' + i + ': ' + arguments[i])
  58.         }
  59.         dbg('');
  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('  argument ' + i + ': ' + arguments[i])
  75.         }
  76.         dbg('');
  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('  argument ' + i + ': ' + arguments[i])
  92.         }
  93.         dbg('');
  94.     }
  95.  
  96.     // dat %^%$^ Mozilla/NS6 kan de width van een object niet bepalen. Onderstaande werkt dus niet.
  97.     if (dom1 && !isIE) return parseInt(obj.style.width);
  98.     else if (isIE) return obj.clientWidth + 2; // 2 bij optellen, want width klopt niet...?
  99.     else      return obj.clip.width + 2;  // heeft mogelijk met de padding te maken!
  100. }
  101.  
  102. // lengte van het huidige object
  103. function getObjectHoogte(obj)
  104. {    if (debug)
  105.     {    dbg_functie     = arguments.callee.toString();
  106.         eind            = dbg_functie.indexOf("{") - 1;
  107.         dbg_functieNaam = dbg_functie.substr(0, eind);
  108.         dbg('<b>' + dbg_functieNaam + '</b>')
  109.         for (var i = 0; i < arguments.length; i++)
  110.         {    dbg('  argument ' + i + ': ' + arguments[i])
  111.         }
  112.         dbg('');
  113.     }
  114.  
  115.     // dat %^%$^ Mozilla/NS6 kan de height van een object niet bepalen. Onderstaande werkt dus niet.
  116.     if (dom1 && !isIE) return parseInt(obj.style.height);
  117.     else if (isIE) return obj.clientHeight + 2; // 2 bij optellen, want height klopt niet...?
  118.     else      return obj.clip.height + 2;  // heeft mogelijk met de padding te maken!
  119. }
  120.  
  121. // plaats object op positie x, y
  122. function setPositie(obj, x, y)
  123. {    if (debug)
  124.     {    dbg_functie     = arguments.callee.toString();
  125.         eind            = dbg_functie.indexOf("{") - 1;
  126.         dbg_functieNaam = dbg_functie.substr(0, eind);
  127.         dbg('<b>' + dbg_functieNaam + '</b>')
  128.         for (var i = 0; i < arguments.length; i++)
  129.         {    dbg('  argument ' + i + ': ' + arguments[i])
  130.         }
  131.         dbg('');
  132.     }
  133.  
  134.     if(dom2)
  135.     {    obj.style.left = x + 'px';
  136.         obj.style.top  = y + 'px';
  137.     }
  138.     else if (Netscape) obj.moveTo(x, y);
  139.     else
  140.     {    obj.style.pixelLeft = x;
  141.         obj.style.pixelTop  = y;
  142.     }
  143. }
  144.  
  145. function getPositieX(obj)
  146. {    if (debug)
  147.     {    dbg_functie     = arguments.callee.toString();
  148.         eind            = dbg_functie.indexOf("{") - 1;
  149.         dbg_functieNaam = dbg_functie.substr(0, eind);
  150.         dbg('<b>' + dbg_functieNaam + '</b>')
  151.         for (var i = 0; i < arguments.length; i++)
  152.         {    dbg('  argument ' + i + ': ' + arguments[i])
  153.         }
  154.         dbg('');
  155.     }
  156.  
  157.     // if(dom2)
  158.     //{    return obj.style.left; // plaatst 'px' achter het getal...
  159.     //}
  160.     if (Netscape) // code...?
  161.     {}
  162.     else
  163.     {    return obj.style.pixelLeft;
  164.     }
  165.  
  166. }
  167.  
  168. function getPositieY(obj)
  169. {    if (debug)
  170.     {    dbg_functie     = arguments.callee.toString();
  171.         eind            = dbg_functie.indexOf("{") - 1;
  172.         dbg_functieNaam = dbg_functie.substr(0, eind);
  173.         dbg('<b>' + dbg_functieNaam + '</b>')
  174.         for (var i = 0; i < arguments.length; i++)
  175.         {    dbg('  argument ' + i + ': ' + arguments[i])
  176.         }
  177.         dbg('');
  178.     }
  179.  
  180.     // if(dom2)
  181.     //{    return obj.style.top; // plaatst 'px' achter het getal...
  182.     //}
  183.     if (Netscape) // code...?
  184.     {}
  185.     else
  186.     {    return obj.style.pixelTop;
  187.     }
  188. }
  189.  
  190. function setBoundaries(obj)
  191. {    if (debug)
  192.     {    dbg_functie     = arguments.callee.toString();
  193.         eind            = dbg_functie.indexOf("{") - 1;
  194.         dbg_functieNaam = dbg_functie.substr(0, eind);
  195.         dbg('<b>' + dbg_functieNaam + '</b>')
  196.         for (var i = 0; i < arguments.length; i++)
  197.         {    dbg('  argument ' + i + ': ' + arguments[i])
  198.         }
  199.         dbg('');
  200.     }
  201.  
  202.     objectBreedte = getObjectBreedte(obj);
  203.     objectHoogte  = getObjectHoogte(obj);
  204.     if (objectBreedte > (getVensterBreedte() - X) )
  205.         X = getVensterBreedte() - objectBreedte - 5;
  206.     if (objectHoogte > (getVensterHoogte()  - Y) )
  207.         Y = getVensterHoogte() - objectHoogte - 5;
  208.  
  209.     dbg('objectBreedte: ' + objectBreedte);
  210.     dbg('objectHoogte: ' + objectHoogte);
  211.     dbg('getVensterBreedte(): ' + getVensterBreedte());
  212.     dbg('X: ' + X);
  213. }
  214.  
  215. function sluitPopup(nummer)
  216. {    if (debug)
  217.     {    dbg_functie     = arguments.callee.toString();
  218.         eind            = dbg_functie.indexOf("{") - 1;
  219.         dbg_functieNaam = dbg_functie.substr(0, eind);
  220.         dbg('<b>' + dbg_functieNaam + '</b>')
  221.         for (var i = 0; i < arguments.length; i++)
  222.         {    dbg('  argument ' + i + ': ' + arguments[i])
  223.         }
  224.         dbg('');
  225.     }
  226.  
  227.     var popup = "popup" + nummer;
  228.     if (dom1)
  229.     {    document.getElementById(popup).style.visibility = 'hidden';
  230.     }
  231.     else
  232.         eval(LAYERS + "['" + popup + "']." + ZICHTBAAR + "= '" + HIDDEN + "'");
  233. }
  234.  
  235. function toonPopup(nummer)
  236. {    if (debug)
  237.     {    dbg_functie     = arguments.callee.toString();
  238.         eind            = dbg_functie.indexOf("{") - 1;
  239.         dbg_functieNaam = dbg_functie.substr(0, eind);
  240.         dbg('<b>' + dbg_functieNaam + '</b>')
  241.         for (var i = 0; i < arguments.length; i++)
  242.         {    dbg('  argument ' + i + ': ' + arguments[i])
  243.         }
  244.         dbg('');
  245.     }
  246.  
  247.     var popup = "popup" + nummer;
  248.     if (dom1)
  249.         document.getElementById(popup).style.visibility = 'visible';
  250.     else
  251.         eval(LAYERS + "['" + popup + "']." + ZICHTBAAR + "= '" + VISIBLE + "'");
  252. }
  253.  
  254. function openPopup(nummer)
  255. {    if (debug)
  256.     {    dbg_functie     = arguments.callee.toString();
  257.         eind            = dbg_functie.indexOf("{") - 1;
  258.         dbg_functieNaam = dbg_functie.substr(0, eind);
  259.         dbg('<b>' + dbg_functieNaam + '</b>')
  260.         for (var i = 0; i < arguments.length; i++)
  261.         {    dbg('  argument ' + i + ': ' + arguments[i])
  262.         }
  263.         dbg('');
  264.     }
  265.  
  266.     var popup = "popup" + nummer;
  267.     if (dom1)
  268.         huidigObject = document.getElementById(popup);
  269.     else
  270.         huidigObject = eval(LAYERS + "['" + popup + "']");
  271.     if (isIE) X = eval(window.event.clientX + 8);
  272.     if (isIE) Y = eval(window.event.clientY + 17);
  273.     setBoundaries(huidigObject);
  274.     setPositie(huidigObject, X, Y);
  275.     toonPopup(nummer);
  276. }
  277.  
  278. function dragDrop()
  279. {    if (isIE) X = window.event.clientX;
  280.     if (isIE) Y = window.event.clientY;
  281.     if (drag)
  282.     {    X = objX + X - mouseX;
  283.         Y = objY + Y - mouseY;
  284.         setBoundaries(huidigObject);
  285.         setPositie(huidigObject, X, Y);
  286.         return false; // zonder deze wordt de mousedown doorgegeven aan Windows
  287.     }
  288. }
  289.  
  290. // drag & drop venster
  291. function initDrag(obj)
  292. {    if (dom1)
  293.         huidigObject = document.getElementById(obj);
  294.     else
  295.         huidigObject = eval(LAYERS + "['" + obj + "']");
  296.     drag   = true;
  297.     mouseX = event.clientX;
  298.     mouseY = event.clientY;
  299.     objX   = getPositieX(huidigObject);
  300.     objY   = getPositieY(huidigObject);
  301.     document.onmousemove = dragDrop;
  302. }
  303.  
  304. if (isIE)
  305. {    document.onmouseup = new Function("drag = false")
  306. }
  307.  
  308.  
  309. var actief = false;
  310. function muis(nummer)
  311. {    if (actief) document["img" + nummer].src = eval("img" + nummer + "off.src");
  312.      else        document["img" + nummer].src = eval("img" + nummer + "on.src");
  313.     actief = (!actief);
  314. }
  315.  
  316. function muisNS(evt)
  317. {    X = eval(evt.pageX + 8);
  318.     Y = eval(evt.pageY + 17);
  319.     routeEvent(evt);
  320. }
  321.  
  322.  
  323. // coordinaten van de linkerbovenhoek van de interface
  324. var search    = top.location.search.substring(1);
  325. variabelen    = search.split(",");
  326. PCAinterfaceX = variabelen[3];
  327. PCAinterfaceY = variabelen[4];
  328.  
  329. //PCAinterfaceX = (screen.availWidth - 640) / 2;
  330. //PCAinterfaceY = (screen.availHeight - 480) / 2;
  331.  
  332. var PopupWeergave       = "resizable=no,status=no,scrollbars=yes";
  333. var PopupWeergaveScroll = "resizable=no,status=no,scrollbars=yes";
  334.  
  335. PositieX = (isIE) ? "left" : "screenX";
  336. PositieY = (isIE) ? "top"  : "screenY";
  337.  
  338. // definitie van de vensternaam voor popups
  339. var lokaalVenster = null;
  340.  
  341. // sluit alle openstaande html popups en verwijder selecties rondom knoppen
  342. function menuFocus()
  343. {    if (lokaalVenster != null && lokaalVenster.open)
  344.         lokaalVenster.close();
  345.     if (parent.menu && parent.menu.lokaalVenster != null && parent.menu.lokaalVenster.open)
  346.          parent.menu.lokaalVenster.close(); // in HandsOn's staat de window.open in het menu-frame
  347. //    if (parent.parent.script)
  348. //        parent.parent.script.HerstartMuziek();
  349.  
  350.     focus;
  351. }
  352.  
  353. function scriptFout()
  354. {    if (arguments[0].indexOf('RPC') == -1) // remote procedure call: venster is al gesloten, maar IE heeft dat nog niet door...
  355.     {    var fouts = 'Er is iets foutgegaan.'
  356.         fouts += '\nAls u deze problemen vaker hebt of de cd-rom niet';
  357.         fouts += '\ngoed kan gebruiken, mail dan onderstaande gegevens';
  358.         if (isIE)
  359.             fouts += '\nvia internet naar de redactie.';
  360.         else
  361.             fouts += '\nnaar cdbug@pc-active.nl.';
  362.         regel   = arguments[2];
  363.         bug     = arguments[0];
  364.         pagina  = arguments[1];
  365.         uitgave = pcaNummer;
  366.         browser = navigator.appName + ' ' + navigator.appVersion;
  367.  
  368.         if (isIE)
  369.         {    foutje = "regel: " + regel + "<br>error: " + bug + "<br>pagina: " + pagina + "<br>uitgave: " + uitgave + "<br>browser: " + browser;
  370.             document.getElementById('errorIntro').innerHTML = fouts;
  371.             document.getElementById('errorMelding').innerHTML = foutje;
  372.             document.getElementById('regel').value   = regel;
  373.             document.getElementById('bug').value   = bug;
  374.             document.getElementById('pagina').value  = pagina;
  375.             document.getElementById('uitgave').value = uitgave;
  376.             document.getElementById('browser').value = browser;
  377.             document.getElementById('errorPopup').style.visibility = 'visible';
  378.         }
  379.         else
  380.             alert(fouts + '\n\nregel: ' + regel + '\nerror: ' + bug + '\npagina: ' + pagina + '\nuitgave: ' + uitgave + '\nbrowser: ' + browser);
  381.     }
  382.     return true;
  383. }
  384.  
  385. function closeError()
  386. {    errorPopup.style.visibility = "hidden";
  387. }
  388.  
  389.  
  390. strError = '<div id="errorPopup">';
  391. strError += '<span id=errorTitle onMousedown="initDrag(\'errorPopup\')"> Error</span>';
  392. strError += '<span id="errorIntro"> </span>';
  393. strError += '<span id="errorMelding"> </span>';
  394. strError += '<center>';
  395. strError += '<form name="cdbug" action="http://www.pcactive.nl/cdrom/cdbug.asp" method="POST">';
  396.     strError += '<input type=hidden name="regel" value="">';
  397.     strError += '<input type=hidden name="bug" value="">';
  398.     strError += '<input type=hidden name="pagina" value="">';
  399.     strError += '<input type=hidden name="uitgave" value="">';
  400.     strError += '<input type=hidden name="browser" value="">';
  401.     strError += '<input type=submit value="verstuur via internet">';
  402.     strError += '<input type=button value="annuleren" onclick="closeError()">';
  403. strError += '</form>';
  404. strError += '</center>';
  405. strError += '</div>';
  406.  
  407. function getErrorPopup()
  408. {    if (isIE)
  409.         document.write(strError);
  410.     window.onerror = scriptFout;
  411. }
  412.  
  413. window.onfocus = menuFocus;
  414.  
  415.  
  416. // ***  Begin standaardfuncties  *** //
  417.  
  418. function niets() { void(parent.menu.focus()); }
  419.  
  420. function dw(string) { document.writeln(string); }
  421.  
  422. function ldw(string) { lokaalVenster.document.writeln(string); }
  423.  
  424. // images van de 4 hoofdschermen
  425. imgxon = new Image(); imgxon.src = "../media/images/menu_hm1.gif";
  426. imgaon = new Image(); imgaon.src = "../media/images/menu_sw1.gif";
  427. imgbon = new Image(); imgbon.src = "../media/images/menu_ol1.gif";
  428. imgcon = new Image(); imgcon.src = "../media/images/menu_pc1.gif";
  429. imgdon = new Image(); imgdon.src = "../media/images/menu_cd1.gif";
  430.  
  431. imgxoff = new Image(); imgxoff.src = "../media/images/menu_hm.gif";
  432. imgaoff = new Image(); imgaoff.src = "../media/images/menu_sw.gif";
  433. imgboff = new Image(); imgboff.src = "../media/images/menu_ol.gif";
  434. imgcoff = new Image(); imgcoff.src = "../media/images/menu_pc.gif";
  435. imgdoff = new Image(); imgdoff.src = "../media/images/menu_cd.gif";
  436.   
  437. menux = new Image(); menux.src = "../media/images/hfd_hm1.gif"
  438. menua = new Image(); menua.src = "../media/images/hfd_sw.gif"
  439. menub = new Image(); menub.src = "../media/images/hfd_ol.gif"
  440. menuc = new Image(); menuc.src = "../media/images/hfd_pc.gif"
  441. menud = new Image(); menud.src = "../media/images/hfd_cd.gif"
  442.  
  443. // image functies van de 4 hoofdschermen
  444. function rollIn(imgName)
  445. { document[imgName].src = eval(imgName + "on.src"); }
  446.  
  447. function rollOut(imgName)
  448. { document[imgName].src = eval(imgName + "off.src"); }
  449.  
  450. function DualImageChange(imageID, imageName, imageID2, imageName2)
  451. {    if (KnoppenGeladen)
  452.     {    document.images[imageID].src = eval(imageName + ".src");
  453.          document.images[imageID2].src = eval(imageName2 + ".src");
  454.     }
  455. }
  456.  
  457. // debugging unit
  458. if (debug)
  459. {   var geopend = true;
  460.     var debugTimeoutID;
  461.     debugWeergave = "top=0,left=0,"+"resizable=yes,status=no,scrollbars=yes";
  462.     schermBreedte = 380; //(screen.availWidth - 640) / 2;
  463.     schermHoogte  = screen.availHeight - 100;
  464.     debugVenster  = window.open("", "Debugwindow", "width=" + schermBreedte + ",height=" + schermHoogte + debugWeergave);
  465.     debugVenster.document.write("<html><body bgcolor=white><font face=helvetica size=2>")
  466.     debugVenster.document.write('<p><b>Debugscript ingeladen vanuit:</b><br>');
  467.     debugVenster.document.write(location.href + '<br>');
  468.     focus();
  469. }
  470. function dbg(string)
  471. {    if (debug)
  472.     {    if (!geopend)
  473.         {    debugVenster.document.open();
  474.             debugVenster.document.write("<html><body bgcolor=white><font face=helvetica size=2>")
  475.             geopend = true;
  476.         }
  477.         debugVenster.document.write(string + '<br>')
  478.         if (debugTimeoutID)
  479.             debugVenster.clearTimeout(debugTimeoutID);
  480.         debugTimeoutID = setTimeout("debugVenster.document.close(); geopend = false;", 2500);
  481.     }
  482. }
  483.  
  484. function schrijfDebugMelding(string)
  485. {    debugVenster.document.write(string + '<br>');
  486. }
  487. // eind debugging unit
  488.  
  489.  
  490. // vang mouseover en mouseouts af om X en Y coordinaat te bepalen
  491. if (Netscape)
  492. {   document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  493.     document.onmouseover = muisNS;
  494.     document.onmouseout  = muisNS;
  495. //    window.onresize      = opnieuwLaden;
  496. }
  497.  
  498. var inhoudVenster = null;
  499. function setInhoudPosition()
  500. {    if (Netscape && !dom1)
  501.     {   dx = window.screenX - PCAinterfaceX;
  502.         dy = window.screenY - PCAinterfaceY;
  503.         PCAinterfaceX = window.screenX;
  504.         PCAinterfaceY = window.screenY;
  505.         if (inhoudVenster != null && inhoudVenster.open) 
  506.         {    inhoudVenster.moveBy(dx, dy);
  507.         }
  508.     }
  509. }
  510.  
  511. // detectie van browsermovement om inhoudsopgave te positioneren
  512. // IE (kent onmove niet), Netscape 6 kent geen van beide
  513. if (Netscape && !dom1)
  514. {    window.onmove           = setInhoudPosition; }
  515. else if (isIE)
  516. {    top.document.onmouseout = setInhoudPosition; }
  517.  
  518.  
  519. function load()
  520. {    focus();
  521. }    window.onload = load;
  522.  
  523.  
  524.  
  525. // functies van de HandsOn's. Deze komen uit /intface/pca/handson.js, maar
  526. // IE6 vindt de functie dan te laat (?) wat een error genereert op pag0 van
  527. // de HandsOns.
  528. function Ga(nummer)
  529. {   parent.menu.HuidigePagina = nummer;
  530.     self.location.href = "pag" + nummer + ".htm";
  531.     parent.overzicht.document.bladeren.location.selectedIndex = nummer;
  532.     parent.menu.SetKnoppen();
  533. }
  534.  
  535. function setStyle(obj, actie)
  536. {    if (actie == 'over')
  537.     {    obj.style.backgroundColor = '#ffffee';
  538.         obj.style.border          = '1 groove #CCCCCC';
  539.     }
  540.     else
  541.     {    obj.style.backgroundColor = '#ffffff';
  542.         obj.style.border          = '1 solid #ffffff';
  543.     }
  544. }
  545.