リンク画像を拡大表示&移動可能にする

zoomy2

<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/prototype.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/scriptaculous.js?load=effects,dragdrop"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/effects.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/dragdrop.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/zoomy.js"></script>

<script type="text/javascript">
Event.observe(window,"load",function() {

$$("div.entry-content a").each(function(element){
new Zoomy(element, { draggable: true });
});
});
</script>


/* thumbnails grid */
.zoomy, .zoomy2 { float:left; width:100%; }
.zoomy li, .zoomy2 li { list-style:none; float:left; display:inline; margin-right:5px; margin-bottom:5px; width:150px; height:100px;  }
.zoomy a, .zoomy2 a { text-decoration:none; display:block; width:150px; height:100px; }


/* ..... ZOOMY */
#zoomy { position:absolute; overflow:hidden; background:#000000; padding:0px; border:1px solid #FFFFFF; text-align:center; color:#fff; line-height:0; }
#zoomy img { margin:5px; }
#zoomy p { position:relative; margin:10px 5px 5px 5px; line-height:100%; text-align:left  }

#close { position:absolute; right:5px; width:12px; height:12px; background:url(close.gif) no-repeat; cursor:pointer;} 


基本的に”prototype.js”はjQeryとは競合するので、もし共存させたければこの記事を参考に
「jQueryとprototype.js共存させる為にする事」

タグに付けられたIDにClassを追加する

body内にないとダメらしい。うまく行かなかったらあちこち移動してみる。
prototype.jsがほしいのでどっかから参照する。

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


<script>// <![CDATA[

 var element4=document.getElementById("menu-item-71") 
 element4.addClassName("shake");  //クラス shakeを追加

element4.removeClassName("menu-item-object-page"); //menu-item-object-pageクラスを除去
// ]]></script>

WordPress 投稿 独自テーブル 保存

タイトルのようなプラグインを作ってみました。
概ねこちら
で紹介されていた内容で作ってますが、取り扱いにいろいろ戸惑ったので
そのまとめ。

プラグインを有効にしたあとに、新規投稿を開くとこんな感じに
「カスタムフィールド」がが追加されている。

custom1

投稿後DBには’wp_ex_meta’テーブルが追加されている。

ソースをアップしておく
プラグイン本体+表示用single.php

javascript カレンダーからの日付入力

datepicker でカレンダーを2つ作って開始日~終了日にする

日付フォーマットが海外スタイルなのでyyyy/mm/ddになおす


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="js/jquery.ui.datepicker-ja.js"></script> <!--これを読ませるだけで日付フォーマット完成-->

<script language="javascript" type="text/javascript">

$(function() {     $( "#datepicker_begin" ).datepicker();   });

$(function(){    $("#datepicker_end").datepicker();   });

</script

</pre>

 

<h3>開始日が終了日より後にならないようにする</h3>

<p>ボタンはsubmitさせて、jsでfalseを返して止めるやり方</p>

<pre>

function next_button(){

var datepicker_begin = document.getElementById("datepicker_begin");

var datepicker_end = document.getElementById("datepicker_end");

// 最終確認

if (  datepicker_begin.value >=  datepicker_end.value  ) {

alert('到着日を返却日よりも前にしてください');

return false; //submit の返り値が false なら submit の処理が中断される

}

}

 

 

 

html


<form  name="frm" id="frm" method="post" action="add.php?<?=SID ?>"  onSubmit="return next_button();" >

<dl>

<dt>到着日</dt>

<dd>

<input name="datepicker_begin" id="datepicker_begin" type="text" placeholder="--年--月--日" size="11" maxlength="10" required />

</dd>

<dt>返却日</dt><dd>

<input name="datepicker_end" type="text" class='list_dd trs_bg' id="datepicker_end" placeholder="--年--月--日" size="11" maxlength="10"  required />

</dd>

</dl>

javascript ラジオボタンでDOMの開閉をしたい。


異なる配送先を選んだ場合には住所の入力欄が作られるスクリプト

<script>
window.onload = function() { /* チェックボックス */
var check = document.getElementById(“check”); /* 同じ住所 */
var non = document.getElementById(“non”); /* 違う住所 */
var frm = document.getElementById(“frm”); /* formのID */

//
non.checked = false;
non.value = ‘off’;

/* チェックボックスにonclickイベントハンドラをセット */

non.onclick = function() {
var hide_area = document.getElementById(“hide_area”);
check.checked = false; /* */
check.value = ‘off’;

if( non.value == ‘off’ ) {

hide_area1.innerText=”郵便番号:”;

var zipp = document.createElement(“input”);
zipp.type = “text”;
zipp.id = “zipp”;
zipp.name = ‘zipp’;
zipp.size = ‘4’;
zipp.maxLength = ‘3’;
hide_area1.appendChild(zipp);

var zipp2 = document.createElement(“input”);
zipp2.type = “text”;
zipp2.id = “zipp2″;
zipp2.name = ‘zipp2’;
zipp2.size = ‘5’;
zipp2.maxLength = ‘4’;
zipp2.onKeyUp=”AjaxZip3.zip2addr(‘zipp’,’zipp2′,’pref31′,’haisosaki’);”
hide_area1.appendChild(zipp2);
}
};

//上記と同じ住所 clicked
check.onclick = function() {
non.value = ‘off’;
hide_area.addClassName(“hide_class”);
};

</script>

書いているうちにもっと簡単な方法を思いついた。

display:none のクラスをあてたり、とったりすればいいのだ。

$(“hide_area”).removeClassName(“hide_class”);  // 一行で片付いた。

DreamWeaver カラーテーマ コードカラーリング

dw14co

Dreamweaverでのコードカラーリングの設定方法

  1. 編集
  2. 環境設定
  3. コードカラーリング
  4. HTML
  5. とりあえず背景を全部 #272822

Windows フォルダの場所
C:\Users\your Name\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\CodeColoring

を開いて、ダウンロードした「Colors.xml」をここに置く。

vbscriptでインストール

Mac版も同じファイルが使える。
場所→/ユーザ/ユーザ名/ライブラリ/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration/CodeColoring/Colors.xml
フォントは「Courier New」似ているのがあるので注意。


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /var/www/html/wp/wp-includes/functions.php on line 5107

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /var/www/html/wp/wp-includes/functions.php on line 5107