郵便番号から住所をフォームに自動入力するJS
zip2addr Google日本語入力を利用して郵便番号から住所を補完して自動入力します。JQueryとJSのみで動作してメンテナンスフリーです。HTMLタグ内にインラインで挿入できるので手軽に実装できます。 URL：https://github.com/kotarok/jQuery.zip2addr 設置方法 上記のGitHubのページからzipファイルをダウンロードし、解凍してできたjquery.zip2addr.jsをjsフォルダ内などの任意の場所にアップロードします。 アップロードする前に、念のためにjquery.zip2addr.jsをテキストエディタなどで開き、5行目の api: 'http://www.google.com/transliterate?langpair=ja-Hira|ja&jsonp=?', を api: 'https://www.google.com/t
jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説
目次 Ajaxとは AjaxでPOST送信する jQuery（送信側）の記述方法 PHP（受信側）の記述方法 まとめ Ajaxとは AjaxとはHTTPプロトコル通信で、HTMLやPHPファイルからリクエスト送信をHTTPサーバに送信して、レスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。 Ajaxを使うとHTMLファイルの中の一部だけ表示更新するなどの操作を行うことができます。 例えば、ブラウザ上に表示した一覧表の内容を更新して、データベースに登録した内容をまた一覧表に反映させる時、HTMLファイルの表部分の表示だけ更新する、ということができるようになります。 [PR] PHPを学んで未経験からWebエンジニアを目指す方法とは AjaxでPOST送信する Ajaxを使ってPOST送信するには、jQuery側でPOST送信するデータの定義を記述して、PHP側で
jQuery.ajax()でファイルをアップロードする方法
jQuery.ajax()でファイルをアップロードする方法を紹介します。 １．はじめに jQuery.ajax()で画像ファイルをサーバに送信し、バックエンドのPHPで画像の幅・高さを返却し、それを表示するという簡単なプログラムを組んでみました。 フロントエンド <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function(){ $('#foo').submit(function(){ $.ajax({ url: "test.php", type: 'POST', data: { 'file': $('#file').val() }, dataType: 'json' }) .done(function( data ) { $('#re
アルファシス – alphasis.info -
カテゴリー別アーカイブ JavaScript (2,265) リファレンス (1,050) Hello World (3) 基本構文 (8) 変数 (13) 定数 (2) データ型 (5) リテラル (13) 文字列リテラル (4) 配列リテラル (3) オブジェクトリテラル (3) 演算子 (52) 制御構造 (65) if (5) switch (4) while (6) do-while (6) for (10) for-in (8) for each-in (6) break (6) continue (5) debugger (1) function (1) return (1) var (1) with (1) try-catch-finally (3) throw (1) ユーザー定義関数 (21) ユーザー定義オブジェクト (10) 組み込み関数 (10) 組み込み定数 (
フォームをより使いやすくするためのJavaScript/CSSツール10選
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
jQueryとcssで作る、フッター手前で止まる「トップへ戻るボタン」の制作手順 | 埼玉県さいたま市のWeb制作・コンテンツマーケティング会社｜SSC
岡部です。 あると便利な憎いやつ、「トップへ戻るボタン」。 とりあえずcssで見た目を作るところから、スムーズにスクロール、少しスクロールすると表示、フッター手前で止まる、などの処理をひとつずつ解説していきます。 参考にさせて頂いたサイトはこちら！ありがとうございます。 jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール Animated Scroll to Top htmlとCSSでデザインを作る まずはボタンがないと話が始まりません。 右下に固定で表示されているボタンを、htmlとcssでデザインします。 ポイントは、position:fixed;で位置を固定する、辺りでしょうか。 下記サンプルだとcssのみで丸や三角を表現していますが、画像を使っても良いでしょうね。 スムーズにスクロールさせる このままでも機能としては十分役割を果た
jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール
言葉で説明すると難しいのですが、よくあるスクロールすると「ページトップへ」のボタンが出現して、そのままスクロールに合わせてついてくるものを、そのままページ下までついてこさせずにフッターの位置で止める方法です。IEはバージョン7以上で動きました。 「サンプル」を作りましたのでこちらをご覧頂ければわかりやすいかもしれません。 （サンプルデモのコードは一番下にあります。） ページトップボタンのHTML ページトップボタンのHTMLは以下のようにします。 <p class="gotop"> <a href="#"> <img src="images/gotop.png" alt="ページトップへ戻る"> </a> </p> CSS ページを包んでいる一番親の要素へrelativeを設定します。 #container{ position:
Draggable | jQuery UI 1.10 日本語リファレンス | js STUDIO
型：Boolean 初期値：true falseが指定された場合、.ui-draggableのclassが追加されなくなります。 数百の要素に対して.draggable()を適用するようなパフォーマンスの最適化が望まれるようなケースで 必要になるかもしれません。 型：jQuery or Element or Selector or String 初期値："parent" ドラッグ中にドラッグのヘルパー的な役割を果たす要素を付与する要素を指定します。 jQuery ヘルパーを追加するjQueryオブジェクトを指定します。。 Element ヘルパーを追加する要素を指定します。 Selector ヘルパーを追加する要素をセレクターで指定します。 String "parent"を指定すると、ドラッグ要素の兄弟要素としてヘルパーが追加されます。
メニュー関連のjQueryプラグインまとめ - jQueryプラグインまとめ
ここではメニュー関連のプラグインを紹介します。デモとそのソースコードとともにプラグインを紹介しています。
JavaScriptでクロスドメインの壁を飛び越える方法 - FICC Workbook
Javascriptを使って異なるドメイン上のデータを引っ張ってこようと思うと意外とたいへんです。 「クロスドメイン問題」とかいう面倒な壁が立ち塞がっているからです。 ぼくもさっきまでハマりまくっていたのですが、「jquery.xdomainajax.js」と言う良さ気なJQueryライブラリを使うことによって見事クロスドメインの壁を飛び越えることに成功しましたのでメモ 使い方使い方は簡単なのでありがたい。 GitHubから「jquery.xdomainajax.js」をDLしておき、以下の様なHTMLを書いて保存して実行。 ファイルを開けば、実行され他ドメインのサイトの内容が表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>クロスドメイン突破してみるん</title> <!-- jQ
CSSだけ！クリックでスムーズに開閉するアコーディオンメニュー
この前「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事を書きました。jQueryでしそうなことをCSSのみで作ったのですが、これはマウスを乗せたとき動くようにしたいのでhoverを使いました。 今回はクリックで開閉するということで、hoverは使えません。では何を使うのか。 ラジオボタンを使います。ある項目にチェックするとそれまでチェックされていた項目のチェックが外れる。アコーディオンメニューと仕組みが一緒です。 今回もサンプルを用意していますのでご覧ください。 IE8以下の場合「:checked」が非対応なのでうまく表示されません。しかし、CSS3セレクタはSelectivizrを使えば簡単に対応できます。使い方は「CSS3を使うにあたって知っておきたいIE対策のまとめ｜Webpark」をご参考に。 それではHTMLから紹介します。 HTML <div id
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する | 独学Webデザイナーの覚書
jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する jQuery2011年9月29日 MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。 そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。 jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。 jQueryはこちらからダウンロード 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width
jQueryでオブジェクトのid名を取得する方法 | forWEB屋
2010年11月9日 jQueryを利用して、オブジェクトのid名を取得する方法。 滅多に使わない気がするが、例えば $(this) などで表し続けていた場合などにid名をどうしても取得したい場合などがある。 そのような時は var idname = $(this).attr(“id"); というようにすれば取得出来る。
jQueryでモーダルウィンドウを作成。 | Almondlab
（追記／2011.12.02）ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。 jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。 サンプルはこちら <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery.load()の処理後、画像のロード完了を検知したい
非同期通信で取得したコンテンツをページに反映させるには？（load）
jqueryで同じようなイベント処理のまとめ方 - Qiita
