カテゴリー: Blog

【幅とか決め打ち】jQueryを使った、サイドからスライドして開閉するメニュー

またも汎用性がないシリーズ
基本的にやってることは、toggleだけというシンプルというか、ありきたりでつまらんモノ。

HTML

<div id="mapNav">
    <dl class="closed">
        <dt id="btn">メニュー開く</dt>
        <dd>
            メニューの中身をHTMLで書いてね
        </dd>
    </dl>
</div>

JavaScript

$(function(){
    $("#btn").toggle(
        function(){
            $("#mapNav").animate({
                width:"175px"
            },"fast");
            $("#mapNav dl").removeClass("closed")
                .addClass("opend")
            $(this).html("メニュー閉じる");
        },
        function(){
            $("#mapNav").animate({
                width:"20px"
            },"fast");
            $("#mapNav dl").removeClass("opend")
                .addClass("closed");
            $(this).html("メニュー開く");
        }
    );
})

css

#mapNav {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 400px;
    background-color: #fff;
}

#mapNav dl {
    overflow: hidden;
}

#btn {
    top: 0;
    left: 0;
    display: block;
    text-indent: -9999em;
}

.closed #btn {
    width: 20px;
    height: 53px;
    background: url(./images/btn_menu_open.png) no-repeat right top;
}

.opend #btn {
    width: 20px;
    float: left;
    height: 58px;
    background: url(./images/btn_menu_close.png) no-repeat right top;
}

.closed dd {
    display: none;
}

.opend {
}

.opend dl {
    border: none;
}

.opend dd {
    float: right;
    width: 155px;
    height: 400px;
    overflow: auto;
}

.opend dd dl {
    padding: 5px;
}

.opend dd dd {
    height: auto;
    margin-bottom: 5px;
}

サンプル
jQueryを使った、サイドからスライドして開閉するメニュー Sample

サト研vol.5は、2/21(土)に開催【内容は相変わらず未定】

ゆる系のWebサイトの勉強会と思って頂いて間違いありません。
まずはメーリングリストに参加してみてください。
対象は、Webサイトの運営・管理に興味のある方
開始前に喋りたい人、話したい/質問したい/議論した内容を皆に聞いてから始めます
詳しくは、[告知] vol.5 サイト運営・管理研究会(仮)

MAMPにMovableTypeをインストールするメモ【主にあの人用】

RさんのローカルマシンでMovableTypeをなんとか動かそうとしたときのメモ。
MAMP+SQLightを使用します。
MAMPなのにMySQL使わないの?と思う人もいるでしょうが、
DBD::MySQLでちょっとメンドクサイ。
目的は、「ローカルで動く環境作って、MTのテンプレートを作成したい。」
ローカルでデータも作ってデータベースのデータも実際の環境に持って行ってとかの目的ではありません。
CPAN?何それ?みたいな人でもインストールできるかも。
Macには最初からApacheも入ってますが、MAMPを使ってます。
ApacheのDocument Rootの切り替えもGUIで操作可能だからです。
いちいち、httpd.confを修正してとかメンドクサイ。
MAMPのApache Document Root 操作画面
複数のサイトをカンカン切り替える必要のある人には、便利だと思います。
制作するサイトのファイルを置く場所ですが、私は、~/Sites以下にディレクトリ作って置いてます。
MAMPの中のhtdocsやcgi-binは使用してません。
MAMPがバージョンアップとかしても、MAMPフォルダを捨てて、新しくインストールする場合や、
MAMP自体の動作がなんか変とかいう場合でもMAMPフォルダごと思い切って捨てちゃえるからです。
やったことはたぶん下記の通り

  1. MTのファイルをダウンロードする
  2. 解凍してできたフォルダの名前を変える
  3. 上記のフォルダを制作サイトの作業フォルダに移動
  4. 2.のフォルダの直下のcgiファイルの属性を755に
    Transmitから変更すると簡単だよ〜Rさん
  5. 2.のフォルダの直下に下記の内容の.htaccsessを作成
    Options -Indexes
    Options +ExecCGI
    AddType application/x-httpd-cgi .cgi
    
  6. 2.のフォルダの直下にdb/mt.dbというフォルダとファイル作成
  7. 上記のファイルの属性を777に
  8. /Applications/MAMP/conf/apache/httpd.confの
    AddHandler cgi-script .cgiのコメントアウトを消す
  9. MAMPにてApache再起動
  10. 2.のフォルダのmt.cgiにブラウザからアクセス
    http://nishiaki.probo.jp/hoge/mt.cgiってな具合で
  11. インストールウィザードに従って進む
  12. メール送信とか無視

なんか抜けとかありそうな。でもまあこんな具合。

LaunchBar5が便利すぎでBeta終わったら購入しないといけない気がする件【LaunchBar5 Beta】

タイトルがほぼ全て
わかばマークのMacの備忘録さんがよくまとまっている。
わかばマークのMacの備忘録 : tag – LaunchBar
自分では、ほんの一部の機能しか使ってない自信があるがw、それでもめちゃくちゃ便利と感じている。
マルチクリップボード機能があるので、PTHPasteboardは使わなくなった。

ファイルのコピーを連番で繰り返し行うときのメモ【シェルスクリプト】

同じファイルが連番で欲しかった。
普通あんまりないシチュエーションかも。
test.shというのを作った。
実行権限与えんといかんから、ターミナルで該当ディレクトリまで移動して

chmod u+x test.sh

test.shの中身は、下記の通り

#!/bin/sh
number=1
while test $number -le 10
do
    cp hoge_0.png hoge_$number.png
    number=`expr $number + 1`
done 

hoge_0.pngを基にしてhoge_1.pngからhoge_10.pngまでコピーしてくれるはず。

jQuery1.3リリースと注意点とかのメモ

コリスさんで発見
[JS]jQuery 1.3 リリース、主な変更点など | コリス
Release:jQuery 1.3 – jQuery JavaScript Library
上のページのベンチマーク通りならかなりのパフォーマンスアップじゃないか!
しかし待てよ。
コリスさんとこの訳によると、

ready()は、スタイルシートがロードされるのを待つことを保証しません。
全てのスタイルシートは、スクリプトの前にページに配置してください。

まあ、ここはCSSを先に書いちゃえばいいんだな。そこまで問題ないでしょ。

Standards modeで、ページを作成してください。
Quirks Modeで動作しない周知の問題があります。

問題は、ここだな。
IE6って、xml宣言入れたらQuirks Modeだからそこ要注意じゃないっすか!
まあUTF-8とかが多いから、そのときは、IE6のときだけxml宣言外す方向性かな〜。

Apple User Group Meeting in OITA 2009参加登録開始

Apple User Group Meeting in OITA 2009が開催されるらしいです。

2007年2008年と開催されてて、どちらも盛り上がってるみたいですね。
週末なので、イベント参加→温泉でリラックスとかいいかもしれません。