見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃える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
[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay
ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成する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:
[JS]マジシャンがトランプを広げるように複数のパネルを華麗なアニメーションで広げるスクリプト -Baraja
デモページ：ダイナミックに重ねたりもできます 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
[本]jQueryをしっかりと使いこなせるようになりたい人向けの一冊
jQueryをこれから始めたい人、もう少ししっかりとjQueryを使いたい人にぴったりの本を紹介します。 初めての献本です 当サイトで初の献本で、「紹介しないという判断でもかまわない」ということで、気軽な気持ちで本を受け取りました。 しかしこれがまた、今まで読んだ中で一番分かりやすく、紹介せずにはいられないなと思ったしだいです。 こんな人向け 帯に「もう、プログラマーには頼らない！」とあるように、スクリプト自体をじっくり掘り下げたものではなく、実装レベルでしっかりと使い方をマスターしていこうというものです。 HTMLとCSSは分かるけどjQueryはいまいちだ、という人にはぴったりの本だと思います。 カラーがうれしい オールカラー、キャプチャ付きくらいでは珍しくないですが、コードがシンタックスハイライトに対応しているのが見やすいです。 全部の本が対応してくれればいいのに。 そして、ところど
javascriptライブラリ「jQuery」でドロップダウン型メニューを作る
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
テーブル周りの素晴らしいjQueryプラグイン30 – creamu
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 テーブルにページネーションやソート機
ナビゲーション実装に使える、Ajaxライブラリ/サンプル集:phpspot開発日誌
35 Easy to use Free Ajax/Javascript Navigation Solutions : Speckyboy - Web Design, Web Development and Graphic Design Resources 35 Easy to use Free Ajax/Javascript Navigation Solutions ナビゲーション実装に使える、Ajaxライブラリ/サンプル集。 便利そうなナビゲーションパーツが多数紹介されていて参考になります。 Outlook Navigation Bar jQuery suckerFish Tree with Checkbox Nodes Tabbed Search Bar Sliding Tabs Floating window with tabs 続きを見る クールで分かりやすいサイト作りに役立てまし
Ajax » jQuery plugin » ナビゲーション、メニュー | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説どのイベントが発生した時にアニメーションを開始するかを指定します。指定しない場合は、すぐにアニメーションが開始されます。2つのイベントを指定すると、1つ目のイベント発生時に現在のスタイルからホバー時のスタイルにアニメーションし、2つ目のイベントで元のスタイルにアニメーションしながら戻ります。 設置イメージ 設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml
魅力的なUIにするためのjQueryプラグイン20 – creamu
Six Revisionsで、魅力的なUIにするためのjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » SimpleModal シンプルなモーダルウィンドウ » Panel Gallery ユニークなトランジションを持つスライドショー » Easy Image Gallery サムネイル表示型のイメージギャラリー » PikaChoose Belvedere Incに見られるクールなギャラリー » SlideBox たくさんのリンクを表示できるスライドボックス » Single Drop Down Menu シンプルなドロップダウンメニュー » Mouse Over Animation for Text テキストにマウスオーバーすると、明度を変えてくれたりうにょ〜っと拡大してくれるエフェクト あまり見たことのないものやシンプルで使いやすそうなギャラリーなどが揃っていま
jQueryを使ったドロップダウンメニューの作り方 – creamu
woorkで、jQueryを使ったドロップダウンメニューの作り方が紹介されています。 ↑のようなシンプルで必要充分なメニューですね。マウスオーバーするとメニューの背景色が変わったり、レイアウトもかっちりしているので使いやすそうです。 HTML / CSSとjQueryのコードが公開されていますね。 デモは以下から。 » demo here 参考にしてみてはいかがでしょうか？ » How to implement a perfect multi-level navigation bar ブログのデザインリニューアルしたくなってきたぞ。MT5にするタイミングで、とか考えてたけど、ささっとやっちゃおうかな。
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ブラウザのサイズに合わせてレイアウトがアニメーションで変更されるスクリプト -Sliding Resizable Grid
[JS]フォームの入力時にラベルがスライドするスクリプト -Sliding Labels
[JS]ブラウザのサイズに合わせてレイアウトを自動変更するチュートリアル
[JS]多彩なカスタマイズが可能な画像を拡大表示するスクリプト -TopUp
[JS]ユーザビリティに配慮したドロップダウン型のナビゲーションを実装するチュートリアル
JavaScript + Ajax 実践サンプル集 - ホーム
http://www.designwalker.com/2009/02/jquery-dropdown.html
[JS]Mac OS XのDock風に伸び縮みするナビゲーションのスクリプト -Sproing!
Webデザインに使えるjQuery UIライブラリ – creamu