And after a long time, a new version of Skitter, now responsive. Image credits
Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties. With the CSS 3D Transforms we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create t
可変グリッドレイアウト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
hoge fugafugafuga fugafugafuga fugafugafuga fugafugafuga fugafugafuga fugafugafuga fugafugafuga piyopiyo
iPadや、iPhoneなどのタッチデバイス の普及で、個人的にも電子書籍への 関心がかなり高まりました。そんな中、 割と良さそうな電子書籍専用のフレーム ワークがあったのでメモがてらご紹介。 こういうの覚えておくと重宝しそうですね。 なかなか動きが良かったです。ただ読むだけの電子書籍ではなく、HTML5やjQueryを使って、より「電子」らしく表現出来ると楽しそうですね。 HTML5で作る電子書籍用のフレームワークです。jQueryやiPadのようなタッチデバイス向けのフレームワークとなっています。 複数フレームワークを併用 Lakerには定番のjQueryや、iPhone、iPadで黄金比を保つcssフレームワークのLess Framework、HTML5+jQuery製動画プレイヤーのjPlayer、スワイプイベントをサポートする為のライブラリ、TouchSwipeなども搭載されてい
さて本日も実にクダラナイご依頼をお客様より賜りました。 よくある、jQueryによる画像のフェード切り替えでプロモ画像を切り替えるサイト。 それを、1枚目からフェードして欲しいと。 このくそツマラナイ依頼のために、そうとう探しましたよそういうプラグイン。。 いつもは、おそらくjQueryの画像トランジションプラグインの中でも王道中の王道、「jQuery Cycle Plugin」を使ってるんですが、これだとカスタムしないと1枚目はトランジションしてくれない。 まぁ、1枚目だけspacerいれといて、秒数を短くして、などのカスタムも考えられますが、なにせメンドイ。。それに、自分でカスタムするんだったらプラグインなんて使わない。 ということで探して見つけたのがこれ。 →Ultimate Fade-in slideshow かんたんに設置できて、1枚目からフェードしてくれます。 ただ、要素を切り
こんにちは。開発部でインターフェースエンジニアをやっております油井(あぶい)です。ライブドアでは主にjavascriptを中心としたクライアントサイド側の開発をやっております。 今回は裏jQueryと題しまして、普段から単にユーザーとして使っているだけでは決して知ることができないjQueryの裏技を紹介したいと思います。 注意 この記事で扱うjQueryは最新版の1.4で動かすことを前提としています(一つ前のバージョンである1.3.2でも動くことは検証済みです)。サンプルで使うjQueryセレクタの書き方は「jQuery」で統一しています。「$」に置き換えて読んでもらってもかまいません。 はじめに - jQueryで扱うイベントやトリガー javascriptがふんだんに使われた画面遷移の発生しないウェブアプリケーションではブラウザ上で発生するイベントやトリガーをうまく扱いこなすということ
解説 キュー内の関数の実行を遅延します。 duration で指定した時間後に、キュー内にある次の関数を実行します。 引数 duration Number, String: 遅延時間。ミリ秒で指定します。 "fast" and "slow" の文字列での指定も可能です。 ("fast" → 200ms / "slow" → 600ms) [queueName]オプション String: キューの名前。指定しない場合は、デフォルトの fx キューを遅延します。 戻り値 jQuery: jQuery オブジェクト 例 例1:delay() を使用して、toggle("slow") を実行するまでの時間を遅延します。 block2 は 1秒後、block3 は 2秒後に実行します。 $("#run").click(function(){ $("#block1").toggle("slow");
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合(rebuildメソッド) サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか?jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ(透過PNGの黒ずみなど)対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね!インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク(仕
facebookのウォールをサイトに表示する jquery.fb.wall in perl facebookのウォールをサイトに表示するjqueryプラグイン「fb.wall」 http://www.neosmart.de/social-media/facebook-wall があるが 「access token」をhtmlかjavascriptファイルに記述する必要がある。 read onlyの権限でも「access token」を誰でも見られるところに設置するのはどうも気が進まない。また「access token」があれば管理しているfacebookページの情報が簡単に取得できる。その逆も簡単にわかってしまう。 そこで「access token」はcgi内に格納して外部には「access token」がわからないように上記「fb.wall」を改造してみた。 ■必須perlモジュール L
jQueryとjQuery UIがあれば大抵のことはできるのですが、意外なことにiframeのリサイズができなかったので、できるようにしてみました。 といっても、jQuery UIのResizableにiframe用の処理追加しただけです。 デモ iframeをdivで囲む Resizableは、リサイズハンドラーとしてのdiv要素を対象要素の子ノードとして追加するのですが、iframeにはappendChildできません。そこで、iframeをdivで囲みdivをリサイズ対象にして、alsoResizeとしてiframeを指定します(divのリサイズにiframeを連動させる)。 リサイズ中はiframeをdivで覆っておく 通常iframe上でのイベントは、iframe内で起きます。iframe上でマウス動かしても、$(document).mousemoveが起こらないって事です。そこ
方法は似たようなものですが、jqueryを使わない例。 いずれにしろjavascriptですので、オフにしているユーザには効果がありません。 (時間とジャンプ先は適当に設定し直してください) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div>本文</div> <script type="text/javascript"> <!-- var Sample = { wait
以前にご紹介した 「jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト」 それを使って、今行っている案件をこなそうと思ったら、 3つ程改良したい部分が出てきた。 一つ目はあらかじめ文字を出現させていて、 そのままsubmitされた場合、デフォルトの文字のままだった場合、 それを削除するというもの。 二つ目は、あらかじめHTMLの段階でvalueをセットしていた場合や、 以前入力していたのをあらかじめ表示させておくなどをした場合、 デフォルトの文字を表示させないようにするというもの。 3つめは単純、フォーカスがあった部分の 背景の色を変えて、入力している部分がわかるようにするもの。 以上3点を加えたものを作ってみた。 ※2011/06/19 add jQuery1.2~1.2.6までは今回の方法でも動作しますが、1.3以降のバージョンでは、ボタンクリック時
What Is It? TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly. Download Development Version -This version should be used in a development environment or if you would like to study or modify tinyTips. Production Version – This version is compressed and should be used in a production e
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く