デフォルトのフォームをクールにカスタマイズする方法:phpspot開発日誌
maratz.com archive Fancy checkboxes and radio buttons Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included). デフォルトのフォームをクールにカスタマイズする方法。 以前、「Niceformでエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。 独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説
[暴満館] JavaScriptによるCSSの操作
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
外部スクリプトに引数を渡す珍妙な方法
■このページは このページは没になったものです。質問者が自己解決しちゃったので掲示板には投稿されませんでした。 でもなかなか面白いこと書いてあるので、再編集ついでに復活。 はじめまして。 JavaScript の外部ファイルについて質問なのですが。 <script language="javascript" src="./testpg.js?stat=aiueo"></script> このタグの書き方で外部ファイルとしては、ブラウザで読み込まれ testpg.js の処理が実行されていたので「?」以降が「引数として認識している」のではないかなと思ったのですが、「location.search」では、受け取れませんでした。 この様に引数をつけて「?」より後の部分を外部JSファイルで受け取ることは可能でしょうか？ 分かる方がいらっしゃいましたら、ご教授ください。よろしくお願いします。 実験環境
window.onloadの代替スクリプト
Updated Entry: http://p2b.jp/200805-events-order 今日は七夕Wですね。小学生の頃は、学校総出で「♪笹の葉さーらさら〜」ってやって、七夕伝説に思いを馳せたものですが。いつになってもガキの頃の心を忘れない大人でいたいものです。 さて、Ajaxの隆盛によって、その根幹であるJavaScriptはブログに欠かせないものとなっています。ppBlogも例外ではなく、至るところで活躍してます。一般にブログの(トップ)ページは、色々な情報を詰め込んでいるために、ファイルサイズは大きくなる傾向にあり、また、画像も至るところで使われるために、読み込むべきコンテンツサイズは更に大きくなります。ブロードバンドが当たり前の今日でもページの表示にちょっと待たされるのは珍しいことではありません。で、JavaScriptは(画像も含めた)ページの内容物が全部読み込まれた後に
ActiveXパッチがあたったIEでFlashなどを従来通り表示させるためのJavaScript（Flashのバージョン検出機能付き）
2006年4月のActiveXパッチがあたったIEでFlashなどを従来通り表示させるためのJavaScript（Flashのバージョン検出機能付き） Eolasの特許回避のため、2006年4月の月例パッチでInternetExplorerのActiveX周りに変更が加えられました。 具体的には、従来のようにHTMLページ内にobjectタグやembedタグでFlashを表示するように記述した場合、Flash上にマウスカーソルを持って行くと「このコントロールをアクティブ化して使用するにはクリックしてください」 と表示され、そのFlashがクリックを受け付けたり、マウスの位置情報を取得したりするためには（インタラクティブに振る舞うには）、一旦Flash上でクリックなどをしてFlashコントロールをアクティブ化しなくてはならなくなりました。 これの回避方法として、外部JavaScriptによっ
[戯] target="_blank" を使わないで新しいウィンドウでリンクを開く方法
target="_blank" を使わないで新しいウィンドウでリンクを開く方法 2006-03-14-5: [JavaScript] <a href="foo.html" target="_blank">foo</a> を使えば新しいウィンドウでリンクが開きますが，これは XHTML 1.1 や XHTML Basic では採用されていません． ではどうするかというと，スクリプトを使うわけですが， <a href="javascript:void(0)" onclick="window.open('foo.html');">foo</a> こうすると，一見解決したようですが，JavaScript が off の場合はリンク先に飛べません． しかも，ステータスバーにリンク先が出ないので不安になります．これを <a href="foo.html" onclick="window.open('f
IT戦記 - CSS の勉強会をしました
2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat
IE6とIE7を判別するJavascriptコード:phpspot開発日誌
Abe Fettig’s Weblog 実Detecting IE7 in Javascript IE6とIE7を判別するJavascriptコード。 判別は次のようなコードで出来るようです。 if (typeof document.body.style.maxHeight != "undefined") { // IE 7, mozilla, safari, opera 9 } else { // IE6, older browsers } IE7もそろそろ正式版がリリースされるようですのでメモしておくとよいかも。 関連エントリ 古いバージョンのＩＥを１台のＰＣで使う方法 IE7 Is Coming This Month...Are you Ready?
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デザイン時のちょ
JavaScriptを使わずにページのCSSを切り替える:phpspot開発日誌
ページのデザインを利用者好みにカスタマイズできるように、javascript を使い、CSSを切り替えることでデザイン変更できるサイトがありますが、 JavaScriptオフでも同様のことを実装したい場合のサンプル。 JavaScriptを使わずに、PHP+クッキーを使ってページのCSSを切り替えてみましょう。 PHPの知識がなくても、次のサンプルを使えば簡単に誰でもCSSを切り替えることが出来ます。 次のサンプルは、main.css , blue.css , red.css , pink.css というCSSを切り替えたい場合のサンプルです。 (1) まずは、レイアウトを保存するクッキー設定用のPHPスクリプト( index.phpとして保存 ) <?php $valids = array( "main", "blue", "red", "pink" ); $layout = (isse
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
高速＆シンプルなJavascriptテンプレートシステム『RND』:phpspot開発日誌
amix.dk : RND - fast and simple JS template system As web applications get more dynamic and complex, it's crucial to know what's the fastest way to render content. I have done some research and I am gladly sharing it with you. 高速＆シンプルなJavascriptテンプレートシステム『RND』の紹介。 Ajaxなどを駆使して動的にWebアプリケーションのHTMLを書き換える手法は、最近のWebアプリのトレンドとなっています。 動的にWebアプリケーションのHTMLを書き換える方法としては次があります。 これらの方法のそれぞれのベンチマークを取ると、 document.
GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
イラレで便利 for Adobe Illustrator - アドビ・イラストレーターのツール集
たくさんの画像を一括配置したり、フォルダの中のファイルをまとめて印刷したり、アンカーポイントを整列させたり、テキストを改行でばらばらにしたり、またはバラバラのテキストを改行でつないだりなどなど、大量のファイルの一括処理や、微妙に面倒な各種作業の時間短縮に効果があります。「この作業を、１クリックでも少ない手順で！」という要望にお応えします。
テーブルをJavascriptで自動的に見やすくする:phpspot開発日誌
Automatic colored rows - Example for BiteSize Standards テーブルの背景って次のイメージのように行ごとに交互に色分けされていると見やすいですね。 かといって、サーバサイドでアイテムを回して、１個１個設定するのも結構面倒だったりします。 リンク先のサンプルでは、JavaScriptを使って、trエレメントを探索し、交互にクラスを割り当てていくことで、自動でテーブルに色をつけてるようです。 これで、テーブルはシンプルにHTMLでコーディングでき、サーバサイドの技術なしで見やすいテーブルが作成できますね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/parallax_backgrounds.html
25 Code Snippets for Web Designers (Part2)
Top 100 Links for Web Designers
» 25 Code Snippets for Web Designers (Part1)
http://usagi-js.com/jslecture/JSLecture4.htm