プロが教える店舗＆オフィスのセキュリティ対策術

スクロール領域の再読み込み　ＯＲ　更新

解決済

  • 質問者：zlpaul
  • 質問日時：
  • 回答数：6件

xmlファイルから<item>（rss）を取得し、marqueeでスクロールさせています。
xmlファイルは定期的にファイルを更新し記事が増えていきます。
画面上でも定期的にxmlファイルを取得し最新記事を表示できるのですが、
最後までスクロールされず、途中で先頭からスクロールしはじめてしまいます。スクロール領域が最初に表示された記事の長さで固定になってしまっています。
画面を更新すれば、スクロール領域は直ります。

全体の更新しないで、部分的な更新はできますでしょうか？
このＲＳＳを表示している部分だけの更新をしたいです。
もし、部分的な更新が出来れば
<marquee id="" direction="left" loop="1" onFinish="更新">
でループさせ、最新記事を取り、スクロールし続けることは可能でしょうか？

もしくは、marquee　スクロール領域を再度読み直す方法はありますでしょうか？
お分かりの方いらっしゃいましたら、教えてください。
宜しくお願い致します。

下記ソースは、ＲＳＳを表示し定期的に最新記事を追加しているものです。
<script type='text/javascript'>
var title='';
var description='';
var hoge='';
var xmlDoc=loadXML('sample.rss');
var cNodes = xmlDoc.getElementsByTagName("item");
for(j=0;j<cNodes.length;j++)
{
title = cNodes[j].getElementsByTagName("title")[0].childNodes[0].nodeValue;
description = cNodes[j].getElementsByTagName("description")[0].childNodes[0].nodeValue;
hoge += '<font ';
hoge += 'face="IPAMonaPGothic"';
hoge += 'color="#e8edf2"';
hoge += 'style="font-size:20px;">';
hoge += title;
hoge += description;
hoge += '</font>';
}
$("document").ready(function()
{
$('test').append(hoge);
})
setInterval('update()', 60000);
function update(){
var title='';
var description='';
var hoge='';
var xmlDoc=loadXML('sample.rss');
var cNodes = xmlDoc.getElementsByTagName("item");
for(j=0;j<cNodes.length;j++)
{
title = cNodes[j].getElementsByTagName("title")[0].childNodes[0].nodeValue;
description = cNodes[j].getElementsByTagName("description")[0].childNodes[0].nodeValue;
hoge += '<font ';
hoge += 'face="IPAMonaPGothic"';
hoge += 'color="#e8edf2"';
hoge += 'style="font-size:20px;">';
hoge += title;
hoge += description;
hoge += '</font>';
}
$('test').empty();
$('test').append(hoge);
}
</script>
<div id='test'>
</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1

  • 回答者： t_netbug
  • 回答日時：

一か所だけを更新したいのであれば、intervalでソースを書きなおしてあげるのが楽だと思います。



例えばですが、メインページで以下のようなソースがあるとします。
<html>
<body>
<div id="rss_field">
<marquee id="scroll"></marquee>
</div>
</body>
</html>

で、定期的に　との事でしたので、タイマー関数(setInterval)などで以下のように書きます。
sleep = 1000 * 60 * 60 * 60 // 1時間毎に更新
timer = setInterval(function(){
data = document.getElementById('rss_field');
data.innerHTML = data.innerHTML;
},sleep);

innerHTMLで上書きしてもrss_fieldのIDを持つDIV内の要素にはDOMでアクセス出来るので一番、工数がかからない手だと思います。
ご参考までに。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答頂きありがとうございます。

innerHTMLで上書きしましたが、スクロール領域は最初に表示した物の長さで、その後ＲＳＳの記事が増えた場合、全てスクロールせず、途中で頭に戻ってしまいます。

通報する
お礼日時：2009/10/14 17:35

No.2

  • 回答者： t_netbug
  • 回答日時：

ええと、スイマセン



sleep = 1000 * 60 * 60 * 60;
これだと60時間ですね・・・。

1時間なら
sleep = 1000 * 60 * 60;

でした。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

解答でなくアドバイスです。


<marquee>の文字スクロールは止めてください。
（理由）
－スクロールしている文字を見ると目が悪くなります。
－乱視の人には苦痛です。
－誰もスクロールしている文字を熱心に読みません
－見栄えをねらっているだけなので、全部スクロールされてなくても
　問題ありません。
－見栄えをねらっているなら、記事ではなく、数文字のスクロール
　ですませるとか、アニメ絵を動かすとかで十分です。
－よって本文でちゃんと記事を表示させているのに、<marquee>
　でスクロール表示させる必要性は全くありません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答頂きありがとうございます。
スクロール自体がよくないということでしょうか？
marqueeはスムーズにスクロールされないので、確かに見ていて苦痛なときはあります。
現在作成中のものは、広告みたいな物で、目に入った記事が気になったら、本文にいってもらうという風な流れです。

＞＞－見栄えをねらっているだけなので、全部スクロールされてなくても
　問題ありません。

確かにそうですね。
ただ、今回は、個人的に完全にスクロールさせないと、気持ちが悪いのです。

