JavaScript無しのドロップダウンメニューを実行する純粋なCSS*ホームページを作る人のネタ帳
サンプルはこちら 現在結構話題になっていますが、これはすごいなと思ったので記事として残しておきます。 純粋なCSSによって実行させるドロップダウンメニューのサンプルが公開されています。 非常に勉強になりますね。 コードをコピペして超約してみたんですが、どうもあきらかな著作権違反ぽくなってしまったのでコピペはしません。 どうかリンク先でお確かめください。 Implementing drop-down menus in pure CSS (no JavaScript) （追加記事） コメントから参照 Browserによりサポートの仕方違いますよ Browser Supportを見たら分かるとおり、IE6ではJavascript使用して疑似クラスをごにょごにょしてます。 はてぶでも誤解している人が多いので、注釈お願いします。 すごいですねー。 JavaScriptを切ると見れないですねー。
テーブルをソートできるようにするjsライブラリ-table sorting
テーブルをソートできるようにするjsライブラリ-table sorting table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sortable" id="foo"> ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。 <th class="unsortable"> ソートの対象にした
Zopeジャンキー日記 :JavaScriptのテンプレートエンジン 「Ajax Pages」
Ajax Demo Blog : Demonstration of an Ajaxian Blog http://ajax-pages.sourceforge.net/examples/blog/ ここにアクセスして、以下の操作をやってみてほしい。 1. 右下のAdminをクリック 2. admin / adminでログイン 3. 「New Post」ボタンを押す 4. タイトル、本文を書いて「Publish」を押す 5. 上の「back」をクリックすると、ブログエントリが「載った」！ なんと、これがJavaScriptだけでできているのだ！ つまり目の前のHTMLページが「ブログシステム」になっている（サーバがないので、このデモでは「保存」はされない）。 これはJavaScriptのテンプレートエンジン「Ajax Pages」のサンプルのひとつ。 Ajax Pages http://aj
FireFoxでのPHP開発を手助けする「FirePHP」:phpspot開発日誌
FirePHP - Firefox Extension for PHP Development FirePHP allows you to take a deeper look at all the work your PHP code does to generate that page you are currently looking at in your Firefox browser. FireFoxでのPHP開発を手助けする「FirePHP」。 FireFoxのエクステンションとして動作し、FireBugの機能拡張をしてくれます。 インストールするとFireBug内に次のタブが表示されます。 サーバヘッダーで特定の文字列を返すとFireBug内、FirePHPウィンドウにその文字列が表示できます。 特定ヘッダーを出力するために、「FirePHP PEAR Package」が使え
web newbie - Javascript初心者からみたprototype
http://d.hatena.ne.jp/amachang/20070413/1176421425 勉強会のあと、そしてこの記事の後、 もう一度自分の中でprototypeについてまとめてみた。 下の実行結果を見て、首をかしげた人は是非とも読んでいただければと思う。 （って、首をかしげるのは僕だけか？！） var Box = function(size){ this.size = size; }; Box.prototype = { color: "red" }; var box = new Box(10); alert(box.color); // red Box.prototype = { color: "blue" }; alert(box.color); // red var box2 = new Box(11); alert(box2.color); // blue Box.p
MOONGIFT: » 必見！物凄く自由なWebツール「PositLog」:オープンソースを毎日紹介
久々に物凄い！と感激してしまうソフトウェア。しかも日本語。 Webサイトを作るにはそれなりの知識が必要だ。最低限、HTML構文を覚える必要がある。しかし、ブログや技術の向上によって、誰でも手軽に情報発信できる仕組みができつつある。 だが、それでもまだ甘かった。情報発信する上で、レイアウトの問題があった。レイアウトは大抵、画一的で全く自由ではない。その束縛を超える、自由な情報発信ツールがこれだ。 今回紹介するオープンソース・ソフトウェアはPositLog、マップ型のWebレイアウト＆ブログシステムだ。 PositLogのすごさは実際に触ってみてもらうのが一番いい。かなりの衝撃を受けるはずだ。何せ、付箋を貼り付けるように自由に文字列を配置できるのだ。 各項目は線で結ばれ、関連性が見られるようになっていたり、ファイルを添付することもできる。さらにドローイングに対応し、絵を描くこともできる。 文字
IEにFirebugの機能を提供する - "DebugBar"登場 | エンタープライズ | マイコミジャーナル
DebugBarの動作例 - DebugBarサイトから抜粋 Webアプリケーション開発に必須のツールといえばFirefoxとそのエクステンションFirebugだ。その機能は驚くべきものがあり、もはやFirebugなくてはWebアプリケーション開発はできないと考えるデベロッパやデザイナは少なくない。 エクステンションが豊富に用意されているFirefoxだが、ほかのWebブラウザでも似たような機能を提供するものがある。ここでは先日新しいバージョンが公開されたDebugBarを紹介したい。DebugBarはIEを対象として開発されたツールで、Firebugの機能をIEでも実現することを目指している。 今回公開されたバージョン(5.0 beta 1)では新しくDOMタブが追加されている。DOMツリー上のノードが選択されると、Source/Style/Comp.Style/Layout/Attrs
入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル:phpspot開発日誌
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
ドラッグ＆ドロップで画像を切抜くJavaScriptライブラリ「jsCropperUI」
イメージ切り抜きのためのインタフェースを提供するJavaScriptライブラリで、prototype.jsやscript.aculo.usを使っています。 写真上をマウスカーソルでドラッグすると枠が破線で作成され、囲んだ領域の座標とサイズを取得し、トリミングすることができます。カーソルキーによる移動にも対応しているので微調整も可能、実にすごい。 詳細は以下の通り。 ダウンロードは以下から。 DEfusion.org.uk >> JavaScript Image Cropper UI, using Prototype & script.aculo.us デモは以下から。実際にドラッグして切り抜きを体験できます。 DEfusion.org.uk >> Demo >> Prototype JavaScript Image Cropper UI 操作感覚が通常のアプリケーションとほとんど差異がない
Google Spreadsheets を簡易 SQL DB に！「Google Visualization API」 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 皆さん、 Google Docs のガジェット機能はもう使ってみましたでしょうか。データをさまざまな方法で可視化するガジェットをシート上に配置できるというもので、このガジェットは自作することもできます（iGoogle ガジェットベース）。その際にスプレッドシートの情報を取得するために使われるのが、本日ご紹介する Google Visualization API で
Flashプレイヤーの検出とHTML埋め込みを簡単に行えるJavaScriptライブラリ「SWFObject」:phpspot開発日誌
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tool... 次の記事 ≫：JavaScriptで使えるカラーピッカー作成ライブラリまとめ deconcept ? SWFObject: Javascript Flash Player detection and embed script SWFObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. Flashプレイヤー
IEでのJavaScriptデバッグを可能にする「CompanionJS」:phpspot開発日誌
My DebugBar | CompanionJS / HomePage IEでのJavaScriptデバッグを可能にする「CompanionJS」。 サイトでインストールをすると、ＩＥにドッキングされます。 インストールするだけでは使えず、インターネットオプションの「スクリプトのデバッグを使用しない」チェックを外す必要があります。 インストール後は、次のように「表示」メニューから表示することが出来ます。 表示すると次のような感じ。 エラーが出ると右側にエラーが出て、クリックするとスクリプトのエラー箇所に移動し、ハイライトされます。 また、サイトでエラーがあると次のようにブラウザ上で通知してくれます。 ＩＥでもデバッグしたい場合がありますが、このツールはなかなか使えそうですね。 もっといろんなデバッグをしたい場合はデバッグバーというものがあるようです。 DOMインスペクタ、HTTPインスペ
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
Selenium: Selenium
<embed src= "../www.youtube.com/swf/l.swf?video_id=EDb8yOM3Vpw&rel=1&eurl=http:%252F%252Fseleniumdesign.googlepages.com%252Findex.html&iurl=http:%252F%252Fi.ytimg.com%252Fvi%252FEDb8yOM3Vpw%252Fdefault.jpg&t=OEgsToPDskKN-LpcTtnPY-b0psxw_mf1&color1=0x3a3a3a&color2=0x999999&hl=en" type="application/x-shockwave-flash" wmode="transparent"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NameBright - Coming Soon
IBM JavaScriptを作成するための関数型プログラミングの使用 - Japan
https://vk.com/away.php?to=https%3a%2f%2fwww.prakard.com%2fviewtopic.php%3ff%3d1004%26t%3d2878702
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
軽快に動作するWYSIWYGエディタJavaScript （openWYSIWYG） - youmos
jQueryを使った、クールな写真ギャラリーを作るためのライブラリ『galleria』 | IDEA*IDEA
