Tag Archives: jQuery

デコード/エンコードを1ファイルで行うPHP

Posted by on 2011年9月1日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - デコード/エンコードを1ファイルで行うPHP
Share on Facebook

URLエンコード/デコード、HTMLエンティティエンコード/デコードを行うとき便利なフォームを作成しました。 PHP+jQueryで実装されており、このファイルをPHPの動くWebサーバーに置けばすぐに使えます。

できること

  • URLエンコード/デコード
  • HTMLエンティティエンコード/デコード
  • PHPの配列のシリアライズ/アンシリアライズ

必要な環境

  • PHPの動作するWebサーバー

Read more »

「要素をクリックする」命令をjQueryで書く

Posted by on 2011年6月22日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - 「要素をクリックする」命令をjQueryで書く
Share on Facebook

LightBoxのように、リンクをクリックするとアクションが発生するスクリプトは数多く存在します。 任意の場所をクリックした時にそのアクションを起動したい場合は、jQueryのclick()メソッドを使うと簡単に実現できます。

例

classが”uso”のaリンクをクリックした時に “a#mojamoja” をクリックした時のアクション起動したい場合は、下記のように書けます。

$(function() {
    $("a.uso").click(function(e) {
        e.preventDefault();
        $("a#mojamoja").eq(0).click();
    });
});

応用（悪用？）

FirebugやChromeのスクリプト入力ボックスに下記のコードを書き込むと、button#usoを永遠に毎秒10回叩き続けます。

setInterval(function() {$("button#uso").eq(0).click();}, 100);

「どうしてもボタンが連打したい。でも指が折れて動かせない…。」という名人にお勧めです。

参考

[jQuery] ブラウザの描画領域のサイズを取得する

Posted by on 2010年5月16日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - [jQuery] ブラウザの描画領域のサイズを取得する
Share on Facebook

winHeight = $(window).height();
winWidth = $(window).width();

[jQuery] セレクタで「<」「>」が選択できない

Posted by on 2010年5月16日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - [jQuery] セレクタで「<」「>」が選択できない
Share on Facebook

症状

JavaScriptにおいて、「<」「>」は基本的にダメ文字（使用不可）だが、jQueryのセレクタ内で使用すると選択できたりできなかったりすることがある。

原因

そもそも、XHTMLの仕様では「<」「>」は属性値に使ってはいけない。

たまに仕様で許可されてない記号も使えるが、そうしたものが選択できるのはブラウザ依存の偶然でしかない。

対策

こういう文字を使うときは、別の文字に置換でもしないとダメ。例えばDOMロード後に全角の「＜」「＞」に置換するとか。

参考

Selector problem: $('#\<foo') and $('#bar\>') works, but $('#\<buz\>') doesn't. – jQuery Forum

[JavaScript] 画像の実際のサイズを取得する (jQuery使用)

Posted by on 2010年5月16日 No comments
このエントリーをはてなブックマークに追加
はてなブックマーク - [JavaScript] 画像の実際のサイズを取得する (jQuery使用)
Share on Facebook

  • imgタグのwidth/height要素を指定していない場合、イメージがどう表示されるかはブラウザによって異なる。
  • すべてのブラウザで画像オリジナルのwidth/heightを取得しようとしても、ブラウザ毎にパラメータやメソッドが異なる
  • jQueryを利用すると、下記コードで画像の実際のサイズを取得できる
/*
 * 画像の実際のサイズを取得する
 *
 * @param  string  image  img要素
 */
function getActualDimension(image) {
    var run, mem, w, h, key = "actual";

    // for Firefox, Safari, Google Chrome
    if ("naturalWidth" in image) {
        return {width: image.naturalWidth, height: image.naturalHeight};
    }
    if ("src" in image) { // HTMLImageElement
        if (image[key] && image[key].src === image.src) {return  image[key];}
        
        if (document.uniqueID) { // for IE
            w = $(image).css("width");
            h = $(image).css("height");
        } else { // for Opera and Other
            mem = {w: image.width, h: image.height}; // keep current style
            $(this).removeAttr("width").removeAttr("height").css({width:"",  height:""});    // Remove attributes in case img-element has set width  and height (for webkit browsers)
            w = image.width;
            h = image.height;
            image.width  = mem.w; // restore
            image.height = mem.h;
        }
        return image[key] = {width: w, height: h, src: image.src}; // bond
    }
    
    // HTMLCanvasElement
    return {width: image.width, height: image.height};
}