Skip to content

Instantly share code, notes, and snippets.

View mahiya's full-sized avatar

Masayuki Hiyama mahiya

12 followers · 4 following
  • Microsoft
  • Tokyo
View GitHub Profile
@mahiya
mahiya / fadeInWithCSS3.html
Last active August 29, 2015 14:07
jQueryに頼らないでWindowsストアライクなエレメント表示方法を実現する
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.item {
width: 100px;
height: 100px;
background-color: blue;
@mahiya
mahiya / horizontallayout.html
Last active August 29, 2015 14:08
横スクロールレイアウト
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
box-sizing: border-box;
}
@mahiya
mahiya / scrollbarcustomizeatwebkit.css
Last active August 29, 2015 14:08
WebKitでのスクロールバーのカスタマイズ
body {
width: 3000px;
}
body::-webkit-scrollbar {
/*background-color: red;*/
background-color: transparent;
}
body::-webkit-scrollbar-button {
@mahiya
mahiya / connectWithInlineSVG.html
Last active August 29, 2015 14:08
要素間をInlineSVGで接続する
<!DOCTYPE html>
<html>
<head>
<style>
html, body, svg{
height: 100%;
width: 100%;
}
.element {
position: absolute;
@mahiya
mahiya / LocalCache.js
Last active August 29, 2015 14:08
SessionStorageによるローカルキャッシュ
var localCache = {
get: function(key, getMethod, cacheMs) {
if(!cacheMs) cacheMs = this._defaultCacheMs;
var cache = sessionStorage.getItem(key);
if(cache == null) {
return this._setAndGet(key, getMethod, cacheMs);
}
var data = JSON.parse(cache);
@mahiya
mahiya / SimpleModalPlugin.html
Created November 2, 2014 16:14
シンプルにモーダル表示をするためのjQueryプラグインのサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"></meta>
<style>
.modal-base {
display: none;
position: absolute;
opacity: 0;
top: 0;
@mahiya
mahiya / ogp.html
Created November 3, 2014 06:33
OGP(Open Graph Protocol)の設定サンプル
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta property="og:title" content="ー" />
<meta property="og:description" content="" />
<meta property="og:url" content="http://***" />
<meta property="og:type" content="website" />
<meta property="og:image" content="***.png" />
<meta property="og:site_name" content="" />
@mahiya
mahiya / SplashExtention.js
Last active August 29, 2015 14:08
スプラッシュ画像を表示するjQueryプラグイン
// jqueryとjquery-easingが必要
$.extend({
splash : function(imageUrl) {
var splashBack = $('<div id="splash-extention-back" style="background-color:#000;opacity:0;position:absolute;top:0;left:0;z-index:10000;"/></div>');
splashBack.width($(document).width());
splashBack.height($(document).height());
var splash = $('<div id="splash-extention" style="opacity:0;position:absolute;top:50%;left:50%;z-index:10001; height:' + SplashExtention.ImageHeight +';"/></div>');
var img = $('<img src="' + imageUrl + '" style="height: 100%;" />');
splash.append(img);
@mahiya
mahiya / ModalExtentionPt2.js
Created November 8, 2014 07:09
ModalExtentionバージョン2
$.extend({
modal : function(title, message, okCallback, options) {
var modalBack = $('<div style="background-color:#000;opacity:0;position:absolute;top:0;left:0;z-index:10000;"/></div>');
modalBack.width($(document).width());
modalBack.height($(document).height());
modalBack.click(function() {
ModalExtention.Hide(modal, modalBack);
});
var modalClass = options.modalClass == null ? "" : options.modalClass;
@mahiya
mahiya / MaxHeight.js
Created November 8, 2014 12:54
MaxHeight.js
$.extend({
maxHeight: function() {
$(".maxheight").height($(document).height());
},
maxWidth: function() {
$(".maxwidth").width($(document).width());
},
});