YOUTUBEに上がっている動画を共有で貼り付けることができます。

関連動画がうざいときは上記のチェック項目を入れると非表示にできます。

普通に動画を張るときはいいのですが、jqueryのlityを使用してモーダルウィンドウで表示させたいって時もあります。

Jquery lity

http://sorgalla.com/lity/

制作者はJan SorgallaさんでLicensed MITで提供されています。

簡単に実装でき便利なんですが、ひとつつまずいたところで、lityに関連動画非表示のパラメータ「?rel=0」をつけても関連動画が表示されてしまうのです。

そこで若干、パラメータを足させていただきました。

'https://www.youtube' + (matches[2] || '') + '.com/embed/' + matches[4],
$.extend({
rel:0,autoplay:1
},

上記の箇所のautoplay:1の前にrel:0,を追加しました。

サンプルはこちら

autoplayやrelを追加できるのでloopも追加できると思います。

Jquery

$(function() {
	$('.overbtn').click(function() {
		$(".overlay").fadeToggle();
		});
	$('.overlay').click(function() {
		$(".overlay").fadeToggle();
		});
});

CSS

.overlay {
	position: fixed;
	top: 0;
	z-index: 3;
	display: none;
	width: 96%;
	padding: 2%;
	height: 100vh;
	background-color: rgba(0,0,0,10.8);
}

HTML

<div class="overlay"></div>
<button class="overbtn">PUSH</button>

サンプル

Javascript&CSS

初期設定のCSSを作っておきます。

<link id="setcss" type="text/css" rel="stylesheet" href="css/default.css" />

切替のJSも読み込み

<script type="text/javascript" src="setcss.js"></script>

その読み込むJS

function setcss()
{
var csskey = Number(localStorage.getItem("csstemp"));

switch (csskey){
  case 1:
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
    break;
  case 2:
var style = '<link rel="stylesheet" href="css/change.css">';
    $('head link:last').after(style);
    break;
}
}
function cssswitch()
{
document.getElementById('horizon').onclick = function(){
localStorage.setItem("csstemp" , 1);	
var csskey = localStorage.getItem("csstemp");
if(csskey==1){
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
	}
	else 
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
		
		
	}

document.getElementById('vertical').onclick = function(){
localStorage.setItem("csstemp" , 2);
var csskey = localStorage.getItem("csstemp");

if(csskey==2){
var style = '<link rel="stylesheet" href="css/change.css">';
    $('head link:last').after(style);
	}
	else 
var style = '<link rel="stylesheet" href="css/default.css">';
    $('head link:last').after(style);
	}
}

jquery読み込みで。

<script type="text/javascript">
$(function(){
document.ready=function() {
setcss();
};
cssswitch();
});
</script>

HTML

<table>
		<tr>
				<td><button id="horizon">button</button></td>
				<td><button id="vertical">button</button></td>
		</tr>
</table>

<div class="list-area">
		<div class="list-left">画像など</div>
		<div class="list-right">
				<p>タイトル</p>
				<p>項目1</p>
				<p>項目2</p>
				<p>項目3</p>
		</div>
		<br class="clear" />
</div>
<div class="list-area">
		<div class="list-left">画像など</div>
		<div class="list-right">
				<p>タイトル</p>
				<p>項目1</p>
				<p>項目2</p>
				<p>項目3</p>
		</div>
		<br class="clear" />
</div>

EFO（Entry Form Optimization） すなわちメールフォーム最適化。

MFOだったかEMOだったか覚えられないことがたびたびあります・・。

説明はLIG先生にゆずり・・・

入力してくれる時に吹き出しがでると楽しいですよね！！（？） 真面目なフォームだけじゃつまらない！

ということで吹き出しがでるうざいメールフォームを制作してみました。

吹き出しっぽいものがでるメールフォーム　サンプル

Jquery

$(document).ready(function(){
    $(".formcheck div").hide();
  });

$(function() {
	$("#a").focus(function(){
	if($("#a").val() == ""){
         $("#fa").fadeIn("slow");
				}
    })
    .blur(function(){
         $("#fa").hide();
    })
  });
～～以下くりかえし～～

CSS

.formcheck input{
	display:block;
	margin-bottom:10px;
}

.formcheck label{
	padding: 5px;
	border-radius:5px;
	background-color: #F99;
	font-size: 11px;
	margin:0px;
}

.formcheck div{position: absolute;}

HTML

<div><form class="formcheck"><input id="a" type="text" value="" /> 
<div id="fa"><label>入力してね</label></div> 
</form></div>

アコーディオン型リスト サンプル

ういーんって開くヤツにしてよとか頼まれたり、ブログの項目が増えてくるとやりたくなる時ってあるあるですよね。
スマートフォンサイト全盛のいまならなおさら。

いつのころからかアコーディオン型リストと呼んでいます。

プログラムは人によっていろいろなやり方があると思いますが、できるだけシンプルなのをメモメモ。

jquery読み込み呼び出しで隠してから、.slideToggleを使ってみてます。 普通の.toggleも以前は使われていましたが、jQuery 1.9にて削除されてしまったようです。

他にもトグル系イベントとしては.slideToggleのほかに.fadeToggle、toggleClassもあります。

Jquery

  $(document).ready(function(){
    $(".list").hide();
    $("h3").click(function () {
      $(".list").slideToggle();
    });
  });

※もちろんJqueryが必要です。呼んでください。

HTML

<div class="slidetoggle">
<h3>アコーディオン</h3>
<ul class="list">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>

ついでにリストのシマシマCSS

.list li:nth-child(even) {background-color:#ddd;}
.list li:nth-child(odd) {background-color:#eee;}

$(function() {
$('input').change(function(){
var txt  = $(this).val();
var han = txt.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
$(this).val(han);
});
});

フォームを作成時全角だと都合が悪いときによく使うのでメモ。
.changeでほかにもいろいろとできそうです。

SAMPLE