}\r
#log {\r
position : absolute;\r
- top : 0;\r
- left : 0;\r
+ top : 0%;\r
+ left : 0%;\r
width : 240px;\r
height : 100%;\r
font-size : 12px;\r
overflow : auto;\r
}\r
#toggle {\r
- position : absolute;\r
- top : 0;\r
- left : 0;\r
- width : 1em;\r
- height : 1em;\r
- background : #00f;\r
- color : #fff;\r
- text-align : center;\r
- font-weight: bold;\r
- z-index : 999;\r
- cursor : pointer;\r
+ font-size : 1.5em;\r
+ font-family : Arial;\r
+ position : absolute;\r
+ top : 0;\r
+ left : 0;\r
+ width : 1em;\r
+ height : 1em;\r
+ line-height : 1;\r
+ color : #00f;\r
+ text-align : center;\r
+ font-weight : bold;\r
+ z-index : 999;\r
+ cursor : pointer;\r
}\r
.toggle_close #log,\r
.toggle_none #toggle {\r
.toggle_none iframe {\r
margin-left : 240px;\r
}\r
+ \r
+/*--------------------------------------------------------------------------------------\r
+ * slide & zoom\r
+ */\r
+ .toggle_open_anime #log,\r
+ .toggle_close_anime #log {\r
+ /* http://blog.webcreativepark.net/2012/10/19-161432.html */\r
+ -webkit-backface-visibility : hidden;\r
+ -moz-backface-visibility : hidden;\r
+ backface-visibility : hidden;\r
+ \r
+ transform : translateZ(0);\r
+ \r
+ transition-property : opacity, left, transform;\r
+ -o-transition-property : opacity, left, transform;\r
+ -ms-transition-property : opacity, left, transform;\r
+ -moz-transition-property : opacity, left, transform;\r
+ -webkit-transition-property : opacity, left, transform;\r
+ \r
+ transition-duration : 0.5s;\r
+ -o-transition-duration : 0.5s;\r
+ -ms-transition-duration : 0.5s;\r
+ -moz-transition-duration : 0.5s;\r
+ -webkit-transition-duration : 0.5s;\r
+ \r
+ transition-timing-function : ease-in-out;\r
+ -o-transition-timing-function : ease-in-out;\r
+ -ms-transition-timing-function : ease-in-out;\r
+ -moz-transition-timing-function : ease-in-out;\r
+ -webkit-transition-timing-function : ease-in-out;\r
+ \r
+ transition-delay : 0s;\r
+ -o-transition-delay : 0s;\r
+ -ms-transition-delay : 0s;\r
+ -moz-transition-delay : 0s;\r
+ -webkit-transition-delay : 0s;\r
+ }\r
+\r
+/* slideIn */\r
+ .toggle_open_anime #log,\r
+ .toggle_open #log,\r
+ .toggle_close_before #log {\r
+ opacity : 1; left : 0%;/* for iOS3 */\r
+ /*transform : translateX(0%);*/\r
+ }\r
+ \r
+/* slideOut */\r
+ .toggle_close_anime #log,\r
+ .toggle_close #log,\r
+ .toggle_open_before #log {\r
+ opacity : 0; left : -5%;/* for iOS3 */\r
+ /*transform : translateX(-5%);*/\r
+ }\r
</style>\r
\r
<script>\r
- var toggleOpen = true;\r
+ // css3 anime\r
+ // ff5+(-moz, 16+), ie10+, opera12+(-o, 12.5+), safari4+(-webkit, ?), iOS2+, Android2.1+\r
+ // http://lealog.hateblo.jp/entry/2013/03/06/234023\r
+ \r
+ // css3 transition\r
+ // ff4+(-moz, 16+), ie10+, opera11.6+(-o, 12.1+), safari3+(-webkit, ?), iOS(safari3.2+), Android2.1+\r
+ // css3 transform\r
+ // ff3.5+()\r
+\r
+ var EV_TRANS_END = (function(){\r
+ var style = document.createElement( 'div' ).style;\r
+ return document.documentMode <= 9 ? false : // ie9\r
+ style[ 'transform' ] !== void 0 ? 'transitionend' :\r
+ style[ 'OTransform' ] !== void 0 ? 'otransitionend' :\r
+ style[ 'msTransform' ] !== void 0 ? 'msTransitionEnd' : // 'MSTransitionEnd' :\r
+ style[ 'MozTransform' ] !== void 0 ? 'transitionend' :\r
+ style[ 'webkitTransform' ] !== void 0 ? 'webkitTransitionEnd' : false;\r
+ })(),\r
+ USE_ANIME = !!EV_TRANS_END,\r
+ LOG_WIDTH = 240,\r
+ hasEvent = false,\r
+ toggleOpen = true,\r
+ toggleBusy = false;\r
+ \r
function __resize(){\r
var body = document.body,\r
+ log = body.children[0],\r
ifr = body.children[1],\r
- viewW = document.all ? ( document.documentElement || body ).offsetWidth : window.innerWidth,\r
+ btn = body.children[2],\r
+ viewW = document.all ? ( document.documentElement || body ).offsetWidth || window.innerWidth /* for ie9 */ : window.innerWidth,\r
viewH = window.innerHeight;\r
if( 800 <= viewW ){\r
- body.className = 'toggle_none';\r
if( document.all ){\r
- ifr.style.width = viewW - 240 + 'px';\r
+ ifr.style.width = viewW - LOG_WIDTH + 'px';\r
} else {\r
- ifr.style.width = viewW - 240 + 'px';\r
+ ifr.style.width = viewW - LOG_WIDTH + 'px';\r
ifr.style.height = viewH + 'px'; // NetFront3.4\r
};\r
+ body.className = 'toggle_none';\r
} else {\r
- body.className = toggleOpen ? 'toggle_open' : 'toggle_close';\r
+ if( viewW < 240 ) log.style.width = viewW + 'px';\r
+ \r
if( document.all ){\r
ifr.style.width = viewW + 'px';\r
} else {\r
ifr.style.width = viewW + 'px';\r
ifr.style.height = viewH + 'px'; // NetFront3.4\r
};\r
+ if( USE_ANIME ){\r
+ toggleBusy = true;\r
+ body.className = toggleOpen ? 'toggle_open_before' : 'toggle_close_before';\r
+ setTimeout( __readyTrans, 16 );\r
+ } else {\r
+ body.className = toggleOpen ? 'toggle_open' : 'toggle_close';\r
+ };\r
+ };\r
+ btn.innerHTML = toggleOpen ? '►' : '▼';\r
+ };\r
+ function __readyTrans(){\r
+ var body = document.body,\r
+ log = body.children[0],\r
+ _class = body.className,\r
+ i = _class.indexOf( '_before' );\r
+ if( i !== -1 ){\r
+ log.addEventListener( EV_TRANS_END, __onTrans, true );\r
+ hasEvent = true;\r
+ body.className = _class.substr( 0, i ) + '_anime';\r
+ } else {\r
+ \r
+ };\r
+ };\r
+ function __onTrans(e){\r
+ console.log( e );\r
+ var body = document.body,\r
+ log = body.children[0],\r
+ _class = body.className,\r
+ i = _class.indexOf( '_anime' );\r
+ if( i !== -1 ){\r
+ log.removeEventListener( EV_TRANS_END, __onTrans, true );\r
+ body.className = _class.substr( 0, i );\r
+ toggleBusy = false;\r
+ } else {\r
+ \r
};\r
-\r
};\r
- function __ontoggle( elm ){\r
+ function __ontoggle(){\r
+ //if( toggleBusy ) return;\r
toggleOpen = !toggleOpen;\r
__resize();\r
- elm.innerHTML = toggleOpen ? '-' : '+';\r
};\r
</script>\r
+ <noscript>\r
+ <meta name="viewport" content="width=device-width,initial-scale=1">\r
+ </noscript>\r
</head>\r
-<body onload="__resize()" onresize="__resize()" scroll="no"><div id="log">-- console.log() --</div><iframe src="index.html" width="500" height="100%" scrolling="yes" frameborder="0"></iframe><div id="toggle" onclick="__ontoggle(this);">+</div></body>\r
+<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
</html>\r
<xmp class="cleanup-target" style="display:none"><plaintext style="display:none"><!-- plainetext は nds 用 -->
\ No newline at end of file
OSDN Git Service
