JavaScriptで複数行のdocument.writeをまとめる方法とは？
- JavaScriptのdocument.writeを使って複数行のコードをまとめる方法について教えてください。
- 複数行のdocument.write文を変数に代入して表示することで、表示速度を向上させることができます。しかし、表示されない場合は正しい構文か確認してください。
- また、複数行のdocument.write文を直接表示する場合よりも、変数にまとめて表示する方が表示速度が速くなります。他にも表示速度を向上させる方法があれば教えてください。
- ベストアンサー
複数行のdocument.writeで表示する部分をまとめたい
お世話になります。 複数行に渡るdocument.write文がある場合、表示が遅いと以前指摘された事を思い出しまして、今回変数にまとめて代入し表示すると速くなるのかな？と思い下記のようにしてみましたが、表示されません。 ■１．下記を外部ファイルとして読み込み --------------------------------- Menu='' +'<!--UnderMenu-->' +'<div CLASS="toptitle1"> テスト</div>' +'<div class="aaa">' +'<div class="bbb">' +' <ul id="ccc">' +' <li><a class="ddd" href="http://" onclick="return false"> リンク１</a>' +' <li><a class="ddd" href="http://" onclick="return false"> リンク２</a>' +' </ul>' +'</div></div></div><br>' --------------------------------- 下記のようにして表示を試みておりますが、エラーとかにはならず表示もされません。 <SCRIPT type=text/javascript> <!-- document.write("Menu"); // --></SCRIPT> 上記のようにしてみておるのですが、エラーが表示されずどこに問題があるのか分からないのですけれども、どこが間違っているかまたどのようにすれば表示出来るようになるかご教授願えませんでしょうか ■２．３０行とかの複数行のdocument.write文を表示する場合は、上記に比べ遅いのでしょうか。また遅い場合、上記の変数に入れて表示すれば早くなりますか？それ以外に早く表示する方法など御座いますようでしたら合わせてご教授願えますようお願い出来ませんでしょうか
- taku0
- お礼率80% (160/199)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ＞document.write("Menu"); ブラウザのどこかに「Menu」って表示されてませんか？ 質問者さんが、表示したいのは変数Menuの内容のはずですから""は不要です。
関連するQ&A
- JavaScript document.writeについて
<ul id="font-size-change"> <li><a href="javascript:void(0)" onclick="setActiveStyleSheet('default'); return false;" />標準</a></li> <li><a href="javascript:void(0)" onclick="setActiveStyleSheet('large'); return false;" />大</a></li> </ul> 上記を、JavaScriptの「document.write」を使って表示しようと、下記のコードを書きました。 function fontSizeChange(){ document.write('<ul id="font-size-change">'); document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet'); document.write("('default'); "); document.write('return false;" />標準</a></li>'); document.write('<li><a href="javascript:void(0)" onclick="setActiveStyleSheet'); document.write("('large'); "); document.write('return false;" />大</a></li>'); document.write('</ul>'); } とっても効率が悪い記述だと思うのですが、 もっとシンプルで効率の良い書き方はないでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- sedで特定行を抽出したいです
はじめまして、 下記のようなファイルがあり、sedで特定文字列(@@@, @@@@, @@@@@)を含む行のみを一回で抽出したいです。 sed -n -e "/p=300/,/eee/p" input > output' だと 不要な行も入ってしまいます orz... sedはWindows上のsed Logos 2.42を使用しています。 どのように書けば対象行のみを抽出できるか、ご教授をお願いいたします。 [ 読込み対象ファイル ] ***, @@@, @@@@, @@@@@は雑多な文字列 最初に不要な行が10～15行 <div class="aaa"> <a href="http://www.***.***/?p=300&***">@@@</a> </div> <div class="bbb"> <ul class="ccc"> <li class="ddd">@@@@</li> <li class="eee">@@@@@</li> <div class="aaa"> <a href="http://www.***.***/?p=300&***">@@@</a> </div> <div class="bbb"> <ul class="ccc"> <li class="ddd">@@@@</li> <li class="eee">@@@@@</li> 以下<div class="aaa">から<li class="eee">@@@@@</li>まで20回繰り返し。
- ベストアンサー
- Linux系OS
- クリックで表示、非表示するメガメニュー
クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。 下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。 http://www.skuare.net/test/jmegadropdown.html ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。 これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか？ 具体的にはマイクロソフトのページの上にあるようなメニューです。 http://www.microsoft.com/ja-jp/default.aspx 自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。 このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか？ よろしくお願いします。 function test1() { $("#topnav li .products1 .sub").toggle(); $("#topnav li .sale1 .sub").css("display", "none"); } function test2() { $("#topnav li .products1 .sub").css("display", "none"); $("#topnav li .sale1 .sub").toggle(); } <ul id="topnav"> <li> <a href="#" class="products" onclick="test1()">Products</a> <div class="products1"> <div style="opacity: 0; display: none; width: 600px;" class="sub"> <ul> <li><h2><a href="#">menu1</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> <ul> <li><h2><a href="#">menu2</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </li> <li> <a href="#" class="sale" onclick="test2()">Sale</a> <div class="sale1"> <div style="opacity: 0; display: none; width: 450px;" class="sub"> <ul> <li><h2><a href="#">menu</a></h2></li> <li><a href="#">Link - 1</a></li> <li><a href="#">Link - 2</a></li> <li><a href="#">Link - 3</a></li> <li><a href="#">Link - 4</a></li> </ul> </div> </div> </li>
- ベストアンサー
- JavaScript
- javascriptでCSVを読み込み表示する方法を探しています。
javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・ ・ ・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・ （ulのところのCSS指定は、idではなく、classにしたいです） よろしくお願いいたします。
- 締切済み
- JavaScript
- プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 ●メニュー1-1 ●メニュー1-2 ●メニュー1-3 ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> <div class="tree_sub"> <ul> <li class="left">●メニュー1-1</li> <li>●メニュー1-2</li> </ul> <ul> <li class="left">●メニュー1-3</li> <li>●メニュー1-4</li> </ul> </div> </div> <div class="tree"> <a href="#">○メニュー2</a> </div> [css] div.tree { border-bottom:1px solid #000000; width:365px; } div.tree_sub ul li { float:left; } div.tree_sub ul li.left { width:50%; }
- ベストアンサー
- その他（プログラミング・開発）
- 画像が表示されない。
質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。 その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、 初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。 それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。 また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。 問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。
- ベストアンサー
- CSS
- jQueryでデータを受け渡しで動作が・・・。
jQueryでデータを受け渡しで動作がどうしてもうまくいきません。 <li>タグにjsonデータを呼び出して表示しています。 それで別の処理のデータを加えるとどうしても最大６行表示の方が機能しなくなってしまいどうしたらうごくのでしょうか？ 普通においただけではダメなのでしょうか？ <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ $("<li/>",{ text : items.category+' '+ items.date+' '+items.content, 'class' : items.category, }).appendTo('ul','#portfolio'); }); }); }); $(document).ready(function() { var max = 6 /* 最大表示数 */ var mx = ':lt(' + max + ')', pf = $('#portfolio li'); pf.filter(':not(' + mx + ')').hide(); $('#navi a').click(function(){ var filterVal = '.' + $(this).text().toLowerCase().replace(' ', '-'); if(filterVal=='.all') filterVal = '*'; pf.filter(':visible').fadeOut('fast', function(){ pf.filter(filterVal + mx).fadeIn('slow'); }); }); }); </script> <div id="main"> <ul id="navi" class="tab"> <li class="all"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#e2260d';">ALL</a></li> <li class="topix"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0f639f';">topix</a></li> <li class="cleaning"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0e99b0';">cleaning</a></li> <li class="insurance"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0ea653';">insurance</a></li> </ul> <div id="samplebox"></div> <div class="content"> <ul id="portfolio"></ul> </div> <!--/ .main--> </div>
- 締切済み
- JavaScript
- jQueryについて教えてください
http://www.skuare.net/test/jFloatingmenu.html こちらのサイトを参考に製作をしたのですが <div id="floatMenu"> <ul> <li><a href="#" onclick="return false;">メニュー1</a></li> <li><a href="#" onclick="return false;">メニュー2</a></li> </ul> </div> こちらの部分をテキスト表示だと表示されるのですが メニューを画像（CSSを使ったロールオーバー）にすると 点線のみ表示され、画像が表示されなくなります。 <ul> <li class="category1_1"><a href="#" target="_parent">メニュー1</a></li> <li class="category1_2"><a href="#" target="_parent">メニュー2</a></li> </ul> 原因がわかりません 教えていただけませんでしょうか？
- ベストアンサー
- JavaScript
- CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul { padding: 0; margin: 0; list-style-type: none; } #content li { float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。
- ベストアンサー
- HTML
- 背景色を行ごとに変えるには？
お世話さまです。 以下において、 <style type="text/css"> ul,li {padding:0; margin:0; line-height:1.3;} .blockAA {width:740px;} .blockAA ul {width:740px;} .blockAA ul li {float:left;width:340px;list-style:inside;padding-left:30px;} /* clearfix */ .blockAA ul:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} /* for ie */ * html .blockAA ul {display:inline-table;} /* hides from ie-mac \*/ .blockAA ul {height:1%;} /* end hide from ie-mac */ </style> </head> <body> </body> </html> <div class="blockAA"> <ul> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> <li><a href="#">えええ</a></li> <li><a href="#">おおお</a></li> <li><a href="#">かかか</a></li> <li><a href="#">ききき</a></li> <li><a href="#">くくく</a></li> <li><a href="#">けけけ</a></li> <li><a href="#">こここ</a></li> </ul> </div> ここで、「あああ」「いいい」行と、 「えええ」「おおお」行の色を、交互に変えたいのですが、どのようにすればよいでしょうか？ ご回答よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
""を省くと表示されました。 ご教授頂き有難う御座います。