These examples demonstrate the basic effect of jQuery Masonry. $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); itemSelector is specified to rearrange all box elements, including the ones inside another div. <div id="primary" class="wrap"> <div class="box col2">...</div> <div class="box col1">...</div> <div class="box col1">...</div> <div class="box col3">...</div> <div> <div c
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
IE6, IE7, FF2, FF3, Safari 3, and Opera 9 on Windows. FF3 and Safari 3 on MacOSX. 画面をスクロールすると、特定の要素も一緒にスクロールさせるjQueryプラグインです。 スクロール可能な範囲を指定したり、一緒にスクロールさせるかどうかの有無も指定することができます。 設置イメージ jQuery Scroll Followの設置サンプルサンプルを見る<!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:lang="ja" l
Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f
web designing（以降、webdes）の09年8月号より、自分でコピペできるようにメモ。 webdesではjQueryの特集が組んであり、これは私も将来使うのではないかと思う項目がたくさんあった。 ちなみに追従するメニューのことを、プロはフローティングメニューというらしい。 さっそくwebdesのコードをさらしてみる。 別途jQueryはダウンロードする必要があるのであしからず。 ヘッダーにcssとjQueryを読み込む [html] <link rel="stylesheet" href="css/main.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" sr
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説Search 動作環境 バージョン情報 PHP 4.4.0 | MySQL 4.1 OS Windows XP(SP2) ブラウザ Internet Explorer 6 Internet Explorer 7 Firefox 2.0 Netscape 7.0 Ranking !! ↑ ポチッと押してくださると管理人が涙します（；д；） Union Links PHP小屋 Thanks famfam (Silk Icon) HoHoHo!（Mini Icon 2） NWYH Stock Image Library（写真素材） QRコード I'm Here!! mixi
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説:nth-child(index/even/odd/equation)〔親要素のn番目の子要素または親要素の偶数または奇数番目の子要素をすべて選択〕 :first-child〔各親要素の最初の子要素をすべて選択〕 :last-child〔各親要素の最後の子要素をすべて選択〕 :only-child〔子要素が1つしかない親要素の子要素をすべて選択〕 親要素のn番目の子要素または親要素の偶数または奇数番目の子要素をすべて選択します。 :eq(position)は1つの要素にしかマッチしませんが、これは各親要素の指定したインデックス番号の子要素にマッチします。 インデックス番号は、0始まりの:eq()とは異なり1始まりです。 第1引数in
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説:first〔最初の要素を選択〕 :last〔最後の要素を選択〕 :not〔指定したセレクタ以外の要素を選択〕 :even〔インデックス番号が偶数の要素を選択〕 :odd〔インデックス番号が奇数の要素を選択〕 :eq〔指定したインデックス番号の要素を選択〕 :gt〔指定したインデックス番号より大きいインデックス番号を持つ要素をすべて選択〕 :lt〔指定したインデックス番号より小さいインデックス番号を持つ要素をすべて選択〕 :header〔h1,h2,h3などの見出し要素をすべて選択〕 :animated〔現在アニメーション中の要素をすべて選択〕 親要素の最初の要素を選択します。 ⇒各親要素ごとに最初の要素を選択する場合は、：fir
ホームページ制作でタブやアコーディオンなどを設置する事があるのですが、そういうケースではjQueryが便利です。 色々と面白いプラグインが多数ありますが、意外と自分でタブ切替やアコーディオン処理をやろうと思うと難しいみたいで、まず簡単なアコーディオン処理のサンプルを作ってみました。 以下、サンプルの解説。 簡単に説明すると、左のアコーディオンが個別に開閉するパターン（sample_1）で、右のアコーディオンが開いているのは常に１つのパターン（sample_2）です。 全体は実際のサンプルページのHTMLソースを参考して下さい。 肝心のjQueryは以下の記述でGoogleからもらい、jQueryの処理は外部ファイルとしてまとめます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javasc
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures. The panels can be activated programmatically by setting the active option. Keyboard interaction When focus is on a header, the following key commands are available: UP/LEFT: Move focus to the previous
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
JSライブラリを使用したメニューや、Lightboxを導入したCGI、自作 JSライブラリなどを配布しています。 スクロール（スライド）するアコーディオンメニューです。 アコーディオンメニューは色々なライブラリが開発されてますが、今回はjQueryプラグインのAccordion Content/Menu Script(ddaccordion)を利用しアコーディオンメニューを作成しました。 特徴 jQueryプラグインのAccordion Content/Menu Script（以下からddaccordionと呼ぶ）は、設定が分かりやすく簡単な上、機能は豊富。HTML&CSSでメニューを幾らでも加工できます。またCookieに開いたカテゴリを保存できる為、別のページに移動してもそのカテゴリのメニューが表示される機能があります。 ブラウザをスクロールするとアコーディオンメニューが移動する為、何
印刷時にナビゲーションなどのいらない部分を省略したい時CSSを分けるのが面倒な場合。 jPrintAreaは簡単に印刷範囲を指定することができます。 jPrintAreaからjquery.jPrintArea.jsをjQueryからjquery.jsをダウンロードします。 ヘッダー内 <script src="～/jquery.js" type="text/javascript"></script> <script src="～/jquery.jPrintArea.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.link').click(function(){ $.jPrintArea('印刷対象の要素名') });
近い将来、夢のマイホームを考えているのですが、その際にローンを組む予定です。私は過去に消費者金融から借入をした経緯があるのですが、そういったことがあっても住宅ローンは組めますでしょうか。 消費者金融を利用したからローンが絶対に組めないということはありません 確かに消費者金融の借入の情報は住宅ローンを組む際には有利には働きません。しかしこの借入情報は5年後に自動的に削除されるので、5年以上前に消費者金融を利用していただけで完済も済んでいるのでしたら特に問題はないです。 しかし、過去に消費者金融からの融資の返済に延滞があったことや、今も借入を行っている場合は住宅ローンの審査は難しい場合が多いですね。そもそも住宅ローン審査でチェックされることとしては、住宅ローンの借入が現状の収入の何倍の金額に該当するのかという点、収入に対しての返済比率がどうであるか。というところが見られます。そこをクリアしてい
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説jquery.scrollable 1.0.1 - Make your HTML elements move HTML要素をスムーズにスクロール jquery.scrollable 1.0.1 スクロールするHTML要素を作成するjQueryプラグイン。 ナビゲーションボタンと前後に移動可能な矢印ボタンが付いています。 要素をクリックしても次の要素へスクロールすることができます。 設置イメージ Garage Door Style Menuの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説簡単に画像や要素のスライドを実装できるjQueryプラグイン。 自動再生の有無や、コントロールの指定（First、Previous、Next、Last）などは、パラメータで簡単にカスタマイズできます。 同一ページ内に複数のスライドを配置する場合は、コントロール部分のIDをユニークに指定する必要があります。 Easy Slider 1.5の使用例サンプルを見る<!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
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く