はてなブックマーク

レスポンシブWebデザインでサイトを作る場合に、メディアクエリとjQueryを使ってメニューの表示を切り替えるものをちょこっと作成。 画面サイズが大きい時は横並びのメニュー、小さい場合は折りたたみメニューにする、という簡単なものです。 レスポンシブWebデザインで折りたたみメニューに切り替える 動きとしてはメディアクエリで表示、非表示等を変更、折りたたみメニューのときは「MENU ▼」をクリックしたときにjQueryでclassをつけたり削除したりしています。 にしてもスマートフォンも混沌としてきましたねぇ。ios、android、windows phone、Tizen、Firefox OS等々、OS自体の数が増え、これからスマートフォンブラウザもいろいろでてくるんでしょうねぇ。。。ふうう。。。 <div class="menubtn">MENU ▼</div> <nav id="menu

jQueryを使っていると「なんだかもっさりするな。。。」と思う場合があります。こういう場合、書き方を見直す事で、かなり改善する場合があります。今回は「ちょっと高速化」を目標に書き方のポイントを紹介してきます。 ■ 要素選択の記述を見直す jQueryはセレクタやトラバースメソッドを使って要素を選択しますが、書き方によって大幅にパフォーマンスが上がる場合があります。 下記HTMLの中の「※ ここを見つける ※」というテキストを「■■■ 書き換えたよ ■■■」に入れ替えたい場合、どう書きますか？ <script> $(function(){ ○○○.text("■■■ 書き換えたよ ■■■"); }); </script> <div id="wrap"> <div id="content"> <h1>タイトル</h1> <p class="text">テキスト................

さてさて、jQuery2.0のリリースも近そうですし、ちょこっと1.9での変更を確認しながら準備をしておこうかな？ ということで、近いうちに使うであろう、jQueryの読み込み分岐をメモ。 <!--[if lt IE 9]> <script src="jquery-1.9.0.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <!--<![endif]--> レスポンシブWebデザインでサイトを作る場合に、メディアクエリとjQueryを使ってメニューの表示を切り替えるものをちょこっと作成。 画面サイズが大きい時は横並びのメニュー、小さい場合は折りたたみメニューにする、という簡単なものです。 レスポンシブWebデザインで折りたたみメニューに切り替える 動きとして

以前のjquery.fadeMoverプラグインの記事に不具合があった（というよりも単なるミスです。。。申し訳ないです。。。）ので、ちょっと機能アップを含め、別途ページを作成しました。 jquery.fadeMover – Fadein and Fadeout for jQuery 要素が複数あった場合に順番に処理する、という機能を新しくオプションでつけています。下記にデモページがあるんですが、ページ少し下の方にある「Box」と書かれている場所がぱらぱらとフェードインする、フェードアウトする感じになります。 jquery.fadeMover – demo4 順番にフェードイン jquery.fadeMover – demo5 順番にフェードアウト デモがわかりやすいように実行時間を長めに設定してるのでじれったい感じかもですが、もし利用の機会があれば、ご自身でスピードを変更して、いろいろ試し

ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ

「いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。 「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。 他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。 class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下

