Klikk på en av grønne tekstene eller blå boksene,
og klikk en gang til for å fjerne markeringen. Markeringene skal overleve scroll, rezise og toggling av menyen til venstre
Jeg har 5 barn med forskjellig plassering
Jeg har negativ margin
Jeg er relativ
Jeg er absolute
Jeg er fixed (sorry)
Jeg bare er her
Vi er i en flex-box
alle
fire
Jeg bruker navnene markable og marked i klasselista til de markerbare elementene.
Denne gangen er marked en definert klasse.
Javascriptet
// establish list of marakable elements and plant events
function setUp(){
var tList=document.querySelectorAll(".markable");
for(var i=0;i<tList.length;i++){
tList[i].addEventListener("click", toggleMarkerElt,false);
}
}
//mark/unmark
function toggleMarkerElt(e){
e.stopPropagation();
e.target.classList.toggle("marked");
}
Stilsettet
/* the yellow box with the 5 children*/
.yellowbox{background-color:yellow;
border-style:solid;border-width:thin;color:green;
font-weight:bold;margin-left:70px;width:120px;
}
.box0,.box1,.box2,.box3,.box4{width:50px}
.box1{margin-left:-45px}
.box2{position:relative;left:150px; top:0px;}
.box3{position:absolute;left:350px; top:400px;}
.box4{position:fixed;left:400px; top:500px; }
/* the flexcontainer */
.container{
display: flex;
display: -webkit-flex;
flex-flow: row;
-webkit-flex-flow: row;
justify-content: space-around;
-webkit-justify-content: space-around;
min-height: 50px;
margin-top:30px;
}
.container > div{border-style:solid;border-width:thin; border-color:blue;padding:7px}
.marked{background-image:url('marker.png'); background-repeat: no-repeat;}
