<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
JSbooks - Free Javascript Ebooks
JS The Right Way William Oliveira Intermediate An easy-to-read, quick reference for JS best practices, accepted coding standards, and links around the Web. Programming JavaScript Applications Eric Elliott Intermediate Take advantage of JavaScript’s power to build robust web-scale or enterprise applications that are easy to extend and maintain.
jQuery Color 2.1.0 | Official jQuery Blog
Early last week I released jQuery Color 2.0.0, the wait for a jQuery Color plugin that gives you an API to work with colors is over. What’s new in jQuery Color 2.0.0? jQuery Color has faithfully supported animating colors between two hex values since the beginning. Many developers asked for access to the internal functions we had declared to make it all possible. Version 2 now includes an API to c
WEBページ画像上での右クリック禁止 | トミリュウ・コム
WEBページ上で画像コンテンツを扱っているニュースサイトなどの場合、提供元から許可をいただいて画像を掲載する場合も含め、画像著作権保護に配慮して画像のコピーライトをキャプション表示することが義務づけられたりしますが、中には掲載条件としてブラウザの右クリックメニューから、その画像を保存できないようにして欲しい、とお願いされることもあります。 対処方法としては、 ①WEBページの画像上で右クリックメニューを表示できないようにする。 Javascriptを使って、比較的簡単に対処することは可能です。 以下のコードは<head></head>内に埋め込むjavascriptのサンプル・コードです。 <head> .......... <script type="text/javascript"> <!-- window.onload = function(){ window.document.on
ものすごい勢いで横スクロールさせるJavaScript - KAZUMiX memo
javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/loopscroll.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページがものすごい勢いで横スクロールします。（止まりません） ソース loopscroll.js 関連エントリー（ネタスクリプト） HTMLの暴走 (meltdown3) - KAZUMiX memo 関連エントリー（実用スクリプト） 公開！「BannerSlide - スライドショウーバナーFl
jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回、前々回のエントリではボックス要素を例にサイズや位置、スクロール量などの求め方について書きましたが、実際のプラグインの実装においてこれらの情報が必要になるのは、ブラウザの表示領域に対してということが多いかと思います。 具体的にはツールチップなどの機能で、画面の端の要素を hover した時、ポップアップがブラウザの表示領域内に収まるように表示位置を調整するような場合に、ブラウザの表示領域のサイズやスクロール量などが必要になります。 jQuery でブラウザの表示領域をつかむ方法 ブラウザの表示領域を jQuery でつかむには、以下のような記述でできそうです。 $('html') $(window) $(
URL の自動リンクをする autolink.js ってのつくった。 - tokuhirom's blog
URL の自動リンクをする autolink.js ってのつくった。 なんかまともにうごくフリーのやつみあたらなかったというか、そういう感じだったので、つくっといた。 https://github.com/tokuhirom/autolink.js/ 動作としては以下のようなかんじになります。まあコピペしてつかうなりなんなりご自由にどうぞ。MIT ライセンスってかいてあるけど public domain 扱いでいいので。 #!/usr/bin/env node var assert = require('assert'); var al = require('../lib/autolink.js'); assert.equal(al.autolink("http://google.com/"), "<a href='http://google.com/'>http://google.com
document.writeを使った遅いブログパーツ（例えばzenback）を非同期化してサイトを高速表示する方法 | ゆっくりと…
広告やソーシャル系のサードパーティー製ブログパーツを張りたいんだけど、サイトの表示速度が遅くなるのって我慢なりませんよネ。こういったブログパーツの多くが JavaScript で作られています。自サーバーに設置したスクリプトならまだ手の打ちようはあるし、本サイトでも JavaScript 読み込みを高速化するための非同期化ネタを幾つか扱ってきました。例えば Google Analitics の非同期トラッキングスニペット や LABjs、HEAD JS などの非同期ローダーが有名なところでしょう。 ところが困ったことに、こういったサードパーティ製スクリプトに document.write が使われていると、Google Analitics のようなテクニックや非同期ローダーでは、ほとんどの場合でページが白紙となってしまい使えません。Twitter や Facebook など超有名どころは既
常にマッチする正規表現を使えばJavaScriptでも固定位置でのパターンマッチができる - rikubaのブログ
パターンの末尾に「|」を付け加えると、その正規表現は常にマッチする。 /aaa/.exec("xyz"); // => null /aaa|/.exec("xyz"); // => [""] これを使えば、ある位置でのみパターンマッチを行うということ（Perl の正規表現で「\G」のメタ文字を使うようなこと）が JavaScript でもできる（Firefox に限っては「y」フラグを使えば簡単にできるけど、独自拡張今のところ他のブラウザでは使えない）。 // RegExp::exec の戻り値の配列には index プロパティがあり、 // マッチに成功した位置を表す var text = "xxxaaxxxaaa", regexp, result; // 4〜6文字目が aaa かどうかだけ確かめたいとする // 通常の正規表現 regexp = /aaa/g; regexp.last
JavaScriptの動かないコード (中級編) clickイベントを強制的に発生させたい （fireEvent/createEventの使い方） - 主に言語とシステム開発に関して
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： 「クリックするとメッセージを表示する」という，テキストボックスがある。 このテキストボックスの動作テストをしたい。クリックのイベントを自動的に発生させ，ちゃんとメッセージが出るかをコードで確認する。 <body> イベントの発生源となるテキストボックス： <input type="text" onclick="onclick_func()" id="my_text"> click時に，ここにメッセージが表示されます。 <div id="my_div"></div> テスト： <input type="button" onclick="test_onclick()" value="onclickの単体テストを実行"> <script language="JavaScript">
Google Mpas API V3 指定範囲にフィットしたマップ表示 表示位置の自動設定 サンプルコード - WEBデザイン BLOG
複数マーカーをマップ表示させる場合、全てを表示できるようにマップ表示位置を自動設定することができる。 サンプルマップはこちら Load JSON Google Map add_pointページでクリックした地点のログを保存、load_pointページで保存した地点をマーカー表示させるようにしている。クリックしたポイント全てが表示されるように自動調整（Zoom調整される）。 マーカー保存は、SQLに保存するCGIを使っている。 マップクラス：Google Maps JavaScript API V3 リファレンス - Google Maps JavaScript API V3 - Google Code LatLngBounds クラス : Google Maps JavaScript API V3 リファレンス - Google Maps JavaScript API V3 - Googl
ウェッブサイトの表示速度を測定するフリーツール集 | ゆっくりと…
コンテンツの充実を図る、アクセシビリティに気を配る、サイトのレスポンスを上げる、どれをとってもまだまだのこのサイト。WordPressテーマinoveのカスタマイズを契機にCSS Spriteという技術を知ってから、まずはこの技術をもっと使ってレスポンスを上げよう！と考え、HTTPリクエストの削減効果と応答速度の変化を定量的に計ることができるツールを集めてみました。 一口にサイトの応答速度を計るといっても、予め何を計るべきかを決め、ツールが一体何を計っているのかを知っている必要があると思います。そこでクライアント〜サーバー間の回線速度は抜きに、 サーバーがWordPressのPHP処理を開始してからHTMLを生成し終えるまでの時間を計る。これにより処理負荷の重いプラグインの改善を図る。 ブラウザ（＝ユーザーエージェント）がHTML・CSS・Javascript・画像データなどをリクエストし
[haXe][js] “Flasher だけど js 案件増えてきたなー” みたいな人は haXe かじってみてもいいんじゃね？ | R o m a t i c A : Blog : Archive
最近ちょくちょく haXe で js を試しているのでメモ。 そもそも haXe って？ haXe ってなに？って人のためにざっくり説明。 haXe は1言語で、Flash (AS2/AS3) 、 js 、PHP、C++、NekoVM、にかきだせる言語。（.hxファイルをコンパイラオブションで出し分ける） haXe – haXe の紹介 記述は AS3 とか JAVA に似ていて、サーバー側もクライアント側も1言語でかけるってのが、特にメリット（かな？）。 ※「1言語」ってのは「ワンソース」と同義ではないです。念のため。 特に、 haXe に興味を持った個人的理由は下記。 ・(私自身が) オブジェクト指向 (AS3 or JAVA) に慣れている。 ・ js に慣れていない。 ・ js を仕事で書くことになった。 ・ js でも AS3 みたいに継承とか書きたい。(proto
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」:phpspot開発日誌
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 2012年07月13日- Zebra_Datepicker, a lightweight datepicker jQuery plugin 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 13KBでクロスブラウザ、CSSによるデザイン変更が容易で国際化対応もしていて日本語カレンダーへのカスタマイズも簡単。 日付の形式も自在に指定可能。YdM等とオプション指定するだけです。 こうしたライブラリは実装が簡単であると同時に、サイトのデザインにマッチするようにカスタマイズできるようになっていると本当に使い勝手がよいですね。 実装自体は便利だけどカスタマイズに数日かかったなんていうとちょっと困ります。 年だけの選択も出来ます 関連エントリ これは新し
サーバサイドJavascriptについて調べています。 有名どころは、Node.jsだと思いますが、Node.js以外にご存知のものがあれば教えていただきたいと思います。…
サーバサイドJavascriptについて調べています。 有名どころは、Node.jsだと思いますが、Node.js以外にご存知のものがあれば教えていただきたいと思います。 回答は、１つの環境について１つの回答でお願いします。回答には必ずオフィシャルサイトへのリンクを付けてください。 調査目的なので、ベストアンサーの予定はなく、ポイントも均等で行うつもりでおりますことをご了承ください。なおサーバサイドJavascriptである確認ができない情報に関しましてはポイント配分から外させていただくことがあります。 よろしくお願いします。
SunSpider JavaScript Benchmark はそれぞれ何を測っているのか？ - >& STDOUT
アーカイブ開いてREADME的なもの探しても無いし、Webkitのサイトやその周りにも載って無いしでよくわからない、ので調べてみた。ウェブブラウザに搭載されているJavaScript処理系がどんだけやれんのか叩き出してくれるアレです。 http://www2.webkit.org/perf/sunspider-0.9/sunspider.html 3d-cube 元ネタはここ。 前版よりパフォーマンスが落ちるバグの確認の為のコンテンツだったらしい。 回転する立方体の3Dレンダリング。 3d-morph Apple謹製。元ネタはここ？。メッシュ変換。…というのが何を指すのか飲み込めていません。 3d-raytrace Apple謹製。レイトレーシングとも言われる、光の当たり方を視線から追っていく像を描く手法。アルゴリズムは単純ながら、膨大な計算量が必要とされる為、Benchmarkにはもって
#261 Testing JavaScript with Jasmine - RailsCasts
Railsデベロッパーの多くはアプリケーションのRubyコードをテストすることの重要性を理解しています。しかし多くの場合JavaScriptについてはブラウザでアプリケーションを実行してエラーを確認するだけの手動テストで済まされてしまいます。ウェブアプリケーションがますます複雑化しクライアント側に多くの機能を持つようになる中で、JavaScriptコードを自動的にテストする方法を持つことが望まれます。今回のエピソードでは、そのための一つの方法を見ていきます。 対象のアプリケーションを以下に示します。標準的な注文フォームで、クレジットカード番号を入力するテキストフィールドを持っています。このフィールドにクライアント側で動作する検証機能を追加して、フィールドがフォーカスを失うときに入力された番号が検証されるようにしようと思います。 完全なクレジットカード番号の入力検証機能を追加するわけではあり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの継承について
情報ウィンドウ｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room
_level0 | Kayac Interactive Designer's Blog
