[JS]異なる高さのパネルを高いものに揃えたり、指定した高さに揃えるスクリプト -Equal Column Heights 2.0
Demo 7: 高さを変更する際にさまざまなスタイルを加えることができます。 ここでは背景色をグレーに変更。 Equal Column Heights 2.0の使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 各パネルを内包するラッパーを用意します。 <div class="hoge"> <div>パネル</div> <div>パネル</div> <div>パネル</div> </div> Step 3: JavaScript jQuery
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable - かちびと.net
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scri
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
Google AJAX Libraries APIを利用しよう！
AJAX Libraries API - Google Codelというのが公開されていました。 jQUeryやMootoolsなどの人気のJavaScriptライブラリを Googleのサーバーから直接読み込んで利用できるというものらしいです。 わざわざダウンロードしてサーバーにアップロードして・・・ といったような手間が省けるようなので、 試しにつかってみることにした。 今回利用できるようになったライブラリは以下の５つ。 ・jQuery ・prototype ・script.aculo.us ・MooTools ・dojo これらが有名なライブラリなのですね。 そしてこのAJAX Libraries APIを利用すると、 こんな利点があるようです。 ・Google CDNを活用したファイルの配布 ・対応していればGzip圧縮転送を有効にする ・ダウンロードするファイルは可能なかぎり最小
[JQuery] ロールオーバーをinput要素にも対応させる | F+R (FplusR)
本当にこのサイトを放置していましたが、一応生きています。 MT4移行計画も準備中です。ですが忙しくてなかなかできません。 さて、本題ですが、input要素のボタンをロールオーバーさせたい案件がありまして、いろいろと調べてみました。 はじめは、「jQueryだけで画像のロールオーバーを実装する方法」を参考にしていましたが、Image Rollover Codeに慣れた身に関しては、個別にファイル名を記載してプリロードさせるやり方はやはり面倒です。クラスを割り当てて、特定のファイル名を記述するとロールオーバーを勝手にやってくれる方が、制作する方としては非常に楽です。 そこで、Easy Image Rollover Script With jQuery ~ PEPS.caのロールオーバースクリプトが、input要素にも対応しています。 ただ、このままだとおもしろくないので、すこし改良してみまし
ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル:phpspot開発日誌
Using jQuery for Background Image Animations - Snook.ca ホバー時にブロックの背景色を滑らかにアニメーションするJSサンプル。 デモページ デモページを見ればわかりますが、カーソルをあわせると滑らかに背景がアニメーションされます。 アニメーションの仕方がなかなか良くて、左→右や、上→下のように方向を指定できます。 当然ですが、Flashを使わなくてもJSでこうしたことが出来て、今までありそうでしたが、そんなに多く見かけることがなかったテクニックではないでしょうか。 覚えておくとふとしたときに使えそうです。
inputlog - yuga.js 0.6.3 - 優雅なWeb制作のためのJavaScript
主にコメントでいただいた不具合を修正したyuga.jsの0.6.3を公開します。0.6.0からの差分は以下の通りです。 0.6.3 :thickboxのクラスが付いていても２重に設定されないように調整、ストライプがテーブルでうまく動作しない不具合の修正 0.6.2 : ロールオーバーセレクタで#nav li imgなどの指定とselfリンクが合わせて使えなかった不具合を修正 0.6.1 : ロールオーバーセレクタカスタム時に複数指定に対応、#のみの仮リンクにするするスクロールを適用しないように 基本的には特定環境におけるバグフィックスです。0.6.0でも問題がないかたは無理にアップデートする必要はありません。 yuga.js 0.6.3 ダウンロード 不具合などありましたら、この記事にコメントしていただけると助かります。 Comments:3 kawachi 08-07-08 (火) 1
inputlog - yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript
時間に余裕ができたのでyuga.jsに新機能を追加しました。追加した機能は以下です。 親ディレクトリへのリンクにクラスを設定と画像の変更 簡易タブ機能の追加 そのほか、スクロール周りのソースの整理などを行いました。 yuga.js 0.6.0 ダウンロード 最低限の使い方 XHTMLのhead要素内で次のように読み込みます。これで各機能が有効になります。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script type="text
inputlog - yuga.js 0.5.3 - 優雅なWeb制作のためのJavaScript
Home > JavaScript | jQuery > yuga.js 0.5.3 - 優雅なWeb制作のためのJavaScript Newer Older yuga.js 0.5.3 - 優雅なWeb制作のためのJavaScript yuga.jsの0.5.3を公開します。0.5.1からの差分は以下の通りです。 0.5.3 : するするスクロールを高速で切りかえられた場合の動作修正 0.5.2 : 余計なアクセスが発生する不具合の修正 基本的にはバグフィックスですが、0.5.2で修正した内容が大きなバグなのでできればアップデートを推奨します。 yuga.js 0.5.3 ダウンロード 不具合などありましたら、この記事にコメントしていただけると助かります。
Deneme Bonusu Veren Bahis Siteleri - En iyi Bonus Veren Siteler Nelerdir?
Ücretsiz verilen bonusların free bet ve deneme bonusu adı altında sitelerde verildiği bilinmekte. Bu tür bonuslar küçük miktar olsa da, bazı oyuncular için önemli. Onlar risk almayı istemediklerinden bu bedava bonuslarla para kazanma şansı yakalıyorlar. Çoğu bahis sitesinde güncel deneme bonusları var. Fakat büyük sitelerde bu bonuslar daha büyük miktarlarda verilmekte. Deneme bonusu veren bahis s
yuga.js 0.4.2 - 優雅なWeb制作のためのJSとデモ
ひょんな事から、yuga.jsを作られたKyosukeさんから未公開最新版のyuga.js 0.4.2 をもらっちゃいました！ 嬉しさのあまり、本人に公開と配布の許可を確認したら快諾していただいたので、せこせことデモページも作ったっす。 元々CSS Nite LP2で紹介したJSなんで、デモっぽいデモも無いかな？と思い用意したというのもあるのですが。 あ、yuga.jsってのはjQueryのプラグインです。jQuery使って優雅なWeb制作しちゃおーっていう感じだとボクは思ってます。 まぁ何はともあれデモをば。 デモページ デモページごとダウンロード（zip:241kb） yuga 0.4.2 ダウンロード（5kb） デモページは、IE6無視してます。IE6でどんなに素敵なことになってても仕様です。 ですので、Fx、IE7、Opera、Safari3（Winでしか見てないけど）辺りで見てい
jQueryベースの滑らかなグラフ描画ライブラリ「Flot」:phpspot開発日誌
Ruminations: Flot 0.1 released! It draws on inspiration from Plotr and PlotKit, and several other commercial packages. But also from venerable old gnuplot - there's nothing more boring than hand-picking axis scales so I wanted the default algorithm to be smart. jQueryベースの滑らかなグラフ描画ライブラリ「Flot」。 Flotを使えば次のようなグラフをJavaScriptで描画することが可能です。 コードは次のように書くみたいです。 <div id="placeholder" style="width:600px;height
[JS]jQueryのプラグイン33+1選 -2007年11月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 前回のjQueryのプラグイン33+1選 -2007年9月と合わせて、参考ください。 lightbox for jQuery jQu
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
jQuery 1.2登場!! - 16日には新UIを公開予定 | エンタープライズ | マイコミジャーナル
The jQuery projectは10日(米国時間)、jQueryの最新版となる「jQuery 1.2」を公開した。jQueryはJavaScriptで開発された軽量なAjaxフレームワーク。動作が高速でサイズも小さいという特徴がある。XPathを指定して動作する仕組みを採用している点も特徴的。 2007年8月27日(米国時間)に1.1系の最終坂となる「jQueyr 1.1.4」が公開されたわけだが、予定どおりとはいえ、かなり早い段階で次期バージョンとなる1.2を公開してきたことになる。jQueryをJSONに置き換えたようなProtoscriptが2007年9月6日(米国時間)に発表されるなど、この分野はいままさにホットな状況にある。 1.2では1.1で実現されていた機能のうちいくつかが削除されている。1.1系から1.2にアップグレードする場合には移行ガイドを読むのを忘れずに実施され
ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery（入門編）
こんにちわ。山下です。 最近、私の周りではJavaScriptライブラリといえば、jQuery の名前がまず最初に挙がってくるようになってきました。今回は、jQueryって何が便利なの？っていう人向けに、ポイントを掻い摘んで説明します。 1.名前空間を汚さない 他のJavaScriptライブラリとかだとStringとかArrayを直接拡張してたりしますが、jQueryはグローバルな名前空間を汚しません。eachとかmapのような便利な関数もすべてjQueryオブジェクトの属性として定義されています。 jQuery.each, jQuery.extend, jQuery.grep, jQuery.map, jQuery.merge, jQuery.trim, etc. また、標準では $ にショートカットが割り当てられるのですが、jQuery.noConflict()と書くことで proto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Content Slider | Responsive jQuery Slider | bxSlider
simplelib with jQuery
[JS]jQueryのプラグイン33+1選 -2007年9月 | コリス