4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
\r
6 <title>Logger</title>
\r
8 <meta name="HandheldFriendly" content="true">
\r
9 <meta name="mobileoptimized" content="0">
\r
11 <!-- for ie & chrome frame -->
\r
12 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
\r
13 <meta http-equiv="imagetoolbar" content="no">
\r
15 <!-- for smartphone -->
\r
16 <meta name="format-detection" content="telephone=no">
\r
17 <meta name="apple-mobile-web-app-capable">
\r
19 <!-- maximum-scale=1 初代iPod touch で必要, dynamic-viewport は operaで可能 -->
\r
20 <meta name="viewport" id="dynamic-viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1,user-scalable=0,maximum-scale=1">
\r
39 position : absolute;
\r
52 font-family : Arial;
\r
53 position : absolute;
\r
60 text-align : center;
\r
66 .toggle_none #toggle {
\r
69 .toggle_none iframe {
\r
70 margin-left : 240px;
\r
73 /*--------------------------------------------------------------------------------------
\r
76 .toggle_open_anime #log,
\r
77 .toggle_close_anime #log {
\r
78 /* http://blog.webcreativepark.net/2012/10/19-161432.html */
\r
79 -webkit-backface-visibility : hidden;
\r
80 -moz-backface-visibility : hidden;
\r
81 backface-visibility : hidden;
\r
83 transform : translateZ(0);
\r
85 transition-property : opacity, left, transform;
\r
86 -o-transition-property : opacity, left, transform;
\r
87 -ms-transition-property : opacity, left, transform;
\r
88 -moz-transition-property : opacity, left, transform;
\r
89 -webkit-transition-property : opacity, left, transform;
\r
91 transition-duration : 0.5s;
\r
92 -o-transition-duration : 0.5s;
\r
93 -ms-transition-duration : 0.5s;
\r
94 -moz-transition-duration : 0.5s;
\r
95 -webkit-transition-duration : 0.5s;
\r
97 transition-timing-function : ease-in-out;
\r
98 -o-transition-timing-function : ease-in-out;
\r
99 -ms-transition-timing-function : ease-in-out;
\r
100 -moz-transition-timing-function : ease-in-out;
\r
101 -webkit-transition-timing-function : ease-in-out;
\r
103 transition-delay : 0s;
\r
104 -o-transition-delay : 0s;
\r
105 -ms-transition-delay : 0s;
\r
106 -moz-transition-delay : 0s;
\r
107 -webkit-transition-delay : 0s;
\r
111 .toggle_open_anime #log,
\r
113 .toggle_close_before #log {
\r
114 opacity : 1; left : 0%;/* for iOS3 */
\r
115 /*transform : translateX(0%);*/
\r
119 .toggle_close_anime #log,
\r
120 .toggle_close #log,
\r
121 .toggle_open_before #log {
\r
122 opacity : 0; left : -5%;/* for iOS3 */
\r
123 /*transform : translateX(-5%);*/
\r
129 // ff5+(-moz, 16+), ie10+, opera12+(-o, 12.5+), safari4+(-webkit, ?), iOS2+, Android2.1+
\r
130 // http://lealog.hateblo.jp/entry/2013/03/06/234023
\r
133 // ff4+(-moz, 16+), ie10+, opera11.6+(-o, 12.1+), safari3+(-webkit, ?), iOS(safari3.2+), Android2.1+
\r
137 var EV_TRANS_END = (function(){
\r
138 var style = document.createElement( 'div' ).style;
\r
139 return document.documentMode <= 9 ? false : // ie9
\r
140 style[ 'transform' ] !== void 0 ? 'transitionend' :
\r
141 style[ 'OTransform' ] !== void 0 ? 'otransitionend' :
\r
142 style[ 'msTransform' ] !== void 0 ? 'msTransitionEnd' : // 'MSTransitionEnd' :
\r
143 style[ 'MozTransform' ] !== void 0 ? 'transitionend' :
\r
144 style[ 'webkitTransform' ] !== void 0 ? 'webkitTransitionEnd' : false;
\r
146 USE_ANIME = !!EV_TRANS_END,
\r
150 toggleBusy = false;
\r
152 function __resize(){
\r
153 var body = document.body,
\r
154 log = body.children[0],
\r
155 ifr = body.children[1],
\r
156 btn = body.children[2],
\r
157 viewW = document.all ? ( document.documentElement || body ).offsetWidth || window.innerWidth /* for ie9 */ : window.innerWidth,
\r
158 viewH = window.innerHeight;
\r
159 if( 800 <= viewW ){
\r
160 if( document.all ){
\r
161 ifr.style.width = viewW - LOG_WIDTH + 'px';
\r
163 ifr.style.width = viewW - LOG_WIDTH + 'px';
\r
164 ifr.style.height = viewH + 'px'; // NetFront3.4
\r
166 body.className = 'toggle_none';
\r
168 if( viewW < 240 ) log.style.width = viewW + 'px';
\r
170 if( document.all ){
\r
171 ifr.style.width = viewW + 'px';
\r
173 ifr.style.width = viewW + 'px';
\r
174 ifr.style.height = viewH + 'px'; // NetFront3.4
\r
178 body.className = toggleOpen ? 'toggle_open_before' : 'toggle_close_before';
\r
179 setTimeout( __readyTrans, 16 );
\r
181 body.className = toggleOpen ? 'toggle_open' : 'toggle_close';
\r
184 btn.innerHTML = toggleOpen ? '►' : '▼';
\r
186 function __readyTrans(){
\r
187 var body = document.body,
\r
188 log = body.children[0],
\r
189 _class = body.className,
\r
190 i = _class.indexOf( '_before' );
\r
192 log.addEventListener( EV_TRANS_END, __onTrans, true );
\r
194 body.className = _class.substr( 0, i ) + '_anime';
\r
199 function __onTrans(e){
\r
201 var body = document.body,
\r
202 log = body.children[0],
\r
203 _class = body.className,
\r
204 i = _class.indexOf( '_anime' );
\r
206 log.removeEventListener( EV_TRANS_END, __onTrans, true );
\r
207 body.className = _class.substr( 0, i );
\r
208 toggleBusy = false;
\r
213 function __ontoggle(){
\r
214 //if( toggleBusy ) return;
\r
215 toggleOpen = !toggleOpen;
\r
220 <meta name="viewport" content="width=device-width,initial-scale=1">
\r
223 <body onload="__resize()" onresize="__resize()" scroll="no"><div id="log">-- console.log() --</div><iframe src="mini.html" width="500" height="100%" scrolling="yes" frameborder="0"></iframe><div id="toggle" onclick="__ontoggle();"></div></body>
\r
225 <xmp class="cleanup-target" style="display:none"><plaintext style="display:none"><!-- plainetext は nds 用 -->