Twitter風にページ上部にメッセージを通知するスクリプトを2種、jQueryで組んでみた

2013/04/19 2018/11/26

ツイッター風の通知バーを作りたくなり、jQueryで組んでみましたので、公開。
コード自体はほんの少しなんですが、なかなかうまく行かず結構時間が掛かってしまった…。

うまく行かなかった理由もよく分からんまま解決できたってのがなんとも言えないところです(^_^;)

パターンA

まずはサンプルをどうそ。
昔のツイッター風の通知です。

デモ

サンプルURLのファイル拡張子が php となっていますが、表示させたいメッセージをセッションで受け取るなどできるように、php としています。

HTML(PHP)

ではHTML(php)です。

<?php
    if (!empty($_POST['post'])) {
        $printNotifyMessage = 'あなたのメッセージが送信されました！';
    }
?>
<!DOCTYPE html>
<head>
（略）
</head>
<body>

<?php 
    if (!empty($printNotifyMessage)) {
        echo '<div id="notifyMessage">' . $printNotifyMessage . '</div>'."\n";
        unset($printNotifyMessage);
    }
?>

<br /><br />
<br /><br />
<form method="post" name="send" action="index.php">
<input type="submit" name="post" value="サンプル１送信" id="postButton" class="size1" />
</form>

</body>
</html>

<?php

if (!empty($_POST['post'])) {

$printNotifyMessage = 'あなたのメッセージが送信されました！';

}

<!DOCTYPE html>

<head>

（略）

</head>

<body>

<?php

if (!empty($printNotifyMessage)) {

echo '<div id="notifyMessage">' . $printNotifyMessage . '</div>'."\n";

unset($printNotifyMessage);

}

</form>

</body>

</html>

phpの使用どころですが、先頭の方で、phpのメッセージ変数にメッセージをセットして、メッセージ表示部でメッセージがセットされているかあるかどうかの判定をしているだけです。

画面自体は、送信ボタンがあるだけです。

CSS

次にCSS。
表示するメッセージの装飾と位置調整をしています。

#notifyMessage {
    position: absolute;
    top: 0;
    padding: 25px 0 25px 1em;
    margin-top: -100px;
    border-bottom: 4px solid #008000;
    width: 100%;
    background-color: rgba(159,242,2, 0.9);
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}

#notifyMessage {

position: absolute;

top: 0;

padding: 25px 0 25px 1em;

margin-top: -100px;

border-bottom: 4px solid #008000;

width: 100%;

background-color: rgba(159,242,2, 0.9);

color: #ffffff;

font-size: 13px;

font-weight: bold;

}

JS

最後にJavaScript部分。

<script type="text/javascript">
$(function(){
    $(document).ready(function() {
        $('#notifyMessage').stop().animate({'marginTop':'0'},750).delay(1500).slideUp(300);
    });
});
</script>

$(function(){

$(document).ready(function() {

$('#notifyMessage').stop().animate({'marginTop':'0'},750).delay(1500).slideUp(300);

});

</script>

マイナス座標のメッセージブロックを、移動させ、1.5秒待ち、スライドアップさせています。
さほど難しいことはしていませんが、それっぽいですね。

デモ

パターンB

では調子に乗って、現状のTwitterのような通知バーを出してみます。

デモ

HTML(PHP)

では、同じようにHTML（php）です。
パターンAと基本的に同じです。

<?php
    if (!empty($_POST['post'])) {
        $printNotifyMessage = 'あなたのツイートが送信されました！';
    }
?>
<!DOCTYPE html>
<head>
（略）
<body>

<?php
    if (!empty($printNotifyMessage)) {
        echo '<div id="notifyMessage">' . $printNotifyMessage . '</div>'."\n";
        $printNotifyMessage = "";
    }
?>

<br /><br />
<br /><br />
<form method="post" name="send" action="index2.php">
<input type="submit" name="post" value="サンプル２送信" id="postButton" class="size1" />
</form>
    
<br /><br />
<a href="./index.php">サンプル1</a>

</body>
</html>

<?php

if (!empty($_POST['post'])) {

$printNotifyMessage = 'あなたのツイートが送信されました！';

}

<!DOCTYPE html>

<head>

（略）

<body>

<?php

if (!empty($printNotifyMessage)) {

echo '<div id="notifyMessage">' . $printNotifyMessage . '</div>'."\n";

$printNotifyMessage = "";

}

</form>

</body>

</html>

CSS

CSSです。
デフォルトで非表示させる、display: none; があるだけで、後は位置調整と装飾用です。

#notifyMessage{
    display: none;
    position: absolute;
    top: 45px;
    left:50%;
    margin-left: -250px;
    padding: 15px 0;
    width: 500px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background-color: rgba(51,51,51, 0.9);
    -webkit-border-radius: 5px; /* Safari Chrome */
    -moz-border-radius: 5px;    /* Firefox */
    border-radius: 5px;         /* Firefox */
}

#notifyMessage{

display: none;

position: absolute;

top: 45px;

left:50%;

margin-left: -250px;

padding: 15px 0;

width: 500px;

text-align: center;

font-size: 13px;

color: #fff;

background-color: rgba(51,51,51, 0.9);

-webkit-border-radius: 5px; /* Safari Chrome */

-moz-border-radius: 5px; /* Firefox */

border-radius: 5px; /* Firefox */

}

