Enkel popup

Hva

I dette eksempelet ønsker vi å lage sider med små gule lapper som "popper" opp eller ekspanderer ved mousedown og forsvinner ved mouseup. Jeg har valgt en liten sjekkliste med direkte tilgjengelig fasit som eksempel.

Løsningen bruker JSON til å lagre spørsmål og svar, og koden involverer absolutt posisjonering og enkel CSS.

Her er løsnngen inkludert som en iFrame for å forenkle koden. Du kan også åpne den i et eget vindu for å se nærmere på koden:
demo.html https://borres.hiof.no/wep/js/ex/popsimple/demo.html

Oppgavene er lagret slik:

var tasks=[
{
    "Q":"I JavaScript kan vi skrive <em>minArray.slice(1,3)</em>",
    "A":"<b>Sant</b><br>slice kan brukes til å manipulere innholdet i en array."
 },
{
    "Q":"2 + 3*3 =  11",
    "A":"<b>Sant</b>.<br> Dersom vi går ut fra at multiplikasjon har høyere prioritet"
 },
{
    "Q":"<em>editable</em> er en lovlig attributt i HTML5-elementer",
    "A":"<b>Usant</b>.<br> men <em>contenteditable</em> finnes."
},
{
    "Q":"AJAX er en forkortelse for All Jason Access.",
    "A":"<b>Usant</b><br>Det står for: Asynchronous JavaScript and XML"
}
]

Koden som befolker siden og handterer museaksjoner er slik:

function start()
{
    // fill array with tasks
    var content='<table class="qtab">';
    for(var ix=0;ix < tasks.length;ix++){
        content+='<tr><td>'+tasks[ix].Q+'</td>'+
                 '<td class="popper" id="q'+ix+'"><img src="fasit.gif"> </td>'+
                 '</tr>'        
    }
    content+="</table>";    
    document.getElementById("tasklist").innerHTML=content;
    
    // add listeners to all poptriggers
    poppers=document.getElementsByClassName('popper');
    for(var ix=0; ix<poppers.length;ix++){
        poppers[ix].onmousedown=popUp;
    }
    // pick up mouse up whereever
    document.onmouseup=popDown;
}
// popping
function popUp(e) 
{
    // which event
    if (!e) var e = window.event;
    
    // where was the mouseclick
    var posx = e.clientX+document.body.scrollLeft
            + document.documentElement.scrollLeft;
    var posy = e.clientY+document.body.scrollTop
            + document.documentElement.scrollTop;
    
    // which was the element
    var targetElt;
    if (e.target) targetElt = e.target;
    else if (e.srcElement) targetElt = e.srcElement;
    // fill the answer element with appropriate answer
    theAnswer=document.getElementById('A');
    theAnswer.className="popstyle";
       // the id of the question
       questid=targetElt.parentNode.getAttribute("id");
       questix=parseInt(questid.substring(1,questid.length));
       if(questix>=0 && questix<tasks.length)
           theAnswer.innerHTML=tasks[questix].A;
       else
         theAnswer.innerHTML="Ukjent svar";
       
       // position the answer element
       theAnswer.style.position='absolute';
       theAnswer.style.left=''+posx+'px';
       theAnswer.style.top=''+posy+'px';
    
}
// remove pop
function popDown()
{
    // get the answer element, whereever it is
    theAnswer=document.getElementById('A');
    theAnswer.className="hiddenpopstyle";
}

HTML-siden:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
  <title>Pops</title>
  
  <script language="javascript" type="text/javascript" src="problems.json"> </script>
  <script language="javascript" type="text/javascript" src="postit.js"> </script>
  
  <style>
  .hiddenpopstyle{display:none}
  .popstyle{background-color:yellow;border-style:solid;
            border-width:1px;border-color:gray;display:block}
  table.qtab td {padding:10px}
  </style>
</head>

<body bgcolor="#ffffff" onload="start()">
<h1>Utsagn</h1>
<hr/>
<p>Klikk på fasitlappen for å sjekke utsagnet.</p>
<div id="tasklist">
</div>

<!-- the placeholder for answers -->
<div id="A" class="hiddenpopstyle"/>
</body>
</html>