スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

はてなブックマークに追加 はてなブックマーク - スポンサーサイト

tableでマウスhoverしている列の背景色を変える。

「日本百選:都道府県別件数」で、tableでマウスhoverがしているセルの行と列の背景色を変えるようにしてみました。
行はCSSのtr:hoverで色を変えて、列はJavaScriptで色を変えています。
http://ok2nd.me/abook/pc/list-hyakusen-sum.php

JavaScriptは、以下のサイトを参考にカスタマイズしました。
≪jQuery:tableでマウスのhoverしている行と列の色を同時に変える方法≫
http://h2ham.seesaa.net/article/114152042.html

hyakusen-sum-c.jpg

$("#sum_list tr").each(function () {
  $(this).children().each(function (i) {
    i = i+1;
    $(this).addClass("item" + i);
  });
});
$.fn.color = function(){
  return this.each(function(){
    $(this).css({
      backgroundColor:'#ffced6'
    });
  });
};
$('#sum_list tr td').each(function(){
  var bgColor = $(this).css('backgroundColor');
  var selector = '.'+ $(this).attr('class');
  $(this).hover(function(){
    $(selector).color();
  },function(){
    $(selector).css({
      backgroundColor:''
    });
  });
});
$('#sum_list thead tr th').each(function(){
  var bgColor = $(this).css('backgroundColor');
  var selector = '.'+ $(this).attr('class');
  $(this).hover(function(){
    $(selector).color();
  },function(){
    $(selector).css({
      backgroundColor:''
    });
  });
スポンサーサイト

はてなブックマークに追加 はてなブックマーク - tableでマウスhoverしている列の背景色を変える。

theme : JavaScript
genre : コンピュータ

日本百選:都道府県別件数

「2nd 世界遺産,日本百名山,日本百選,桜名木,鉄道駅」サイトに、日本百選の都道府県別件数のページを追加しました。
http://ok2nd.me/abook/pc/list-hyakusen-sum.php

都道府県別、百選種類別にマトリックスで件数表示します。

日本百選名をクリックすると、件数が多い順に並びます。件数をクリックすると、該当の日本百選一覧が表示されます。

hyakusen-sum.jpg

はてなブックマークに追加 はてなブックマーク - 日本百選:都道府県別件数

theme : 国内旅行
genre : 旅行

簡易計算器を作ってみた。

簡易計算器(電卓?)を作ってみました。

http://ok2nd.me/tool/calc/

textareaに入力した数式を、JavaScriptのeval()で評価しているだけです。

セルには()付きの数式を入力できます。JavaScriptの数学関数(Math)も使えます。

ok-calc.jpg

はてなブックマークに追加 はてなブックマーク - 簡易計算器を作ってみた。

theme : JavaScript
genre : コンピュータ

Ver.6.09:Google マップ スポット検索改善 他

MyHome Portal Ver.6.09をリリースしました。
http://ok2nd.web.fc2.com/download.html

「サンプルDB自動セットアップツール」とツール「実運用環境バックアップ」を、 データベースサーバーがlocalhostでない場合に対応させました。 定義ファイルの「_DB_SERVER」で指定されているデータベースサーバーに対して実行します。

「住所録」と「預貯金管理」で、一覧表の行にマウスが乗ったときに行をハイライトするようにしました。

「カレンダー」の「天気出現地図」の天気マーク判定ロジックを変更。

一覧形式のページで、ページ指定が最終ページを超えた場合、エラーとならず、先頭のページが表示される不具合を修正。

「INDEX」一覧で、ホームページのキャプチャ画像作成に使用するサービス・サイトを実運用定義ファイルで変更できるようにしました。
define("index_CAPTURE_CREATE_SITE", 'http://capture.heartrails.com/130x130/cool?');
デフォルトで使用するサービス・サイトをHeartRails Captureに変更しました。
http://img.simpleapi.net/
↓↓↓
http://capture.heartrails.com/

ツール「Google Maps API V3版」のPlacesライブラリを使ったスポット検索を改善しました。
以下のページを参考にさせていただきました。
http://phpjavascriptroom.com/?t=ajax&p=googlemapsapiv3_lib_places

map-places.jpg

はてなブックマークに追加 はてなブックマーク - Ver.6.09:Google マップ スポット検索改善 他

theme : JavaScript
genre : コンピュータ

備忘録:window.open、return false、void(0)

Google Maps APIを使ったスマホ用サイトを作成した時の備忘録。
≪スマホ用:2nd マップ≫
http://ok2nd.me/abook/map/

■button等のonClickにはreturn false;を付ける。これを付けないと元のページに戻ってしまう等の不具合が生じます。PCのブラウザでの検証では不具合が発生しないにも関わらず。
例) onClick="hoge();return false;"

■Google Maps APIのinfoWindow内でaタグのtarget="_blank"で別ウインドウを開こうとしても、有効にならない。PCのブラウザでは正常に機能する。
対策としては、javascript:window.open()を使う。
例) href="javascript:window.open('hoge')"

■javascript:window.open()を使う時は必ず、void(0)を付ける。そうしないとFirefoxで、元のページが[object Window]という表示になっていまう。
例) href="javascript:window.open('hoge');void(0);"

■Google Maps APIのinfoWindowはグローバル変数として定義しておく。そうしないとwindow.open()で開いた別のウインドウから戻った時にinfoWindowの中身が消えることがある。
例) var infowin;
infowin = new google.maps.InfoWindow();

はてなブックマークに追加 はてなブックマーク - 備忘録:window.open、return false、void(0)

theme : JavaScript
genre : コンピュータ

プロフィール

Author:ok.2nd
HomePage:
http://ok2nd.web.fc2.com/
Email: m.ok.2nd@gmail.com

最新記事
最新コメント
最新トラックバック
月別アーカイブ
FC2ブログランキング

FC2Blog Ranking

検索フォーム
カテゴリ
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ユーザータグ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。