JS

最後にJavaScript。
パターンAと同じぐらいのコード量です。
こちらは、メッセージボックスをフェードイン、フェードアウトさせています。

<script type="text/javascript">
$(function () {
    $(document).ready(function() {
        $("#notifyMessage").stop().fadeIn(1200).delay(1500).fadeOut("slow");
    });
});
</script>

$(function () {

$(document).ready(function() {

$("#notifyMessage").stop().fadeIn(1200).delay(1500).fadeOut("slow");

});

</script>

プラグイン化

個人的に使いたくなったので、プラグイン化もしてみました。
使い方は以下の感じで、HTMLのヘッダ部でオプションを指定します。

パターンA用

<script src="./js/jquery.tgTwNotifyMessage1.js"></script>
<script type="text/javascript">
jQuery(function(){
    $(this).tgTwNotifyMessage1({
        selector : "#notifyMessage",	// セレクタ
        delayTime : 1500,				// メッセージ表示時間
        slideUpTime : 300				// スライドアップ時間
    });
});
</script>

jQuery(function(){

$(this).tgTwNotifyMessage1({

selector : "#notifyMessage", // セレクタ

delayTime : 1500, // メッセージ表示時間

slideUpTime : 300 // スライドアップ時間

});

</script>

パターンB用

<script src="./js/jquery.tgTwNotifyMessage2.js"></script>
<script type="text/javascript">
jQuery(function(){
    $(this).tgTwNotifyMessage2({
        selector : "#notifyMessage",	// セレクタ
        delayTime : 1500,				// メッセージ表示時間
        fadeInTime : 1200,				// フェードイン時間
        fadeOutTime : 600				// フェードアウト時間
    });
});
</script>

jQuery(function(){

$(this).tgTwNotifyMessage2({

selector : "#notifyMessage", // セレクタ

delayTime : 1500, // メッセージ表示時間

fadeInTime : 1200, // フェードイン時間

fadeOutTime : 600 // フェードアウト時間

});

</script>

HTML及び、CSSはそのままでOKです。
詳しくは、ダウンロード出来るようにしておきますので、そちらを御覧ください。

デモ

プラグイン版デモはこちら。

デモ：パターンA

デモ：パターンB

ダウンロード

ダウンロードはコチラから。

DL：パターンA

DL：パターンB

-Javascript,jQuery
-javascript, jquery, js, Twitter, ツイッター

: 【JS】チェックボックスでフォームの disabled を設定/解除するスクリプトをjQueryで組んでみた

チェックボックスでフォームのdisabledを制御するjQueryのスクリプトを作成したので忘備録としてポストします。

: lightbox系プラグイン「Shadowbox.js」で、YouTube動画をオプション付きで埋め込む方法。

プラットフォーム関係なく動画を再生させたかったので、YouTubeにアップして見せることになり、その際に利用したlightbox系のプラグイン「Shadowbox.js」の使い方を忘備録としてポストします。

: jQueryを使わないライブラリ「busy.js」を使って簡単にローディング画面を作ってみる。

仕事で作ったとあるサイトが、APIを叩いて結果を取得・表示するのですが、APIの反応が悪く、やったらと時間が掛かるので、ローディング画像を出し、ちょっとでも訪問者を待たせる努力をしてみようということで探しました所、「busy.js」というライブラリを発見。

: 【JS】タイトルタグを利用したツールチッププラグイン「jquery.tgHoverToolTip」をjQueryで作ってみた

以前作成したツールチップを拡張し、クリックではなくマウスオーバーでポップアップするようにしてみました。クリック版ではリンクタグを利用していたためにボタンに埋め込んだりは出来なかったのですが、titleタグを利用する形式にしたため、リンクの他にも使えるようにもなっています。

: 【JS】jQueryでリストタグ（<li>）のテキストを取得する方法

リストタグに設定されているテキストを取得するjQueryのスクリプトです。絶対にまた調べることになると思うのでその部分だけを忘備録として書いておきます。

PREV: 【CSS】角丸を表示する時のベンダープレフィックス -moz-border-radius が Firefox で効かなくなっていた件
NEXT: 宇宙戦艦ヤマト2199｜第２話｜我が赴くは星の海原

Twitter風にページ上部にメッセージを通知するスクリプトを2種、jQueryで組んでみた

パターンA

デモ

HTML(PHP)

CSS

JS

デモ

パターンB

デモ

HTML(PHP)

CSS

JS

プラグイン化

パターンA用

パターンB用

デモ

ダウンロード

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,290)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,574)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (255,029)

【歴史】江戸幕府歴代将軍一覧 (142,980)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,966)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (128,047)