commit 7b5b6950c0e39a6588632ab05231977226bb6103
parent 597d7adba822dd1c4bb9a47bb7c501b380335f85
Author: Georges Dupéron <jahvascriptmaniac+github@free.fr>
Date: Thu, 31 Mar 2011 12:03:11 +0200
JavaScript Stylesheet :)
Diffstat:
4 files changed, 117 insertions(+), 36 deletions(-)
diff --git a/code/html5/index.html b/code/html5/index.html
@@ -8,47 +8,51 @@ body {
background-color: black;
padding: 0;
margin: 0;
- text-align: center;
+ text-align: left;
}
#screen {
background-color: white;
- display: inline-block;
- text-align: left;
- width: 480px;
- height: 800px;
background-color : #FFFFE0;
}
-.mc.caption {
- border-bottom: medium solid #44AA44;
+#mc-caption {
+ position: absolute;
text-align: center;
color: #8b4;
- font-size: 50px;
- padding: 10px 0;
}
-.mn.caption {
- border-bottom: medium solid #44AA44;
+#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;
- font-size: 30px;
- padding: 10px 0;
}
+ </style>
-.relations {
+<!--
+/*.relations {
width: 100%;
-}
+}*/
.relations div {
background-color: #F0F8D0;
border: thin solid #44AA44;
-moz-border-radius: 10px;
- margin: 10px;
- height: 72px;
+/* margin: 10px;
+ height: 72px; */
background-repeat: no-repeat;
- padding: 10px;
+/* padding: 10px; */
}
.relations div:nth-child(odd) {
@@ -68,17 +72,20 @@ body {
.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 .rid10 { background-image: url("img/rel/10.png"); } */
+ </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>
+ <script src="my-extensions.js"></script>
</head>
<body>
<div id="screen">
- <div class="mc caption"></div>
- <div class="mn caption"></div>
- <div class="relations"></div>
+ <div id="mc-caption-block"></div>
+ <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>
</body>
</html>
diff --git a/code/html5/jquery-ui-1.8.11.custom.min.js b/code/html5/jquery-ui-1.8.11.custom.min.js
@@ -0,0 +1,17 @@
+/*
+ * jQuery UI Position 1.8.11
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Position
+ */
+(function(c){c.ui=c.ui||{};var n=/left|center|right/,o=/top|center|bottom/,t=c.fn.position,u=c.fn.offset;c.fn.position=function(b){if(!b||!b.of)return t.apply(this,arguments);b=c.extend({},b);var a=c(b.of),d=a[0],g=(b.collision||"flip").split(" "),e=b.offset?b.offset.split(" "):[0,0],h,k,j;if(d.nodeType===9){h=a.width();k=a.height();j={top:0,left:0}}else if(d.setTimeout){h=a.width();k=a.height();j={top:a.scrollTop(),left:a.scrollLeft()}}else if(d.preventDefault){b.at="left top";h=k=0;j={top:b.of.pageY,
+left:b.of.pageX}}else{h=a.outerWidth();k=a.outerHeight();j=a.offset()}c.each(["my","at"],function(){var f=(b[this]||"").split(" ");if(f.length===1)f=n.test(f[0])?f.concat(["center"]):o.test(f[0])?["center"].concat(f):["center","center"];f[0]=n.test(f[0])?f[0]:"center";f[1]=o.test(f[1])?f[1]:"center";b[this]=f});if(g.length===1)g[1]=g[0];e[0]=parseInt(e[0],10)||0;if(e.length===1)e[1]=e[0];e[1]=parseInt(e[1],10)||0;if(b.at[0]==="right")j.left+=h;else if(b.at[0]==="center")j.left+=h/2;if(b.at[1]==="bottom")j.top+=
+k;else if(b.at[1]==="center")j.top+=k/2;j.left+=e[0];j.top+=e[1];return this.each(function(){var f=c(this),l=f.outerWidth(),m=f.outerHeight(),p=parseInt(c.curCSS(this,"marginLeft",true))||0,q=parseInt(c.curCSS(this,"marginTop",true))||0,v=l+p+(parseInt(c.curCSS(this,"marginRight",true))||0),w=m+q+(parseInt(c.curCSS(this,"marginBottom",true))||0),i=c.extend({},j),r;if(b.my[0]==="right")i.left-=l;else if(b.my[0]==="center")i.left-=l/2;if(b.my[1]==="bottom")i.top-=m;else if(b.my[1]==="center")i.top-=
+m/2;i.left=Math.round(i.left);i.top=Math.round(i.top);r={left:i.left-p,top:i.top-q};c.each(["left","top"],function(s,x){c.ui.position[g[s]]&&c.ui.position[g[s]][x](i,{targetWidth:h,targetHeight:k,elemWidth:l,elemHeight:m,collisionPosition:r,collisionWidth:v,collisionHeight:w,offset:e,my:b.my,at:b.at})});c.fn.bgiframe&&f.bgiframe();f.offset(c.extend(i,{using:b.using}))})};c.ui.position={fit:{left:function(b,a){var d=c(window);d=a.collisionPosition.left+a.collisionWidth-d.width()-d.scrollLeft();b.left=
+d>0?b.left-d:Math.max(b.left-a.collisionPosition.left,b.left)},top:function(b,a){var d=c(window);d=a.collisionPosition.top+a.collisionHeight-d.height()-d.scrollTop();b.top=d>0?b.top-d:Math.max(b.top-a.collisionPosition.top,b.top)}},flip:{left:function(b,a){if(a.at[0]!=="center"){var d=c(window);d=a.collisionPosition.left+a.collisionWidth-d.width()-d.scrollLeft();var g=a.my[0]==="left"?-a.elemWidth:a.my[0]==="right"?a.elemWidth:0,e=a.at[0]==="left"?a.targetWidth:-a.targetWidth,h=-2*a.offset[0];b.left+=
+a.collisionPosition.left<0?g+e+h:d>0?g+e+h:0}},top:function(b,a){if(a.at[1]!=="center"){var d=c(window);d=a.collisionPosition.top+a.collisionHeight-d.height()-d.scrollTop();var g=a.my[1]==="top"?-a.elemHeight:a.my[1]==="bottom"?a.elemHeight:0,e=a.at[1]==="top"?a.targetHeight:-a.targetHeight,h=-2*a.offset[1];b.top+=a.collisionPosition.top<0?g+e+h:d>0?g+e+h:0}}}};if(!c.offset.setOffset){c.offset.setOffset=function(b,a){if(/static/.test(c.curCSS(b,"position")))b.style.position="relative";var d=c(b),
+g=d.offset(),e=parseInt(c.curCSS(b,"top",true),10)||0,h=parseInt(c.curCSS(b,"left",true),10)||0;g={top:a.top-g.top+e,left:a.left-g.left+h};"using"in a?a.using.call(b,g):d.css(g)};c.fn.offset=function(b){var a=this[0];if(!a||!a.ownerDocument)return null;if(b)return this.each(function(){c.offset.setOffset(this,b)});return u.call(this)}}})(jQuery);
+;
+\ No newline at end of file
diff --git a/code/html5/my-extensions.js b/code/html5/my-extensions.js
@@ -0,0 +1,35 @@
+$.fn.fitFont = function(w, h, minFont, maxFont) {
+ minFont = minFont || 0;
+ maxFont = maxFont || Infinity;
+ e = $(this)
+ var oldpos = e.css("position");
+ e.css("position", "absolute");
+ var size = parseInt(e.css("font-size"), 10);
+
+ var i = 0;
+ while ((e.width() < w || e.height() < h) && ++i < 10) {
+ size *= 2;
+ e.css("font-size", size);
+ }
+
+ var max = size;
+ var min = 0;
+ i=0;
+ while (min < max && ++i < 10) {
+ size = (max + min) / 2;
+ e.css("font-size", size);
+ if (e.width() < w && e.height() < h) {
+ min = size;
+ } else {
+ max = size;
+ }
+ }
+
+ if (e.width() > w || e.height() > h) --size;
+ if (size < minFont) size = minFont;
+ if (size > maxFont) size = maxFont;
+ e.css("font-size", size);
+
+ e.css("position", oldpos);
+ return e;
+}
diff --git a/code/html5/pticlic.js b/code/html5/pticlic.js
@@ -1,16 +1,36 @@
-$(function () {
-/* window.setTimeout(function() {
- var w=480;
- var h=800;
- var a=[]; $("#screen").find("*").add("#screen").each(function(i,e){ a.push({
- e:$(e),
- w:$(e).width()*w/480,
- h:$(e).height()*h/800});
- });
- $.each(a,function(i,a){ a.e.width(a.w); a.e.height(a.h); });
-}, 1000); */
+function jss() {
+ var w=480, h=800;
+ var mch = h/8, mnh = h*0.075;
+ $("#screen")
+ .width(w)
+ .height(h)
- var url = "tmp.json"
+ $("#mc-caption-block")
+ .width(w)
+ .height(mch)
+ .position({my:"center top", at:"center top", of:"#screen", collision:"none"});
+ $("#mc-caption")
+ .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")
+ .width(w)
+ .height(mnh)
+ .css("border-width", h/100)
+ .position({my:"center top", at:"center bottom", of:"#mc-caption-block", collision:"none"});
+ $("#mn-caption")
+ .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"});
+
+ $("#screen")
+ .position({my:"center center", at:"center center", of:"body", collision:"none"});
+}
+
+
+$(function () {
+ var url = "tmp.json";
$.getJSON(url, function(data) {
var game = data[0];
var currentWordNb = 0;
@@ -24,6 +44,7 @@ $(function () {
$(".relations").empty();
alert("Partie terminée !");
}
+ jss();
}
$.each(game.cat, function(i, cat) {
