2008年5月14日(水)

« overflow:hiddenが設定された要素の子孫要素を最前面に表示する方法…だれか教えて！ | トップページ | ちょっと小細工：textareaの高さを自動調節 »

Yin and Yang：動作改善(?)他

Yin and Yang：リンク先の内容をその場で表示するスクリプトについて、アンカー指定による移動を止める、マウスホイールでページをスクロールしている時などに引っかかりやすい（リンクの上をマウスカーソルが横切るとプレビューが開いてしまう）問題に対処するなど、いくつか修正を行いました(ver.0.02m)。
■Greasemonkey＆SeaHorse兼用版
Yin and Yang：マウスホイールでリンク先をプレビュー
■SeaHorse専用版
Yin and Yang：マウスホイールでリンク先をプレビュー
ver.0.02hから主として以下のような改修を行っています。
  1. 【共通】アンカー指定で移動していたものをやめ、object.scrollIntoView(true)を使った移動に変更。
    これでアンカー指定のページ履歴が残ったり、IE系でプレビューする度にカチカチ音がする現象がなくなったはず。
  2. 【共通】スクロール時にマウスカーソルがリンクを横切るとひっかりが生じる（敏感に反応してプレビューが開いてしまう)問題の対策。
    一定時間(300ms)リンクの上にカーソルがないと、プレビューが開かないようにしてみました。プレビューが可能になったタイミングで、リンクの背景色がピンク色になります。
  3. 【共通】その他、表示上の微調整。
■余談
scrollIntoView()で移動する先の座標を、移動しないで知る方法はないものでしょうか……あるオブジェクトの位置を知りたいだけなのに、いったんそこまでスクロールしないといけなかったり、さもなくば、いちいち先祖まで遡ってブラウザ依存のオフセット計算をしないといけないなんて、不便極まりないですよねぇ……。

この記事をニフティクリップβに追加 この記事をはてなブックマークに追加 2008/05/14(水) 23:37 | | 記事の編集(管理者用)

風柳へひとこと(web拍手) 

「おもいつき」カテゴリの記事

「パソコン・インターネット」カテゴリの記事

トラックバック

この記事のトラックバックURL:

記事との関連性が薄いものやSPAM等、管理人が不適切と見なしたトラックバックについては予告無く削除する場合が有ります。悪しからずご了承下さい。

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/161784/41210308

この記事へのトラックバック一覧です： Yin and Yang：動作改善(?)他:

コメント

> いちいち先祖まで遡ってブラウザ依存のオフセット計算をしないといけないなんて、不便極まりないですよねぇ……。 
これしか手が無いんですよね。非常に面倒です・・・
私はjQueryのjQuery.fn.offsetをいただいて対策しています。
同じような機能が各種jsライブラリにあるみたいですので、それらの一部を使用するのもアリではないでしょうか

投稿： 958 | 2008/05/16 9:35:34

958 さん、どうもです。

そうですね、各種ライブラリの一部機能に関する処理を参考にする、というのは私もよく使います。
統合的なライブラリの場合、それを読込んでちゃんと使おうとすると、まずはライブラリの癖を把握しないといけない場合が多いので、つい面倒でつまみ食いだけに留まってしまうんですけどね(^^;)。
＃ある機能に特化したライブラリならともかく、jQueryのようなものだとまず使い方を覚えて、統一化したコードを書かないと…とか構えてしまって、結局調べるのが面倒で使わずに終わってしまうという(苦笑)

投稿： 風柳＞958 さん | 2008/05/19 23:17:55

> ＃ある機能に特化したライブラリならともかく、jQueryのようなものだとまず使い方を覚えて、統一化したコードを書かないと…とか構えてしまって、結局調べるのが面倒で使わずに終わってしまうという(苦笑)

これはありますね
私は「別にいいや」で統一化してませんが・・・（汗汗

投稿： 958 | 2008/05/20 16:52:26

コメントを書く






戻るリンク追加

カレンダー

2009年7月
日 月 火 水 木 金 土
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

ココログカレンダーPlus

検索

