jQuery JavaScript 個人的な技術メモ
sitelist
$(document).on('click', 'button.checkPage', function() {
...
});
jQuery
- jQueryのプラグインを探す時に便利なサイトのまとめ
スクロールで要素が現れたらイベント
$(window).scroll(function() {
var posDiff = $("#target").offset().top - ($(window).scrollTop()+$(window).height());
if (posDiff < 0) {
// 要素が画面内に現れた
}
});
postion: fixed が効かない端末でのヘッダー位置制御
$(window).scroll(function() {
var posDiff = $("#header").offset().top - $(window).scrollTop();
if ($(window).scrollTop() < 0) posDiff = 0;
$("#header").css("top", "-"+posDiff+"px");
});
スマホブラウザでURLバーを消す
ページ読み込み完了時に1px上にスクロールさせる(スクロールできるHeightがある場合のみ)
$(function(){
setTimeout(function(){ window.scrollTo(0,1); }, 20); // URLバーを消す
});
JavaScript
値判断
if (typeof a === "undefined") {
alert("aは未定義");
}
submit時に確認ポップアップ
function submitCheck() {
return confirm("送信してもよろしいですか?\n\n送信したくない場合は[キャンセル]ボタンを押して下さい");
}
<input id="toukou_button" type="image" alt="投稿する!" src="/page/sugolog/images/toukou.gif" onClick="return submitCheck()" />
JavaScriptでsha256
jsSHAライブラリを使用。New BSD License。
jsSHA - SHA Hashes in JavaScript
- JSプログラム
<script src="sha256.js" type="text/javascript"></script>
<script type="text/javascript">
var src_text = "Hello World";
var shaObj = new jsSHA(src_text, "TEXT");
var sha256digest = shaObj.getHMAC("", "TEXT", "SHA-256", "HEX");
document.write(sha256digest);
</script>
- 実行結果
50082da69e7e4780c867be198e795b9cd5e94e739ee9485aa95a70f60e36e73f
- 念のためPHPで同様のプログラムを実行
<?php
$text = "Hello World";
echo hash_hmac('sha256', $text, false);
- 実行結果
50082da69e7e4780c867be198e795b9cd5e94e739ee9485aa95a70f60e36e73f
同じになった。
ページ上部に DEBUG 情報
- PC
<div style="position:fixed;top:0px;left:0px;width:100%;height:20px;background-color:#ddd;" id="topInfo">INFO</div>
- スマートフォン
<div style="position:absolute;top:0px;left:0px;width:320px;height:20px;background-color:#ddd;" id="topInfo">INFO</div>
<script type="text/javascript" charset="utf-8">
var topInfoScroll = function()
{
document.addEventListener('scroll', function(){document.getElementById("topInfo").style.top = window.scrollY+"px";}, false);
};
if (window.addEventListener) {
window.addEventListener("load", topInfoScroll, false);
} else if (window.attachEvent) {
window.attachEvent("onload", topInfoScroll);
};
</script>
IE9以前で console.log エラー回避
if(!window.console) { window.console = { log: function(msg){} }; }