HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく | DevelopersIO
僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに - jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿名関数で全体をラップ - (5) (function($) { // このプラグインの名前 - (1) $.fn.name_space = function() { //要素を退避 - (2) var elements = this; // 要素をひとつずつ処理 - (3) elements.each(function() { // 具体的な処理をここに記述 }); // method chain
Mobileでposition:fixedが使えるか否かの判別
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 古いiOSとダメな古いAndroidではposition:fixedが使えないんですけど、それを判別するのに Modernizr.positionFixed みたいの無いのかと思って探してたらjQuery mobileの中見つけた。 https://github.com/jquery/jquery-mobile/blob/master/js/widgets/fixedToolbar.js なんとそれを判別するうまい方法は無いんで、ひたすらUAから判別しているらしい。ひいいい・・・ ということで、ありがたくこのコードを使わせていただくとして、jQuery.ui.domwindowをアップデートし
Getting Started with the UI | Closure Compiler | Google for Developers
Getting Started with the UI Stay organized with collections Save and categorize content based on your preferences. Closure compiler service is deprecated, and will be removed. Please consider running the compiler locally instead. The Hello World of the Closure Compiler Service UI The easiest way to get familiar with the Closure Compiler service is by optimizing a few simple functions in the servic
Closure Compiler Service
// ==ClosureCompiler== // @compilation_level SIMPLE_OPTIMIZATIONS // @output_file_name default.js // ==/ClosureCompiler== // ADD YOUR CODE HERE function hello(name) { alert('Hello, ' + name); } hello('New user');
Closure CompilerでタイプセーフJavaScriptコーディング - うなの日記
Closure Compilerを使用したタイプセーフJavaScriptコーディングについてまとめ。 Closure CompilerはClosure Toolsの一部で、 JavaScriptコードを解析して圧縮と最適化を行うJavaScriptToJavaScriptコンパイラです。 最適化だけでなく、シンタックスや型のチェック機能も提供。 型チェックは、JsDocコメントの形式で記載された型情報をもとに行われます。 型システムは、ECMAScript4の仕様に準拠している模様。 Closure Compilerを使用することで、ECMAScript3の世界でECMAScript4ライクな型システムが使えます。(型情報をコメントに書くので、スマートさには欠けますが・・) Closure Compilerのインストール Closure Compilerのサイトよりzipアーカイブを取得
input要素のtype属性fileを別の画像に置き換える。 | テラボ
こんにちは、tera_cottaです。 投稿の一発目は、ドラクエ・ツイート制作時に使用したinput要素のtype属性fileを別の画像に置き換える方法をまとめてみたいと思います。デフォルトのファイルアップロードボタンが簡素すぎるので変更できないか試してみました。 ブラウザごとのデフォルトの状態 環境は、Windows XP SP3とandroid2.2で、ブラウザは以下。 IE v8.0.6001.18702 Firefox v8.0.1 Opera v11.52 Chrome v15.0.874.121 Safari v5.1.1 HTC Desire(android 2.2)のブラウザ html <form> <input type="file" name="upload" /> </form> 並べるとこんなかんじ 縦と横の長さは、jQueryのouterWidth()とout
input type=”file” を画像ボタンに変更する方法 ファイルアップロードをカスタマイズ | Stronghold Archive
どうもこんばんは！ 今日は【input type=”file” を画像ボタンに変更する方法】を書きたいと思います。fileアップロードを画像ボタンに差し替え、ユーザビリティを向上させるのが目的です。たまに使いたくなるのでここにメモしておきますね。 通常のファイルアップロードタグ <input type="file"> 通常の状態です。CSSで背景やボーダーを削除するデザイン変更には限界があります。 ですのでjQueryで補完します。 ボタンの準備 ファイルアップロードを画像ボタンに変更 ・HTML <input type="file" id="file_01" class="file"> <label class="file_mask"> <span><!– 画像用spanタグ –></span> <input type="text" id="mask_file_01"> </label>
input fileをCSSでキレイにしたい
この記事は12年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。結構この壁にぶつかってる人はいると思います。 textとかsubmitをキレイにしたのに、fileの参照ボタンが…！という思いをした人は多いでしょう。 というか僕がぶつかったので記事を書いているわけですが。 というわけで早速調べてみました。 一番参考になったのはこちらのサイト。 CSS2/DOM – Styling an input type=”file” 英語です。 なので、大事なとこだけ簡単に要約します。 ＜CSS＞ １．<input type=”file” />を「position:relative」で配置した要素（divとか）の中に配置する。 ２．「position:relative」で配置した要素（divとか）の中に子要素（divとか）を配置して、そこに<input />と<img />（実際表示され
Accessing JPEG EXIF rotation data in JavaScript on the client side
I'd like to rotate photos based on their original rotation, as set by the camera in JPEG EXIF image data. The trick is that all this should happen in the browser, using JavaScript and <canvas>. How could JavaScript access JPEG, a local file API object, local <img> or remote <img>, EXIF data to read the rotation information? Server-side answers are not OK; I am looking for a client-side solution.
Nihilogic : Javascript EXIF Reader
This is a test of the Javascript EXIF library posted here. Click the images to see it in action. The first image tests reading single tags, while the other two simply show all available data. The binary file access happens in binaryajax.js and the EXIF data reading happens in exif.js. Also check out the jQuery plugin, if you're into that sort of thing!
GitHub - blueimp/JavaScript-Load-Image: Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif tags as well as emb
Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.
blueimp/jQuery-File-Upload: File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side
Multiple file upload: Allows to select multiple files at once and upload them simultaneously. Drag & Drop support: Allows to upload files by dragging them from your desktop or file manager and dropping them on your browser window. Upload progress bar: Shows a progress bar indicating the upload progress for individual files and for all uploads combined. Cancelable uploads: Individual file uploads c
canvasに描いた絵（画像）をサーバに保存 - 超自己満足プログラミング
canvasに描かれたデータを取得するには、canvas.toDataURL() を使います。 toDataURL()で得られるのは、base64エンコードされた画像情報なので、 それをサーバに送って、base64デコードして保存という流れです。 toDataURL()して、そのデータをPOSTする部分のjavascript (ajax部分が面倒なので、prototype.jsを使用) function saveImage() { var imgdata = $('canvas_id').toDataURL(); // デフォルトだとpng, 引数でjpegとかも可能 imgdata = imgdata.replace('data:image/png;base64,', ''); // 頭のいらない部分を落とす new Ajax.Request(<画像保存CGIのURL>, { param
千と千尋のアドレスバー隠し - スタジオ・アルカナ技術ブログ
こんにちは、ともよーんです。 先日この技術ブログきっかけで寄稿させていただくことになった雑誌が発売になりました。皆さまのおかげで素敵な機会が持ててとてもありがたく思っています！ 詳しい掲載内容はこちらをご参照ください。 さて、今回もまたスマートフォンに関するトピックです。 アドレスバーを非表示にする方法について書きたいと思います。 狭い狭いスマホの画面ではアドレスバーを非表示にして、少しでも表示領域を広げたいものです。 最近関わった案件の仕様書にも当然のようにこの要望がありました。 まず、アドレスバー非表示の基本的な仕組みから見ていきましょう。 コアになるコードはこちら↓ window.scrollTo(0, 1); 「ページ読込み完了時に1px上にスクロールさせろ」という指示です。 アドレスバーは1pxより全然あるやんか！全然隠れへんやんか！と思った方、（私だけ？） モバイルSafari
fontBomb - Stylishly destroy the web
Click anywhere on this page to plant bombs. To blow up other websites, drag and drop this link fontBomb to your favorites bar. An experiment by Philippe-Antoine Lehoux. Follow me on @plehoux Hymne à la Beauté Viens-tu du ciel profond ou sors-tu de l'abîme, Ô Beauté? ton regard, infernal et divin, Verse confusément le bienfait et le crime, Et l'on peut pour cela te comparer au vin. Tu contiens dans
Make a link in the Android browser start up my app?
Is it possible to make a link such as: <a href="anton://useful_info_for_anton_app">click me!</a> cause my Anton app to start up? I know that this works for the Android Market app with the market protocol, but can something similar be done with other apps? Here is an example of a link that will start up the Android Market: <a href="market://search?q=pname:com.nytimes.android">click me!</a> Update:
【翻訳】document.writeでSCRIPTを書き出すなやで！ - MOL
Original：Don’t docwrite scripts（2012-04-10）by Steve Souders 昨日のブログ記事のHTTP Archiveが速くなっている、大きな要因の一つとしてはスクリプトローダーを使用しないことです。そのスクリプトローダーとはスクリプトを動的に読み込むためにdocument.writeを使用しているものです。振り返れば、私は2009年4月のブロッキングなしのスクリプト読み込み、続・ハイパフォーマンスWebサイト(4章)において、document.writeテクニックについて記述していました。それは以下のようなものです。 document.write('<script src="' + src + '" type="text/javascript"><\/script>’); document.writeを使ったスクリプトローダーの問題点： 挿入し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fabric.js Javascript Canvas Library
Regex Of The Dead
GitHub - blueimp/JavaScript-Canvas-to-Blob: JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.
