- ベストアンサー
指定字数以降隠す
<div id="nakami"> いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす </div> ----- が（今回8文字目以降隠すと仮定して） ----- いろはにほへと... 続きを表示 ----- になって 続きを表示を押すと -------- いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす 閉じる ------- になるようなイメージです。 本文中にタグがあった場合でも上手く動作すると尚うれしいです。 よろしくお願いします。
- xindex
- お礼率90% (10/11)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
たぶん下記のような具合でしょう … <script type="text/javascript"> <!-- var objNakami; var objHidden; var objLink; function myLoad() { objNakami = document.getElementById("nakami"); if ( objNakami.childNodes.length == 1 ) { objHidden = document.createElement("INPUT"); objHidden.value = objNakami.innerText; // 何文字目かは substringの引数を調整してください objNakami.innerText = objNakami.innerText.substring( 0, 7 ) + "..."; objHidden.type ="hidden"; objNakami.appendChild( objHidden ); // いろは歌と リンクの間に改行が必要なら // objNakami.appendChild( document.createElement( "<br>" ) ); objLink = document.createElement("A") objLink.innerText = "続きを表示"; objLink.href = "javascript:myLoad();"; objNakami.appendChild( objLink ); } else { var ss = objHidden.value; objNakami.removeChild( objHidden ); objNakami.removeChild( objLink ); objNakami.innerText = ss; } } //--> </script> </head> <body onload="myLoad();">
その他の回答 (1)
- Yanch
- ベストアンサー率50% (114/225)
やりたい処理は、次のような事ですか。 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <script type="text/javascript"> <!-- function cmd_hidden(id) { var obj_short = document.getElementById(id + "_short"); obj_short.style.display = "block"; var obj_long = document.getElementById(id + "_long"); obj_long.style.display = "none"; } function cmd_visible(id) { var obj_short = document.getElementById(id + "_short"); obj_short.style.display = "none"; var obj_long = document.getElementById(id + "_long"); obj_long.style.display = "block"; } // --> </script> </head> <body> <div id="nakami_short" style="display: block;"> いろはにほへと...<br> <a href="javascript:void(0);" onclick="return cmd_visible('nakami');">続きを表示</a> </div> <div id="nakami_long" style="display: none;"> いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす<br> <a href="javascript:void(0);" onclick="return cmd_hidden('nakami');">閉じる</a> </div> </body> </html>
お礼
回答ありがとうございます。 動作としてはこのような感じです。 これと同じような動作を いろは歌を二つ用意するのではなく、 元の完全な文を指定文字数以降jsにより隠したいのです。
関連するQ&A
- いろは歌
みなさんは「いろは歌」を知っていますか？ 4択の質問です。 Ａ．全文言える Ｂ．「いろは」以上は言えるが全文は言えない Ｃ．「いろは」の3文字しか知らない Ｄ．「いろは」自体知らない ※差し支えなければ Ｅ．性別、年代 補記 平仮名の読み いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 漢字の表記 色は匂へど 散りぬるを 我が世誰ぞ 常ならん 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず 「ん」は無いですが便宜的に文末につけます。 それ以外の「いろは歌」 http://archive.hp.infoseek.co.jp/iroha.html
- ベストアンサー
- アンケート
- いろはにほへと＆濁点
質問一 いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす 色は匂へど 散りぬるを 我が世誰ぞ 常ならむ 有爲の奥山 今日越えて 淺き夢見じ 醉ひもせず の読み方がわかりません。 カタカナかローマ字で教えてください。 特に、エヒモセズなのかエイモセズなのか。 古典文法の活用だとエヒだとおもうのですが・・・。 質問２ 濁点はいつから使われるようになったのでしょうか。 百人一首の下の句だと、ないですし。 わかる方よろしくお願いします。
- ベストアンサー
- 文学・古典
- MT4 <MTIfNonEmpty> 本文が空じゃないときだけ表示したい
こんにちは。MovableType4のテンプレートについて質問させてください。 本文が空じゃない場合にのみ、あるテキストを表示させたいのですが、 『ブログ記事の詳細』テンプレートで、 <MTIfNonEmpty tag="EntryBody"> <div class="asset-body"> AAA <$MTEntryBody$> </div> </MTIfNonEmpty> としても、本文が空なのにAAAが表示されてしまいます。 続きの方で試してみたところ、 <MTIfNonEmpty tag="EntryMore" convert_breaks="0"> <div id="more" class="asset-more"> AAA <$MTEntryMore$> </div> </MTIfNonEmpty> とすれば続きが空の場合はAAAも表示されませんでした。 どうすれば、本文が空の場合にのみテキストを表示することができるのでしょうか？ ご存知の方いらっしゃいましたらぜひ教えてください。
- ベストアンサー
- その他（プログラミング・開発）
- mozillaで背景が表示できない
mozillaでbodyの背景色Aを指定しdiv(1)に別の背景色Bをidで指定すると表示されますが そのdiv(1)の中にdiv(2)を入れidまたはclassを指定すると背景色Bが表示されなくなってしまいます。 ■色々と試してみました ie6では問題なく表示されます。 div(1)の中に複数divを入れた場合、やはり表示されませんが div(1)の閉じタグ</div>の前に (他の文字ではダメでした)を入れた場合、一部のdivに対してだけ背景が適用されました。 ＃適用されない部分のソースに間違いがあるのではとソースを入れ替えてみましたが、やはり適用されない部分は適用されないままでした。 div(2)のidまたはclassを指定しない場合は想定どおり表示されます。 上記を踏まえ、div(2)をidまたはclassを指定しないdivで囲ってみましたが、やはり適用されませんでした。 長々とわかりにくい説明で申し訳ございませんが、 どのようにしたらdiv(1)の背景を表示させられますか？ アドバイス等思いついたことでも構いません。 結構試しましたが手詰まり状態なのです(T_T よろしくお願いします。 <body> <div id="zentai"> aaa </div> </body> bodyに背景色A、zentaiに背景色B 結果：OK <body> <div id="zentai"> <div id="nakami"> aaa </div> </div> </body> bodyに背景色A、zentaiに背景色B 結果：NG bodyに背景色A、zentaiに背景色B、nakamiに背景色B 結果：nakamiのみ背景色が適用される
- 締切済み
- HTML
- いろは唄の読み方を教えて下さい。
色は匂へど 散りぬるを 我が世誰そ 常ならむ 有為の奥山 今日越えて 浅き夢見じ 酔ひもせず 特に 誰そは、だれそ ですか たれそ でしょうか？ 今日は、きょう でしょうか？ けふ でしょうか？ 酔いは、よい でしょうか？ えいでしょうか？ よろしくお願いします。
- ベストアンサー
- 文学・古典
- 本文を記載する場合はpタグを使ったほうが良い？
<div>本文</div> とするのと <div><p>本文</p></div> とするのではどちらがいいのでしょうか? 本文を記載する場合はpタグを使ったほうが良いですか? divタグで本文を表示する位置をmarginなどで設定しています。
- ベストアンサー
- HTML
- jQuery画面スクロールで教えてください
例えば、下記のような画像リンクボタンを <div id="btm"><img src="kotei.jpg" /></div> <div class="main"> ここに本文 </div> <div class="sub"> ここに文章 </div> のmain中をスクロールしている時は上記画像を常に下部に固定したい。 逆にsub以下は画像を消したい（非表示）場合はどうすればよいですか。 完成したタグを教えてください。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSでdivの縦幅を指定する方法
CSSで、div領域の縦幅を指定する方法を教えてください。 下記のような感じのHTMLで、Aが外枠、中のBとCがfloatを使って横並びになっています。 B、C共に、縦のサイズをAの縦幅いっぱいまで（内容の高さに拘わらず常に）広げる方法がわかりません。 （ブログのテンプレート用なので、内容は一定ではありません） height:100%としてみましたが無理でした。 <div id="A"> <div id="B"> メニュー </div> <div id="C"> 本文 </div> </div> よろしくお願いいたします。
- ベストアンサー
- HTML
- 歌の題名が分かりません・・・
今日ブックオフで聞いた歌なのですが題名が分かりません いろはにほへど ちりぬるを わがよたれぞ つねならん ういのおくやま きょうこえて あさきゆめみし えいもせず ↑の歌詞が入っている男の人が歌っている最近っぽい歌なのですが・・・
- 締切済み
- その他（趣味・娯楽・エンターテイメント）
お礼
回答ありがとうございます。 目標に近づいてきました！ あとは、元文にタグが含まれていても機能すると最高なのですが、難しそうですね・・・
補足
こちらを参考に <script type="text/javascript"> <!-- var objNakami; var objHidden; var objSwit var flagdayo = 1; window.onload=function myLoad() { objNakami = document.getElementById("nakami"); objSwit = document.getElementById("swit"); if ( flagdayo == 1 ) { objHidden = document.createElement("INPUT"); objHidden.value = objNakami.innerText; // 何文字目かは substringの引数を調整してください objNakami.innerText = objNakami.innerText.substring( 0, 7 ) + "..."; objHidden.type ="hidden"; objNakami.appendChild( objHidden ); flagdayo = 0; objNakami.appendChild( document.createElement( "<br>" ) ); objSwit.innerText = "続きを表示"; objSwit.href = "javascript:myLoad();"; } else { var ss = objHidden.value; objNakami.removeChild( objHidden ); objNakami.innerText = ss; objNakami.appendChild( document.createElement( "<br>" ) ); objSwit.innerText = "閉じる"; flagdayo = 1; } } // --> </script> </head> <body> <div id="nakami"> いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす </div> <a id="swit"></a> </body>