スマートフォンでの折り返し表示と有限化の改良方法
- スマートフォン上でスクリプトを使用して文字の折り返し表示と有限化を実現したい。
- エンドレスの繰り返し表示を1回限りの有限表示に変更したい。
- スクリプトの改良方法について教えてください。
- ベストアンサー
折り返し表示、繰り返し有限化について
下記のスクリプトは、文字を一文字づつ表示出来るスクリプトです。 line1 を表示後、line2 line3 と進み、その後何度も繰り返し表示します。 このスクリプトをスマートフォン上で使用したいと考えています。 しかしながら、スマートフォンを縦長で使用した場合、18文字程度までしか表示されず、19文字目以降は消えてしまいます。スマートフォンを横長で使用した場合は、絶対表示文字数は大きくなりますが、やはり表示の限界値を超えた部分は表示できません。 【やりたいこと -1】 このスクリプトを改良し、ブラウザの表示限界以降は折り返し表示にさせ、記載したもの全て画面上に表記させたいと考えています。（文字数によって行数変化、表示させる) 【やりたいこと -2】 現状、エンドレスの繰り返し表示ですが、これを1回限りの有限表示としたいです。 （最後のline3で止まったままになる) どこをどう改造すればいいかご教示頂きたくお願い致します。 <script language="JavaScript1.2"> //Secify scroller contents var line=new Array() line[1]="これは、文字を一文字づつ表示出来るスクリプトです。" line[2]="連続して表示します。文字を一文字づつ表示出来るスクリプトで大変便利です。" line[3]="皆さんで利用しましょう。" //Specify font size for scoller var ts_fontsize="16px" //--Don't edit below this line var longestmessage=1 for (i=2;i<line.length;i++){ if (line[i].length>line[longestmessage].length) longestmessage=i } //Auto set scroller width var tscroller_width=line[longestmessage].length lines=line.length-1 //--Number of lines //if IE 4+ or NS6 if (document.all||document.getElementById){ document.write('<form name="bannerform">') document.write('<input type="text" name="banner" size="'+tscroller_width+'"') document.write(' style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">') document.write('</form>') } temp="" nextchar=-1; nextline=1; cursor="\\" function animate(){ if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){ nextline++; nextchar=-1; document.bannerform.banner.value=temp; temp=""; setTimeout("nextstep()",1000)} else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){ nextline=1; nextchar=-1; document.bannerform.banner.value=temp; temp=""; setTimeout("nextstep()",1000)} else{ nextstep()}} function nextstep(){ if (cursor=="\\"){ cursor="|"} else if (cursor=="|"){ cursor="/"} else if (cursor=="/"){ cursor="-"} else if (cursor=="-"){ cursor="\\"} nextchar++; temp+=line[nextline].charAt(nextchar); document.bannerform.banner.value=temp+cursor setTimeout("animate()",25)} //if IE 4+ or NS6 if (document.all||document.getElementById) window.onload=animate // --> </script>
- tajix14
- お礼率72% (175/242)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
すまほでうごくでしょうか？ ぜんかくくうははくは、はんかくにしてください。 （かーそるきのうは、ありません。） ＞どこをどう改造すれば あまりにもそれがあれなもんで、そこをあれすると そっちがあれで するとこっちがこれできりがない というか… <!DOCTYPE html> <title></title> <meta charset="utf-8"> <style> div#hoge { width : 30em; } #hoge textarea { width : 100%; height : 1em; border : none; } </style> <body> <div id="hoge"> <textarea></textarea> <textarea></textarea> <textarea></textarea> </div> <script> var textarea = document.querySelectorAll ('div#hoge > textarea'); var line = [ "これは、文字を一文字づつ表示出来るスクリプトです。", "指定回数だけ表示します。文字を一文字づつ表示出来るスクリプトで大変便利と思っているのは、製作者サイドだけです。", "出来ればこのような機能は、もう無いほうがいいＺ！" ]; (function (line, area, interval, repeat) { var i, j, a, t; (function LOOP0 () { for (i = 0; a = area[i++]; ) a.value = ''; i = j = 0; a = area[i]; t = line[i]; (function LOOP1 () { a.value += t[j++]; if (a.offsetHeight < a.scrollHeight) a.style.height = a.scrollHeight + 'px'; if (j < t.length) return setTimeout (LOOP1, interval); if (a = area[++i]) { j = 0, t = line[i]; return LOOP1 (); } if (0 < --repeat) return LOOP0 (); })(); })(); }) (line, textarea, 200, 1); </script>
関連するQ&A
- Cookie情報の取得と表示
特定のCookieを取得し、ページに表示させるスクリプトについて質問させていただきます。 現在、Cookieに保存されたハンドルネーム（２バイト文字も含む）の情報を取得し、 ページ上に表示させるスクリプトを作成しています。 Googleで検索した参考サイトを参考に以下のスクリプトを試してみましたが、 ２バイト文字（”ああああ”等）については表示されないか、”%54%454%121%”のような文字化けになってしまいます。「test」のような１バイト文字については普通に表示されます。 いろいろ調べた結果、システムからCookieに保存する際に、文字コードがUTF8ではなく、SJISで保存されているため、「test」などの１バイト文字は普通に取得できますが、「ああああ」などの２バイト文字についてはバイナリデータとして扱われ、取得できない？ようになっているようです。 単にシステムからCookieに保存する際に「UTF8」で保存すればいいのかもしれませんが、可能ならJavascriptの何らかの処理で解決できればと考えております。 どなたかお分かりになれば、ご教授いただけませんでしょうか？ 以下が現在テストしているスクリプトコードです。 <script language="JavaScript"> <!-- function GetCookie(name){ var st=""; var ed=""; var temp=""; if (document.cookie.length>0){ st=document.cookie.indexOf(name + "="); if (st!=-1){ st=st+name.length+1; ed=document.cookie.indexOf(";",st); if (ed==-1)ed=document.cookie.length; temp = document.cookie.substring(st,ed); } } decodeURIComponent(temp); return ""; } // --></script> <script language="JavaScript"> <!-- User = GetCookie('fmcHN'); // ハンドルネーム取得 document.write(User,"さん"); // --></script>
- ベストアンサー
- JavaScript
- javascriptの比較演算
不可解な動作に困っています。 どなたかご教示ください。 <html> <body> <script type="text/javascript"> var a=8; if(10>a>0){document.writeln(a);} else {document.writeln("else");} </script> </body></html> だと、ブラウザで実行すると画面に８と表示されます。 一方 <html> <body> <script type="text/javascript"> var a=8; if(10>a>7){document.writeln(a);}else{document.writeln("else");} </script> </body></html> とすると、実行したときにelseと表示されます。 とても不可解です どうしてでしょうか。
- ベストアンサー
- JavaScript
- カウンタ表示がされません・・・
JavaScriptの勉強をしています。下記をコード作成してWebサーバにアップしたのですが初回の「はじめまして・・・」は表示されるのですが２回目表示のカウント表示されません。 どうしてでしょうか？IE6.0の設定でしょうか？ <html><head><title>JavaScript</title> <script language="JavaScript"> expstr = "; expires=Sun, 7 June 2015 14:00:00 UTC"; cookiestr = document.cookie; if(cookiestr.length > 0){ visitcount = cookiestr.substring(11,cookiestr.length); newcount = eval(visitcount) +1; document.cookie = "VisitCount="+newcount.toString(10)+expstr; }else{ document.cookie = "VisitCount=1"+expstr; newcount = 1; } </script></head> <body> <script language="JavaScript"> if( newcount > 1 ){ document.wirte("あなたは<B>"+newcount+"回目</B>の来訪です。"); }else{ document.write("はじまして。ご来訪有難うございます。"); } </script></body></html>
- ベストアンサー
- JavaScript
- 文字を一文字ずつ表示
JavaScriptで文字を一文字ずつ表示するサンプルを見つけ、使おうとしたところdocument.allが使われていた為、ネスケで対応できない事が分かりました。ネスケ4.7で対応するようにするにはどのように変えたらいいのか教えて頂きたく宜しくお願いいたします。 <SCRIPT Language="JavaScript"> <!-- var msg="Welcome!!"; i=0; function Start(){ if(i<=msg.length){ if(document.all){ myText.innerHTML = msg.substring(0,i); }else if(document.layers){ document.myText.document.open(); document.myText.document.write(msg.substring(0,i)); document.myText.document.close(); } i=++i; setTimeout("Start()",200); }else{ i=0; setTimeout("Start()",1000); } } // --> </SCRIPT> </HEAD> <BODY onLoad="Start()"> <DIV id="myText"></DIV> </BODY> 宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptで画面サイズごとの表示
スマホからサイトにアクセスがあった場合に画像を非表示にしたいのですが、うまくいきません。 もともとCSSで試してみたのですが、私のiPhone５ｓでは普通に表示してしまいました。 @media only screen and (max-width: 900px){ .screensize { display:none;} } ブラウザでは900いかにするとちゃんと消えます。文法エラーというわけではないです。 iPhoneの画面は９００PXもないので別の要因で邪魔されているのだと思います。 よって、別の方法javascriptで画像を非表示にしてみたいと思っています。 <script> var orient = window.onorientation; if(Math.abs(window.orientation) === 0){ /*alert("表示なし");*/ } else { /*alert("表示あり");*/ document.write("<img >"); } </script> このように書いてみたのですがそもそもPC側でも表示されなくなってしまいました。 「/**/」のコメントアウトを外すとポップアップは表示されるので、 document.write("<img >"); 個々の部分の書き方だとおもうのですが、さっぱりわかりません。 よろしくお願いします。 <script> var orient = window.onorientation; if(Math.abs(window.orientation) === 0){ alert("縦向き"); document.write("表示する文字列"); } else { alert("横向き"); document.write("表示する文字列"); } </script>
- ベストアンサー
- JavaScript
- 表示されない
すみません初心者です。 キーボードから入力された文字、およびその実行した時刻にもとづいて 「おはようございます○○さん」（5時から10時まで） 「こんにちは○○さん」（10時から18時まで） 「こんばんは○○さん」（18時から5時まで） と表示したいのですが以下のプログラム作成したところ表示されませんでした。どこかおかしいとこがあれば教えてください <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/html1-tarnsitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ご挨拶</title> </head> <body> <script type="text/javascript"> //<![CDATA[ function generateGreeting(aisatsu) { var kutouten = "!"; function returnGreeting(aite) { return aisatsu + "," + aite + kutouten; } return returnGreeting; } var str; str=prompt("お名前は？",""); var today = new Date(); var todayHour = today.getHours(); if(todayHour >= 5 && todayHour < 10){ document.write("おはようございます"+str+"さん"); }else if(todayHour >= 10 && todayHour < 18){ document.write("こんにちは"+str+"さん"); }else if(todayHour >= 18 && todayHour < 5){ document.write("こんばんは"+str+"さん"); } //]]> </script> </body> </html>
- 締切済み
- JavaScript
- 選んだ文字列を表示させる方法について
JavaScriptを使って,ドラッグで選んだ文字列を，同じページ内に，抜き出して表示させることを考えています。 いろいろなページを参考にして,以下のように作ってみましたが,どうもうまく動きません。 具体的には,文字を選ぶと[object]と表示されてしまいます。 アドバイスをお願いします。 <html lang="ja"> <head> <script type="text/javascript"> function doAlert(){ if(document.all){ var s = new String; s=document.selection.createRange(); if (document.all) { his.innerHTML = s; } else if ( document.layers ) { document.his.document.open(); document.his.document.write(s); document.his.document.close(); } }else if(document.getElementById){ s=window.getSelection(); document.write(s); } } document.onmouseup=doAlert; </script> </head> <body> <div id="div1" style="font-size:24pt"> 選択してください。 </div> <hr> <DIV id="his" style="position: absolute;"> <P>上の文をドラッグすると，ここに選んだ文字列が表示されます</P> <hr> </DIV> </body> </html>
- ベストアンサー
- JavaScript
- litebox-1.0と同時に使いたいです。
教えての検索で見つけました、nyanko_2003様の 下記の、文字をタイプライターのように打つスクリプトなのですが 今のブログには、litebox-1.0をbodyでonload？しているせいか そのままでは上手く動いてくれませんでした、 難しいことは解らないのですが、 実験でliteboxのスクリプトを外すとちゃんとタイプ表示出来ましたので 何か対処法があればご教授お願い致します。 <SCRIPT LANGUAGE="JavaScript"> <!--- var st = new Array(); // メッセージ設定 \nが改行です。 st[0] ="ここにメッセージ\n"+ "ここにメッセージここにメッセージ"; // 複数の場合は、st[?]の数字に0から始まる連番を。 // 文字出現のスタイルシート。 var typeStyle = "font-size:10pt; line-height:15px; color:#000000; font-weight:nomal;"; // 左から文字サイズ、行間、色、字の種類 var typeSpeed = 100; // 次の文字を表示するまでの待ち時間。1000=１秒 var tugi = "_"; // 次の文字の所に出力するキャラクター★とかにすると面白いです。 var loop = true; // ループ設定。する：true しない：false var msgWait = 1000; // 次のメッセージを表示するまでの待ち時間。1000=１秒 _dom=(document.all?3:(document.getElementById?1:(document.layers?2:0))); function writeTypeMsg(mes) { if (_dom == 1) { var div = document.getElementById("type"); while(div.hasChildNodes()) div.removeChild(div.lastChild); var range=document.createRange(); range.selectNodeContents(div); range.collapse(true); var cf=range.createContextualFragment(mes); div.appendChild(cf); } if (_dom == 2) { var div = document.layers["typeN4"].layers["type"]; div.document.open(); div.document.write(mes); div.document.close(); } if (_dom == 3) document.all("type").innerHTML = mes; } charsuu=0; if (("A".length) == 1) charsuu = 1; else charsuu = 2; cct = 0; msgNo = 0; mct = st[0].length; function typing(){ cct += charsuu; if (cct > mct) cct = mct; Typeout = '<SPAN style="' + typeStyle + '">' + st[msgNo].substring(0,cct).replace(/\n/g, '<BR>') + (cct < mct ? tugi : '') + '</SPAN>'; writeTypeMsg(Typeout); if (cct < mct) setTimeout('typing()', typeSpeed); else { msgNo = (msgNo >= st.length-1) ? 0 : msgNo + 1; mct = st[msgNo].length; cct = 0; if (!(!loop && msgNo == 0)) setTimeout('typing()', msgWait); } } window.onload = typing; // ---> </SCRIPT>
- ベストアンサー
- JavaScript
- 「～○ヶ月○日」という表示方法 ２
以前こちらで同じ質問をさせていただきました。 教えていただいた方にもう1度聞こうと思ったんですが ここではそれはできないようなので、どなたか教えてください！ 「ＨＰを開設してから○ヶ月と○日が経ちました」 というような表示をしたいのです。 以前教えていただいた方法でうまく表示されていたのですが、 最近ちょっとくるってるんです。 本当は４ヶ月と２２日(5/4現在)なんですが ５ヶ月と８日と表示されてしまいます。 なぜでしょうか？ いろいろ検索してまわったのですが、 どれも何日という表示方法で、○ヶ月というのは見つかりませんでした。 以前教えていただいたのは↓です。 <SCRIPT> var StrMsg = ""; var dtToday = new Date;//現在の日付を取得する。 var StDay = new Date(2001,12,12);//Date(年,月,日)開設した年月日を入れておく。 //現在の日付から開設日付を引き何日経過したのかを取得する if(StDay.getMonth()>=dtToday.getMonth()+1){ var strMonth = StDay.getMonth()-(dtToday.getMonth()+1); }else{ var strMonth = (dtToday.getMonth()+1)-StDay.getMonth(); } if(dtToday.getDate()>=StDay.getDate()){ var strDate = dtToday.getDate()-StDay.getDate(); }else{ var strDate = StDay.getDate()-dtToday.getDate(); } //HTMLへと出力する if(strMonth != 0){ StrMsg = StrMsg + strMonth+"ヶ月と"; } if(Date != 0){ StrMsg = StrMsg + strDate+"日"; } if(StrMsg.length != 0){ document.write("ＨＰを開設してから"+ StrMsg +"が経ちました"); }</SCRIPT> お願いします！！
- ベストアンサー
- JavaScript
- 検索表示について
このようなプルダウン付きの検索バーを作成しています。 この検索結果をこの検索バーの下に表示させるためにはどうすればいいでしょうか？よろしくお願いします。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- var site = new Array(); var target = "main"; site[0] = ["Goo", "http://search.goo.ne.jp/web.jsp", "MT", ["from", "USR"], ["IE", "sjis"]]; site[1] = ["Google", "http://www.google.com/search", "q", ["hl", "ja"], ["ie", "Shift_JIS"]]; site[2] = ["Yahoo", "http://search.yahoo.co.jp/bin/search", "p",["ei", "Shift_JIS"]]; window.onload = function() { if (!document.createElement) return; if (document.all && !window.clipboardData && !window.opera) return; // 検索サイトのリストを生成 var select = document.createElement("select"); select.id = "addlist"; for (var i = 0; i < site.length; i++) { var opt = document.createElement("option"); opt.value = i; var str = document.createTextNode(site[i][0]); opt.appendChild(str); select.appendChild(opt); } // デフォルトで選択状態にする場合はその配列番号を option[n] に指定 // select.options[3].selected = true; // 既存の検索フォームにこのドロップダウンを追加 var obj = document.forms[0]; obj.elements[obj.elements.length - 1].value = "検索"; obj.insertBefore(select, obj.elements[1]); // フォームが送信された時に selectSearch() を呼び出す obj.onsubmit = selectSearch; } function jump(){ var url = document.form.select.options[document.form.select.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } function selectSearch() { var str = document.forms[0].p.value; // 入力された検索文字 var num = document.forms[0].addlist.value; // 選択されたリストの番号 // 選択された検索サイトのフォーム生成（送信先の指定） var setform = document.createElement("form"); setform.action = site[num][1]; setform.method = "GET"; // setform.target = "_blank"; // 検索結果を新しいウインドウに表示する場合に追加 // 検索文字クエリ var query = document.createElement("input"); query.type = "hidden"; query.name = site[num][2]; query.value = str; setform.appendChild(query); // 検索文字以外のクエリ if (site[num].length > 3) { for (var i = 3; i < site[num].length; i++) { var extra = document.createElement("input"); extra.type = "hidden"; extra.name = site[num][i][0]; extra.value = site[num][i][1]; setform.appendChild(extra); } } // 生成したフォームを文末に追加してそのフォームを送信 document.body.appendChild(setform); setform.submit(); // document.forms[document.forms.length - 1].submit(); return false; } // --> </script> <br> <form action="http://search.yahoo.co.jp/bin/search" method="GET"> <input type="text" name="p" value="" size="50" maxlength=255 > <input type="submit" value="検索"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
動きました。 お忙しい中改造頂きまして大変ありがとうございました。 本当に助かりました。 深く御礼申し上げます。