![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
xmlファイルから<item>(rss)を取得し、marqueeでスクロールさせています。
xmlファイルは定期的にファイルを更新し記事が増えていきます。
画面上でも定期的にxmlファイルを取得し最新記事を表示できるのですが、
最後までスクロールされず、途中で先頭からスクロールしはじめてしまいます。スクロール領域が最初に表示された記事の長さで固定になってしまっています。
画面を更新すれば、スクロール領域は直ります。
全体の更新しないで、部分的な更新はできますでしょうか?
このRSSを表示している部分だけの更新をしたいです。
もし、部分的な更新が出来れば
<marquee id="" direction="left" loop="1" onFinish="更新">
でループさせ、最新記事を取り、スクロールし続けることは可能でしょうか?
もしくは、marquee スクロール領域を再度読み直す方法はありますでしょうか?
お分かりの方いらっしゃいましたら、教えてください。
宜しくお願い致します。
下記ソースは、RSSを表示し定期的に最新記事を追加しているものです。
<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>
No.6ベストアンサー
- 回答日時:
基本的に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>
No.5
- 回答日時:
取り急ぎですが、
http://www.google.co.jp/search?hl=ja&rlz=1T4GZEZ …
色々と書いた以上、どのサイトのソース使いやすいと思いますよ~とかアドバイスするべきなのかもしれませんが、この辺は好みの問題になるかとも思いましたので。
No.4
- 回答日時:
頭に戻ってしまうというのは、
1.スクロール途中でまた一番右からスクロールを始める。
という事でしょうか。
それとも、
2.上書きするとスクロールが止まる。
という事でしょうか?
1について
marqueeで左端まで行ったのを確認してから書き換えるというのは多分無理だと思います。
2について
この現象は書き込み後、firefox確認しました。軽く調べただけですが、どうも仕様(というかバグ)っぽいです。
元々marqueeタグ自体、IE独自のタグであり、firefoxでは実装されたばかりなのでまだ色々と不具合が多いそうで・・・。
上記2つのどちらかの事を言われているのであれば、
JavaScriptでmarqueeと同様の機能を実装する必要が出てくると思います。
幸い、IE以外のブラウザで同等の機能を実現する為に、先駆者がサンプルプログラムを作成されているので、
それを参考にすると良いと思います。
左端まで行った事を検知し、その上で部分更新をするように実装し、
対応を予定しているブラウザ全てで動作確認する、という流れですかね。
あまり参考にならないですね。申し訳ないです。
>>あまり参考にならないですね。申し訳ないです。
とんでもございません。ご回答頂きありがとうございます。
ご質問させていただいた、問題の現象ですが、1番です。
定期的にxmlファイル内容を画面に反映させています(この時点では上書きしスクロールはできています。ソースは質問に書いている物です。)、その増えた分のスクロール領域が確保されておらず、全文スクロールされずにスクロール途中でまた一番右からスクロールを始めてしまいます。最初に流した記事のスクロール領域のままで、画面を更新しないと全文スクロールされないのです。
>>JavaScriptでmarqueeと同様の機能を実装する必要が出てくると思います。
>>幸い、IE以外のブラウザで同等の機能を実現する為に、先駆者がサンプルプログラムを作成されているので、
それを参考にすると良いと思います。
>>左端まで行った事を検知する
大変申し訳ございませんが、サンプルプログラムがある場所をもしご存知でしたら、教えていただけると、非常に助かります。
No.3
- 回答日時:
解答でなくアドバイスです。
<marquee>の文字スクロールは止めてください。
(理由)
-スクロールしている文字を見ると目が悪くなります。
-乱視の人には苦痛です。
-誰もスクロールしている文字を熱心に読みません
-見栄えをねらっているだけなので、全部スクロールされてなくても
問題ありません。
-見栄えをねらっているなら、記事ではなく、数文字のスクロール
ですませるとか、アニメ絵を動かすとかで十分です。
-よって本文でちゃんと記事を表示させているのに、<marquee>
でスクロール表示させる必要性は全くありません。
ご回答頂きありがとうございます。
スクロール自体がよくないということでしょうか?
marqueeはスムーズにスクロールされないので、確かに見ていて苦痛なときはあります。
現在作成中のものは、広告みたいな物で、目に入った記事が気になったら、本文にいってもらうという風な流れです。
>>-見栄えをねらっているだけなので、全部スクロールされてなくても
問題ありません。
確かにそうですね。
ただ、今回は、個人的に完全にスクロールさせないと、気持ちが悪いのです。
ご指摘頂きありがとうございました。
これを参考にし今後は、いかに苦痛を取り除いた表示方法ができるか考えていきたいと思います。
No.2
- 回答日時:
ええと、スイマセン
sleep = 1000 * 60 * 60 * 60;
これだと60時間ですね・・・。
1時間なら
sleep = 1000 * 60 * 60;
でした。
No.1
- 回答日時:
一か所だけを更新したいのであれば、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でアクセス出来るので一番、工数がかからない手だと思います。
ご参考までに。
ご回答頂きありがとうございます。
innerHTMLで上書きしましたが、スクロール領域は最初に表示した物の長さで、その後RSSの記事が増えた場合、全てスクロールせず、途中で頭に戻ってしまいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Excelでワードアートや図を常に...
-
PDFを(htmlのように)無限に縦...
-
エクセルVBAでフォームのListbo...
-
リストビューをスクロールさせ...
-
C#:ListViewでのスクロールイベ...
-
大きい表へのスクロールバーの...
-
vb,netでtextboxの文字を右から...
-
横スクロールのスライドショー
-
このサイトのスクロール逆じゃ...
-
ウェブサイトがスクロール出来...
-
ページが横にスーっと移動する...
-
Visual Basicから Spreadのスク...
-
前のページに戻るとスクロール...
-
webページで横方向にアンカーを...
-
勝手にスクロールして動いてしまう
-
スプレッドシートのスクロールバー
-
Excelの質問で票の途中に...
-
階層フレキシブル グリッド コ...
-
スクロールバーの表示について
-
エクセルでウインドウ枠固定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Excelでワードアートや図を常に...
-
PDFを(htmlのように)無限に縦...
-
エクセルVBAでフォームのListbo...
-
リストビューをスクロールさせ...
-
大きい表へのスクロールバーの...
-
Visual Basicから Spreadのスク...
-
Excelの質問で票の途中に...
-
MFCでのスクロールバーの扱い
-
vb,netでtextboxの文字を右から...
-
Excelで一部分だけを常に表示さ...
-
マウスオーバー→ホイール回転で...
-
Excelで1.2行目だけ固定して...
-
ページ訪問時にiframe内を自動...
-
VBE画面の縦のスクロールバ...
-
リストビューのスクロールバー...
-
上下キーを押すと、ページスク...
-
webページで横方向にアンカーを...
-
IFRAMEでscrolling="yes|no"の...
-
ポストバック時のスクロール位...
-
アコーディオンで開かれたパネ...
おすすめ情報