ご指摘頂きありがとうございました。
これを参考にし今後は、いかに苦痛を取り除いた表示方法ができるか考えていきたいと思います。

通報する
お礼日時：2009/10/15 13:29

No.4

  • 回答者： t_netbug
  • 回答日時：

頭に戻ってしまうというのは、



１．スクロール途中でまた一番右からスクロールを始める。

という事でしょうか。
それとも、

２．上書きするとスクロールが止まる。

という事でしょうか？

１について
marqueeで左端まで行ったのを確認してから書き換えるというのは多分無理だと思います。

２について
この現象は書き込み後、firefox確認しました。軽く調べただけですが、どうも仕様(というかバグ)っぽいです。
元々marqueeタグ自体、IE独自のタグであり、firefoxでは実装されたばかりなのでまだ色々と不具合が多いそうで・・・。


上記２つのどちらかの事を言われているのであれば、
JavaScriptでmarqueeと同様の機能を実装する必要が出てくると思います。
幸い、IE以外のブラウザで同等の機能を実現する為に、先駆者がサンプルプログラムを作成されているので、
それを参考にすると良いと思います。

左端まで行った事を検知し、その上で部分更新をするように実装し、
対応を予定しているブラウザ全てで動作確認する、という流れですかね。

あまり参考にならないですね。申し訳ないです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

＞＞あまり参考にならないですね。申し訳ないです。
とんでもございません。ご回答頂きありがとうございます。

ご質問させていただいた、問題の現象ですが、1番です。

定期的にxmlファイル内容を画面に反映させています（この時点では上書きしスクロールはできています。ソースは質問に書いている物です。）、その増えた分のスクロール領域が確保されておらず、全文スクロールされずにスクロール途中でまた一番右からスクロールを始めてしまいます。最初に流した記事のスクロール領域のままで、画面を更新しないと全文スクロールされないのです。

>>JavaScriptでmarqueeと同様の機能を実装する必要が出てくると思います。
>>幸い、IE以外のブラウザで同等の機能を実現する為に、先駆者がサンプルプログラムを作成されているので、
それを参考にすると良いと思います。
>>左端まで行った事を検知する

大変申し訳ございませんが、サンプルプログラムがある場所をもしご存知でしたら、教えていただけると、非常に助かります。

通報する
お礼日時：2009/10/15 13:58

No.5

  • 回答者： t_netbug
  • 回答日時：

取り急ぎですが、


http://www.google.co.jp/search?hl=ja&rlz=1T4GZEZ …

色々と書いた以上、どのサイトのソース使いやすいと思いますよ～とかアドバイスするべきなのかもしれませんが、この辺は好みの問題になるかとも思いましたので。
    • good
    • 0
    • 件
通報する

No.6ベストアンサー

  • 回答者： fujillin
  • 回答日時：

基本的にNo3様のご意見に賛成なのですが…



HTMLのmarqueeは、ブラウザによって属性値の指定方法が違うみたいでよくわからない。
（そもそも独自拡張だし…）

以下は、スクロール部分のサンプル的に。
文字列をセットした状態でmarqueeを呼び出せば、表示をスクロールさせ、終わったところで指定した関数(stringSet）を再度呼び出す仕組み。
stringSetは配列内の文字列を順にセットしてmarqueeを呼び出しています。

*表示の体裁はCSSで指定。ただし、外枠（marqueeScreen）の幅はpxで指定するものと
　仮定しています。（emとかだとうまく動きません：ちゃんと換算すればOKだけど…）
*文字列の前後に20px分の余白を設けています。速度などとあわせて適当に数値を変えれば
　変わります。

<html>
<head>
<style type="text/css">
div#marqueeScreen {
width: 300px; background-color:#777; padding:8px;
position:relative; white-space:nowrap; overflow:hidden;
}
div#marqueeScreen .marquee {
color:#fff; position:absolute; font-weight:600;
}
</style>

<script type="text/javascript">
window.onload = stringSet;

function stringSet() {
if (!this.count) {
this.count = 0;
this.str = [
"テストの文字だよ～～",
"Marqueeは動くので一見は面白そう、でもちらちらするから嫌い。",
"今回はCSSとかいろいろ調べなければならなかった（←無知だなぁ＞自分）",
"テストの文字はこれで最後だよ・・・"
];
var e = document.getElementById('marqueeScreen');
var es = e.currentStyle || document.defaultView.getComputedStyle(e, '');
this.width = parseInt(es.width.replace('px',''));
this.elm = e.getElementsByTagName('SPAN')[0];
}
if (this.count < this.str.length) {
this.elm.innerHTML = this.str[this.count++];
marquee(this.width + 20, this.elm.offsetWidth + 20);
} else { alert('END'); }
}

function marquee(p, ep) {
var elm = document.getElementById('marqueeScreen');
elm = elm.getElementsByTagName('SPAN')[0];
p = p - 2, elm.style.left = p;
if (p + ep > 0) {
setTimeout("marquee(" + p + ", " + ep + ")", 30);
} else {
setTimeout(stringSet, 100);
}
}
</script>
</head>

<body>
<div id="marqueeScreen">
<span class="marquee"></span>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報