Six Revisionsのエントリーから、カレンダーや日付をフォームに入力するスクリプトを紹介します。 Fantastic, Free Calendar and Datepicker Scripts
[JS]カレンダーや日付ピッカーのスクリプト集
Six Revisionsのエントリーから、カレンダーや日付をフォームに入力するスクリプトを紹介します。 Fantastic, Free Calendar and Datepicker Scripts
JavaScriptのイベントハンドラ説明
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 を読んで，思うところあって書いてみました（決してカウンターアーティクルではない）。 むかしむかし JavaScript を触っていた むかしむかしに書かれた JavaScript の本で勉強している／した 人向けに。大元記事（そろそろ本気で学びませんか？ | Think IT（シンクイット））の想定読者に近いかなと思います。よって以下は JavaScript の初学者にはまったくおすすめできない（余計な知識がついてしまう）です。 Step 1: はじめのいっぽ ボタンを押したらメッセージボックスが出現する HTML を書いてみます。 <html><body> <script type="text/javascript"> function ShowMes
[JS]クッキーを使用しないで、セッションデータを利用できるスクリプト
sessvars.jsは、ブラウザのクッキーを使用しないで、セッションデータを利用できるスクリプトです。 Session variables without cookies デモ sessvars.jsを使用することにより、クッキーをオフにしていたり、使用が禁止されている環境でもセッションデータを利用することができます。 ※スクリプトをオフの場合には利用できません。 格納できるデータの上限は、Opera9.5で2MB、IE7, Fx1.5/2, Safari3で10MBとなっています。 サイトに記載してある使用上の注意は、以下になります。 sessvars.jsは、JavaScriptのwindow.nameにデータを格納します。 これはクロスドメインのセキュリティ問題があるため、パスワードやクレジットカード番号などの重要な情報には利用しないでください。 しかし、ヘッダ情報でサーバーには送
[JS]デジカメ画像のExifデータを表示するスクリプト -exif.js
Reading EXIF data with Javascript デモページ exif.jsのデモでは画像をクリックすると、JPEG画像のExifをダイアログボックスに表示します。 exif.jsの設置には、同サイトで配布してる「binary.js」と「binary_ie.js」が必要です。
[JS]テキストや画像のパネルをスクロールさせる軽量のスクリプト -slider.js
leigeberのエントリーから、テキストや画像を配置したパネルをスクロールさせる軽量(3.5KB)のスクリプト「slider.js」を紹介します。 Ultimate JavaScript Scroller and Slider デモページ デモでは、クリックでスクロールさせるだけでなく、テキストを自動でスクロールさせる「ニュースティッカー」や、画像を自動でスクロールさせる「画像ギャラリー」のデモも公開しています。 slider.jsの動作環境は、IE6/IE7, Firefox, Opera and Safariとなっています。
指定したHTMLエレメントをローディング中にする際に便利な「busy.js」:phpspot開発日誌
busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」
一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳
一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。 エフェクト関係とかそれ以前に、どんなことをすればどうなるのかという基礎的なサンプルです。 プラグイン関係は以前書いた記事を参照してください。 jQueryでweb制作をする時にキープしておきたい30リスト そもそもｊQueryって何ですかという人は以下を。 今更ですが、jQueryにはまりました 追記：ほんとすいませんローカルで動作確認したところ動くのですが、オンラインではfirefoxしか動作確認せずに公開。 IE7では上の4つが動きません。 いくつか確認したのですが、どうしてもIE7でJavaScriptエラー。ダメすぎる自分・・・。 追記2：まいりました。他のサイトの記述を見てもミスが見つかりません。言語問題でしょうか・・・アク
[JS]既存サイトのグリッドやフォントサイズを変更できるスクリプト
dfFlexGridは、既存サイトのグリッドやフォントサイズの変更ができ、変更したスタイルをクッキーに保存することができるスクリプトです。 dfFlexiGrid - Liquid Javascript Grid Layout デモページ dfFlexGridの使用方法は、「dfFlexiGrid.js」を外部ファイルとして埋めこみ、以下の書式でグリッドを変更することができます。 <textarea name="code" class="html" cols="60" rows="5"> <body onload="mygrid=new dfGrid('wrapper','left_column_id','right_column_id',fadeSpeed,swipeSpeed);"
[JS]巨大なテーブルでも省スペースに表示するスクリプト -Super Tables
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js
ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。 dを使用することにより、リキッドイアウトの幅を広げることが可能です。 設置方法 ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。 <script src="./dynamiclayout.js" type="text/javascript"></script> ウィンドウ幅に合わせたCSSファイルを用意します。 それぞれのCSSファイルを読み込む際にはtitle属性に ウィンドウ幅が750pxまでの場合の『thin』 ウィンドウ幅が950pxまでの場合の『wide』 ウィンドウ幅が950pxより大きい場合の『wider』 を付けて読み込みます。
JavaScript Library Archive
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
jQueryを使った、ランダム画像で様々なシャッフル演出効果のあるプラグイン*ホームページを作る人のネタ帳
結構昔からあったんですが、使ってみると意外と素敵なので記事に残しておきます。 イメージギャラリーを作成する時などにも使えそうですし、非常に高度な動きを簡単に実装できますので便利です。 ※この記事はJQueryJavaScriptを使ったプラグインの紹介です。 何はともあれサンプルを見てみるのが早いかも 初級者用サンプルデモ 中級者用サンプルデモ１ 中級者用サンプルデモ２ 上級者編サンプル１ 上級者編サンプル２ その他のバライティサンプル JQueryの基本的構造 基本はjquery.jsと、プラグイン用のjsファイルをまず読み込みます。 ※あくまでも基本構造の説明なので、この通りコピペしてもうごきません。 <script type="text/javascript" src="../jquery-1.2.1.js"></script> <script type="text/javascri
Flickrで使われているあのクールなドロップダウンメニューを実装してみよう:phpspot開発日誌
woork: Flickr like horizontal menu This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu: Flickrで使われているあのクールなドロップダウンメニューを実装してみよう！ 次のようなクールなドロップダウンメニューを実装してみましょう。 紹介元で、HTMLと画像のサンプルが配布されています。 実装自体は次のように関数が定義されていて、 <script language="javascript"> function showMenu(id_menu){ var my_menu = document.getElementById(id_menu); if(my_menu.style.
超クールなカレンダー型日付入力補助用JSライブラリ:phpspot開発日誌
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. 超クールなカレンダー型日付入力補助用JSライブラリ。 次のような個性的なカレンダーで入力補助が可能です。 オシャレでかわいいカレンダー スタイルされたクールなカレンダー 写真入りのカレンダー mootoolsを使っていて次のように初期化するだけで簡単に使えるみたい myCal1 = new Calendar({ date1: 'd/m/Y' }, { direc
スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」 - GIGAZINE
IE6/IE7/Firefox/Safariに対応しているJavaScriptで、使い方もかなり簡単でページにほとんど変更を加えずに導入可能。 また、リンクの先読みにも対応しており、画像の上にマウスが乗ったことを感知して自動的に先読みすることもできますので体感的にはかなり速度アップしているように感じます。 画像をズームする機能のみに特化しているため、ほかの余計な機能付きのライブラリよりも動作は軽いのも特徴で、クリックしてズームされた後にはちゃんとドロップシャドウ効果が付いたりするなど、芸も細かい。 実際のデモと詳細は以下から。 cabel.name: FancyZoom 1.0 上記ページの下の方にある「Example」に体感できる例があります。なかなか面白い。 で、実際に設置するにはまず上記ページ中にあるZIPファイルをダウンロードしたら解凍し、出てきた2つのフォルダをFTPソフトなどで
JavaScriptライブラリの先駆け「prototype」を勉強しなおすサイト20
twitter facebook hatena google pocket 現在JavaScriptライブラリは数多くリリースされていますが、それらのさきがけとなったのは「prototype」でした。 またNASAのサイトでも使用されているように、その実力は広く認められています。 今回はprototypeの価値を見直し、勉強できるサイトを紹介します。 sponsors Reference ・prototype.js リファレンス（v1.4.0,1.5.x,1.6.0） ・prototype.js の開発者向けメモ：（v1.5.0） ・prototype.jsリファレンス HowTo / Review ・第１回：Prototypeライブラリの内部 ・いまからはじめるPrototype.js ・第１回：Prototype.jsを使う準備 ・Prototype.jsとは何か ・Prototype
[JS]JavaScriptのインクルードと圧縮が簡単にできるスクリプト -IncludeJS
IncludeJS JavaScriptのインクルードと圧縮は、下記のコードで簡単にできます。 JavaScriptのインクルードの例 <textarea name="code" class="js" cols="60" rows="5"> <script src="include.js" type="text/javascript"></script> <script type="text/javascript"> include( 'インクルードするファイル名', 'インクルードするファイル名' ) </script> </textarea>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]jQueryで実装するテキスト・画像・サイトのツールチップ | コリス
jQueryでテーブルをかなり便利にフォーマットしてくれる『Flexigrid』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas | コリス