フォームのtextareaをより使いやすくすることが出来る「Textarea tools」:phpspot開発日誌
Textarea tools Small collection of tools for use with textareas (or input fields). フォームのtextareaをより使いやすくすることが出来る「Textarea tools」。 上記画像では、右端にはるボタンを押して、textarea部分のリサイズや、フォントサイズの変更が可能になっています。 使い方は非常に簡単で、必要なJavaScriptファイルとCSSファイルを読み込んでおき、textarea に class="resizable" の属性を付与するのみとなっています。 掲示板なんかにこの機能を組み込んでおけば親切ですね。
CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」:phpspot開発日誌
CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」 2006年10月04日- FreeStyle Menus Demonstration This script is a highly flexible means of converting HTML content into powerful popup menus, using either nested lists or DIV tags for menu data, and following best practice guidelines for powerful and accessible menus. CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」。 ブラウザ上で動くWindowsのメニュー風のUIは結構見かけ
perl+javascript - Livedoor地図情報のルート検索を簡単に : 404 Blog Not Found
2006年10月02日21:00 カテゴリLightweight Languages perl+javascript - Livedoor地図情報のルート検索を簡単に ルート検索に関しては、今のところlivedoorのそれが一番よく出来ているように思います。 [N] livedoor 地図情報「ルート検索詳細設定」が良い感じ 検索に利用したlivedoor 地図情報「ルート検索詳細設定」が便利だったのでご紹介。 ただ、Livedoorに限らず、ルート検索は出発点と到着点の設定が結構面倒に感じていたので、こんなHackを用意してみました。 要は「 404 Blog Not Found:javascript + perl - 住所でGoogle MapにアクセスするHack」で紹介したgeocoding.jpで地名→座標変換をして、その座標を使って状態遷移なしで住所指定をしてしまおう、というも
cyano: Google Analyticsで高度なトラッキングをする方法
ユーザーがページをロード開始してから閲覧できるようになるまでのロード時間はユーザーが自分のページを快適に閲覧できているかどうかを示す重要なファクターです。Google Analyticsのイベントという機能を使用することで、ユーザーの実際の体感速度を可視化することができます。 たとえば、このブログのある期間における体感速度のグラフはGoogle Analytics上で以下のように出ています。 44.84%のユーザーは100〜499msでロードできており、1秒未満でロード完了しているユーザーは合わせて73.49%であるとわかります。また、3秒以上かかっているユーザーも7.42%居ることも分かります。3秒以上ロードにかかるようだと離脱率も高くなるので、7.42%のユーザーに対して何かの施策が必要であるということも分かります。 このように、ユーザーが実際感じている体感速度を可視化することで、この
ブラウザ上で動作するWebエディタ作成Javascriptライブラリ:phpspot開発日誌
target=_blank>Real Time Syntax Highlighting Code Editor JavaScript ブラウザ上で動作するWebエディタ作成Javascriptライブラリ。 PHP, Java, HTML, JavaScript に対応しています。 下の画像のように、ブラウザ上でエディタが動作します。行番号もついてますね。もちろん編集毎にちゃんと再描画してくれます。 関連エントリ ブラウザ上で動作するソースコードエディタ『Edit Area』
JavaScriptとCSSを使ったクールなメッセージBOX:phpspot開発日誌
Crossfade DIV Demo For a long time, people looking to introduce animations to their website needed to resort to a third-party plugin such as Flash or Java applets to get the job done. JavaScriptとCSSを使ったクールなメッセージBOXのデモ。 ライブラリはscriptaculousを使用。 スクリプト自体は非常にシンプルで、単純にsetIntervalでタイマーをまわしてscriptaculousのEffect.fade / Effect.appear で各DIVを切り替えているだけのようです。 デモサイト上のソースをみれば、プログラミングの知識がない方でも実装できそうです。 WEBデザイン時のちょ
SEO対応Javascriptニュースティッカー | 秋元@サイボウズラボ・プログラマー・ブログ
Accessible JavaScript Newsticker 複数のニュースを、一個ずつ順番に表示させるギミック。サンプルはこちら。 何が”Accessible”かというと、Javascriptがオフの時でもニュースが一覧でHTMLソースに存在する、つまり、検索エンジンから認識される、ということだろう。JavascriptやCSSを使ってdegradableな階層メニューを作るような話題とこのあたりは同じ。 逆に、ページに表示されるけれど検索では引っかからない、ような表示内容にしたければ、ニューステキストをJavascript側で処理して表示させるようなものを作ればよい。 [追記] 百式の田口さんがほぼ同時に別のJavascriptティッカーを紹介されていた。Javascriptでお手軽ティッカーを実現 この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散してい
JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法:phpspot開発日誌
JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法 2006年08月17日- Mouse wheel programming in JavaScript Web applications are becoming more and more like “normal” desktop applications. Of course, they are more and more functional, but smooth user interface acts the primary role. So we have drag and drop, autocompletition, and much more. Many of those nice features got possible only with help of AJAX. JavaScriptで
XSS - 表示系パラメータに存在する盲点 :: ぼくはまちちゃん！
こんにちはこんにちは！！ クロスサイトスクリプティングの時間です！ XSSというと…！ まっさきに思いつくのが、入力データ送信 → 確認表示の部分での無害化漏れですよね！ たとえばこんな感じのフォームから受け取ったパラメータを、 確認として表示するページとか！ (入力) <form action="register.cgi" method="post"> タイトル：<input type="text" name="title"> ← 「ぼくはまちちゃん！」を入力 本文：<input type="text" name="body"> ← 「こんにちはこんにちは！！<script>alert(1)</script>」を入力 </form> (確認) <p>この内容で登録していい？</p> <p> タイトル： ぼくはまちちゃん！<br> 本文： こんにちはこんにちは！！<script>alert
GIGAZINE - マウスホイールの回転イベントをJavaScriptで検知する
実際の例としては「Google マップ」がまさにそうです。マウスのホイール部分を回転させると、地図を拡大縮小できます。 これと同じ仕組みを実装するにはどうすればいいの？というお話。 Mouse wheel programming in JavaScript http://adomas.org/javascript-mouse-wheel/ テストページはこちら、マウスホイールを回転させると表示が変わる http://adomas.org/javascript-mouse-wheel/test.html ほかにもこんなことができます。 JavaScript++かも日記: マウスホイールで拡大縮小 インフォシーク ホームページ作成「マウスホイールで画像を拡大縮小する方法」 せつないぶろぐ : JavaScriptによるマウスホイールのイベント処理 暴満館 >> OperaのJavaScript
リンクサムネイルの作り方 - GIGAZINE
外部サイトへのリンク文字列の上にマウスが来ると、自動的にリンク先のページをサムネイルで表示するという面白いスクリプトです。 例と設置方法は以下から。 例としてはこんな感じです。 http://lab.arc90.com/tools/linkthumb/ コードのダウンロードと使い方などは以下の通り。 arc90 lab : tools : Link Thumbnail http://lab.arc90.com/2006/07/link_thumbnail.php 互換性はInternet Explorer 6.0以上、Mozilla Firefox 1.5以上、Apple Safari 2.0、Opera Version 8.51以上であるそうです。 ちゃんと外部サイトのみ判別し、自サイト内ではいちいちサムネイルを表示しないようにできます。
GIGAZINE - いろいろな効果を追加できるJavaScriptライブラリ「jQuery」
ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。 ダウンロードや実際の例、使い方などの各種取り扱い説明は以下の通り。 jQuery: New Wave Javascript http://jquery.com/ 上記ページの「Run」をクリックするとその機能の一端を垣間見ることができます。面白い効果です。 その他のデモとしてはこんな感じでいろいろなところに使えます。特に一番下の「Example G」のボタンをクリックしてから本文の上にマウスを乗せると色が変わり、フェードしながら元に戻るというのはシンプルながら面白い。 JQuery http://codylindley.com/blogstuff
GIGAZINE - ファイルサイズわずか3KBのオーバーレイ効果「Litebox」登場
オーバーレイ効果を作り出す「Lightbox」というスクリプトの超軽量版です。 実際の例やダウンロードは以下から。 Litebox- Same great taste, less calories http://www.doknowevil.net/litebox/ 上記ページの画像をクリックするとどういう効果なのかがよく分かります。 Liteboxで使われているのがこの「moo.fx」という軽量なJavaScriptエフェクトライブラリ。 moo.fx - the next small thing http://moofx.mad4milk.net/ また、類似品としてはこんなのもあります。 GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」
便利なAjaxリソースへのリンク集:phpspot開発日誌
Solutoire.com - Ajax Resources 便利なAjaxリソースへのリンク集。 JavaScript 初級/中級向けリンク、デバッグ&テスト、エディタ、ヘルプ、Ajaxの基本〜サンプル集、チュートリアル、Ajax関連ニュース、Ajaxフレームワーク〜フレームワークのリファレンスへのリンクと、豊富にリンクしたサイト。 全て英語サイトへのリンクになってますが、これは便利なサイトですね。
Web開発者のためのライブラリTOP10とCrossBrowserToys:phpspot開発日誌
Top 10 Web Developer Libraries - Cameron Olthuis I decided to make a list of the top libraries that I have come across or that I personally use. WebデベロッパーのためのライブラリTOP10。 Moo.fx , Rico , Swat ,ColorCombos ,script.aculo.us ,Mochikit ,Dynamic Drive CSS Library, PEAR , DHTML Goodies ,Cross Browser | Toys ,Yahoo UI Library 実際には12個紹介されます。 ColorCombos, Cross Browser | Toys 以外はわりとメジャーなので知っていましたが、いろいろとライブラ
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
WEB問題作成ツール
http://phiffer.org/projects/box-grid/
maxkiesler.com