デバッグ時に使いたいjQueryのユーティリティ関数について
jQuery Advent Calendar 2013の20日目の記事になります。衝動的にエントリーしてしまいましたが、意外とネタがありません。しばらく『サイ本』をパラパラと捲っておりました。その中で何となく目についたjQueryのユーティリティ関数のことでも書いてみることにします。ただユーティリティ関数のこと全部書くと膨大な量になりそうなので、プラグインなどの開発の際のデバッグ時に使いたいjQueryのユーティリティ関数に絞ってまとめてみます。 ブラウザテスト用jQuery.browserブラウザのベンダとバージョンを示すプロパティ。ブラウザがIEの場合、msieプロパティがtrueになります。Safari、Chromeの場合はwebkitプロとティがtrueになり、Firefoxの場合はmozillaプロパティがtrueになり、Operaの場合はoperaプロパティがtrueになります
jQuery iframeの読み込み完了後のタイミングで処理を実行する方法 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery iframeの読み込み完了後のタイミングで処理を実行する方法】です。局所的な記事が続いていますが地味に使えるTipsなのでメモしておきます。デモの方を見ていただければざっくりとした使い方が掴めるかと思います。もしよろしければ合わせてご確認ください。 iframeの読み込み完了後のタイミング 読み込みのタイミングで何らかの動作をさせる場合は以下のような記述で実装可能です。 HTML <iframe id="tgt" src="http:****.com"></iframe> JS <script type="text/javascript"> $(‘#tgt’).load(function(){ console.log(‘読み込み完了’); }); </script> クリック等のタイミングで読み込み 次の例はクリック
Chrome で jquery.min.map や jquery-1.10.2.min.map が 404 Not Found になる | UB Lab.
jquery-1.10.2.min.js を読み込んでいるページで、jquery-1.10.2.min.map が 404 Not Found になっていることに気づいた。いろいろと調べてみると、拡張子 map はソースマップファイルで Chrome の拡張で読み込みを行うようだ。この現象は、圧縮したバージョン(min とつく方)を利用したときのみ発生する。調べたことをメモとして残しておく。 解決方法 以下のどちらかの方法で対処できる。本番環境に適用するのであれば、最初の方法がいいだろう。 圧縮された jquery のファイルを開き、「@ sourceMappingURL」の行を削除する。Version 1.10.2 の場合は、ファイル名は「jquery-1.10.2.min.js」か「jquery.min.js」だろう。2行目に以下の記述があるので、削除すればよい //@ sourceM
高機能ライブラリ「jQuery」とそのPlugin「Validation」 - すぎゃーんメモ
非常に高機能で便利なJavaScriptライブラリとして評判の「jQuery」をちょっと触ってみた。 jQuery Pluginが豊富に存在する、というのも人気の理由のようで。 formの入力チェックをしてくれる「Validation Plugin」というものを使って試してみた。 bassistance.de » jQuery plugin: Validation 忘れてしまわないうちにメモっておこう。 最も簡単なサンプル それぞれ上記リンクからダウンロードして、「js」というディレクトリに放り込んでおいた。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>title</title> <script type="te
Akiba Hideki is under construction
Thank you for being patient. We are doing some work on the site and will be back shortly.
iPhoneやAndroidなどスマートフォンのスワイプ操作で動かせるカルーセルを実装する非依存型スクリプト・SWIPEVIEW - かちびと.net
iPhoneやiPadなどのスワイプで動かせる カルーセルを実装する軽量なライブラリ・ SWIPEVIEWのご紹介。jQueryやmootoolsな どのライブラリにも依存しない、非依存型 の軽量スクリプトですので既存のサイト にも導入もしやすいかもしれません。 スワイプで動かせるカルーセルです。他ライブラリに依存しませんので使い勝手はなかなか良いかなと思いました。この手のはカクカクしがちですけど、これは動作も結構スムーズです。多少はありますけどね・・ まだ画像しか対応していませんが、今後対応していくとの事です。jsファイル自体も8KBほどの軽量スクリプトですよ。完璧とは言いませんが今まで触った中でもなかなかスムーズな方ではないかと。 サンプル作りましたので以下よりお持ちのスマフォでどうぞ。 Sample お持ちではない場合はスクリーンキャストをご覧ください。 エミュレーターですけど、動作
[JS]パスワード入力時・入力後に一時的にパスワードを可視化するスクリプト -hideShowPassword
demo 3: チェックボックス Hide/Show Passwordsの使い方 Step 1: 外部ファイル 外部ファイルに当スクリプトとjQuery、またはZepto.jsを外部ファイルとして記述します。 ※jQueryとZeptoの兼用プラグインとなっています。 <script> document.write('<script src=vendor/' + ('__proto__' in {} ? 'zepto.custom' : 'jquery') + '.js><\/script>') </script> <script src="hideShowPassword.min.js"></script> Step 2: HTML HTMLは通常通りのフォームの作成です。 <div class="login"> <input type="text" placeholder="Usern
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS
最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの！ デモページ：2ページ目 ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq
![[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS](https://cdn-ak-scissors.b.st-hatena.com/image/square/811172ca6306ab35b8c730bf9af1a2f005e4fab0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014092203.gif)
[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="pogo-slider.min.css"> </head> <body> ... <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.pogo-slider.min.js"></scrip
![[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/854418a1d6f45d24d878040e9370f59845bb3b0c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091702.png)
JavaScriptで記事本文の読了予測時間を自動で表示するjQueryプラグインを自作した - 移転→hapilaki.net
ブログの記事本文を読むのにかかる目安時間を表示すると読者に親切かも。JavaScriptで作ったので、PHPを使えないサーバーを利用しているウェブサイトやブログに組み込めるよ。このjQueryプラグインを「読了予測時間」と命名。 読了予測時間のデモ画像 読了予測時間が表示されるページ 各記事ページで読了予測時間が表示される。下図で黄色の枠で囲った部分が読了予測時間。下図をタッチで別タブで拡大表示可能。 記事ページとは、はてなブログでいえばURLに/entry/が入っているページ。たとえば次のURL。 http://www.hapilaki.net/entry/jquery-plugin-dokuryo-yosoku-jikan 読了予測時間が表示されないページ 記事ページ以外の記事一覧ページやカテゴリページでは読了予測時間が表示されない。需要があるならアップデートして表示されるようにするか
JavaScript/jQuery を使ったブラウザ判定 | Web Design Leaves
「UserAgent での判定」、「サポートしている機能での判定」、「使いたい機能が機能するかでの判定」などがあるので用途に合わせて利用。 UserAgent での判定 UserAgent の文字列からブラウザを判定する方法。バージョンが新しくなったりすると UserAgent の値も変更されるようでこれがどのぐらい使えるかは不明（確実性に疑問）。 UserAgent と そのバージョン等は以下で取得できる。 //ユーザエージェント var userAgent = window.navigator.userAgent; //バージョン var appVersion = window.navigator.appVersion; //名前 var appName = window.navigator.appName; //プラットフォームのタイプ var platform = window.n
ピンポイント天気予報 - Rver Stone Inc.
<div class='forecast-now'> <span class='city-name'></span> <div class='forecast-a-day'> <span class='weather-day'></span> <div class='weather-wrapper'> <span class='weather-main'></span> <span class='weather-description'></span> <span class='weather-icon'></span> <span class='main-temp'></span> </div> </div> </div> <div class='forecast-daily'> <div class='forecast-a-day'> <span class='weather-day'
HTMLファイルからPOSTでJSONデータを送信する - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTMLファイルからPOSTでJSONデータを送信する</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#response").html("Response Values"); $("#button").click( function(){ var url = $("#url_post").val(); var JSONdata = { value1: $("#value1").val()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - czottmann/jquery-base64: Port of Nick Galbreath's JS base64 string encoder.
JavaTechnology Slot Online | Cara Daftar bermain Slot Online
SwipeView：スマートフォンやタブレットでタッチコントロールを使ったモバイルギャラリー / ウェブデザインライブラリー
meta viewport を動的に切り替える際に気をつけること - Qiita
jsの非同期実行を簡潔にしてくれる$.Deferredをシンプルに説明する - Qiita
OctopressのサイドバーにQiitaに投稿した人気記事を表示させる方法 - Qiita