最近国内のサイトでもちょくちょく目にするようになった「スクロールに付随するメニュー（「ユニクロ 特集／+J FINAL COLLECTION | MEN – ユニクロオンラインストア[store.uniqlo.com]」のページの少し下の方にあるメニュー一覧のような動きになるもの 2011年12月2日時点）」を実装してみます。 この実装はすごく簡単で、スクロール位置と固定する要素の位置を比べ、スタイルを書き換えるだけです。 jQuery メニューをスクロールに付随させてみるサンプル（headerFixedBoxを固定） jQuery メニューをスクロールに付随させてみるサンプル（asideFixedBoxを固定） サイドバーに固定要素を置く場合は、フッターにかぶってしまうことがあると思うので、それを回避するように条件を加えてみました。 $(function(){ floatBox("#he

カルーセルパネル系のjQueryプラグインはかなり数が多いのですが、今回はjQuery本体のみ利用しプラグインを利用せず自作してみます。CSSとJavascriptを数行書き換えるだけで横型、縦型の２つが作れます。 プラグインを使わずにカルーセルパネル 横型 プラグインを使わずにカルーセルパネル 縦型 ではでは横型のカルーセルパネルを作っていきます。まずはHTML、CSSでカルーセルパネルの表示部分をつくります。内容を表示させるボックスを指定して、その中にリスト横並びに並べることにしましょう。両端にはリストを動かすボタン（「id=prev」「id=next」）を置き、これはCSSで配置を制御します。で、できたものは下記↓。 プラグインを使わずにカルーセルパネル HTML、CSSのみ ■HTML <div id="carouselwrap"> <div id="prev" class="hi

MySQLを確認したついでにPHPでの可逆暗号化も調べました。 Mcrypt暗号化関数で行うようで、いろいろ試して、いざ本番サーバで動かすと「Call to undefined function mcrypt_get_iv_size() 〜」と、エラーが…。PHPINFOで確認したらMcryptが使えない模様…。 ということで別の方法を探したらPEAR :: Crypt_Blowfishであれば、Mcryptが使えなくても利用できるようなので、さっそく試したところ動作しました。 require_once ("Crypt/Blowfish.php"); $key = "keyword"; $data = "encodewords"; //暗号化 $blowfish = new Crypt_Blowfish($key); $encode_data = $blowfish->encrypt($d

WordPress 3.2.1がリリースされてますね。3.2からIE6非対応とのことなのでまだインストールすらしてませんが、そのうち試そう。 今日はスマホで活躍の場がありそうなタブメニューをjQueryで作成してみます。 スマホ対応ページを作成する場合、PCページをそのまま移植しようとするとやたらにページが長くなってしまう場合があります。そんなときはタブメニューを使って、ちょちょいとコンテンツをまとめてみましょう。 jQueryで簡単タブメニュー サンプル まずは簡単にHTMLから説明。HTML側にはjQueryで処理しやすいように、タブとコンテンツにidを割り当てます。idは処理しやすくするため「tab_1」「content_1」と文字と数字のセパレータに「_」を入れ、数字が同じものが対になるように割り当てています。 <div class="tabarea"> <ul class="ta

fadeMoverプラグインの解説ページを別途作成しましたので、下記ページをご覧ください。 jquery.fadeMover – Fadein and Fadeout for jQuery ——- 以下 [ 2012-02-06 ] 以前の内容です —- [ 2012-02-06 追記 ] 最近このページのアクセスがかなり増えているので、記事を見直していたら、制作途中のものを記事にしてしまっていました。もしご利用をお考えになられていても「動かない…wtf…」となっていた方がおられたと思います。。。申し訳ありません。 作成途中で「ページ内リンクの動作禁止にしないと使えないよね、これ。。。」と気がつき、機能を付け足していたんですが、公開していたものが動作確認中の途中のスクリプトでした。それが原因でアンカーにclassを指定していたらまったく動作しないようになっていました。もし古いものをご利用さ

MySQLで可逆暗号化するときのメモ。 「AES_ENCRYPT(str,key_str), AES_DECRYPT(crypt_str,key_str)」BLOB型を使用する。 //暗号化 INSERT INTO table (a) VALUES (AES_ENCRYPT('value','password')); //複号化 SELECT AES_DECRYPT(a,'password') as dec_a from table; 「ENCODE(str,pass_str), DECODE(crypt_str,pass_str)」BLOB型を使用する。 //暗号化 INSERT INTO table (a) VALUES (ENCODE('value','password')); //複号化 SELECT DECODE(a,'password') as dec_a from table

※タイトルが長い間「class()」となっていましたが、「css()」の間違いです。。。 フォントの色を変更する場合、HTMLに「style=”color: #CC0000;”」等の記述をします。jQueryでも「class()」style属性を操作できます。 //id=msgの要素のstyle属性のcolorの値を取得する $("#msg").css("color"); //id=msgの要素のstyle属性にcolor:redを追加する $("#msg").css("color":"red"); //id=msgの要素のstyle属性にcolor:redとbackground-color:000000を追加する $("#msg").css({"color":"red" , "background-color":"000000"}); プロパティは一つだけでなく複数設定することができます

jQueryではCSSのclassを簡単に追加・削除することができます。classを操作する場合は『 addClass() / removeClass() / toggleClass() 』を使います。 //id=msgの要素にclass=redを追加する $("#msg").addClass("red"); //id=msgの要素のclass=redを削除する $("#msg").removeClass("red"); //id=msgの要素のclass=redがあれば削除、なければ追加する $("#msg").toggleClass("red"); 「addClass()」「removeClass()」は簡単かと思いますが、「toggleClass()」は指定したクラス名があれば削除、なければ追加するという「ONとOFFを切り替える仕組み（これをトグルといいます）」を持っています。 こ

なんか久々にjQueryを触りました…。 セレクタ（属性フィルタ）に変数の値を利用する場合の記述を試したんですが、1.3.1はセレクタまわりが変更になっているからなのか、IE6,7、FirefoxでOKだったのですが、safariが動作せず。 で、ちょこっと調べてみると jQuery 1.3系からはsafari2は対応してないと。そういうことですか…。 jQuery: » jQuery 1.3.1 Released ブラウザーのシュアの問題で対応をはずしてるみたいですね。しかし下記ページを見てsafari3.xが6%近いシェアがあるってのでびっくり。safariってそんなにも使ってる人いるんですかね？ Browser market share まあ一応safari2.xもOKなように1.2.6を使っておきました。 作ったものはというと、チェックボックスにチェックをした時に文字のスタイルを変

jQueryでティッカーを作ってみました。動作はリストの内容を順番にフェードアウト・フェードインしながら表示していくという単純な仕様です。 jQueryでティッカー ソースは以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" /> <title>jQueryでティッカー</title> <script type="text/javascr

フォームのボタンはCSSである程度デザインをかえれるけど、いまいちなので「type=image」をよく使うけど、デフォルトのボタンのようなクリック感がなくなっていまいます。 ということで、クリック感をだすついでにロールオーバーでも画像を入れ替えるものを作ってみました。 jQuery – フォームの画像ボタンをロールオーバーする JavaScript <script language="JavaScript"> //画像をプリロード function preload(Dir, imgs){ var d = document; for(var i = 0; i< imgs.length; i++){ var imgObj = new Image(); imgObj.src = Dir+imgs&#91;i&#93;; alert(imgObj.src); } } window.onload =

昨日は大三島の山本農園さんで、みかんの箱詰めのお手伝いをしてきました。みかんはたくさん種類があって、収穫時期もちょっとずつことなり、今が一番忙しい時期らしいのですが、高齢化等もあり、人手不足が悩みのようです。 なんとか人手不足を解消するいいアイデアはないもんかな？

fadeIn、fadeOut等の練習がてらjQuery本体だけで簡単なギャラリーページを作ってみました。 小さな画像をクリックすると表示されている画像がfadeOutし、新しい画像が読み込まれるまでLoading画像が表示され、新しい画像読み込み終わった時点でfadeInし、あわせてLoading画像が消えていきます。 jQueryでギャラリー（フェードイン・フェードアウト） ソース <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <title>jQueryでギャラリー（フェードイン・フェードアウト）</title> <script type="text/javascript" src="../jquery-1.2.6.min.js"></script> <script la

jQueryでページ内リンクをスムーズに移動（ページトップへ等）するものを作ろうと思いいろいろ調べていたら、いいページを見つけたので早速試してみました。 We Ain’t Seen Nothin’ Yet. : [Rails meets jQuery] jQueryで作るページ内目次とスムーススクロール 上記の記事では「Interface.js」を利用しているようなのですが、動作させるコードを読んでいるとInterface.jsをどこで使っているかわからなかったので、jQueryだけで動作確認すると、とりあへず動きました。jQueryの古いバージョンでは「scrollTop」がjQuery自体に含まれていなかったのかもしれませんが、最近jQueryをいじり始めたため詳しいことはわかりません…。 ということでコードはほぼそのまま利用させていただき、スクロール動作だけを変更しています。 使用フ