Slickで中央表示モードにして外側から中央にかけて大きくさせるエフェクトつけるサンプル。
“[JS] Slick Carousel: CenterMode & Zoom Effect Demo” の続きを読む
[JS] Slick Carousel: CenterMode & Zoom Effect Demo
タグ: jQuery
HTML5 Form Validationサンプル（Bootstrap 4.0 + Constraint Validation API）
フォームのバリデーションを自前で実装せざるを得ない場合に使える Constraint Validation API のサンプルを作った。
ついでに Bootstrap 4.0の Forms Validation との連携もしてみた。
See the Pen Bootstrap 4.0 + Constraint Validation API Sample (ja) by Tenderfeel (@Tenderfeel) on CodePen.
“HTML5 Form Validationサンプル（Bootstrap 4.0 + Constraint Validation API）” の続きを読む
[JS] Google Visualization API がなかなか便利な件
Google Spreadsheetを愛用していて、ゲームの攻略データなんかを纏めていると「この中身をそのままサイトにできないものか…」と思ってたんだけど、
普通のエクスポートでCSV形式だとドメインの呪縛を受けてしまってJSだけでは難しい。
そこで適当に検索してたら結構前からあるらしいGoogle Visualization APIが使えると知って飛びついてみたら、
なかなか便利な感じだったので簡単なサンプルを書いてみた。
悪魔図鑑 (Google Visualization API + backbone.js test) – jsdo.it – share JavaScript, HTML5 and CSS
[js] スマートフォンのAjax フォーム送信時にキーボードを消す
Goボタンを押した時のイベントは
submit
もしくは
event.keyCodeのcode=13
で取れますが、
テキストフィールドやテキストエリアに入力後、スマホのキーボードでGoボタンを押した時、onsubmitをキャンセルしていたりするとキーボードが隠れないので、
キーボードが表示された要素からblur()でフォーカスを外す必要があります。
フォーム内に送信ボタンがあるならボタンにフォーカス移すのが手っ取り早い。
prototype.js vs jquery vs mootools vs YUI vs Dojo
prototype.js、jquery 、mootools、YUI 、DojoAdobeSpry、Dojo、
MicrosoftAjax、YUI、Rico、MochiKit、Ext、Alfax、script.aclo.us…
実際使ってるのから名前は聞いたことある程度のものまで、色々と出てきて便利なのはいいんだけど、
正直どれ使えばいいのか分からない…(´д｀)という時もある。自分は大抵mootoolsだけどｗ
選ぶ時の参考になるかもしれないAjaxフレームワークのベンチマーク記事の紹介。
まずPeter Velichkov’s Blogの
MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revisedでは
タイトルに挙げたprototype.js、jquery、mootools、YUI、Dojoのベンチマークをグラフにして比較しています。
単純に速度だけの計測なので、サクサク感で選びたいときの参考になる。
“prototype.js vs jquery vs mootools vs YUI vs Dojo” の続きを読む
[Ajax]prototype、jQuery、mootoolsのプラグイン仕様比較
Ajaxフレームワークのプラグインの仕様比較と作成方法について。
個人的によく使うprototype、jQuery、mootoolsのプラグインテンプレートとサンプルソースをそれぞれ載せてます。
短いソースならベタ書きでも悪くはないけど、使いまわしが効いたり、衝突が起きなかったりと
大掛かりなものになればなるほどメリットはあるので、よく使うなら覚えておいて損はないと思う。
でもプラグインを作ること自体はそう難しくなくても、理解するのが大変なんだよな。
どれか１つ把握してたら応用で他のも作れるようになるはず。ソースは私。
なお、適当に書いたサンプルソースは全て
「IDで指定した要素の文字色をオプションで指定した色に変える」という内容です。
また、あえてメソッドを動作させるようにしています。
ソースの説明書き加えた
mootools (ver1.2)
まず個人的に一番気に入ってるmootoolsから。
mootoolsのプラグインは特に決まった書式などは無く、Classで作成されているものが多いです。
Classという名前の通りPHPやJAVA等のクラスとほぼ同じ仕様なのでとっつきやすいと思われる。
“[Ajax]prototype、jQuery、mootoolsのプラグイン仕様比較” の続きを読む
[js]Ajax.Requestと405 Method Not Allowed
405エラーは主に、POSTメソッドの使用が許されていない場所で、POSTメソッドを使用した場合に返される。
さくらインターネット等、CGIやSSI等のダイナミックコンテンツにしかPOSTメソッドが容認されていない場合に、
AjaxでXMLHttpRequestメソッド使った時にタイプがPOSTだと405 Method Not Allowedになる。
CGIでも.htaccessにAddHandler cgi-script .cgi などが記述されておらず、
CGIとして設定されていない状態でPOSTで送ると同じエラーになる。
Apache1.3系は静的ファイルにPOSTが使えない。
Apache2系はPOSTもGETも同じ挙動。
解決策
XMLHttpRequestメソッドのタイプをPOSTからGETに変更
※.htaccessでAddHandler server-parsed .htmlとするのは良くない。
[jQuery]サムネイルクリックで画像変更（+effect）
前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。
動作にはjQuery1.2.6が必要です。
[JS]マウスオーバーでリンク画像の透明度とか変更
マウスオーバーの画像作るのﾒﾝﾄﾞｸｾｰと思ったときに、画像１枚でごまかせるから便利。
普通のロールオーバーよりも凝ったことも出来るので手抜きに見えない所が良いですｗ
難点はjavascriptオフで効果がなくなることですが、
javascriptを意識的にオフしてる人というのは限られてるので大丈夫だと思います。
prototype＆script.aculo.us、jQuery、mootoolsでそれぞれ書いてみた。
[WP]AutoExternalLinkプラグインをjQuery版にする
AutoExternalLinkプラグインはprototypeが使われてます。
前回書いた[WP]AutoExternalLinkプラグイン修正は、prototypeを使ったVicuna用の改造方法でしたが、
今回はリクエストにお答えしてjQuery版に変更する方法を解説します。
ついでにwp_enqueue_script()への対応方法も載せてます。
プラグイン作者はinoccoさん、jsソースはFsikiさんが作られたものです。
この記事では改造部分のみ掲載しており、変更後のソースそのものは配布してません。