伝言板

    • ■[2009/06/14 16:39]
      　by 風柳＞facet さん
      　

      | いつ「別館」取れたんですか？

      あはは、気がつきました？
      6/7に" - 別館：書庫のある庵 -"を外しています。

      実情にそぐわないというのと、検索結果などでタイトルが省略されるとき、長いブログ名だと肝心の記事タイトルがほとんと見えない、というのが前々から気になってはいたので、思い切って変えてみました。

    • ■[2009/06/14 07:54]
      　by facet
      　

      今気付きました。
      いつ「別館」取れたんですか？

    • ■[2009/04/29 14:42]
      　by BANA
      　

       風柳さん素早いご対応ありがとうございます！
      すごく助かります＞＜

      新しいスクリプトに変えたところ、windowsでも表示されました＾＾
      新しいスクリプトも書いて下さりありがとうございました（´∀｀）
      お陰様ですぐに新しいカレンダーに変えることができました

      Macでの動作確認は出来ないとのことで、無理なお願いをしてしまい申し訳ありません；
      Macでも表示されていましたｂ

      仰ったとおりにスクリプトのマイリストを上の方に持って行ったら表示も速くなりました！

      ご教授ありがとうございます＞＜！

    • ■[2009/04/28 22:07]
      　by 風柳＞BANA さん
      　

      BANA さん、どうもです。

      ざっと調べてみたのですが、ちょっと原因がわからず……申し訳ない。
      あと、貼付けられているカレンダーは旧バージョンで、今はメンテしていないので(すみません)よろしければ新バージョン
      http://furyu.tea-nifty.com/annex/2008/01/plus_aa88.html
      を試していただけるとありがたいです。

      BANAさんの現在の設定に合わせると、

      <style type="text/css">
      #banner-body-bottom {
      text-align: center;
      padding: 4px;
      }
      #Line-Calendar {
      font-family: verdana;
      font-size: 10px;
      color: #696969;
      text-align: center;
      display: block;
      padding: 4px;
      border: 1px solid #696969;
      }
      #Line-Calendar a { color: #FF34B3; }
      #Line-Calendar a:hover { color: white; }
      </style>

      <script type="text/javascript" src="http://furyu.tea-nifty.com/script/dayChecker.js"></script>
      <script type="text/javascript" src="http://furyu.tea-nifty.com/script/cocoCalendarPlus.js"></script>
      <script type="text/javascript">
      with (cocoCalendar) {
      leftArrow='&lt;&lt;'; // ナビ(左)のフォーマット
      leftArrowTitle='前の月'; // ナビ(左)のタイトル(リンク要素のtitle属性)
      rightArrow='&gt;&gt;' // ナビ(右)のフォーマット
      rightArrowTitle='次の月'; // ナビ(右)のタイトル(リンク要素のtitle属性)
      english=true; // true: 月と曜日を英語表示
      Monday1st=false; // true: 月曜日を週初めとする
      showEntryTitle=true; // true: 日付リンク上にマウスがあるとき、記事タイトルを表示
      popupTitleList=true; // 記事のタイトルのポップアップ設定(showEntryTitle=trueでのみ有効)
      // true: その日の記事タイトル一覧をポップアップ表示
      // false: その日の記事1つだけをタイトル表示(リンク要素のtitle属性使用) 
      popupOffsetTop=16; // ポップアップする縦オフセット位置(px)
      popupOffsetLeft=8; // ポップアップする横オフセット位置(px・左サイドバー用)
      popupOffsetRight=120; // ポップアップする横オフセット位置(px・右サイドバー用)
      popupHideDelay=500; // ポップアップを消すまでの待ち時間(ms)
      addLinkToCaption=true; // true: キャプションに月別アーカイブへのリンク設置
      changeCalendarOnly=true; // true: ページ遷移無しでカレンダーのみ切り替え
      dateArchive=false; // true: 日別アーカイブへのリンク有効(日別アーカイブ作成時のみ設定可)
      showLineCalendar=true; // true: ラインカレンダーを表示
      hideCalendar=true; // true: カレンダーを隠す(ラインカレンダーのみ表示したい場合)
      calendarOnload=function(){}; // カレンダー表示後の呼出し関数

      cssUri=''; // 外部CSSファイル

      // 表示開始
      init();
      }
      </script>

      を「設置用HTML」欄に貼付けたあと、[ココログに設置]ボタンを押し、後は画面の指示に従って下さい（途中、「ブログパーツをサイドバーに設置」画面で「確認」欄にプレビューが表示されないのは仕様ですので、気にしないで下さい)。

      それと、当方Macを持っていないため、そちらの確認は出来ません。これまた申し訳ない……。

      ただ、一般的には、管理画面の「並べ方を変更」で、"カレンダー"をサイドバーの一番(右)上に移動し（BANAさんの場合はdisplay:none;にされているのでブログ上では見えないですが)、そのすぐ下に"ココログカレンダーPlus"を持ってくることで、表示が若干は早くなると思います。

    • ■[2009/04/28 20:03]
      　by BANA
      　

      連続ですみません；；
      あと、ラインカレンダーが表示されるのが遅くなってしまう（マック）のですが、早く表示させるにはどうしたらよいでしょうか??

最近のコメント

最近のトラックバック

カテゴリークラウド

過去ログ

カテゴリー

バックナンバー

記事ツリー

コメントリストツリー化

リンク

訪問者

ブログ:ココログ
フォト

AccessAnalyzer.com