バナーのローテーション表示を JavaScript で！ - codess - builder by ZDNet Japan
アフィリエイトなどで利用するバナー広告は、通常、１つの広告枠（広告表示領域）に１つの広告しか表示できません。 （Flashバナーでは、この枠にとらわれないものもありますが） 「複数の商品のバナー広告を掲載したいんだけど、広告枠はこれ以上広げたくない！」 こんなときに役立つテクニックが、バナーのローテーション表示です。 簡単に説明すると、１つの広告枠に次々と色々な広告を表示していく方法です。 この方法はページスクロールが発生しない（させない構成の）ページにとても有効です。 狭い領域を有効に活用しましょう！ 簡単なサンプルを作成しましたので、参考にどうぞ。 実装は JavaScript (prototype.js利用) で行っています。 詳細についてはサンプルページのソースコードをご覧ください。 サンプルページ ※このエントリは builder メンバーにより投稿されたものです。シーネットネッ
軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」:phpspot開発日誌
MooTools Mocha UI Mocha is a MooTools user interface class made with canvas tag graphics. This is an on going exercise to help me become more familiar with both MooTools and the canvas tag. 軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」。 次のような移動＆リサイズ＆クローズ＆最大化可能なウィンドウを簡単に作成できます。 サイト内のデモでは、タイトルと内容を入力することで、動的にウィンドウを作成できることが紹介されています。 フレームワークには、mootools 使用。 かなり軽快に動いてくれ、ページ内で別窓を作るＵＩを作る際にはかなり使えそう。 関連エントリ Prototype.jsベ
ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」:phpspot開発日誌
Toggler Toggler is currently just a proof of concept to mimic the functionality found in desktop programs like Adobe Photoshop ドラッグ＆ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」。 Togglerを使えばマウスをクリックして上からドラッグするだけでチェックボックスの一括チェックが可能になります。 使い方も次のように簡単です。 var toggle = new Toggler('elementId'); toggle.start(); // start the toggler (enabled by default) toggle.stop(); // stop the toggler これは便利ですね。
jQuery版script.aculo.usの「Interface elements」がすごい:phpspot開発日誌
Interface elements for jQuery - Real examples of Interface elements jQuery版script.aculo.usの「Interface elements」。 script.aculo.us 同様、エフェクト、ドラッグ＆ドロップ、アニメーション、スライダー、オートコンプリートのほか、 ３Dアニメーション、アイテム選択用UI、テキストエリアリサイズ、ツールチップヒント、MacOS X の Dock 風UI を実装するためのライブラリが同梱されています。 詳しくは以下のデモを使ってみればそのすごさが分かるはず。 Effects [opens in new window] (combined showcase) Test new animate function [opens in new window] Use new func
ブラウザ上で動作するプレゼン資料を簡単に作れる「Slider.js」:phpspot開発日誌
Slider.js Example This script makes it easy to create a sliding carousel component like the one seen at www.curbly.com. ブラウザ上で動作するプレゼン資料を簡単に作れる「Slider.js」。 一つのボックス内でスライドするスライダーコンポーネントが簡単に作れます。 少ないスペースで多くの情報を格納できるので、使いどころによってはかなり便利。 実装方法も簡単で、<DIV> 内に一括して全てのスライドの内容をHTMLに定義します。 後は、次のJavaScriptでコンポーネントを初期化するのみです。 <script type="text/javascript" charset="utf-8"> var my_slider = new Slider('my-slider', {
超高機能なJavaScriptテンプレートエンジン「ZParse」:phpspot開発日誌
ZParse - Advanced Javascript Templating ZParse is a multi-purpose, extensible, self-defineable javascript template parsing system which lets you define your templating rules. 超高機能なJavaScriptテンプレートエンジン「ZParse」の紹介。 Zparseを使えば次のようなif文などのロジックも入った高機能なテンプレートをJavaScriptで使えます。 <% var name = "Solid Snake", address = "somewhere"; %> <div id="card"> <:if name && address:> <div>name: ${name} </div> <div>addre
WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」:phpspot開発日誌
WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」 2007年04月20日- Handling Keyboard Shortcuts in JavaScript Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」。 次のように定義することで、Ctrl+Shift+Xのショートカットキーが押された際の機能を実装できます。 shortcut(
JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ:phpspot開発日誌
JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ。 バリデートするライブラリも沢山でてきました。とここら辺で一度まとめておきました。 Really easy field validation (デモ) - 入力値がおかしいと、エラーメッセージをフェードインさせながら超クールに表示できます。 ※ ページの最後で使い方紹介（これは良いです） Remember the milk風の登録フォームも作れそう prototype.js依存。 Realtime validation using Ajax (デモ) - Ajaxなどを駆使して、入力値を動的にチェックするライブラリ Validate.js (デモ) - リアルタイムではないけど、入力値をチェックするためのライブラリ Tooltip for forms - 入力チェックではないけど、フォームの入力ヒントを出して
超シンプルで使い勝手のよいJavaScriptコード集「Nomadic Functions」:phpspot開発日誌
NoFunc Nomadic Functions 超シンプルで使い勝手のよいJavaScriptコード集「Nomadic Functions」。 他のどのライブラリにも依存しない、★投票システムや、Ajaxリクエスト、カラーピッカー、ドラッグ＆ドロップ、テーブルソートなどを実現するためのJavaScriptコード集です。 例えば、ajaxリクエストをするのに、次の関数があって、wReq('http://www.YourDomain.com/',0,function(v) { alert(v); }); のようにシンプルに呼び出せるコードが紹介されています。 function wReq(u,s,change) { var r=[function(){ return new XMLHttpRequest(); },function(){ return new ActiveXObject("Ms
JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」:phpspot開発日誌
JAVASCRIPT MOTION TWEEN JavaScriptによるモーショントゥイーンアニメーション実装「JSTween」の紹介。 デモサイト、解説ページを見てみてください。これまで見たことがないJavaScriptアニメーション表現を見ることが出来ます。 次のようなTweenクラスがあって、それを使うことでこういったアニメーションが実現できるということかなり便利そう。 var t = new Tween(object,property,easing,start,end,duration,suffixe); 次のJavaScriptソースコードが提供されています。 Tween.js 、ColorTween.js 、OpacityTween.js 、TextTween.js 、Sequence.js 、Parallel.js 名前を見るとなんとなく分かりますが、必要に応じてファイルを
超軽量JavaScriptフレームワーク「SimpleJS」:phpspot開発日誌
SimpleJS SimpleJS is a javascript library simple and light proposing functions ready with the use to facilitate the exploitation of ajax. 超軽量JavaScriptフレームワーク「SimpleJS」。サイズはなんと14KB. 機能は次のような感じ。
prototype.js逆引きサンプル集 - JavaScriptist
はじめに bookmark prototype.jsの概要 ユーティリティ関数 bookmark 指定idのエレメントを取得 - $ 指定idのエレメントのvalueを取得 - $F エレメントのリスト形式を配列形式に変換 - $A オブジェクトをHash形式に変換 - $H 指定した範囲のリストを返す - $R prototype.jsで追加された機能 bookmark Ajax Ajaxリクエストを行う - Ajax.Request Ajaxで指定エレメントの内容を書き換える - Ajax.Updater Ajaxで指定エレメントの内容を定期的に書き換える - Ajax.PeriodicalUpdater 定期的に指定の処理を行う - PeriodicalExecuter Enumerable リストに特定の関数で処理させる - Enumerable.each リストの全ての値を調べる
scriptaculous逆引きサンプル集 - JavaScriptist
はじめに bookmark scriptaculousの概要 ボックス要素に対して表示/非表示エフェクト bookmark フェードインで表示 - Effect.Appear フェードさせる - Effect.Fade ブライドダウン効果 - Effect.BlindDown ブラインドアップ効果 - Effect.BlindUp スライドダウン効果 - Effect.SlideDown スライドアップ効果 - Effect.SlideUp 折りたたむ効果 - Effect.Fold 縮小後消失 - Effect.Squish テレビのスイッチオフ風に消失 - Effect.SwitchOff 落下後消失するアニメーション - Effect.DropOut 拡大アニメーションで表示 - Effect.Grow 拡大アニメーションで消失 - Effect.Puff 縮小後消失 - Effec
JavaScriptで線を描画するためのGraphicsクラスライブラリ:phpspot開発日誌
Drawing lines in Mozilla based browsers and the Internet Explorer - The Code Project - JavaScript JavaScriptで線を描画する方法についての記事。 JavaScriptで線を描画するためのGraphicsクラスライブラリも配布しているようです。 Graphicsクラスライブラリを使うと、次のような簡単なコードで線を描画できるようです。 var g = new Graphics(); g.drawLine(100,50,200,70); g.paint(); ダイナミックなインタフェースを実現するJavaScript ライブラリも多いですが、 こういったJavaScriptでの図形描画機能についてもおさえておきたいですね。 関連エントリ ブラウザ上で動作するJavaScript製のMSペイ
マウスホイールイベント取得用のprototype.js拡張サンプル:phpspot開発日誌
Mouse Wheel マウスホイールイベント取得用のprototype.js拡張サンプル。 標準のprototype.jsを使っても、マウスホイールイベントを簡単に取ることは出来ません。 ということで、prototype.js用の機能を拡張するJavaScriptコードのサンプルが公開されてます。 次のコードをwheel.jsなんかで保存してprototype.jsと一緒に読み込むと、Event.Observeにmousewheelが使えるようになります。 Object.extend(Event, { wheel:function (event){ var delta = 0; if (!event) event = window.event; if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera)
PHPの関数をJavaScriptで使うことができる「p2js」:phpspot開発日誌
p2js - Google Code PHPの関数をJavaScriptで利用する為にピュアJavaScriptで移植しました(しています。) PHPの関数をJavaScriptで使う「p2js」。 使い慣れているPHP関数をどうにかJavaScriptで実装できないかと以前考えたことがありましたが、Google Codeにてそういうプロジェクトを発見しました。 標準のJavaScript 機能だと、PHPほど標準関数なんかが充実していないこともあって、こういうのが使えると便利ですね。 まだ全ての関数があるわけではないですが、つくり中ということで、今後に期待ですね。 あとは機能ごとにファイル化して、script.aculo.usのように、ファイル指定で簡単に必要な機能だけ読み込める機能なんかがあったらなかなか使われそうな気がしますね。 関連エントリ JavaScriptから使える便利なUR
JavaScriptパーティクルエンジンライブラリ:phpspot開発日誌
Jason Harwig JavaScriptパーティクルエンジンライブラリの紹介。 次のように、Flashムービーのような粒子のアニメーションをJavaScriptで実現しています。(IEだと動きませんでした) JavaScriptで実現というところが興味をそそられる部分ですね。 ソースコードがダウンロードできるので、興味のある人は覗いてみましょう。 関連エントリ グラフ描画機能が追加されたJavaScriptライブラリ「Dojo 0.4」 選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」 JavaScriptでOSやブラウザの検出が出来る「BrowserDetect.js」
JavaScriptでOSやブラウザの検出が出来る「BrowserDetect.js」:phpspot開発日誌
JavaScript - Browser detect A useful but often overrated JavaScript function is the browser detect. Sometimes you want to give specific instructions or load a new page in case the viewer uses, for instance, Safari. JavaScriptでOSやブラウザの検出が出来る「BrowserDetect.js」。 JavaScriptでOSやブラウザのバージョンを簡単に得ることができます。クラスなのでグローバル変数多用もせず、再利用できて便利です。 <html> <body> <script language="javascript" src="BrowserDetect.js"></sc
リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」:phpspot開発日誌
リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」 2006年10月20日- dhtmlxGrid - sortable Javascript DHTML grid with rich script API dhtmlxGrid is a cross-browser editable JavaScript grid control that provides professional solution for representing and editing tabular data on the web. リッチなExcel風グリッドインタフェースを提供するJavascriptライブラリ「dhtmlxGrid」。 見出し部分をクリックで各アイテムをソート可能。セルのフォーマットを指定でき、チェックボックスやラジオボックスを置くことも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルなエフェクト提供JavaScriptライブラリ「bytefx」:phpspot開発日誌