Windows9Xなテーマの同一ウィンドウ内ポップアップ窓作成JavaScriptサンプル「Bride of Windows」:phpspot開発日誌
BrainJar.com: Bride of Windows This article looks at building dynamic displays that provide a window for content. These windows can manipulated dynamically by the user, either by dragging or using a set of control buttons.Windows9Xなテーマの同一ウィンドウ内ポップアップ窓作成JavaScriptサンプル「Bride of Windows」 次のように同一ウィンドウ内に Windows9X 風ウィンドウを作るサンプルが公開されています。 もちろん、ドラッグや閉じる/縮小ボタンも動作します。 これだけ Win9X に似せることで、Windows利用者にとっては物凄く直
javascript+CSS - お手軽もんたメソッド : 404 Blog Not Found
2007年03月30日03:30 カテゴリLightweight Languages javascript+CSS - お手軽もんたメソッド もんたメソッドも高校の学習指導計画書に乗ったそうですし、ここらで高校生どころか中卒でも簡単にもんたメソッドをお届けするのもよかろうかと思いまして。 実践例 痛いニュース(ﾉ∀`):【ＴＢＳ捏造疑惑】 ＴＢＳ社長ら「不二家報道、捏造というのはどうか」「みの氏の『不二家、廃業しろ』は励ましの言葉」より拝借 みの氏は不二家報道の翌日の番組冒頭で、不二家について「もうはっきり言って、廃業してもらいたい」と言い放っているが、ＴＢＳは「『廃業を覚悟して不退転で臨んでください』という励ましの発言だったのでは」としている。 レシピ まずは以下のCSSを用意しておきます。お好みにあわせてカスタマイズしておいてください。 <style> div.mino { borde
Javascript >> Flash でクリップボードにコピー
先日、こんな記事を読みました。 fladdict.net blog: オンライン上swfの天才的デバッグ方法 http://www.fladdict.net/blog-jp/archives/2005/06/swf_2.php トレース使う代わりに、アウトプットしたい情報をクリップボードに送れ！！ System.setClipboard(ここにデータ); 頭よすぎ。 まさに目から鱗のデバッグ方法。そんなことできるとは。 これ読んで、ふと、もしかしたら、長年不便に思ってたことを解消できるかもしれないと思い立ちました。 RakuCopy や amazie など、一度クリップボードを経由して、メールやBlogにペーストするツールを作っていると、たいていボタン一つでクリップボードに転送する機能をつけたくなります。 これは、Windows 版 IEでは可能なのですが、それ以外のブラウザでは、Java
404 Blog Not Found:perl - 任意のURIからfaviconを取得するAPI
2007年03月22日04:30 カテゴリLightweight Languages perl - 任意のURIからfaviconを取得するAPI 「404 Blog Not Found:Hatena::Bookmark - ぶくマのfaviconを表示する」で示したようなアプリケーションは今後結構ありうると考えて作りました。 利用法は簡単です。 <img src="http://api.dan.co.jp/favicon/http://www.example.com/path/" alt="favicon"> 例: http://api.dan.co.jp/favicon/http://blog.livedoor.jp/ → http://api.dan.co.jp/favicon/http://blog.livedoor.jp/dankogai/ → とはいっても、大々的に使ってもらう
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
小粋なインターフェースを実現する25のコード - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
まとめ系エントリーが続きますが、ウェブ職人のためのネタ帳を目指しているのでご容赦くださいませ・・・。 さて、25 Code Snippets for Web Designersなる記事をご紹介。角丸やら噴出しやら、CSSでのグラフなどなど、すぐに使える小技がたくさんです。 ちょっとサイトにスパイスを・・・というときに眺めると便利ですね。このサイトで既に紹介したものもいくつか含まれていますね。よろしければ。 » 25 Code Snippets for Web Designers (Part1) Part 1なので続編もありそうですね。続編が出たらまたお知らせします。
サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE
ページの見かけを決めるCSSについていろいろなデザインが今までありとあらゆる場所で検討されてきましたが、今度はそのCSSを時間帯によって切り替えるという方法です。朝なら朝っぽいCSSで、夜なら夜っぽいCSSを使うというようにして、いろいろと応用が利きそう。 詳細は以下の通り。 Katgal.com: New and Improved このアイディアをさらに延長したアイディアが以下にあります。 nicholasjon.com :: Time Sensitive {1/14/2007} 上記サイトでは以下のような感じで時間だけでなく、天気によっても変わっていけばおもしろいというように提案しています。 はれ くもり 夜
CSSとJavascriptだけでスライド効果を実現する方法（script.aculo.usとか抜きで） | SIMPLE*SIMPLE
テキストなどがするすると現れたり消えたりするスライド効果はときどき使いたくなりますよね。ただ、それだけのためにPrototype.jsとかscript.aculo.usを使うのもね・・・という方のためのスライド効果作成講座。 細かいところはコードを見てもらうとして、素敵なスライド効果をシンプルなスクリプトだけ（CSSとJavascript）で実現できます。ダウンロードもできます。 » Firblitz: Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS 応用例としてスライドする時間を設定したり、スライド終了時にアラートしたりする方法も紹介しています。 個人的にはまだまだJavascriptを勉強中なので、このサイトの丁寧な説明がうれしかったですね。 setTimeoutとかこう使うのねー、と読
IE6とIE7を簡単に見分けるTips: ある SE のつぶやき
Detecting IE7+ in JavaScript(Ajaxian) IE6とIE7を簡単に見分けるTipsが、Ajaxianで紹介されてました。 if (typeof document.body.style.maxHeight != "undefined") { // IE 7, mozilla, safari, opera 9 } else { // IE6, older browsers } 簡単すぎ？ (2007.3.8追記) IE4.01, IE5.01, IE5.5, IE6.0, IE7, FireFox2.0.0.2, Opera9.10で動作確認したところ、正しく動作しました。これなら使えるかな？
JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル:phpspot開発日誌
Harry Maugans How to Create a Collapsible DIV with Javascript and CSS One of the most handy (and cool) tricks a web developer could learn to use is collapsible DIVs. JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル。 次のように数行で行える簡単なサンプルが紹介されていてライブラリに依存しない＆軽い、簡単な実装を行いたい時に使えます。 <div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div> <a href="javascript:;" onmousedown="if(document
とても便利なJavaScript関数集:phpspot開発日誌
Ten Javascript Tools Everyone Should Have Javascript frameworks have exploded on the scene over the last few years but they're no replacement for a good toolbox とても便利なJavaScript関数集。 次のような便利な関数が紹介されてます。 空白スペースを取り除く trim, ltrim, rtrim 関数 配列の数値ソート 番号フォーマット関数 配列検索 ＨＴＭＬのエスケープ関数 クッキー処理関数 getElementsByClassName Ajax機能提供 trim や HTMLのエスケープ なんかは、ブラウザで動くものは直接JavaScriptに実装してほしいですね。 prototype.jsなどのフレームワークを使わず、
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
CGI不可のサーバでもできるAjaxによるHTMLの動的な整形：CodeZine
はじめに ここ最近、Web 2.0という言葉と共にクライアント側のプレゼンテーション技術としてAjaxが非常に注目されています。しかし、Ajaxという技術用語や概念の解説、または書籍が多く出版されているにもかかわらず、Ajaxを応用したコンテンツやアプリケーションは、キーワードとしてのAjaxの人気から考えれば、少ないと言えるでしょう。多くの人がGoogleなどの大手サイトでAjaxを体験しているにもかかわらず、Ajaxが使われているのは企業や大手ポータルサイトなど、限定されています。 では、Ajaxはそれほど敷居の高いものなのでしょうか。質の高い開発集団や、高額な開発環境、またはサーバーなどのインフラストラクチャが必要となるのでしょうか。確かに、Googleと同じレベルのものを作ろうと考えれば、相応の費用と技術が要求されます。しかし、Ajaxという技術要素だけを見れば、けっして大企業に独
Ajaxなページで「戻るボタン」を機能させる方法:phpspot開発日誌
JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Sucke... 次の記事 ≫：花火アニメーションをJavaScriptで実装「Fireworks.js」 Ajax Back Button Hack Ajaxなページで「戻るボタン」を機能させる方法。 Ajaxなページでは、ブラウザの「戻るボタン」を押すと、通常は、前に開いていたページに戻ってしまいます。 Ajaxでページを１，２，３と開いていって、２に戻りたいのに、前に開いていたページに戻るのは利用者としては不本意な動作です。 そこで、IFRAMEを使った、Ajaxでの「戻るボタン」実装ハック方法の紹介。 Ajaxで画面を切り替えた際に、IFRAMEのsrcも切り替えることで戻るボタンを動作させることが出来ます。 例えば、javascriptで次のようにIFRAMEのsrcを切り替えます。 <ifram
JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法:phpspot開発日誌
JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法 ちょっとやることがあって調べてみたら案外情報が見つからず、実現するのに時間がかかったのでメモしておきます。 <script type="text/javascript"> <!-- function clickhandler(event) { if (!event) { event = window.event; } var hx, hy; if (document.all) { // for IE hx = event.offsetX; hy = event.offsetY; } else { hx = event.layerX; hy = event.layerY; } alert("x:"+hx+",y:"+hy); // return [hx,hy]; } //--> </script> <div on
MT & HTML Slidy でスライドを作る | WWW WATCH
プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用し... プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用している方をセミナーなどで頻繁に見かけるようになりました。 このブラウザ上で動作するスライドは、(X)HTML + CSS + JavaScript で実現できます。スライド制作用 JavaScript ライブラリとしては、W3C で公開されている 「HTML Slidy」 が使いやすく有名ですが、個人的にもこの 「HTML Slidy」 を利用したスライドをどこかで使ってみようと思っていたところでしたので、いい機会ということで、テンプレートを作って公開してみることにし
IE５でアルファチャンネルPNGを使うための一番簡単なライブラリ あるいはIEの失われたテクノロジに驚異せよ
http://d.hatena.ne.jp/amachang/20070206/1170715555 http://labs.unoh.net/2007/02/ie6_png_fix.html http://web.kankodo.net/2007/02/01-233315.html http://phpspot.org/blog/archives/2007/02/iepngjavascript.html なんかはやってるみたいなんで作ってみました！ 一番設定が簡単だと思う。IE5IE5.5以上なら多分動く*1。 あとIEすごいよ！というお話 やりかた 1.次の内容を alpha.htc という名前で適当なところに置く <SCRIPT LANGUAGE="JScript"> (function(){ runtimeStyle.filter += 'progid:DXImageTransfo
複数のJavaScriptファイルを１コネクションでスッキリ一括読み込みする方法:phpspot開発日誌
IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js... 次の記事 ≫：JavaScriptで3Dオブジェクトを作成するためのライブラリ「JS3D」 Supercharged Javascript Pre-compression also doesn't solve a multiple connection issue. 複数のJavaScriptファイルを１コネクションでスッキリ一括読み込みする方法。 HTMLでの読み込みタグも次のようにスッキリできます。 <!-- Namespace source file --> <script src = "yahoo.js" ></script> <!-- Dependency source files --> <script src = "dom.js" ></script> <script
「ブックマークに追加」 ボタン応用編
以前のエントリーで紹介した、小技の効いた 「ブックマークに追加」 ボタンですが、コメント欄にて同一ページ内に複数の追加ボタンを設置するには？というご質問を頂いた... 基本的な設置方法について詳しくは、先のエントリーを参考にしていただきたいのですが、同一ページ内に複数の「ブックマークに追加」ボタンを設置する時に変更しないといけないのが、ボタン表示用の HTML ソース内に指定された id 属性の値と、menu.js の内容になります。 いちいち説明するのもなんですので、いきなりソースから。ちなみに今回は、Movable Type で構築した Blog で、トップページやカテゴリー / 日付アーカイブページなどエントリーが一覧表示されるようなページに設置する場合を想定しています。 まずは、ボタンの HTML ソース。 <MTEntries> <ul class="add_bookmarks_
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YUI アニメーション1 [Javascript] All About