もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 記事一覧 | gihyo.jp第21回jQueryでAJAX入門：Google AJAX Feed APIを利用したRSSの読み込みとプラグインへの組み込み 長谷川広武（はせがわひろむ；h2ham） ，徳田和規 2010-10-08 第20回jQueryでAJAX入門：正規表現でサイトに表示したTwitterにリンクをつける 長谷川広武（はせがわひろむ；h2ham） ，徳田和規 2010-03-24
CrossSlide
CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (a lot.) What does it do? CrossSlide can do a few different things, depending on how it's called: Slid
アンカーの種類別アイコンをjQueryでやってみた。 | バシャログ。
このエントリーではWEB デザイナーへの道 ～ 第 14 回 ～にインスパイアされて実験をしました。 CSS3のセレクタでできるのなら、jQueryでできるんじゃないか？と思ったのがきっかけ。 結果→大成功！(今回のセレクタはできましたが、現時点ではCSS3でもサポートしていないセレクタもあります。参考：API/1.1.2/DOM/Traversing/Selectors - jQuery JavaScript Library)ソースコードは以下の通り。 anchor_icon.html <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htm
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
CSSをURIのクエリーで切り替えるJavaScript - KAZUMiX memo
2008-03-06 追記: jQuery無しで動くように修正しました あるといいかもと思って試しに作ってみたら、IE*1の印刷対応に端を発する問題でえらい苦労しました。苦労話は後回しにするとして、次が動作サンプルページとサンプルコードです。（要jQuery。要素の取得で楽してコードを短くするために使っています） CSSをクエリーで切り替えるJavaScript 動作サンプルページ (function(){ //クエリーにstylesheetがあれば切り替え関数呼び出し if(location.search.match(/\bstylesheet=([\w]+)/)){ var titleValue = RegExp.$1; changeStyle(titleValue); } // CSS切り替え関数 // 引数titleValueと一致したtitle属性を持つlink要素を有効にする
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements
Overview Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links belo
Interface elements for jQuery - About Interface
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commerci
Lightview “Overlay anything width style”
Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library. By combining support for a wide range of media with gorgeous skins and a user-friendly API, Lightview aims to push the Lightbox concept as far as possible. Lightview uses HTML5 to help you deliver the best experience across every browser. Let it enhance your media automatically or create c
The Tiny Scrolling(s) - from The Lab of the weblog Central Scrutinizer
First published on March 25, 2006 and March 31, 2006 Start with an example is the better way to begin a javascript technique post: click one of the links above to see straight away - in two meanings - what i’m going to talk about. What is Tiny Scrolling? How can I use it? How does it works? Where I can download it? Someone to thanks? What about an “horizontal tiny scrolling“? What is Tiny Scrolli
prototype.jsを利用したスムーズなページスクロール | ユージック
prototype.jsを利用したスムーズなページスクロール 2007年3月14日 最新のPrototype version 1.5.1_rc1と最新のscript.aculo.usのeffects.jsをを使った超簡単でしかも高機能なページスクロールを実現できる記事を見つけたのでご紹介します。 auto-scrolling page navigation 以下のコードをauto-scroll.jsとして保存します。 Event.observe(window, 'load', function() { $$('a[href^=#]:not([href=#])').each(function(element) { element.observe('click', function(event) { new Effect.ScrollTo(this.hash.substr(1)); Event
新しいウインドウを開くべき？ - LogJET
新しいウインドウを開くべき？ このサイトはHTMLのルール上、新しいウインドウを開いてはいけないのですよ(いや、別に自分で決めたわけじゃなくて...)。XHTML strictの決まりごとです。 ルールを無視して、target="_blank"をアンカータグ<a>に放り込めば問題なく新しいウインドウで開くことができるんです。でもアクセシビリティ上よくないのですよ。 最近知ったのですが、ページ読み上げソフトなどを使用している場合、新しいウインドウが開いてもユーザーは分からないそうです。要するに、戻るボタンなどが効かなくなり混乱するので良くない、というわけです。少なくともアンカータグ<a>にtitle属性で新しいウインドウが開く旨を記述する必要があるそうです。 その話については少し置いておいて... 外部のサイト = 新しいウインドウ？ ところが外部リンクも全部同じ窓で開くと、飛んだ外部のサイ
prototype.jsを用いたフォントサイズ変更スクリプト
Posted by: Hirotaka Ogawa @ January 11, 2007 02:57 PM | Movable Typeを触っている時間がとれないのですが、新年に入ってからちょっとばかしテンプレートとスタイルシートを変更して、ほぼ一カラム、ほぼfont-size: 100%で表示されるようにしました。要はレイアウトとか考えるのを最小限に留めようと思ったわけです。不得手なデザインをこれ以上考える必要がないという私個人の精神衛生上の利点に加え、読者の目にも優しくなりました。 結論: でかフォントは人を健康にします。 それだけだとなんなので、prototype.js (Prototype JavaScript Framework: Class-style OO, Ajax, and more)を使ってフォントサイズ変更スクリプト(クッキー保存機能付き)を実現してみました。これまで
treasurebox.js - JavaScriptによる開閉ボックスなインターフェース (firstAudience)
treasurebox.jsとの関連づけを行います。htmlの<head>〜<head>領域内などに以下の行を追加してください。 尚、$設置先のパス$はtreasurebox.jsの置き場所に合わせて適宜編集してください。 機能を適用する部分へは、次のようにclassづけ／idづけをします。 <div class="A_sec"> <a href="#" id="A_1">スイッチ</a> <div id="A_1_block">〜内容〜</div> <a href="#" id="A_2">スイッチ</a> <div id="A_2_block">〜内容〜</div> <a href="#" id="A_3">スイッチ</a> <div id="A_3_block">〜内容〜</div> •••スイッチと内容のセットは必要分繰り返す••• </div> 解説 まず共通の識別子を決めてくだ
simahebi.js - テーブルをシマシマにして見やすく。 (firstAudience)
» Ver.1.0 Download 特長 特定のテーブルが自動的にシマシマになるスクリプトです。 jsファイルにリンクして、tbodyタグにid（もしくはclass）を追加するだけで、表組がシマシマになります。 色や背景画像などデザインは自由にカスタマイズできます。 同一ページ内で複数のデザインを利用することもできます。 IE5.5〜IE7, Firefox, Opera, Safari（OSX10.3以上）に対応。 利用許諾：クリエイティブ・コモンズ - シェアアライク 2.1 Demo １行置きに自動的にスタイルを適用。 ０番行 奇数番行 偶数番行 奇数番行 偶数番行 奇数番行 偶数番行 奇数番行 偶数番行 同一ページ内で複数のデザインテーマが使えます。 ０番行 奇数番行 偶数番行 奇数番行 偶数番行 奇数番行 偶数番行 奇数番行 偶数番行 利用方法 サンプルファイル simaheb
Style Sheet Changer
スタイルシートを利用することで、同じhtml文書に対して色んな「見た目」を適用することが可能になります。 代替スタイルシートは、いくつかのスタイルシートを用意して、利用者に適用するスタイルシートを選択してもらう仕組みです。FirefoxやOperaではブラウザが代替スタイルシートをサポートしています。 Style Sheet ChangerはSafariやInternet Explorer for Windowsでも代替スタイルシートが利用できるようするスクリプトです。 選択されたスタイルはcookieに保存されます。また、画像を利用したプレビュー表示もサポートします。 対応ブラウザ Firefox 1.5以降 Safari 2.* Internet Explorer 6.* for Windows Opera 9.* スタイル変更後、リロード操作が必要になる場合があります(特に Safa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
http://iamacamera.org/sandbox/photoshuffler/
livepipe.net - livepipe リソースおよび情報
?D of K
ZEBLA EFFECT シマシマクラス