This domain may be for sale!
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行ほど
Tabs have proven to be a reliable and intuitive interface model for web pages that contain related content. But depending on how you set things up, tabs have one serious flaw: They frequently make it difficult or impossible to bookmark a specific tab. That is, if you have a page with five tabs on it, and I want to send someone to that page with specific tab showing, how do I do it? We ran into thi
twitter facebook hatena google pocket 画像を自動でモノクロにし、マウスを乗せるとカラーに戻る$.GreyScale jQuery Pluginを紹介します。 これを利用すると、画像ギャラリーをうまく見せることができそうです。 sponsors 使用方法 Prydie/jQuery-GreyScale-Plugin - GitHubからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="greyScale.js"></script> <script type="text/javascript"> $(document).ready(function() { $(functi
軽量、機能性、簡単記述などを兼ね備えたFlexSlider - The Best Responsive jQuery Slider。 スライダー系JavaScriptの定番となるかもしれません。 sponsors 使用方法 FlexSlider - The Best Responsive jQuery Sliderからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.flexslider.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('.flexslider').flexslide
なかなか良さ気だったので備忘録。 iPhone、AndroidやiPadなどの人気 のタッチデバイス用に作られたギャラ リー用のJSライブラリ・PhotoSwipe。 人気のプラグイン、jQueryMobileでも 利用することが出来ます。 タッチデバイス専用とあって、独自の操作でもある、ピンチイン/アウト等による拡大や回転、フリックで進むなどの操作が可能です。 PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhon
Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg> mini pie 2/5 donut 5,2,3 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari. Download version 3.3.0 Uncompressed 8.8Kb jquery.peity.js Minified 3.6Kb (+gzipped 1.7Kb) jquery.peity.min.js Source github.com/be
画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル+ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね! それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」 最近のサイトはフッターに多くの情報を載せて回遊率の向上を図っています。 これをJavaScriptを利用して、もっと印象的にさせられます。 via:End of Page Slide Out Box with jQuery | Codrops sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(window).scroll(function(){ //idが
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );
ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery 3種類あります。div要素を1ページ表示してスムーズなスクロールで移動。 Create a Vertical, Horizontal an
プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。 コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。(もっときれいに書けとか何そのコードとかも歓迎) 紹介してるスニペットたち ページトップにスクロールするだけ テキストボックスにラベル表示するやつ 要素のサイズを取得するやつ タブきりかえるやつ IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide() Google Analyticsのトラックイベント一括bind Ajaxサイトにするときに使うリンク置き換えプラグイン スク
最近あまり見なくなってきたし、個人的にも使う機会も減ったLightbox系のプラグインを久しぶりに探したついでにメモ。またいつか使うときのために・・・ライセンス形態と対応メディアも付けたのでそれなりに見やすいかもかもかも。 (デモもつけようと思ったけどめんどくさいからやめた・・・ jQuery LightBox plugin いつものLightbox。お世話になった人も多そう。 ページ
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 1)3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く