Javascriptを使っていてよく目にする起動時に発生するイベント名についてのメモです。 具体的にイベント名を上げると、以下の3つ？になります。 なにも指定しない onload ready(jQuery) 何も指定しない Javascriptは、イベント等を指定しない限り読み込んだら処理を実行します。そのため、使い始めたころは指定していなかったので、〜が宣言されていません。などDOM(html要素)が読み込まれていない場合はもちろん発生します。
メモ 【Javascript】onloadとDOMContentLoadedとreadyなどなど
Javascriptを使っていてよく目にする起動時に発生するイベント名についてのメモです。 具体的にイベント名を上げると、以下の3つ？になります。 なにも指定しない onload ready(jQuery) 何も指定しない Javascriptは、イベント等を指定しない限り読み込んだら処理を実行します。そのため、使い始めたころは指定していなかったので、〜が宣言されていません。などDOM(html要素)が読み込まれていない場合はもちろん発生します。
onloadの代わりにDOMContentLoadedを使ってみる - へぼいいいわけ
onloadイベントだとDOMの構築が完了しても画像を読み込み終わるまで待ってしまうので、代わりにDOMContentLoadedイベントを使って処理させてみます。IEにはDOMContentLoadedがないのでdocument.documentElement.doScroll("left")を監視してDOM構築が終わるまで再帰しています。 参考 window.onloadの代替スクリプトその２ jQuery 1.2.6 2330行目くらい そーす ※一部修正しました。 // DOM構築完了時の処理 function load(){ /* なんかいろいろ */ }; // ユーザーエージェント var userAgent = navigator.userAgent.toLowerCase(); // ページの構築が完了したらloadを呼び出す (function(){ if(docume
jQuery – 目的の場所にさくっと要素を追加する | 1：n – DETELU Blog
「いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。 「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。 他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。 class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下
jQuery 2.0 Released | Official jQuery Blog
You asked for it, you got it: jQuery 2.0 has arrived! As promised, this version leaves behind the older Internet Explorer 6, 7, and 8 browsers. In return it is smaller, faster, and can be used in JavaScript environments where the code needed for old-IE compatibility often causes problems of its own. But don’t worry, the jQuery team still supports the 1.x branch which does run on IE 6/7/8. You can
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
jQuery公式プラグイン・レジストリが公開。GitHubと連携など、今風の仕組みに惚れ惚れ
白石 俊平 ニュース jquery 0 Comment 2013年1月17日、jQuery「公式」のプラグイン・レジストリ（プラグインの集積場）が公開されました！ URLはこちらになります。 http://plugins.jquery.com/ このプラグイン・レジストリの目的は、従来のプラグインサイトでは解決できなかった、「断片化」と「配布」の問題を解決することだそうです。 「断片化」・・・「jQuery プラグインがWeb上の至る所にあり、探すのが面倒」という、現在の状況 「配布」・・・作成したプラグインを配布するためのサイト作成や宣伝に手間がかかる、従来のプラグインサイトでは登録が面倒だった 新しいプラグイン・レジストリは、GitHubと連携することを前提として、こうした問題をエレガントに解決し、従来のプラグインサイトを完全に置き換えるものです。 開発者にとっては、プラグインを公開
モバイルアプリ向けJavaScriptフレームワーク「Junior」、Backbone、Zeptoなどを採用し、ネイティブのルック＆フィールを持つ
Juniorは、Justin Martin氏が開発したフレームワーク。Martin氏は“My holiday project”としてJuniorを開発したとツイートしています。 Juniorの特徴は、モバイルに最適化したCSSトランジションによるスムーズな画像効果、zeptoやbackbone.jsなど多数のライブラリに依存していることなど。UIコンポーネントはRatchetを利用しているようで、モバイルネイティブのルック＆フィールを備えていると説明されてます。 modernizr、zepto、backboneなどに依存 Juniorが依存しているライブラリは以下。 modernizr（ブラウザごとに異なる実装を調べて、対応するコードを書きやすくする） zepto（jQuery互換のミニマルなライブラリ） zepto flickable（zeptoのタッチ対応プラグイン） lodash（U
シンプルなスプライトアニメーションライブラリ 「MovieCrop.js」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） CSSスプライトを使用したアニメーションライブラリは既に色々と選択肢がありそうですが、 敢えて今回これを書いてみたのは、ローテクでごくシンプルな物が欲しかったから。 さらに言ってみれば、それらの選択肢をまだ知らなかったから。 MovieCrop.jsについて MovieCrop.js via Github MovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。 名前から推察されるように、ActionScriptのMovieClipを模して作った…つもりです。 再生/逆再生/停止/巻き戻しが出来ます。 簡単な使い方 まず使用する画像を作成し、ブロック要素の背景にします。 要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなの
レガシーなWebブラウザにもgetUserMediaを·getUserMedia.js MOONGIFT
getUserMedia.jsはFlashを使うことでレガシーなWebブラウザでもgetUserMediaライクなWebカムアクセスを実現するJavaScriptライブラリです。 HTML5の新しいAPIの一つにWebカムアクセスがあります。そんなWebカムアクセスをレガシなーWebブラウザを含めて使えるようにしてくれるのがgetUserMedia.jsです。 最初です。カメラへのアクセスが求められます。 まずはWebカムの映像を画像として保存します。 さらに顔を認識して鼻眼鏡をつけるアクションです。 getUserMedia.jsではWebRTCに対応している場合はHTML5のgetUserMediaを使い、それ以外の場合はFlashベースのWebカムアクセスを使います。結果は同じように扱えるので、安心してWebカムアクセスできるようになるでしょう。 getUserMedia.jsはJa
JavaScriptを使ってSVGでグラフを描く·Morris.js MOONGIFT
Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
QUnit＋PhantomJSでJavaScriptのヘッドレスなテスト
QUnit＋PhantomJSでJavaScriptのヘッドレスなテスト：フレームワークで実践！ JavaScriptテスト入門（3）（1/3 ページ） しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、xUnit系のテストフレームワークとして人気のQUnitの概要や使い方、PhantomJSと組み合わせたテスト方法を紹介 ヘッドレスなJavaScriptテスト 前回の「PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト」では、PhantomJS＋Jasmineという組み合わせでJavaScriptテストをヘッドレスで実行する方法を紹介しました。今回は「QUnit」というJavaScriptテストフレームワークでヘッドレスなテスト環境を構築
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
Creatorish is for sale at Squadhelp.com!
About Creatorish.com Edit Creatorish.com is a captivating domain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting a creative and imaginative mindset. It's perfect for startups that focus on creativity, design, technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, making it a
Creatorish is for sale at Squadhelp.com!
About Creatorish.com Edit Creatorish.com is a captivating domain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting a creative and imaginative mindset. It's perfect for startups that focus on creativity, design, technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, making it a
[JS]このアニメーションはかなりカワイイ！折り畳んだ紙をパタパタ広げるスクリプト -PFold
展開と共に、移動のアニメーションが加わります。 PFoldの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/pfold.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pfold.js"></script> Step 2: HTML コンテンツの初期状態と最終状態をそれぞれdiv要素で実装し、div要素で内包します。 <div id="uc-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
thewikies.com
Welcome to nginx!