- ベストアンサー
ランダムにメッセージを表示させる方法
Blaiseの回答
スクロールいらないんだったら、単純にこんな感じに しておけばいいのでは・・・ ######メッセージデータページ 2.html ####### <html> <head> <script type="text/javascript"> <!-- var message = new Array(); message[0] = "Message-1"; message[1] = "Message-2"; message[2] = "Message-3"; message[3] = "Message-4"; function Rmsg(){ var x = Math.floor(Math.random() * message.length); document.getElementById('msg').innerHTML=message[x] setTimeout('Rmsg()',1000) } //--> </scirpt> </head> <body onload="Rmsg();"> <div id="msg" style="position:absolute;top:0;left:0;"></div> </body> </html>
関連するQ&A
- XHTMLとJavascript・CSSで表示位置の固定方法について
HTMLからXHTMLへソースをそのままで移行したら位置の固定がされなくなりました。 <div id="msg">message</div>の部分をスクロールしても常に同じ場所に表示したいです。 XHTMLの知識が殆どなく、原因が判りません。 Javascriptを別ファイルにしても動きませんでした。 修正方法、もしくは代替案をお願いします。 宜しくお願いいたします <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript"> var offX = 0; var offY = 0; function setMenu(){ if(document.all){ var mx = parseInt(document.body.scrollLeft+offX); var my = parseInt(document.body.scrollTop+offY); } else { var mx = parseInt(self.pageXOffset+offX); var my = parseInt(self.pageYOffset+offY); } if(document.getElementById){ document.getElementById('msg').style.left=mx; document.getElementById('msg').style.top=my; }else if(document.all){ document.all('msg').style.pixelLeft=mx; document.all('msg').style.pixelTop=my; }else if(document.layers){ document.layers['msg'].moveTo(mx,my); } } onscroll = setMenu; onresize=setMenu; //--> </script></head> <body bgcolor="#111144"> <div id="msg"> message </div> </body> </html>
- ベストアンサー
- JavaScript
- PHPにiframeでニュースを表示
PHPを利用したショッピングカートのトップにニュースを掲載しようとしています。 ニュースはCGIで管理しています。 高さを自動調整するJavaScriptを組んでみたのですが、ページを開いた時1行分しか表示せず、リロードすると自動サイズではなく"iframeで設定したサイズ"になってしまいます。 <script language="JavaScript"> <!-- function GetHeight(Y,NAME) { var app = navigator.appName.charAt(0); if(navigator.userAgent.indexOf('Safari') != -1){ document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80; }else if (app == "N") { document.getElementById(Y).height = parent.frames[NAME].document.height +80; } else { document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80; } } // --> </script> <iframe src="./info.cgi?mode=contents2&cont=JP" onload="GetHeight(this.id,this.name)" id="Z" name="newZ" height="500"「←このサイズになる」 width="100%" frameborder="0" marginheight="0" marginwidth="0"> </iframe> これは何が悪いのでしょうか? もしかして、文字コードが関係していますか? PHPはEUC-JP、iframe先はShift_JISです。
- 締切済み
- PHP
- DIVの高さをかっこよく変える方法
皆さん、教えてください ボタンを押すとDIVの高さを、動的に大きくするjavascriptを構築しています ですが初めにサイズを指定しないで、なおかつDIVを表示しないページなので、 どうしても初めにDIVを一瞬でも表示しなければなりません それを解決させる方法はありますでしょうか 皆さんのお知恵をお貸しください ソースコード <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript"> <!-- var max = 0; var hmove = 0; function init(){ max = document.all("height1").offsetHeight document.all("height1").style.display = "none"; } function Height(){ document.all("height1").style.display = "block"; htime = setTimeout("Height()", 30); document.getElementById("height1").style.height = hmove * 3 + "px"; hmove++; if((hmove * 3) >= max){ hmove = 0; clearTimeout(htime); } } //--> </script> </head> <body onload="init()"> <a href='javascript:onClick=Height();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> </div> </body> </html>
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- インラインフレームの、リンク先のページに対応した高さ可変
私のサイトで、題名のとおりの方法をしてしており、 現在、以下を利用して、可変が可能になっています。 function GetHeight(ID,NAME) { if (document.height) { document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ; } else { document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +20 +"px"; } } 通常の場合はこれで大丈夫です。 しかし、リンク先のページにインラインフレームを使用していると、どうしてもうまくできません。 一番前に index.html。index.htmlの中にiframeとして、main.htmlを、 main.htmlの中にiframeとして、higumain.htmlをおいています。 それぞれのiframeを可変可能にしたいのですが、 index.htmlの中のiframe「main.html」がうまく可変されません。 index.htmlのiframe は、他のiframeを移用していないリンク先なら可変しました。 何故でしょうか。解決法、教えてください。 上記で足りない説明がありましたら、すみません。言ってください。すぐに加えます。 何度も試行錯誤したのですが、うまくいきません。どうか、教えてください。
- ベストアンサー
- JavaScript
- iframeの中から親ページをスムーズスクロール
タイトルどおり、iframeの中から親ページをスムーズスクロールしたいと考えています。 ヘッダに <script> $(function() { var topBtn = $('#toTop'); topBtn.click(function () { parent.$('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> 親ページには高さ3000ピクセルのiframeを作って、そこに読み込んでいる子ページ最下部に <div id="gotoTop"><a href="#top_page"><img src="_image/btn_top.jpg" alt="トップに戻る" /></a></div> と記述しています。 この状態で親ページをスムーズスクロールさせることができません。 事情があって、親ページ側にはスクリプトやタグを追加することができません。 親も子もおなじドメインにあります。 ["parent" $('body,html') animate]などのキーワードで検索した記事を参考に parent.$('body,html').animate を window.parent.$("body").animate や $('html, body', window.parent.document).animate に書き換えてみてもうまくいきませんでした。 どうかアドバイスをお願いいたします。
- ベストアンサー
- JavaScript
- iframeのサイズの自動調整について教えてください。
iframeのサイズの自動調整について教えてください。 htmlにiframeで、cgiを組み込んでました。 cgiは、質問を投げる画面と結果を表示する画面があります。 質問画面と結果表示画面の長さは違います。 下記の2パターンで試してみたんですが、質問画面は問題ないですが、結果画面が問題ですね。 1．<iframe src="aa.cgi" style="width: 480px; height:auto;" onload 'this.style.height = parseInt(this.contentWindow.document.documentElement.scrollHeight + 30)+"px";'> </iframe> sapari,google chrome,operaでは、オーケー。 IE,firefoxでは、質問画面の長さのまま。 2.<iframe src="aa.cgi" onload="GetHeight(this.id)" id="Y" name="newY" height="1" width="480" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe> GetHeightのソースは、↓ <script language="JavaScript"> function GetHeight(Y) { var app = navigator.appName.charAt(0); if (app == "N") { document.getElementById(Y).height = parent.frames['newY'].document.height +20; } else { document.getElementById(Y).height = parent.frames['newY'].document.body.scrollHeight; } } </script> IE,firefoxでは、オーケー。 sapari,google chrome,operaでは、質問画面の長さのまま。 javascriptは苦手なので、まとめる方法か、別の方法がありましたら、 教えて下さい。 よろしくお願いします。
- ベストアンサー
- JavaScript
- Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます
はじめて投稿します。 下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。 赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。 オレンジ色テーブルのwidthの80%になっているとか？ でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。 どう直したらいいのでしょうか。 <html> <script> function hoge(){ document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight + ",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight + ",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight + ",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight + ",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight; } </script> <body onload="hoge()"> <span id="s1"></span> <table width="100%" height="95%" border="1" style="background-color:red;" id="t1"> <tr> <td valign="top" width="200px">menu</td> <td valign="top"> <div style="background-color:yellow" id="d1"> <table border="1" style="background-color:blue" width="90%" height="100%" id="t2"> <tr><td>hoge1</td></tr> <tr><td>hoge2</td></tr> <tr> <td> <div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2"> <table id="t3" width="3250" height="500" style="background-color:orange"> <tr> <td>hoge3</td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- <iframe>内にHTMLをランダム表示するには？
かなりの素人なので説明不足などで分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeがあるのですが、 その全てのiframeをランダムにしたいのですが、 あまりの素人なので全く分かりません。 申し訳ありませんが、 多少いじってコピペするくらいまでのソースを教えて頂けますでしょうか？ 宜しくお願い致します。 iframe一つだけのランダムは以下のソースでできました。 <head> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x=Math.floor(Math.random()*n); sub_flame.location.href = rlURL[x]; } //--> </script> </head> <body TopMargin=0 LeftMargin=0 RightMargin=0 BottomMargin=0 STYLE="overflow:auto;height:100%;" onLoad="RndmOpen()"> <script><!-- document.write("<iframe src=\""+riURL[x]+"\"></iframe>"); //--> </body> 以下のhtmlのようなページです。 できましたら、このソースに書き加え頂けますと 大変助かります。 宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>
- ベストアンサー
- JavaScript
お礼
Blaiseさんへ setTimeout('Rmsg()',1000) 1000の数値を変えればメッセージ更新時間を変えられるのですね。回答ありがとうございました。