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で質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- XML XML同じ名前の要素を自動で集約するツール 1 2022/04/11 09:21
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Windows 10 バッチファイルの記述法とルールについてアドバイスをお願いいたします。 1 2022/04/13 10:50
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストビューをスクロールさせ...
-
Excelでワードアートや図を常に...
-
エクセルVBAでフォームのListbo...
-
画像のようにとあるサイトの横...
-
C#:ListViewでのスクロールイベ...
-
リストビューの水平スクロール...
-
Excelで一部分だけを常に表示さ...
-
PDFを(htmlのように)無限に縦...
-
新着情報などをスクロールしな...
-
リストビューの表示開始行変更
-
ページ訪問時にiframe内を自動...
-
大きい表へのスクロールバーの...
-
常に画像の大きさを横幅100%で...
-
マウスオーバー→ホイール回転で...
-
リストビューのスクロールバー...
-
前のページに戻るとスクロール...
-
Visual Basicから Spreadのスク...
-
Excelで1.2行目だけ固定して...
-
デジタル時計の時刻合わせの方...
-
マイページはどこを開くの
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Excelでワードアートや図を常に...
-
エクセルVBAでフォームのListbo...
-
PDFを(htmlのように)無限に縦...
-
リストビューをスクロールさせ...
-
Excelで一部分だけを常に表示さ...
-
Excelで1.2行目だけ固定して...
-
Visual Basicから Spreadのスク...
-
大きい表へのスクロールバーの...
-
VBE画面の縦のスクロールバ...
-
vb,netでtextboxの文字を右から...
-
リストビューのスクロールバー...
-
リストビューの表示開始行変更
-
ページ訪問時にiframe内を自動...
-
IFRAMEでscrolling="yes|no"の...
-
文章の自動スクロール
-
ポストバック時のスクロール位...
-
C#:ListViewでのスクロールイベ...
-
常に画像の大きさを横幅100%で...
-
マウスオーバー→ホイール回転で...
-
webページで横方向にアンカーを...
おすすめ情報