jQueryでテキストを追加するたびにスクロールさせる方法

October 30,2014 1:33 AM
Category:[jQuery]
Tag:[jQuery]
Permalink

jQueryでテキストを追加するたびにスクロールさせる方法を紹介します。

1.問題点

ログを出力するような感じで、あるエリアにテキストを1行ずつ追加していき、出力した最後の行にスクロールするようなことをやりたいのですが、方法が分かりません。

2.テキストを追加出力してスクロールさせる

まず、テキスト(コンテンツ)の追加はappend()で行います。

$("#log").append("コンテンツ");

次に、出力したエリアをスクロールさせるには次のように行います。

$("#log").scrollTop( $("#log")[0].scrollHeight );

scrollTopは要素の上端からのスクロール位置、scrollHeightはoverflowで画面上に表示されていない要素の内容も含め、全体の高さを示すものです。

つまり、要素の上端から要素の高さ分をスクロールさせています。

3.サンプル

サンプルを作ってみました。ボタンをクリックすると1行追加してスクロールします。

サンプルのコードは下記のとおりです。

<style>
#log {
    padding:5px;
    border:solid 1px #000;
    width:460px;
    height:150px;
    overflow:auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $("#send").click(function(){
        $("#log").append( $("#text").val() + "<br />" );
        $("#log").scrollTop( $("#log")[0].scrollHeight );
    });
});
</script>
<input id="text" type="text" value="" />
<input id="send" type="button" value="送信" />
<div id="log"></div>
Comments [0] | Trackbacks [0]

Windowsの外部ディスプレイが認識されなくなったときの対処

October 29,2014 12:33 AM
Category:[Windows]
Tag:[TroubleShooting, Windows]
Permalink

Windowsの外部ディスプレイが認識されなくなったときの対処方法を紹介します。

1.事象

ノートPCに外部ディスプレイを接続した状態(かつ外部ディスプレイだけで表示している状態)で作業しているとき、突然外部ディスプレイの表示が消え、ノートPCのディスプレイに表示が切り替わり、外部ディスプレイが反応しなくなりました。

2.調査

ディスプレイの設定確認は次の手順で行います。

デスクトップを右クリックして「個人設定」を選択。

個人設定

「画面の設定」をクリック。

(クリックで拡大)
画面の設定

正常な状態であれば下記のように「1」と「2」のディスプレイが表示されます。「1」はノートPC、「2」は外部ディスプレイです。

画面の設定

が、今回の事象が発生したときは「1」しか表示されなくなりました(キャプチャし忘れました)。

なお「画面の設定」画面のプルダウンメニューではモニタを変更できそうなので、変更しようとすると、

現在選択されているグラフィック ディスプレイ ドライバは使用できません。以前のバージョンの Windows 用に作成されているため、このバージョンの Windows とは互換性がありません。 システムは、既定の VGA ドライバを使用して起動されています。 ハードウェアの製造元に問い合わせて、アップグレードされたドライバを入手するか、Microsoft が提供しているドライバを使用してください。

というエラーになります。

(クリックで拡大)
画面の設定

ということで回復させる方法が不明です。

3.対処

当初、デバイスドライバやケーブルの接触不良などを疑いましたが、そうではなく、PCを長期間再起動せずに使用していたことが原因のようで、今回はPCの再起動で回復しました。

ということで、突然ディスプレイが使えなくなった場合(それ以外の不具合でも)、PCの再起動を一度試してみることをお勧めします。

Comments [0] | Trackbacks [0]

異なるサイズが混在するPDFをそれぞれのサイズでまとめて印刷する方法

October 28,2014 12:55 AM
Category:[Adobe]
Tag:[Adobe, PDF]
Permalink

異なるサイズが混在するPDFを、それぞれのサイズでまとめて印刷する方法を紹介します。

1.問題点

次のように異なるサイズが混在するファイルがあります。

(クリックで拡大)

これを一回の印刷でそれぞれのサイズにあわせて印刷したいのですが、印刷する方法が分かりません。

2.混在するPDFをまとめて印刷する

混在するPDFをまとめて印刷するには、次の手順で操作します。

メニューから「ファイル」→「印刷」をクリック。

「印刷」ダイアログボックスの「ページ処理」セクションで、「PDF のページサイズに合わせて用紙を選択」にチェックを入れます。

(クリックで拡大)

なお「ページの拡大 / 縮小」の設定をいろいろ変えてみましたが、影響はないようです。

これで、各ページのサイズに応じてプリンタの出力トレイが切り替わります。

ちなみに、PDFに出力するときも同様の手順で各ページのサイズを変更せずに出力することができます。

3.その他

問題ないと思いますが、本機能はAcrobat 6.0からです。Acrobat 5.0以前ではこの機能は搭載されていません。

Comments [0] | Trackbacks [0]
 1  |  2  |  3  |  4  |  5  | All pages