Japan Map ( jQuery plugin )
Quick Start Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan. The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched. Here is most simple example. <!DOCTYPE
canvasで日本地図を表示してくれるjQueryプラグインのJapanMap | スターフィールド株式会社
時々日本地図をサイトに載せ、そこから地域のページにリンクさせるということをすることがありますが、47都道府県のリンクを日本地図上に配置する作業は、とても骨が折れます。 jQueryのプラグインで、Japan Mapという、日本地図をcanvasで表示し、 マウスをホバーしたときや、地域をクリックしたときのアクションをつけることが出入るものが公開されていましたので、ご紹介いたします。 Japan Mapのサイト↓ Japan Map ( jQuery plugin ) DEMO 使い方 まず、Japan Mapのサイトから「jquery-japan-map.js」をダウンロードし、 htmlのheadでjQueryとともに読み込みます。 <head> ・・・ <script type="text/javascript" src="js/jquery-1.9.1.min.js"></scrip
jQueryでタブメニューを簡単に自作する2つの方法
jQueryでプラグインに頼らず、簡単にタブメニューを実装する方法のご紹介です。 プラグインを使わなくても意外と簡単に実装できますので、ぜひ試してみてください。 CSSでデザインする方法と、画像を使う方法の2パターンをご紹介します。
HTML5のcanvas要素の描画コンテキストをgetElementById()の代わりにjQueryで取得する
HTML5のcanvas要素の描画コンテキストを、getElementById()の代わりにjQueryで取得する方法です。jQueryな方はタイトルだけで記事の主旨がお分かりと思いますので読み飛ばしてください（笑）。 １．canvas要素の描画コンテキストとは 前置きになりますが、canvas要素は描画機能にアクセスするためのgetContext()というDOMメソッドを持っています。canvas要素のDOMノードを取り出し、取り出したDOMノードに対してgetContext('2d')を実行することで、描画機能にアクセス可能な「描画コンテキスト」を取得します。 getContext()の引数の「2d」は、描画コンテキストの種類を示し、現在「2d」固定です。要するに「2d」を指定することで「2D描画コンテキスト」を取得します。将来的に、例えば「3d」という引数が増えて3D描画コンテキスト
ページのアクセス時にモーダル（フロート）を表示するjQuery.layerBoard.js | FEVDES BLOG
「セール情報」や「重要なお知らせ」を、 モーダル（フロート）で目立たせたいという要望があったので、 ページのアクセス時にモーダル（フロート）を表示するjQueryプラグインを制作しました。 「jquery.layerBoard.js」は商用利用・改変・再配布可能です。 デモ トップページのアクセス時にモーダルを表示させるプラグイン。 ダウンロード：layerboard.zip【111KB】 デモをみる 次にアクセスしても指定した時間までひらきません。 デフォルトでは1分で、再びひらくようになっています。 再びひらくまでの時間は分単位で指定できます。 必要なファイル 必要なのは jQuery jquery.cookie.js jquery.layerBoard.js jQueryとjquery.cookie.jsはサイトからダウンロードしてください。 jquery.layerBoard.js
jQueryのonメソッドでhoverを使う | Webとデザインのキタック
on()はbind()、live()、delegate()をまとめたもの。 hover()はmouseenterとmouseleaveのエイリアスです。
ページアクセス時ポップアップ表示で「はい」or「いいえ」を選択する jQuery 「modal」ウィンドウ｜WEB屋の知識と技術ブログ
まずは下記のサイトから「jquery.cookie.js」と「jquery.layerBoard.js」ファイルをダウンロードします。 ▼jquery.cookie.jsファイル jquery.cookie.jsダウンロード ▼jquery.layerBoard.jsファイル jquery.layerBoard.jsダウンロード まず最初に「jquery.js」「jquery.cookie.js」「jquery.layerBoard.js」ファイルを読み込む「JavaScript」ファイルへの読み込みコードをヘッダーへ記載しましょう。 【ヘッダーに記述】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページアクセス時ポップアップ表示で「はい」or「いいえ」を選択する jQuery 「modal」ウ
jQuery Validation 簡単にフォームをチェック バリデーション
タグ 保湿RTX1210VagrantVirtualBoxAnsibleLarabelClamAVCentOS7SWX2200ゆるいハッキング大会RTX1100MySQLPlesk12おりょりょんNFSPostfix基板修理linux 入門atomゆるいハッキングDrupalVisual Studio 2017RabbitMQMVCAsteriskベンチマークBINDGitMastodonwindows10GeoIPApacheAWS S3AWS CLIFuelPHPVulsH2OSSHFSAWS EFSZabbixRDPELBロードバランサsshバックアップ負荷分散AWS EBSCybozu Office10ElasticsearchSWX2300LogstashKibanaLaravelKubernetes仕事猫現場猫ゆるいハッキングセミナーALBDNSConoHa Vlanデッドロッ
jQuery Validation Plugin | Form validation with jQuery
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation
【使い方】 JS Sweet Alert 2 | Kinchan's Blog
【使い方】 JS Sweet Alert 2 本日はSweetAlert2というJSライブラリの使い方に関して記載していきたいと思います。 このライブラリはブラウザ準拠の地味なアラートを、デザイン性のあるモノにカスタマイズするライブラリになります。 ブラウザ準拠のアラート DEMO 1 // HTML <a class="btn" id="btn01">DEMO 1</a> // JS $("#btn01").click(function(){ alert("ブラウザ準拠のアラート"); }); ※この解説ではjQueryを使用しますが、jQueryを使用しなくても、もちろん作動します。 １．導入･設置方法 SweetAlert2は、ライブラリをダウンロードして自分のサイト内にファイルを設置し読み込む方法と、CDNを使用して読み込む方法がありまます。 ライブラリをダウンロードする場合 Gi
1分でわかるjQueryのscrollTop() スクロール位置取得の使い方
jQueryのscrollTop()でスクロール位置を取得することでいろいろなことができるようになる。 ウィンドウ最上部のスクロール位置の取得 $(window).scrollTop()で取得。$(window).on("scroll"だけだとロード時に現在位置が表示されないので$(window).on("load scroll"と記述するのが望ましい。 function getScrollTop(){ $("#result").text($(window).scrollTop() + 'px'); } $(window).on("load scroll", getScrollTop); jQueryのscrollTop() スクロール位置取得の使い方 サンプル1 ウィンドウ最下部のスクロール位置の取得 $(window).scrollTop()+$(window).height()で取得
【JS】ハンバーガーメニューをjQueryとCSSで作成する方法 - Wataame Frog
スマホ画面でも常時表示していたグローバルメニューを、ハンバーガーメニューをタップすれば表示し、再度タップすることで非表示にできないかと相談されたので、作ってみましたので、備忘録としてポストします。 (2019.10.18追記) 少しリニューアルしてみました 基本的なことは変わらずに上からではなく左からメニューが出てきて、かつメニュー内のスクロールもできるというものを作ってみました。 【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました ハンバーガーメニューを自作する方法 「ハンバーガーメニュー」とは？ そもそも「ハンバーガーメニュー」とはなんぞや、という人はあまり居ないとは思いますが、一応。 スマホサイトの右上にある「三本線」メニューが、いわゆる「ハンバーガーメニュー」です。 ↑ 「３月のライオン」というアニメのWEBサイトでも見かけました。 ハンバーガ
jQueryで複数指定のあるclassを取得する方法
1つの要素に対してclassが複数指定されているときに、classを全て取得する方法がすぐに思いつかなかったので、調べた内容をメモしておきます。 サンプルコード 複数のclassの付いた要素を用意します。 HTML <div class="sample hoge fuga aaaaa"></div> .sampleが持っているclassをすべて取得してみます。 JavaScript $(function() { var classVal = $('.sample').attr('class'); // classの値を取得 var classVals = classVal.split(' '); // 取得した値を分割 // 配列になっているのでforで一つずつ取得できる for (var i = 0; i < classVals.length; i++) { console.log(cl
jQuery 3.3登場、約1年ぶりのアップデート。新機能も追加
JavaScriptライブラリとして知られるjQueryが約1年ぶりにアップデートされ、「jQuery 3.3」が1月19日付けでリリースされました。 1つ前のバージョンであるjQuery 3.2のリリースが2017年3月16日で約10カ月前、さらにその前のバージョンであるjQuery 3.1のリリースがそこから8カ月前に遡る2016年7月7日ですので、jQueryはゆっくりながらも着実にアップデートされてきたといえるでしょう。 配列に対してまとめてクラスの追加や削除が可能に 新機能として.addClass()、.removeClass()、.toggleClass()の3つのメソッドが、列挙されたデータに対して利用可能になりました。以下がその例です。 jQuery(elem).addClass([ 'dave', 'michał', 'oleg', 'richard', 'jason',
jQuery Scroll Depthが便利すぎて手放せない件。 - Ich habe hunger
LPとか縦に長いホームページのアクセス解析ってどうやってますか？ Google Analyticsならデフォルトでも色んなデータ見れるので重宝してるんですが、それでもLPとか縦長のページだとどこまで読まれてるんだろう？とかどれぐらいの滞在時間なのかな？とか色々気になります。 特に、LPだとボタンのクリック数とかから推定してたんですけど、ある日スーパーなjQuery Pluginを見つけました₍₍⁽⁽(ી(*ﾟ▽ﾟ*)ʃ)₎₎⁾⁾ jQuery Scroll Depth Scroll Depth is a small Google Analytics plugin that allows you to measure how far down the page your users are scrolling. It monitors the 25%, 50%, 75%, and 100%
Lazy Loadとは？画像読み込みを遅延ロードするWordpressプラグインと、jQuery（jsライブラリ）の設定
エンジニアの転職情報サイト > WordPress > Lazy Loadとは？画像読み込みを遅延ロードするWordPressプラグインと、jQuery（jsライブラリ）の設定 公開日：2014-09-14 更新日：2022-10-16 Lazy Load とは・・・Webページのスクロールに応じて、画像データを遅延読込させるプラグインになります。 このプラグインは、Wordpressで利用できるプラグイン：「Lazy Load」と、 jQueryのプラグインである「lazy load plugin for jquery」があります。 上記から、Wordpressを利用している場合は、プラグイン：「Lazy Load」を利用し、 WordPressを利用していないWebサイトの場合は、「lazy load plugin for jquery」を利用すると良いでしょう。 本来・・・画像を含む
jQueryプラグインのBoxerを試してみる - yk5656 diary (旧)
jQueryプラグインのBoxerを試してみる。 Boxer http://formstone.it/components/boxer ※バージョンは3.3.0を使用。 設置 ファイルを下記のような感じで設置。 ├ HTMLファイル ├ jquery.fs.boxer.min.css ├ jquery.fs.boxer.min.js └ sample.png 基本 基本的にHTMLは下記のような感じで書く。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link href="jquery.fs.boxer.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script
サムネイルをクリックすると大きな画像で表示する jQueryプラグイン Boxerを試してみた | WEB PIXY
サムネイルをクリックして大きな画像で表示するプラグインというと LightBoxが有名ですが、同じような機能を持った jQueryプラグインは数多く存在します。今回は、Boxerを紹介をします。 Boxerの使い方 GitHubに公開されている Boxerのページからデモファイルをダウンロードして、Boxerを実装するのに必要なファイルをサーバーにアップロードします。ファイルは、jquery.fs.boxer.min.js、jquery.fs.boxer.css、jquery.fs.boxer-icons.png、jquery.fs.boxer-loading-dark.gif、jquery.fs.boxer-loading.gifです。 <link href="css/jquery.maximage.css" rel="stylesheet"> <script src="http://a
jQueryでいろいろな要素をストライプ（縞模様）にする。
Posted: 2010.07.15 / Category: javascript / Tag: jQuery 最近テーブルとか、リストなんかをストライプ（縞模様）で表示されてるのとかよく見かけますね。 従来のHTMLでもこのような表現は可能でしたが、一行ごとにマークアップしなくてはいけないので地味に大変な作業でした。 そんな作業もjQueryを使えば簡単にできるみたいです。 リスト（li）ストライプをHTMLで作成 jQueryの前にHTML+CSSで作成してみます。 例えばリスト（li）なら２つのクラスを交互に割り当てていけばいいわけです。 クラス名はなんでもいいのですが、わかりやすく、偶数奇数の英語である、「even」「odd」一般的なようです。 ただそのまま訳すと偶数＝evenっぽいんですが、jQueryのセレクタでは偶数はoddなので、ややこしいですが偶数に「odd」クラスを割り
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【jQuery・CSS】jQueryとCSSで作るアコーディオンメニュー
