jQuery

jQuery 関連のメモ

jQuery で作成した機能が Firefox の最新バージョンで機能しない

2013年7月7日

Firefox の最新バージョン(22.0)になってから、この PC では画像が大きく表示されぼやけて見えるようになった。 また、コードなどを記述する pre 要素にマウスオーバーすると幅が自動的に広がるようにする機能を jQuery で以下のように記述して実現していたが、マウスアウトする際に、今までは元の幅に自動的に戻っていたのに、戻らなくなった。(「jQ…

続きを読む

jQuery で Lightbox のようなモーダルウィンドウを表示

2013年6月24日

jQuery を使って簡単に Lightbox のようなモーダルウィンドウを表示する方法のメモ。 基本的な構造 サムネイル画像にモーダルウィンドウで表示する拡大画像のソースへのリンクを設定する。 ページの適当な個所に半透明のモーダルウィンドウと拡大画像を表示する領域を設定し、CSS で非表示にしておく。 半透明のモーダルウィンドウの領域:id=”…

続きを読む

言語のリンクをクリックすると対応する言語のページに移動させる

2013年6月17日

日本語と英語の2ヶ国語のサイトを作成し、それぞれの言語のページが全く同じ構成の場合、言語のリンクをクリックするとそのページに対応する言語のページに移動するリンクを作成する例。 言語のリンクは、p 要素と a 要素で作成。 JavaScript が OFF の場合は、それぞれのトップページへ a 要素でリンク ディレクトリの構造は「en」フォルダの中に英語のペ…

続きを読む

ページ読み込み(完了)時に実行するjavascript

2013年6月13日

JavaScript で DOM 要素の取得など、ブラウザがホームページの読み込み完了時に何らかの処理を行いたい場合、body の閉じタグの直前に記述するか window.onload=function()~ を使用する。 最近は、jQuery ばかりを使っていて(というか、「jQuery(function($){」の意味など忘れていて) JavaScrip…

続きを読む

Googlemap の利用

2013年6月5日

Googlemap を利用する際のメモ。 2018年7月16日から「Google Maps Platform」という新しいサービスになり、API の使い方等が変更になりました。新しい API の使い方等については「Google Maps API の使い方」をご覧ください(2018年7月30日) ジオコーディングを使って地図を表示 HTML に記述してある住所…

続きを読む

スパム対策 JavaScript/jQuery を使った迷惑メール対策

2013年6月4日

ウェブ上にメールアドレスを掲載すると、スパム(迷惑)メー「ルが届くようになることがあります。 迷惑メール(スパム)に使われるメールアドレスは、ロボット(自動巡回プログラム)によって自動収集されていて、ソースを分析し、メールアドレスのような文字列(@ や mialto が含まれたもの)を集めているようです。 以下はメールアドレス収集プログラムに収集されるのを防…

続きを読む

基本的なドロップダウンメニュー

2013年5月18日

CSS による基本的な記述 メニューの幅や背景、テキストの位置などの指定は様々な方法が考えられるが、ここでは単純に幅はメニューの文字数に合わせ、右側にパディング(20px)を設け、背景は背景色で指定する。 HTML は ul 要素を入れ子にしてマークアップする。 CSS や jQuery で指定しやすいように id 「header-nav」を指定した div…

続きを読む

jQuery を使った縦にスライドするメニュー

2013年5月17日

親メニューをクリックすると、それに属するサブメニューをスライドアニメーションで表示するメニュー。 ul 要素を入れ子にして、ツリー構造を記述 例:親メニュー「News」をクリックすると、そのサブメニュー「Events」、「Activities」がスライドアニメーションで表示される。 「+」「-」「■」の3つの画像を用意。 親メニュー(div.parentme…

続きを読む

jQuery の fadeOut() を使ったスライドショー

2013年5月17日

プラグインを使わずに、jQuery を使って簡単なスライドショーを行う方法のメモ。 シンプルなスライドショー そのページにアクセスすると自動的にスライドショーを行う単純なもの。 サンプル1 基本的な構造 最初に表示する写真とそのタイトルを HTML に記述。 スライドショーで表示する写真のファイル名と情報をカンマ区切りで、非表示に指定した div 要素内に …

続きを読む

jQuery position(), animate() メソッドと css の display プロパティ

2013年5月3日

jQuery の position(), animate() メソッドを使用する際のメモ。 画像などを最初は非表示にしてその後表示するような場合、css の display プロパティを「none」にしておいて fadeIn() や show() などを使うことで可能だが、animate() メソッドの場合、css の display プロパティを「none…

続きを読む