Colorful Content Accordion | Tutorialzine demoColorful Accordion With CSS & jQuery View the original tutorial »
ProtoFlow - Coverflow-like javascript library
ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff! Well mainly because I felt like it. There are few other coverflow implementations out there but I couldn't find any that used Prototype and Scriptaculous! Its fairly easy to use this lib. Just follow the steps: Add Protot
jQselectable : make selectbox so useful
jQselectable : make selectbox so useful > project home change skins：selectable | natural Default selectbox 1) 都道府県適用前 2) 都道府県 optgroupあり、selected属性なし、selectable 3) 都道府県 optgroupあり、selected属性あり、selectable 4) 都道府県 optgroupなし、改行指定、selectable 5) 日付、改行指定、selectable 年 月 日 Simplebox 6) 都道府県 optgroupなし、simpleBox 7) 日付、simpleBox 年 月 日 Using Callback 8) セレクタ、Callback
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
Yahoo! UI Library 3（YUI3）の基本
「Yahoo! User Interface Library Ver.3」（YUI3）はYahoo!が開発した、Webのページを作成するための汎用ツールライブラリーです。オープンソースで無償で提供されており、アニメーション効果やドラッグ＆ドロップ、データ取得やイベントの応答など、多岐にわたる機能がサポートされています。今回はまずYUI3の全体像を紹介します。 はじめに Yahoo!は、米国時間9月29日に「Yahoo! User Interface Library Ver.3」（YUI3）をリリースしました。YUI3はJavaScriptやCSS（Cascading Style Sheet）で書かれた、Ajaxライブラリーです。 Yahoo!は今まで、インターネットによる情報提供のためのさまざまなツールを作成してきました。開発したツールの中でも、Webのページを作成するのに汎用的に使えるツ
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
定休日・営業時間に合わせた表示するJavascript
常々不便だなと思っていた定休日や営業時間の固定表示にJavascriptでメスをいれるゾ！ 営業時間や定休日、電話番号などを固定表示しているサイトは多い。というよりはほとんどがその類だ。せっかくWebサーバやPCから現在の時間を取得できるのだから、現在の時間から今日は定休日なのか、今は営業時間なのか、をリアルタイムで表示してやるのが親切ってもんじゃない？ ということで簡単ではあるがあらかじめ営業時間と定休日を指定する事によって以下の分岐をするスクリプトを書いてみたよ。・営業中の場合・定休日の場合・開店前の場合・閉店後の場合の4種類のメッセージをPCの時間から調べて表示します。定休日は曜日による指定のみ。営業時間は曜日毎に指定できます。できれば第３○曜日とかまでやりたかったんだけど面倒だからやめました。これでまさに今、電話しても大丈夫なのかどうかを表示することができるってわけ。OK？http
IEでアンカー以外にもhover効果 動作サンプル
通常のボタン hoverでスタイルを指定したボタン ボタンにマススカーソルをポイントすると、背景色、文字色、マウスカーソルの形状が変わります。 この動作サンプルのソース（主な関連部分） 外部Jsファイルを読み込みます。 <script type="text/javascript" src="allhover.js"></script> マウスオーバー時のスタイルを指定します。 セレクタの前者は通常ブラウザ向け、後者がこのJavascript向け(IE向け)です。 <style type="text/css"> input.submit:hover , input.submitHover{ background-color:red; color:white; cursor:pointer; } input.reset:hover , input.resetHover{ background-
Chrome Experiments
Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.
【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (1) 本特集の趣旨 | エンタープライズ | マイコミジャーナル
本特集は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。特集の後半となる今回は、Webアプリケーションを作成するにあたって有用な、JavaScript APIを中心として取り上げる。今回紹介する内容は以下の通りだ。 アプリケーションキャッシュ クロスドキュメントメッセージング Web Workers Web Storage Web Database Web Sockets Geolocation API HTML5で新しく導入されたタグなどに関しては、前回の特集を参照していただきたい。 今回調査対象としたブラウザは、前回と同じく次の通り。ベータバージョンも含めた最新のバージョンをチョイスした。Internet Explorerについては、最新バージョンの8でもHTML 5への対応があまり進んでいなかったため
UIZE JavaScript Framework | AJAX, RIA, widgets, JSON, OOP, Class Inheritance, XMLHttpRequest, DOM manipulation, and all that stuff
EVER:CLOCK is a fun, themeable, online digital clock that can be loaded straight into your modern Web browser. Several different clock types are available, and there are thousands upon thousands of interesting clock themes to choose from. Each clock type offers its own unique qualities and theming options. The EVER:CLOCK Web app and its supporting Web site is built entirely using the UIZE JavaScri
リッチなウィジェット実装などが可能な超多機能JavaScriptフレームワーク「UIZE JavaScript Framework」が凄い件:phpspot開発日誌
リッチなウィジェット実装などが可能な超多機能JavaScriptフレームワーク「UIZE JavaScript Framework」が凄い件 2009年08月12日- リッチなウィジェット実装などが可能な超多機能JavaScriptフレームワーク「UIZE JavaScript Framework」 これまたなかなか凄いフレームワークが現れました。 「またフレームワークか」と思った方も、必見の機能があるので以下を参照してみてください。 以下にそのフィーチャーをピックアップしてみます。好きな機能だけを使うっていうのもありかもしれません。 カーソルを合わせるとアニメーションしながら切り替わるリンク 画像切り替えの様々なエフェクト集。これだけでも使いたい 色々なエフェクトで画像が切り替わるスライドショー機能 ソートできるカラーテーブル。こちらもユニーク カラーブレンダー 近似色をソートできるウィ
Web-kreation
Web Kreation Ltd. is now Morphosis Ltd.. You can still view this site but comments are closed and contact form disabled. If you want to see our latest work or contact us, please visit our new site www.morphos.is. Web-kreation Online Portfolio of Jeremie Tisseau UI/UX Designer, Event Organizer, Web Entrepreneur
Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial
Not too long ago I wrote a tutorial on how to create a drop down menu with CSS & jQuery, today I would like to go over how to create a simple navigation with a horizontal subnav. In most cases we can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds. View Demo Wireframe - HTML Nest a set of
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2/4 jQueryのFadingエフェクト1 [Javascript] All About![2/4 jQueryのFadingエフェクト1 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
greengecko design
http://www.coders.me/lang/en/web-html-js-css/javascript/mootools/buttons-like-windows-7-with-js-css
http://www.designwalker.com/2009/08/wp-jquery.html
http://www.sohtanaka.com/web-design/examples/fancy-navigation/