レスポンシブにも対応したドロップダウン FlexNav
「FlexNav」は、クロスブラウザー（IEは7以降）対応のドロップダウンメニューを簡単に実装できるjQueryプラグインです。レスポンシブに対応しているほか、ネスト（入れ子構造）のメニューも作れるので、非常に使い勝手のいいプラグインですね。 Android 2.2以降に対応しているので、古いスマートフォンへの対応を求められる案件で特に重宝します。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、FlexNav を配布ページからダウンロードしましょう。FlexNav は github で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と「jquery.flexnav.min.js」を、利用するWebページの body の閉じタグ直前に読み込みます。 //(中略) <script src="
jQueryで読み込み時とリサイズ時の処理を合わせて書く方法 – creamu
jQueryで読み込み時とリサイズ時の処理を合わせて書くには、以下のようにします。 $(window).bind(“load resize”, function(){ // code here }); ※はてぶでコメントを頂いたので追記（2013.2.19） jQuery 1.7以上では「.bind」は非推奨になったため、以下のように「.on」を使います。 $(window).on(“load resize”, function(){ // code here });
[jQuery]要素の高さ・幅を取得する | バシャログ。
iPhone5sはどうせすぐには手に入らなくてもよいとおもいゴールドを予約したtanakaです。 今日はjQueryでブラウザに表示されている要素の高さや幅を取得する方法についてまとめます。 …といってもjQueryユーザーであれば$(...).height(), $(...).width() でOKってことはご存じかと思います。 それも紹介しますが、それ以外の方法についてもまとめます。 $(...).height(), $(...).width()について DOM要素の高さ、幅を取得するメソッドです。弊社ウェブサイトのホームにある以下の要素で値を取得してみます。 $('div.info:first').height() // => 120 $('div.info:first').width() // => 200 上記のような感じで取得できます。ChromeのDeveloper Tool
![[jQuery]要素の高さ・幅を取得する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた | スターフィールド株式会社
以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、 最近バージョンアップされ、機能もパワーアップされてました。 サイト自体もリニューアルされ、今風になっていました。 それに伴い、今回新しく記事にすることにしました。 以前の記事は以下になります。 コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」 今回のバージョンアップした点は以下になります。 ・レスポンシブに対応 ・スワイプが可能（スマートフォン） ・cssが付いているので、cssの設定が楽になった ・コントロールの画像等も付いている ・カルーセルの設定も変更に(プラグインで設定する) 今回もDEMOを作成しましたが、 レスポンシブになった箇所以外は、あまり以前のと変わってはいません。 DEMO それでは簡単にではありますが、使い方です。 bxSlider
jQuery – 目的の場所にさくっと要素を追加する | 1：n – DETELU Blog
「いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。 「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。 他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。 class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下
[jQuery]個別の画像をラジオボタンやチェックボックスにするプラグイン | RuputerFan
初めまして、kawaguchiと申します。 現在Webサイトを制作しているのですが、 ちょうどやりたいことに合致しているプラグインを探していて、このページにたどり着きました。ありがとうございました。 実装したところ、IE9でダブルクリックしないと反応しませんでした。自分で対応しようと思ったのですが、お恥ずかしながら知識・技量が足りません。何か方法があれば、ご教授いただけると助かります。 コメント by kawaguchi — 2012年10月1日 @ 1:41 AM こんにちは。 今、作っているサイトにこちらのプラグインを入れたいのですが、質問があります。 checkboxで画像の切り替えをしたいのですが、「○○-over.png」「○○-select.png」を用意しましたが切り替わりません。 jquery、jquery.syg_imageradio.1.1.jsともに読み込めています。
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
[jQuery] レスポンシブ表示・スワイプ切り替え対応でモバイルページにも使いやすい画像スライドショープラグイン – SlidesJS
以前は、Slides, A Slideshow という名前だった多機能スライドショープラグインですが、いつの間にか SlidesJS という名前に変わり、機能もシンプルに、かつマルチデバイス対応できるものに変わっていました。 オプションや使い方などもマルっと変わっていたため、古いバージョンの内容を削除し現在の仕様内容へ書き換えました。 SlidesJS プラグインの特徴 モバイルページにも使いやすいよう画像のレスポンシブ表示が可能で、スワイプでの画像切り替えもできます。 オプションでページャー・ページナビゲーション・自動再生の開始と停止ができ、エフェクトはスライドにもフェードにも変更できます。欲しい機能が揃っている上、設置も簡単です。 ダウンロード プラグインのダウンロードは以下のページより。 SlidesJS, a responsive slideshow plug-in for jQu
![[jQuery] レスポンシブ表示・スワイプ切り替え対応でモバイルページにも使いやすい画像スライドショープラグイン – SlidesJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/13dbe7efe8ed31a6d9a46b661656ca737229776f/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2011%2F12%2Ficon.png)
jQuery で HTTP 接続するときの書き方: Days on the Moon
12 月 13 日に Kyoto.js の第 3 回 meetup で、「jQuery で HTTP 接続するときの書き方」と題した 5 分間のライトニングトークを行いました。以下にその内容を一部再構成して収録します。 こんにちは、nanto_vi です。今日は jQuery で HTTP 接続をするときの書き方について話します。 皆さん jQuery を使うことも多いかと思います。jQuery で HTTP 接続をするとき、古いサンプルだと次のような書き方が載っています。 $.ajax({ url: '/foo/bar', data: { baz: 'qux' }, success: function (data) { console.log(data); }, }); 接続完了時の処理をコールバック関数として $.ajax() に渡してやる形ですね。しかし、現在この書き方は非推奨となっ
jQuery UI Datepicker-土・日・祝日・非営業日対応 - Tech-Sketch
jQuery や jQuery UI は、とても便利です。各ブラウザのJavascript実装の差異を吸収してくれるだけでなく、ドラッグアンドドロップやタブビューなど様々なリッチなUIを利用することができます。あのIE6対応を考えなくても済むというだけでも、利用する価値があるというものです。 これらjQuery/jQuery UIは、コンシューマ向けのWebサイトのみならず、企業内の基幹業務用Webシステムであっても利用して当たり前、というほど普及していると言ってもよいでしょう。 ただし実際の業務システムで利用する際には、「ここをカスタマイズできれば！」という部分が出てくるものです。 jQuery/jQuery UIはオープンソースですから、ソースコードを直接修正してしまえば何でもカスタマイズできます。ただしそのような手段を取ると、今後リリースされるであろう新しいjQueryライブラリ
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
jQuery Mobile 1.1.0 日本語リファレンス
Bbfstoto adalah situs slot online peluang maxwin tertinggi yang bisa didapatkan dari slot gacor terbaru bergaransi. Kemenangan luar bisa dan mudah menjadi daya tarik bermain pada situs slot terbaru. Didukung dengan mekanisme peluang lebih besar hingga 70% berbanding 30% semua bisa merasakan withdraw besar. Awal mula munculnya judi slot hanya untuk kalangan menengah keatas, namun era sudah berubah
アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」:phpspot開発日誌
Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので１つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
jQuery 色々な自分自身の○○を取得する
jQueryで色々な自分自身の取得 現在表示中のURLだったり、自分自身のファイル名など、色んな自分自身のを取得するにはlocationが有効です。 現在表示中のURLを取得 アドレスバーに表示されているURLを取得するなら alert(location.href); 現在表示中のホスト取得 現在表示しているホストを取得します。 alert(location.host); 現在表示中のハッシュを取得 現在のURL中のハッシュを取得します。 alert(location.hash); なお、下記のようにするとハッシュによって処理を分けることができる if(location.hash=="#test"){ $("div.hidden").removeClass("hidden"); } 現在ページURLのパス名を取得 alert(location.pathname); パラメータを取得 単純に
『jQueryを使って、外部サイトへのリンクだけ別ウィンドウで開く方法』
以前、静岡の住宅建設会社さんのサイトをYahoo!カテゴリへの登録申請をした際に、外部サイトへのリンクが別ウインドウで 開いていない、という指摘を受けました。 対処方法は、外部サイトへのリンクは別ウインドウで開くようにAタグを書き直せば良いのですが、この静岡の住宅建設会社さんはページが多めなこともあり、今回はjQueryを使って、外部リンクの場合だけ別ウィンドウで開くように設定をしました。 （僕じゃなくてシステムの人がやってくれた。） 以下その方法 1.jQueryのサイトからjquery.jsをダウンロードしてくる。 2.ページのヘッダにjquery.jsを読み込む。 <head> <script type="text/javascript" src="jquery.js"></script> </head> 3.ページソース内(ヘッダとか)に下記スクリプトを書く。 <head> <sc
知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社
ロールオーバーすると滑らかに画像が切り替わるライブラリ ボタン・リンクのロールオーバー効果を表現する際、CSSやJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。（※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。） 動作サンプル このライブラリは、JPEG・GIF・透過PNGに対応しています。 JPEG/GIFの場合 透過PNGの場合 InternetExplorer6～8のPNG対応について InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様で
jQueryで、透過pngをIE6に対応させる
jQueryで、透過pngをIE6に対応させる jQuery2008年12月7日 2008月11月現在、IE7の世界におけるシェアは47.39％を占めています。 （Net Applicationsより） 確実にIE6→IE7への移行は進んでいますが、まだまだIE6は無視できないのが現状です。 色々な方が透過pngをIE6でも機能させる方法をご紹介されていますが、実はjQueryのプラグインを使用する事で、あっさりIE6にも透過pngを対応させることができます。 「IE7.jsで対応」「iepngfix.js」といった方法もあるにはありますが、前者はちょっと反則的な気がしますし、後者は余計なソースがどんどん増えますし、マニアックなバグの調整作業をしなければならないのが難点です。 jQueryであれば、きちんとブラウザがサポートされているので安心ですし、余計なコードも増えません。（2～3行ほど
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
