Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
JavaScriptで明るい色だけランダムに - console.lealog();
jsの話というより、そういうものがあるんですという話です。 個人のティザーでこういうことしたかったんですよ、こういうの。 参考：Lealog.net RGBではなくHSLを使う 参考：HSL Color Picker - by Brandon Mathis H: Hue(色相) S: Saturation(彩度) L: Lightness(輝度) というわけで、ランダムに明るい色だけ欲しいなら、 色相はランダムに 彩度は高めに 輝度も高めに すればいいってわけですね。 jsで取るなら var rangeRndm = function(min, max) { if (max) { return Math.random()*(max-min+1) + min|0; } else { return Math.random()*min|0; } }; var color = 'hsl(' + ra
汎用的にcurrentTarget,target,pageX,pageYをJavaScriptのイベントでとる方法 - yukobaのブログ
何度やっても忘れてしまうので、自分へのメモ。JavaScriptはIEだけ、イベントが特殊なので、汎用的に扱うための方法。今、僕が欲しいのは、currentTarget, target, pageX, pageYの4つです。何かの参考にどうぞ。IEは5以降に対応してます。Firefox 3.6, Chrome 4, Safari 4, Opera 10で確認。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><script type="text/javascript"> window.onload = function() { document.getElementById("a").onclick = fu
日本人が開発したJavaScriptライブラリ、エンジニア別国内利用率ランキング - ふろしき Blog
「エンジニアはGitHubにソースコードを上げると、転職で有利になる！」なんて言われている時代ですが、本当にそうなのでしょうか？多大な時間を割いて、ソースコードを管理し、マニュアルを作り、特設ページを作り、公開することに意味はあるのでしょうか？ 昨年の11月、ふろしき.jsでは1,300の優秀と評価されたWebサイトを調査し、利用率の高いJSライブラリをランキング化しました。実はこの調査、一筋縄ではいかず、実際には1,800弱とデータサンプルとしてはそこそこな母数を確保し解析しています。 その調査の中で、わかったことがあります。 フロントエンドは、日本のエンジニアが個人で開発したようなOSSのJSライブラリが多く含まれ、重要な部品として活用されているのです。個人でも入り込める隙がある、そう思うと、フロントエンド界隈でGitHub上にソースコードを公開するモチベーションは、比較的高いのではな
iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API | Google for Developers
iframe 組み込みの YouTube Player API リファレンス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 IFrame Player API を使うと、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーを制御できます。ウェブページに Flash オブジェクトを埋め込む Flash や JavaScript のプレーヤー API とは異なり、IFrame API はコンテンツをページの <iframe> タグに投稿します。この方法は従来の API よりも柔軟で、Flash をサポートしていないモバイル デバイスの場合に、Flash プレーヤーではなく HTML5 プレーヤーで YouTube を利用できます。 この API の JavaScript 関数を使うことで、再生する動画の頭出し、動画の再生
Androidでモバイルとタブレット（＋iPhone／iPad）を振り分ける方法｜BLACKFLAG
以前ここで「jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別して URLをリダイレクトする方法」と題して、 それぞれのデバイスごとに振り分ける方法を紹介しましたが Androidはモバイルとタブレットの振り分けはできていなかったのですが iPhoneとAndroidモバイル、iPadとAndroidタブレットのそれぞれを振り分ける状況が やはり増えてきそうなので追加版として紹介してみます。 サンプルとしては、AndroidタブレットとiPadは「/tb/」ディレクトリへ AndroidモバイルとiPhoneは「/sp/」ディレクトリへ、リダイレクト処理をする構成にしてみます。 ◆SCRIPT <script type="text/javascript"> var userAgent = window.navigator.userAgent.to
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 | DevelopersIO
モバイルHTMLシリーズ HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか おすすめ iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう iOS6のSafariでサポートされるHTML5の機能 HTML5で使えるスマートフォンの機能 スマートフォンサイトのパフォーマンスチューニング スマートフォンサイト用の軽量ライブラリ QUOjs HTML5のWebアプリで使えるジェスチャーにはどんなものがあるのか調べていたら、QUOjsというライブラリを見つけたので試してみました。 サイズが16KBと軽量なライブラリですが、簡単にイベント処理を実装できるので便利です。今回使ったバージョンは2.2.0 になります。 以下のサイトからダウンロードできます。 QuoJS 英語ですが以下のページに使い方が書いてあり
lab » Blog Archive » [javascript] アンドロイドのバージョン判別方法
こちらの記事で使用していたプラグインjquery.touchSwipe-1.2.4がAndroidの2.2以下のバージョンに対応していないので、それを下回るバージョンをjavascriptで振り分ける処理を書きました。備忘録。 ヘッダ、または共有しているjsファイルに下記を記述。 function lowerAndroid(n) { var bo = false; var ua = navigator.userAgent.toLowerCase(); var version = ua.substr(ua.indexOf('android')+8, 3); if(ua.indexOf("android")) if(parseFloat(version) こんな感じで呼び出します。 var bo = lowerAndroid(2.2); alert(bo);//2.2（含まない）以下はtru
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
Adobe - デベロッパーセンター : SWFObject 2を用いたFlash Playerのバージョン検知とSWFファイルの埋め込み
Bobby van der Sluis Refunk* bobbyvandersluis.com* 目次 はじめに SWFObject 2とSWFコンテンツの埋め込み SWFコンテンツのカスタマイズ Adobe Express Installの使用 スタティック・ダイナミックパブリッシングの仕組み JavaScript API 印刷用に表示 作成日:2008年10月15日 ユーザレベル:中級, 上級 製品:Flash Player WebページにSWFファイルを埋め込む方法として、標準規格との親和性に優れた複数の手段を提供するのがSWFObject 2です。 SWFの可能な限り簡単な埋め込みを目標に開発されたSWFObject 2は、JavaScriptを用いることで、Flash Playerを検知したり、破損したSWFコンテンツを回避することができます。また、プラグインなしでWebを
Date/Timestamp変換のまとめ - Y's note
2013/07/17追記 @yutakikuchi_です。 ※本記事の内容より詳しいものを書きました。 誰もが一度は陥る日付処理。各種プログラミング言語におけるDateTime型/TimeStamp型の変換方法のまとめ - Yuta.Kikuchiの日記 概要 Mysqlからアプリケーションで日付情報を引くときDate型<=>Timestamp型の変換を行う事がしばしばある。 今日はPHP/Python/JavascriptのDate/Timestampの型変換についてまとめる。 Javascriptの例ではSpiderMonkeyを利用している。 Date型の日付を出力する php <?php //現在時刻をDate型で出力 //date関数を使う場合 echo date("Y-m-d H:i:s") . "\n"; //結果 2011-10-14 00:00:00 //strftime
Node.js チュートリアル | Node ビギナーズブック
本書について 本書は、Node.jsでのアプリケーション開発を始めようとする皆さんに、 ”高度な”JavaScriptについて知るべきあらゆることを解説します。 よくある”Hello World”チュートリアルの、はるか上をいくものです。 ステータス 貴方が読んでいるのは、本書のいわゆる最終版となります。 つまり本書は、間違いが見つかった場合や、 Node.jsの新バージョンにおえる変更点を反映する時のみ、改訂されます。 最終更新日は2012年2月12日です。 本書内のコードのサンプルは、Node.jsのバージョン0.6.10でテストしています。 ターゲット読者 本書は、Ruby、Python、PHP、Javaのような、少なくともひとつのオブジェクト指向言語を理解しており、 JavaScriptについてはあまり経験がなく、Node.jsについては全く経験がないという、 著者と同じようなバッ
Wii U｜ウェブサイト制作者向けインターネットブラウザーの拡張機能について｜Nintendo
Wii Uの『インターネットブラウザー』では特別なJavaScriptを用いることでGamePadのボタンや状態を取得したり、動画や画像(JPEG形式)の表示を切り替えることができます。 ウェブサイトを制作する際の参考としてご活用ください。
iPhoneの「ホーム画面追加」を促す | Agnist.code
http://code.google.com/p/mobile-bookmark-bubble/ こいつを使うことでiPhone表示時に画面下側へ下記のように出せる。 1. ソースのダウンロード[Source]→[Browse]のページを開き、「bookmark_bubble.js」を落とす。 左側の「example」を開き、「example.js」を落とす。 2. HTMLへ組み込む下記の感じで組み込む。 <script type="text/javascript" src="js/bookmark_bubble/bookmark_bubble.js"></script> <script type="text/javascript" src="js/bookmark_bubble/example.js"></script> 自分の場合は整理のため「bookmark_bubble」というフ
JavaScriptのコード整形＆色付け(貼り付け用)
JavaScriptのコードをフォーマット＆色付けを行い、その内容をHTMLに貼り付けられる形にします。 JsDecoderというソースの整形＆色付けを行ってくれる便利なライブラリを使って実現しています。 JsDecoder - code.gosu.pl →Blogへ戻る 使い方 下記のテキストエリアにJavaScriptのコードを入力し、「Preview」ボタンを押します。 すると、コードを整形したイメージが表示されます。 そのコードをHTML上に貼り付ける場合には、さらにその下のテキストエリアのテキスト内容を使用します。 format color
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーエージェントによってPCとスマートフォン（iPhone / Android）を振り分ける方法いろいろ
KataPad.com is for sale | HugeDomains
公海555000kk线路检测—首页（欢迎您）