「Uncaught TypeError: $ is not a function」というエラーが出たらどうするか

jQueryのプラグインを使ったりしているサイトで、自分でも追加でjQueryのコードを書こうとして

Uncaught TypeError: $ is not a function

とか言って怒られた場合には、

$('div')....

を

jQuery('div')....

という風に、$ を全部 jQuery に書き直せばちゃんと動くようになります、大抵の場合。

ツイート

Horizontal Tiny Scrolling クロスブラウザ修正版

Horizontal Tiny Scrolling (thw.js) (旧horizontinyscrolling.js) は、
マウスホイール操作などによるページ全体の横スクロールUI(ユーザーインターフェイス)を実装するためのjavascriptライブラリです。
（インラインコンテンツの水平スクロールインターフェイスのためのライブラリではありません）
jQueryライブラリのプラグインではなく、単体で動きます。

/* Horizontal Tiny Scrolling - a smooth scrolling script for horizontal websites
(the brother of the vertical "Tiny Scrolling")
by Marco Rosella - http://lab.centralscrutinizer.it/the-tiny-scrollings

v0.8 - July 7, 2009

（ソースコード冒頭の署名から）

このプログラムはMarco Rosellaさんがライセンス形態=GPLで公開しています。
以前は horizontinyscrolling.js として公開されていましたが、現在は thw.js というファイル名に変わっています。ライブラリの名称としては「Horizontal Tiny Scrolling」のままです。

現時点での最新版は2009/7/7にリリースされたバージョン0.8ですが、相変わらずOperaで動作しないなどいくつかの問題が残ったままになっていました。
そこで今回、クロスブラウザ向けに修正・検証しましたので、ダウンロードできるように公開します。

>> 続きを読む

ツイート

SSL環境でLightbox2を使うときの注意点

Lightbox2をSSL接続中のページ( http://〜 )で使用すると、
Windows IE(Internet Explorer)では次のようなアラートダイアログが表示されてしまいます。

このページにはセキュリティで保護されている項目と保護されていない項目が含まれています。
保護されていない項目を表示しますか？

[ はい] 　[ いいえ ]　[ 詳細情報 ]

これは、ページ中に非SSL接続で読み込まれている画像ファイル、JSファイル、CSSファイルなどがあるということを意味しています。
ページを https://〜 で表示しているのなら、ページHTMLが読み込むすべてのデータも https//〜 で読み込んでないといけません。
SSLで通信しようとしてるなら、ひとつでも例外があればあぶないですよ、本当にこのページを表示しても大丈夫ですか、とユーザーにたずねているわけです。
「いいえ」を選択すると、非SSL接続で読み込みを指定されたデータの通信を遮断出来ます。

つまり、開発者/制作者側としては、そのページのどこかに http://〜 で(非SSL接続で)読み込もうとしているファイルがあるわけですから、それを見つけ出してきちんと https://〜 で(SSL接続で)読み込むように修正すれば、このようなアラートダイアログが表示されることは無くなります。

Lightbox2の場合、どこを直せばよいのでしょうか？
以下に順を追って説明します。

>> 続きを読む

ツイート

jQuery UI でテーブルタグをsortableに

jQuery UI Sortableを使えば、直感的にマウスでドラッグアンドドロップしてアイテム（行）を入れ替えられるようなWebページが作成できます。

念のため説明しておくと、
jQuery UI Sortableは、jQuery UIのなかのひとつのフィーチャーです。
jQuery UIは、jQueryのプラグイン（ライブラリの一つ）です。

jQuery UI Sortableを使用するには、jQueryとjQuery UIを読み込むか、
以下のようにjquery.ui.sortable.jsが依存している「core」「widget」「mouse」だけを読み込めば軽くなります。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>

さて、このjQuery UI Sortableは、オフィシャルサイトや解説サイトに公開されているサンプルでは<ul>タグにidをつけることで、中の<li>を入れ替えられる様になるよ、という具合に説明しています。

<script type="text/javascript">
$(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
});
</script>

<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

これを、そのまま<table>タグで使おうとすると、なぜか思った様に動かない。
idを指定したtableそのものがぐいっと動いてしまいます。
<table>タグではダメなのかなーと思っていたら・・・海外にこんな記事がありました。

>> 続きを読む

ツイート