CssUserAgent (cssua.js).css{user:agent;} Avoid CSS hacks! Use cssua.js to apply special CSS classes to your pages allowing you to use valid CSS to work around browser-specific quirks. Read more…
もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
[JS]テキストの一部のみ最初に表示し、残りをアニメーションで表示するスクリプト
パネルに配置したテキストを下部にいくにつれフェードアウトで表示し、残りのテキストをアニメーションで表示するコンテンツを実装するチュートリアルを紹介します。 残りのテキストをアニメーションで表示したキャプチャ [ad#ad-2] 実装 HTML HTMLはシンプルで、テキストと「Read More」ボタンをdiv要素内に配置します。 <div class="sidebar-box"> <p>パネルのテキスト</p> <p class="read-more"><a href="#" class="button">Read More</a></p> </div> CSS パネルの初期状態のサイズはスタイルシートで設定します。フェードアウトはCSS3グラデーションを使用します。 .sidebar-box { max-height: 120px; position: relative; overfl
Chrome、IE、Firefox 上で JavaScript を一括で同時に実行させることが出来る「Tutti」:phpspot開発日誌
Chrome、IE、Firefox 上で JavaScript を一括で同時に実行させることが出来る「Tutti」 2010年12月14日- Tutti - Interactively run Javascript on multiple browsers Chrome、IE、Firefox 上で JavaScript を一括で同時に実行させることが出来る「Tutti」のご紹介。 サイト上で、「Create a Room」を押すと、コンソールウィンドウのようなものが開きます。そのURLをFirefox、IE等別のブラウザにそのままコピーペーストで開きます。 で、１つのブラウザ上で alert('hello worl'); とやると、全部のブラウザで一斉に hello world が alert されるというもの。 Socket.IO や Node.js などを使って実装されているみたい。
WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS
WordPressの記事やページごとに、それぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインを紹介します。 Custom CSS and JS [ad#ad-2] Custom CSS and JSのインストール WordPressの記事ごとに個別のCSSを追加 WordPressの記事ごとに個別のJavaScriptを追加 Custom CSS and JSのインストール プラグインのインストールは、WordPressの管理画面「プラグイン」の「新規追加」から行えます。キーワードに「Custom CSS and JS」を入力して、「プラグインの検索」ボタンをクリックしてください。 プラグインの新規追加画面のキャプチャ 検索結果に表示された「Custom CSS and JS」の「プラグインのインストール」でインストールが始まります。 また、下記ページか
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
記号だけのJavaScriptプログラミングの基本原理 - Articles Advent Calendar 2010 Sym
こんにちは。プログラマ定年を迎えたのであとは悠々自適に日々過ごそうと思ってるはせがわです。 JavaScriptで記号プログラミングを行う基本的な取り組を説明します。 jjencodeなどで使っているテクニックです。 まず最初は数字の作り方。 +[] // 空の配列にプラス演算子で数値の 0 ~[] // 空の配列にビット反転で -1 ~{} // 空のオブジェクトにビット反転で -1 -~[] // 空の配列にビット反転で-1、-1に単項マイナスで +1 -~-~[] // +1 にビット反転で -2、-2 に単項マイナスで +2 このように、空の配列や空のオブジェクトに数値用の演算子を適用することで、任意の数値を記号だけで生成することができます。 次に文字の作り方。 ![] // 空の配列に論理否定で false !![] // 空の配列に論理否定を2回で true (![]+"")
[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 Head JS [ad#ad-2] 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの管理 CSSのサポートが異なるブラウザへの対応 HTML5非対応ブラウザへの対応 スクリーンサイズに合わせた表示 Dynamic CSS CSSを特定のページのみに CSSをブラウザごとに指定 外部JSファイルの読み込み 通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。 そのブロッキング解消し複数のファイルを並列
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
ドラッグ＆ドロップできる地図を実装できる3KBの軽量JSライブラリ「SpryMap」:phpspot開発日誌
SpryMap - lightweight javascript click and drag map script | candrews.net ドラッグ＆ドロップできる地図を実装できる3KBの軽量JSライブラリ「SpryMap」。 JSだけなら3KBで記述された軽量なスクリプトになっています。jQuery等のライブラリにも依存していないので手軽に使うことが可能。 こうしたライブラリは他にもありますが、ここまで軽いのはなかなかないかもしれませんね。 jQueryを使っていませんが次のように非常に使いやすい物になっています。 関連エントリ Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 GoogleマップAPI ver3でGoogleマップを独自にスタイルすることが出来るらしい Googleマップ風のUIを実現できるJSライブラリ「Polymap
JavaScriptとHTML5 Canvasを使って顔認識するコードがすごい:phpspot開発日誌
Badass JavaScript - Face Detection in JavaScript via HTML5 Canvas JavaScriptとHTML5 Canvasを使って顔認識するコードがすごいです。 ccv.jsとface.jsというファイルがGitHub上で公開されていて、認識自体をJavaScriptでやってしまっているようです。 JavaScriptが高速化するにつれ、WEBはもっと高速に、サーバにも優しくなっていく流れになっていきそうですね。 GitHubでは２つのJSと１枚のHTML、１つのPHPコードが配布されています。 ccv.jsがコアで、face.jsは定義ファイルっぽいです。 画像を外部から呼び出すためのプロクシ用にphpを使っていますがphpでOpenCVを使ったりはしていないようです。 関連エントリ PHPでOpenCVなしのピュアPHPで顔認識す
リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５:phpspot開発日誌
15 JavaScript Data Grids to Enhance your HTML Tables | Hot Scripts Blog リッチすぎるデータグリッド等を実装できるJavaScriptライブラリ１５。 WEBページに実装するグリッドを選ぶ際にかなり参考にできそうです。 スタンドアロンで動くものや、JavaScriptやMootoolsプラグインのものがまとまっています dhtmlxGrid SigmaGrid jTPS – Datatable jQuery Plugin DataTables – Data Table jQuery plugin Flexigrid for jQuery MyTableGrid OmniGrid 全部見る 関連エントリ シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」 グリッドアコーディオンで新
jQueryライクに使えて2KBしかないスマートフォン用JSフレームワーク「zepto.js」:phpspot開発日誌
zepto.js ? the aerogel-weight mobile javascript framework jQueryライクに使えて2KBしかないスマートフォン用JSフレームワーク「zepto.js」。 それなりにスマートフォンでも速度がでるとはいえ軽いに越したことはないというところで、jQueryのminify版が26KB (1.4.3) というところで、１０分の１以下のサイズでjQueryと同じように使えるのはいいかもしれませんね（当然機能は落ちますが） 詳細については以下のSlideShareも参考に出来ます
[JS]透過処理をした写真画像の転送量を軽くする方法
通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.cre
[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom
imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc
パネルをフェードのエフェクトで表示するスライドショーの超軽量スクリプト -TinyFader
jQueryなど他のスクリプトに依存せずに動作する、パネルをフェードのエフェクトで表示するスライドショーの超軽量（1.4KB）スクリプトを紹介します。 Fading JavaScript Slideshow – TinyFader デモページ [ad#ad-2] スライドショーはリスト要素で実装されており、パネル内にはリスト要素内に配置できるものであれば、どんなコンテンツでもサポートします。 パネル「1」は、見出しとパラグラフとリンクのコンテンツ スクリプトのオプションでは、オート表示の時間、スライドショー本体やページネーションのクラス名、アクティブ時のクラス名、ポジションなどを設定できます。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slides', // ID of the parent slideshow unorde
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebsitePolicies: Compliance Solutions for Small Businesses
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
Lean Domain Search | Find a great domain name in seconds