Ver.6.14:検索文字入力ボックスに、クリアボタン

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

「INDEX」検索文字入力テキストボックスに、クリアボタン(×)を付けました。jQueryプラグインaddclearを使っています。
index-addclear.jpg

「INDEX」の検索ボタン「価格(G)」「楽天」「Twitter」を、サイトURL変更に合わせてスクリプト修正。

「週間天気予報」の台風画像が、tenki.jpの画像URL変更により表示されなくなったのを修正。
スポンサーサイト

はてなブックマークに追加 はてなブックマーク - Ver.6.14:検索文字入力ボックスに、クリアボタン

2nd INDEXをiPad miniでも使いやすいように

2nd INDEX
http://ok2nd.me/index/
を、iPad miniやスマホでも使いやすいように、文字サイズを大きくするために、viewportでinitial-scale=1.7を指定してみました。
<meta name="viewport" content="width=device-width,initial-scale=1.7">

検索文字入力テキストボックスに、クリアボタン(×)を付けました。jQueryプラグインaddclearを使っています。
$(function(){
$('#search_str').addClear();
});
addclear.jpg

はてなブックマークに追加 はてなブックマーク - 2nd INDEXをiPad miniでも使いやすいように

Ver.6.13:週間天気をtenki.jpからlivedoorに変更

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

ツール「GPSログ View」の修正画面で、GPXファイル差し替えた場合、名前と補足説明をGPXファイルのデータで置き換えていた仕様を変更。修正画面の名前と補足説明が有効になります。

tenki.jpのtenki RSSサービスが終了してしまったので、「週間天気予報」の週間天気をlivedoor天気情報(Weather Hacks)のRSS利用に変更しました。

tenki-shukan.jpg

はてなブックマークに追加 はてなブックマーク - Ver.6.13:週間天気をtenki.jpからlivedoorに変更

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 : コンピュータ

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

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

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

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

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

ok-calc.jpg

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

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 : コンピュータ

jQuery UI の Sortableは、恐ろしく便利

MyHome Portal Ver.6.01で、RSSリーダーやToDoで、表示順序の変更をマウスのドラッグ&ドロップで出来るようにしましたが、jQuery UI の Sortableを使って実現しています。
http://ok2nd.blog87.fc2.com/blog-entry-379.html

jQuery UI の Sortableは恐ろしく便利です。

ドラッグ&ドロップ機能が簡単に実現できるだけでなく、並び替えた後の順番情報を簡単に取得できます。

並び替えたいコンテンツにID番号を振っておきます。

<div id="container">
<div id="11">あ</div>
<div id="12">い</div>
<div id="13">う</div>
<div id="14">え</div>
<div id="15">お</div>
</div>

.sortable("toArray")を使うだけで、並び替えた後のIDの番号をカンマ区切りで返してくれます。
例えば、12,13,11,14,15といった文字列で返してくれます。これをlocation.hrefやajaxでサーバーサイドのモジュールに渡してやって、データベース上の並び替え処理をしてやれば、並び替え結果を保持できます。

$("#container").sortable({stop: function(event, ui) {
 id_nums = $("#container").sortable("toArray");
 location.href='content-renum.php?ids='+id_nums;
}});

$("#container").sortable({stop: function(event, ui) {
 id_nums = $("#container").sortable("toArray");
 $.ajax({
  type: "GET",
  url: "content-renum.php",
  data: "ids="+id_nums,
  async: false
 })
}});

はてなブックマークに追加 はてなブックマーク - jQuery UI の Sortableは、恐ろしく便利

theme : JavaScript
genre : コンピュータ

Ver.5.18:JavaScript関数を整理

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

JavaScriptの一部関数を、scripts/ok2nd.jsにまとめました。

各コンテンツの検索フィルタJavaScript関数を、なるべく統一しました。

「RSSリーダー」の↑クリックで表示されるポップアップウィンドウのタイトルに、マウスオーバーで本文の1行目を表示するようにしました。
NHK「ニュースで英会話」のRSSフィードを登録して、本文表示しないで、マウスオーバーで日本語表示するなどして使えます。
http://gogakuru.com/rss/program_156_feed.xml
rss-feed.jpg

「メモ」「ID管理」で、個別修正後の一覧表示で、元のスクロール位置までスクロールするようにしました。
修正データ行までURLの#でスクロールしていたのを、JavaScriptで一覧表示画面のscrollTopを覚えておいて、window.scroll()でスクロールする方式に変更。

ツール「ファイルマネージャ」で、ファイル名にUTFで扱えない特殊文字が含まれている場合、エラー表示するようにしました。

はてなブックマークに追加 はてなブックマーク - Ver.5.18:JavaScript関数を整理

theme : JavaScript
genre : コンピュータ

Ver.4.13:操作性の改善

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

すべてのコンテンツの修正画面で、「削除」の確認を、事前チェックボックスでなく、JavaScriptのwindow.confirm()で確認する方式に変更しました。

すべてのコンテンツで、<input type="checkbox">と<input type="radio">の項目名に<label>を付けて、テキスト部分をクリックしてもOn/Offが選択できるようにしました。

「アルバム」のサムネイル「頁枚数」変更で、ページがリセットされない不具合を修正。

「RSSリーダー」で、Ajax取り込み前に個々のRSS読み取り枠を空枠で用意するようにしました。

「住所録」の「電話・EMail表示なし」のOn/Offをページ遷移しない方式にしました。

「メモ」の翻訳機能を削除しました。(Google Translate API v1が廃止になっていて動作しないため。)

はてなブックマークに追加 はてなブックマーク - Ver.4.13:操作性の改善

theme : JavaScript
genre : コンピュータ

Ver.4.05:キーワードハイライトをJavaScriptで(2)

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

「カレンダー(一覧表示)」「ID管理」「利用ガイド」のキーワード検索時のキーワードハイライトがPHP処理だったのを、「メモ」「旅行記」と同様にjquery.highlight.jsを使用する方式に変更しました。

はてなブックマークに追加 はてなブックマーク - Ver.4.05:キーワードハイライトをJavaScriptで(2)

theme : JavaScript
genre : コンピュータ

プロフィール

ok.2nd

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

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

FC2Blog Ranking

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

この人とブロともになる

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