suzanne.soy/2011-m1s2-ter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout des boutons de relations dans le .jss .

Browse Source
This commit is contained in:
Georges Dupéron 2011-04-05 18:38:58 +02:00
parent 8155b58d5c
commit d07d3b03c9
2 changed files with 66 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
code/html5/index.html
View File

@ -6,9 +6,6 @@
<style>
body {
background-color: black;
padding: 0;
margin: 0;
text-align: left;
}
#screen {
@ -17,63 +14,36 @@ body {
}
#mc-caption {
position: absolute;
text-align: center;
color: #8b4;
}
#mn-caption {
position: absolute;
text-align: center;
color: #4a4;
}
#mc-caption-block {
position: absolute;
}
#mn-caption-block {
position: absolute;
border-top: medium solid #44AA44;
border-bottom: medium solid #44AA44;
background-color: #F0F8D0;
}
</style>
<!--
/*.relations {
width: 100%;
}*/
.relations div {
background-color: #F0F8D0;
border: thin solid #44AA44;
-moz-border-radius: 10px;
/* margin: 10px;
height: 72px; */
background-repeat: no-repeat;
/* padding: 10px; */
}
.relations div:nth-child(odd) {
text-align: right;
padding-left: 76px;
background-position: 2% center;
}
.relations div:nth-child(even) {
text-align: left;
padding-right: 76px;
background-position: 98% center;
}
.relations .rid-1 { background-image: url("img/rel/-1.png"); }
.relations .rid0 { background-image: url("img/rel/0.png"); }
.relations .rid5 { background-image: url("img/rel/5.png"); }
.relations .rid7 { background-image: url("img/rel/7.png"); }
.relations .rid9 { background-image: url("img/rel/9.png"); }
.relations .rid10 { background-image: url("img/rel/10.png"); } */
</style>-->
.relations .rid0 { background-image: url("img/rel/0.png"); }
.relations .rid5 { background-image: url("img/rel/5.png"); }
.relations .rid7 { background-image: url("img/rel/7.png"); }
.relations .rid9 { background-image: url("img/rel/9.png"); }
.relations .rid10 { background-image: url("img/rel/10.png"); }
.relations .hot {
background-color: yellow;
}
</style>
<script src="jquery-1.5.1.min.js"></script>
<script src="jquery-ui-1.8.11.custom.min.js"></script>
<script src="pticlic.js"></script>
@ -85,7 +55,7 @@ body {
<div id="mn-caption-block"></div>
<div id="mc-caption" class="mc"></div>
<div id="mn-caption" class="mn"></div>
<!--<div class="relations"></div>-->
<div class="relations"></div>
</div>
</body>
</html>

60
code/html5/pticlic.js
View File

@ -1,31 +1,78 @@
function jss() {
var w=480, h=800;
var mch = h/8, mnh = h*0.075;
$("body")
.css({
padding: 0,
margin: 0,
textAlign: "left"
});
$("#screen")
.width(w)
.height(h)
.position({my:"center center", at:"center center", of:"body", collision:"none"});
$("#mc-caption-block")
.css({
position: "absolute"
})
.width(w)
.height(mch)
.position({my:"center top", at:"center top", of:"#screen", collision:"none"});
$("#mc-caption")
.css({
maxWidth: w*0.9,
textAlign: "center",
position: "absolute"
})
.fitFont(w*0.9, mch*0.9, 20)
.css("max-width", w*0.9)
.position({my:"center center", at:"center center", of:"#mc-caption-block", collision:"none"});
$("#mn-caption-block")
.css({
borderWidth: h/100,
position: "absolute"
})
.width(w)
.height(mnh)
.css("border-width", h/100)
.position({my:"center top", at:"center bottom", of:"#mc-caption-block", collision:"none"});
$("#mn-caption")
.css({
maxWidth: w*0.9,
textAlign: "center",
position: "absolute"
})
.fitFont(w*0.9, mnh*0.9, 20)
.css("max-width", w*0.9)
.position({my:"center center", at:"center center", of:"#mn-caption-block", collision:"none"});
$(".relations > div")
.css({
margin: 10,
height: 72,
padding: 10,
});
$("#screen")
.position({my:"center center", at:"center center", of:"body", collision:"none"});
// TODO : fitFont pour ".relations div"
$(".relations > div:nth-child(odd)")
.css({
backgroundPosition: "2% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
textAlign: "right",
paddingLeft: 76
});
$(".relations > div:nth-child(even)")
.css({
backgroundPosition: "98% center", // TODO : virer le pourcentage, et séparer l'icône dans un nouvel élément.
textAlign: "left",
paddingRight: 76
});
$(".relations")
.position({my:"center bottom", at:"center bottom", of:"#screen", offset:"0 -10", collision:"none"});
}
@ -53,11 +100,14 @@ $(function () {
.addClass("rid"+cat.id)
.click(function() {
answers[currentWordNb++] = cat.id;
$(this).addClass("hot")//.delay(500).removeClass("hot"); // TODO: just blink.
refresh();
})
.appendTo(".relations");
});
$(window).resize(jss);
refresh();
refresh(); // TODO : fix the bug with the margin on ".relation > div"
});
});