JavaScriptのoverLibで改行コード(\n)を含む内容をポップアップしようとしています。

現状では、改行コードが原因でエラーが発生してしまい、表示することが出来ません。
エラーコード:unterminated string literal

詳細な状況を以下に記述します。
・ポップアップする内容は、DBから引き出した内容を元に動的に変化する。
・必ずしもoverLibを使う必要はない。「オンマウス時に内容をポップアップ」という機能があればよい。
・改行コードを取り除くことは、現状では難しい(手間をかければ不可能では無いが…)
・ポップアップする内容は、同一JSPファイル内に記述されている必要がある。

何か解決策、参考になるサイトなどを教えていただけないでしょうか?
参考になった回答には100~300ポイント進呈させて頂きます。

回答の条件
  • 1人3回まで
  • 登録:2008/01/24 16:32:33
  • 終了:2008/01/28 11:39:50

ベストアンサー

id:aside No.2

aside回答回数339ベストアンサー獲得回数312008/01/25 09:37:28

ポイント300pt

innerTextをfirefox用のtextContentへの

切り替えでfirefox動作が確認できましたです

<html>
<head>
<title>test</title>
<style type="text/css">
<!--
  div.hide {
    visibility:hidden;
  }
-->
</style>
<script type="text/javascript">
<!--
// ポップアップ表示用
function showPop(pId) {
  if (navigator.userAgent.indexOf("Firefox") > -1) {
    // firefoxの場合
    return overlib(document.getElementById(pId).textContent);
  }else{
    // それ以外
    return overlib(document.getElementById(pId).innerText);
  }
}
-->
</script>
</head>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script language="JavaScript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<a href="javascript:void(0);" onmouseover="showPop('data0');" onmouseout="return nd();">テスト1</a>
<div class="hide" id="data0">ポップア
ップ1</div>
<a href="javascript:void(0);" onmouseover="showPop('data1');" onmouseout="return nd();">テスト2</a>
<div class="hide" id="data1">ポッ
プアッ
プ2</div>
</body>
</html>
id:dam-soya

回答が遅れてしまい、申し訳ございません。

私の環境だと、firefoxでの動作は確認できましたが、IE7での動作が確認できなくなりました。

勉強不足の知識で確認する限りでは、確かにこれで両ブラウザに対応しているように見えるんですが…

2008/01/27 01:46:08

その他の回答(2件)

id:aside No.1

aside回答回数339ベストアンサー獲得回数312008/01/24 18:34:31

ポイント100pt

ポップあっぷの部分が悪さをしていると思ったので、

ポップアップ部分のテキストを隠しdivタグに出力して

それを読み込むようにしてみましたけども、、

あってるのかな

<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script language="JavaScript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<a href="javascript:void(0);" onmouseover="return overlib(document.getElementById('data0').innerText);" onmouseout="return nd();">テスト1</a>
<div style="visibility:hidden;" id="data0">ポップア
ップ1</div>
<a href="javascript:void(0);" onmouseover="return overlib(document.getElementById('data1').innerText);" onmouseout="return nd();">テスト2</a>
<div style="visibility:hidden;" id="data1">ポッ
プアッ
プ2</div>
</body>
id:dam-soya

上記のソースを試したところ、エラーは発生しなくなりました。

しかし、FireFox2.0で実行すると、オンマウス位置に問題はありませんが、ポップアップ内容が「undefined」と表示されました。

IE7では問題なく表示されます。

できれば、この2種類のブラウザで表示が可能な方法であると助かります。

状況について追記します。

IE7では別の問題として「ポップアップが欠ける」「オンクリック位置から離れたところでポップアップされる」がありますが、

これらについては考慮しなくて構いません。内容が表示されることが確認できる方法であることを優先しております。

2008/01/24 19:39:51
id:aside No.2

aside回答回数339ベストアンサー獲得回数312008/01/25 09:37:28ここでベストアンサー

ポイント300pt

innerTextをfirefox用のtextContentへの

切り替えでfirefox動作が確認できましたです

<html>
<head>
<title>test</title>
<style type="text/css">
<!--
  div.hide {
    visibility:hidden;
  }
-->
</style>
<script type="text/javascript">
<!--
// ポップアップ表示用
function showPop(pId) {
  if (navigator.userAgent.indexOf("Firefox") > -1) {
    // firefoxの場合
    return overlib(document.getElementById(pId).textContent);
  }else{
    // それ以外
    return overlib(document.getElementById(pId).innerText);
  }
}
-->
</script>
</head>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script language="JavaScript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<a href="javascript:void(0);" onmouseover="showPop('data0');" onmouseout="return nd();">テスト1</a>
<div class="hide" id="data0">ポップア
ップ1</div>
<a href="javascript:void(0);" onmouseover="showPop('data1');" onmouseout="return nd();">テスト2</a>
<div class="hide" id="data1">ポッ
プアッ
プ2</div>
</body>
</html>
id:dam-soya

回答が遅れてしまい、申し訳ございません。

私の環境だと、firefoxでの動作は確認できましたが、IE7での動作が確認できなくなりました。

勉強不足の知識で確認する限りでは、確かにこれで両ブラウザに対応しているように見えるんですが…

2008/01/27 01:46:08
id:aside No.3

aside回答回数339ベストアンサー獲得回数312008/01/28 10:29:35

ポイント100pt

こちらでは3PCで確認したのですが、特に問題ないようです。

セキュリティメッセージをクリックされていなかったり

ライブラリの無い場所に置いている、

IEのアップデートで解決、、、しないですよね

id:dam-soya

overLibのupdateで解決しました!

これは私の勘違いでoverLibmws.jsを使用していたこと、さらにそのバージョンが古かったことが原因ではないかと思います。

ありがとうございました!

2008/01/28 11:38:29

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません