スパイスラボ神部です。 なんか、Mozilla Labs の Jetpack というのを使うと、jQuery が書けば Firefox アドオンが書けちゃうかもしれないシロモノらしいです。 -Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web jQuery 先生、すごすぎます。 -Mozilla Labsが好きだ！ - Favorites! 追記 IDEA*IDEA でもとりあげられていたようです。 すっごく簡単にFirefoxのアドオンが作れてしまうMozilla Labsの『JetPack』がなんだか良さそうだ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～ まずはチュートリアル映像を見てもらうとよいですが、「すっごく簡単に」は「jQueryのPlug-inがかける
twitter facebook hatena google pocket ティザーサイトなどで、あと何秒でオープンみたいな表示があります。 JqueryプラグインjCountrを使用すると似たようなカウントダウンが可能になります。 sponsors 使用方法 jCountrからjquery.jCountr.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.jCountr.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#id名").counter({ hou
jQuery GalleryView - by Jack Anderson jQueryを使ったFlashばりにクールなギャラリー「GalleryView」が公開されています。 初期化に以下の数行を書けばＯＫみたい。 $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); 動かしているHTMLのなかなか分かりやすいです。 関連エントリ 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」 色々な画像の見せ方を演出できる画像ギャラリー集
Eコマースサイトなどに便利そうな、スライドのアニメーションでフィルタリングを行い、特定の属性のパネル（div要素）のみを表示するスクリプトをCSS-Tricksから紹介します。 Filtering Blocks demo デモでは、ナビゲーションに「View All」と属性4つがあり、それぞれの属性をクリックすると、指定属性のパネルのみをアニメーションで表示します。 「View All」は全部表示です。 仕組みは、ナビゲーション（id）とパネル（class）での指定を元にフィルタリングをしています。 ナビゲーション（例：webonly） <textarea name="code" class="html" cols="60" rows="5"> <a href="#" id="webonly" class="filter">Web Only</a> </textarea>
twitter facebook hatena google pocket マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。 jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にする小ネタです。 via：jQuery Animated Menu sponsors 使用方法 今回はサンプルとしてメニュー的なhtmlを記述してみます。 <ul id="menu"> <li class="home"><a href="#">home</a></li> </ul> CSSは以下とします。 ul#menu {height:81px;margin:0;padding:0;} ul#menu li a {display:block;height:81px;width:159px;text-inde
ネットショップや情報サイトなど、複雑な階層構造のWebサイトでは、なるべく分かりやすくて見栄えのいいナビゲーションを設置したい、というニーズがあります。今回は、jQueryプラグインのひとつ、「Treeview」を使って、リストをツリー風に格好よく表示する方法を紹介しましょう。 ui／li要素をツリー表示する「Treeview」 Treeviewプラグインは、HTMLのul／li要素でマークアップしたリストをツリー風に表示するJavaScriptです。要素をクリックで開閉したり、Windowsのエクスプローラのようなフォルダ／ファイルアイコンを表示したりと、いろいろカスタマイズできるのが特徴です。開発者はJorn Zaefferer氏（Jornの「o」の上に点が2つ付きます）で、MITライセンスで公開されています。 Treeviewプラグインは、以下のページで配布されています。ページの先頭
img要素の属性「longdesc」「title」を元に、Lightbox風にスムーズなアニメーションで画像を拡大するスクリプト「Fullsize」を紹介します。 Fullsize A New IMG Tag Attribute 「longdesc」は本来、画像の（詳細で長い）説明ページへのリンクを記述する属性です。 作者は、img要素に大きい画像を指定する属性「fullsize」を望んでおり、その代わり（？）として「longdesc」を使用したとのことです。 属性を使用しているため、img要素にリンク（a）を設置できる仕様は大きなポイントだと思います。 スクリプトの「longdesc」「title」を変更したい場合には、「jquery.fullsize.js」のL.71, 75, 76を変更すればよさそうです。 対応ブラウザはIE6/7/8, Fx, Op, Safari, Chrome
B2B Digital Marketing Strategies for 2025: Stay Ahead of Competitors Nov 20, 2024 8:00:00 AM The world of B2B marketing is transforming at lightning speed. As we head into 2025, the question isn’t just about keeping up—it’s about staying ahead. Businesses that adapt to new digital strategies now will be the ones to thrive tomorrow. So, how can your company cut through the noise, attract high-value
It's always a joy to understand how things work. Well, at least I do. Alright, this time, I want to share with you all, how to create a simple jQuery tooltip. In this website, I'm using a script I grabed it online, and it uses onmouseover and onmouseout. It's really messy and annoying me. So, it's jQuery comes to rescue. The way it works is fairly simple, I use the Anchor tag REL and TITLE attribu
twitter facebook hatena google pocket 最近は角丸やグラデーションが多用されていますが作るのはなかなかの手間です。 JavaScriptのRound Corners jQuery Pluginを使用すると、そんな手間を省くことが出来ます。 sponsors 使用方法 Round Corners jQuery PluginからroundCorners.jQuery.jsをjQueryからjqueey.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="roundCorners.jQuery.js"></script> <script> $(document).ready(functio
twitter facebook hatena google pocket 画像の切り替えでユーザーに驚かせることができそうです。 jQueryプラグインのJquery.ImageSwitchはフェードインなどのよくあるパターンだけではなく、ダブルドアと名づけられた切り替え方も可能です。 sponsors 使用方法 Jquery.ImageSwitchからGroject.ImageSwitch.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="Groject.ImageSwitch.js"></script> <script> $(document).ready(function(
JavaのSwingにあるJScrollPaneクラス。ウィンドウをはじめとした他のコンポーネントにスクロールバーの機能をつけることができる。これにより狭い範囲であっても多くの情報を載せられるようになる。 スキンにも対応したスクロール機能を提供する Webページでもそれは同様だ。溢れてしまった文字の扱いをどうするかCSSで設定するのがoverflowだが、それをもっと高機能にしたのがjScrollPaneだ。 今回紹介するオープンソース・ソフトウェアはjScrollPane、jQueryプラグインのスクロールプラグインだ。 jScrollPaneはDivタグに対して使う機能で、文字がはみ出した場合にスクロールバーを付けてくれるプラグインだ。スキン機能に対応し、Windows XP風やMac OSX風を使えたり、スクロールバーを一般的な右側でなく、左側にもうけることもできる。 多段のスクロー
jQueryプラグインの習作をするために作成したモノではありますが、プラグイン化したことでかなり楽に使えるようになったので、気が向いたら使ってみてください。 ライブラリについて HTMLを汚さず、簡単に画像のロールオーバーを実装できます。 ダウンロード jquery.rollover.js - v1.0.4 ライセンス MIT License 主な機能 HTMLで指定するのは初期表示の画像だけ 指定された箇所でも _on が付いている画像は無視 ロールオーバー画像をプリロード 拡張子は何でもOK (png, jpg, jpeg, gif, etc…) ロールオーバー画像を示す _on の部分を自由に変更できる 使用方法 画像を用意する example.jpg をロールオーバーしたい場合は、名前の末尾に _on を付けた画像 example_on.jpg を example.jpg と同じデ
twitter facebook hatena google pocket ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。 3ステップでこのツールチップを導入できるjQuery Simple Tooltipを紹介します。 sponsors 使用方法 【STEP 1】 jQuery Simple Tooltipからファイルをダウンロードします。 【STEP 2】 以下を記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.simpletooltip-min.js"></script> <script> $(function(){
[JAVASCRIPT] 30 Awesome Design Enhancing jQuery Plugins – デザインを拡張するjQueryプラグイン Pocket Tweet jQueryを使った、デザインを拡張するJavascriptまとめ。スライドショーやLightbox亜種系が多いっすね。Spacegalleryっての、マックのTime Machineみたいでなんだかスゴい。デザイン主体ではなく、技術主体で作られるデザインってのも、なんだかウェブ的でイイなぁと思うのであります。 30 Awesome Design Enhancing jQuery Plugins >>
画像を指定したサイズに切り取るjQueryプラグイン。 設置イメージ jQuery plugin: cropの設置サンプルサンプルを見る<!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" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Language" content="ja" /> <m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
