お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s
ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 デモページ DyLayの使い方 Step 1: 外部ファイル 「jquery.js」と「easing.js」と当スクリプトを外部ファイルとして</bpdy>の上に記述します。 <script src="http://code.jquery.com/jquery.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/dylay.js"></script> Step 2: HTML 各パネルはリスト要素で配置し、フィルタやソート用のデータをclassやdata属性に仕込んでおきます。 <ul id="dylay"> <li style="width:
デモページ：ダイナミックに重ねたりもできます Barajaの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。 <link rel="stylesheet" type="text/css" href="css/baraja.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.baraja.js"></script> HTML 各アイテムはリスト要素で、画像や見出し・テキストを自由に配置できます。 <ul id="baraja-el" cl
サンプルソース <HTML> <HEAD> <TITLE>チェックが入るとチェックボックスとラベル(文字)の背景色が変わります</TITLE> <STYLE type="text/css"> <!-- a,label{cursor:pointer;} label:hover { color : red; } .Mychk1{ width:140px; margin:5px 2px 2px 0px; font:12px; } --> </STYLE> <SCRIPT language=JavaScript> <!-- function chebg(chkID){ Myid=document.getElementById(chkID); if(Myid.checked == true){ Myid.parentNode.style.backgroundColor = '#C6E5FF'; }
自分のページだけでなく、閲覧している他人のページでも見出しを抽出し、ページ内アンカーの機能も与えるjQueryのプラグインを紹介します。 Flexible Nav jQuery library デモページ 抽出した見出しの一覧は、右側に表示されています。 [ad#ad-2] 閲覧中のページで見出しを抽出する方法 まずは、閲覧中の他人のページで見出しを抽出する方法からご紹介。 Flexible Navはブックマークレット版があるので、それを利用します。 ブックマークレット Flexible Bookmarklet このブックマークレットをブックマーク（お気に入り）に登録して閲覧ページでクリックしてください。 ※上記をクリックすると、このページで適用されます。 当サイトでFlexible Navを実行したキャプチャ Flexible Navを実行すると上記のように、右側に見出しの一覧が表示され
Javascriptのdocument.writeを使ってたくさんの内容を出力したいことってあると思います。複数行出力するときはいろいろな書き方ができます。 以下のように都度記述する方法もあれば… document.write('<div id="exampleBlock">'); document.write('<h2>example</h2>'); document.write('<p>foo bar</p>'); document.write('</div>'); 以下のようにwith文を使って親オブジェクトの名前を省略して記述する方法もあります。 with(document){ write('<div id="exampleBlock">'); write('<h2>example</h2>'); write('<p>foo bar</p>'); write('</div>');
jQueryをこれから始めたい人、もう少ししっかりとjQueryを使いたい人にぴったりの本を紹介します。 初めての献本です 当サイトで初の献本で、「紹介しないという判断でもかまわない」ということで、気軽な気持ちで本を受け取りました。 しかしこれがまた、今まで読んだ中で一番分かりやすく、紹介せずにはいられないなと思ったしだいです。 こんな人向け 帯に「もう、プログラマーには頼らない！」とあるように、スクリプト自体をじっくり掘り下げたものではなく、実装レベルでしっかりと使い方をマスターしていこうというものです。 HTMLとCSSは分かるけどjQueryはいまいちだ、という人にはぴったりの本だと思います。 カラーがうれしい オールカラー、キャプチャ付きくらいでは珍しくないですが、コードがシンタックスハイライトに対応しているのが見やすいです。 全部の本が対応してくれればいいのに。 そして、ところど
PushingPixelsからPNG画像の影をコントロールするデモとアニメーションで二つの画像を表示するデモを紹介します。 dynamic PNG shadow 「dynamic PNG shadow」では左下のスイッチをオンにすると、その光源の位置に従ってロゴに影が表示されます。 また、ロゴと光源はマウスのドラッグ操作で移動させることができます。 Animated HDR Photo 「Animated HDR Photo」では真ん中のスライダーを移動させることで、二つの画像のビフォーアフターを表示することができます。 スライダーはアニメーション動作に対応しており、画像の任意の場所をクリックするとそのポイントにアニメーションでスライドします。
JavaScriptには、大きく分けて次のの演算子があります。 四則演算を示す 「算術演算子」、数値をビットとして扱う 「ビット演算子」、条件を扱う 「論理演算子」、数値の大小を比較する 「比較演算子」、そして演算の結果を変数に代入する 「代入演算子」などが挙げられます。 ■ 算術演算子 加算、滅算、乗算、除算、および除算の余りを求める演算子です。数値の計算に使用します。なお、日常的な計算においては、 11 + 8 = 19 のように使用しますが、JavaScriptでは多くの場合、代入演算子を使用して、 a = 11 + 8; のように変数に計算の結果を代入します。
twitter facebook hatena google pocket メニューにはさまざまありますが、ドロップダウン型のsuckerfishと呼ばれるスタイルは使い勝手がいいかもしれません。 今回はJavaScriptライブラリjQueryを用いてドロップダウン型のメニューを作成します。 via : jQuery suckerFish sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#nav-one li").hover( function(){ $("ul", this
スタイルシートの切替 文字サイズ可変がユーザー側で自由にできるように、文字サイズは制作者が固定すべきではない。 ブラウザの設定で文字サイズを自由に可変できるのは大変有効的だと思うのだが、実際その機能に気づいているユーザーばかりではない。 最近サイトの中に「文字を大きくする」「文字を小さくする」等のボタンを配置し、Javascriptを利用してcssを切替て文字サイズの可変を可能にしているサイトも多いように感じる。 cssを差し替えるということだが、テキスト関連のcss指定だけ別ファイルにしておくのも１つの手だし、テキスト部分だけ文字サイズを変えて単一のcssファイルで管理する方法でも構わない。管理のしやすさを考えれば前者がおすめめである。 もちろんスタイルシートを切り替えるJavascriptなので、デザインごとごっそり変更する事も可能。使い方はお好みで。 問題のcssを切り替えるJava
※ サンプルのリンク先はありません。 ※ マウスなどのポインティングデバイスを持たないシステムではご利用頂けません。 メニューはリスト要素を使ってマークアップします。 最上部のul要素のクラス名を dropdown としてください。 複雑になりがちですので、記述ミスには注意が必要ですね。 <ul class="dropdown"> <li><a href="未設定">マジカル</a> <ul> <li><a href="未設定">妖しいページ</a></li> <li><a href="未設定">秘密のページ</a></li> </ul> </li> <li><a href="未設定">コミカル</a> <ul> <li><a href="未設定">アホなページ</a></li> <li><a href="未設定">ハイなページ</a></li> <li><a href="未設定">シャイ
jQuery Wisdomというサイトで、テーブル周りの素晴らしいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 graphTable: graph data from HTML table using flot HTMLのテーブルデータからグラフを作ってくれる tableRowCheckboxToggle jQuery Plugin 行をクリックすることでチェックボックスのオンオフを切り替えられるようにするプラグイン UI Table Edit jQuery Plugin セルをクリックすることで編集可能にするプラグイン Colorize – jQuery Table Plugin マウスオーバーした列の背景をカラーリングしてくれる Animated Sortable Data Table jQuery plugin – jTPS テーブルにページネーションやソート機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く