• 締切済み

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>

みんなの回答

noname#39970
noname#39970
回答No.1

<div id="height1" style="display:none"></div> これで後から開始の位置や大きさを指定して見えるようにしたら良いのでは？

okok_tone
質問者

補足

いろいろと考えたらできました 用は高さを「0」にしたのがいけなかったのです とりあえず完成サンプルを載せます <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript"> <!-- var max = 0; var hmove1 = 1; var hmove2 = 1; function HeightPlus(){ document.getElementById("height1").style.display = "block"; max = document.getElementById("height1").offsetHeight; HeightMovePlus(); } function HeightMovePlus(){ htime1 = setTimeout("HeightMovePlus()", 1); document.getElementById("height1").style.height = (hmove1 * 10) + "px"; hmove1++; if((hmove1 * 10) > max){ max = 0; hmove1 = 1; hmove2 = 1; clearTimeout(htime1); } } function HeightMinus(){ hmove2 = document.getElementById("height1").offsetHeight; HeightMoveMinus(); } function HeightMoveMinus(){ htime2 = setTimeout("HeightMoveMinus()", 1); hmove2 = hmove2 - 10; if(hmove2 > 0){ document.getElementById("height1").style.height = hmove2 + "px"; }else{ clearTimeout(htime2); document.getElementById("height1").style.height = ""; document.getElementById("height1").style.display = "none"; } } //--> </script> </head> <body> <a href='javascript:onClick=HeightPlus();'>ここ</A> <a href='javascript:onClick=HeightMinus();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;display:none"> 01<br> 02<br> 03<br> 04<br> 05<br> 06<br> 07<br> 08<br> 09<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17<br> 18<br> 19<br> 20<br> </div> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • innerHTMLを使ってID要素の内容を変えたい

    innerHTMLを使ってID要素の内容を変えたいのですが、 下記のような使い方はできないのでしょうか？ var changeTEXT = document.all("hoge2").innerHTML; できない場合、これに変わるようなものがありましたら教えていただけたら、うれしいです。 よろしくお願いします。 <html> <head> <script language="JavaScript" type="text/javascript"> <!-- var changeTEXT = document.all("hoge2").innerHTML; 　　　　　　　 function change1_ID(){ if(document.all){ document.all("hoge1").innerHTML = changeTEXT } if(document.getElementById){ document.getElemntById("hoge1").innerHTML = text1 } } //--> </script> <style type="text/css"> <!-- #hoge1 { margin: 0px; padding: 0px; height: 600px; width: 600px; } #hoge2 { margin: 0px; padding: 0px; height: 600px; width: 600px; } --> </style> </head> <body> <div id="hoge1" onclick="change_ID()"> ここの内容を変えたい</div> <div id="hoge2"> ここに入力されたHTMLの内容をhoge1の内容にしたい</div> </body> </html>

  • 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>

  • div要素を滑らかに動かしたい

    <div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか？ setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }

  • <div>内でjavascript

    つまづいてしまったので教えてください。 文章系のサイトなので、javascriptで文字サイズを読んでくれる方が好きな大きさに変えれるように作ってあります。現状は<head>内に、 <script type="text/javascript"> <!-- function fontsize() { document.all.cc.style.fontSize = ff.ss.options[ff.ss.selectedIndex].text; } // --> </script> フォントサイズを変更するプルダウンメニュー。 サイズ変更させたい文章を<font>で囲ってかこむ（<td><font id="cc">○○</font></td>。 で、ここからが質問なのですが、これはページ全体を<div>で囲ってしまうと使えなくなってしまうのでしょうか？ ページデザインを変えたくて、今までのテーブル(ページ全体）を<div>で囲ってしまったら、プルダウンメニューで文字サイズを変更しようとすると画面が真っ白になってしまいました。 <div>内容は、 <div style="width:100%;height:100%;overflow:auto;border:1px dotted #ff8c00;"> です。 どうも上手く説明できなかったのですが、<div>で囲ってしまうと文字サイズは変更できなくなってしまうのでしょうか？ 分かる方いらっしゃいますか？

  • 環境：WinXP＋IE7＋jquery1.4.2

    環境：WinXP＋IE7＋jquery1.4.2 次のようなコードで、メニューをクリックすると、メニューを非表示にしているのですが、画面が一瞬ちらつきます。ちらつきを無くすには、どうすればよいでしょうか？ よろしくお願いします。 【コード】 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="../ajax/jquery.js"></script> <script language="JavaScript"> <!-- $(document).ready( function(){ $("#menu").click(function(){ $(this).hide(300); }) } ); //--> </script> </head> <body> <div id="menu">メニュー</div> <div id="doc">コンテンツ<br/>○○○○○○○○○○○○○○○<br/></div> </body> </html>

  • overflowを使ってのスクロール

    CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html>

    • ベストアンサー
    • CSS
  • セレクトメニューに応じたdivタグの内容

    javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

  • スクロールの時間調節

    初めて投稿します。　よろしくお願いします。 下記のような　ソースで　テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう？ プログラムには詳しくないので　すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>

  • 「nullまたはオブジェクトではありません」というエラーが出ます。

    こんにちは、IE7、VISTAで試しています。 エラーもなく動いたのですが、 sClientXとsClientYの値をフォームメールでデータ送信したくて clientX=<input type="text" id=sClientX><br> clientY=<input type="text" id=sClientY><br> という部分を<form>内に入れると 「sClientXはnullまたはオブジェクトではありません」 というエラーが出ます。 エラーの原因はなんでしょうか？ <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- var sample; var sClientX; var sClientY; var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY-8; target.style.left=event.clientX-8;} } function document_onmouseup(){ isDrag=0; sClientX.value = document.getElementById('sample').style.left; sClientY.value = document.getElementById('sample').style.top; } document.onmouseup = fOnmousemove; function fOnmousemove() { } //--> </SCRIPT> </HEAD> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV style="position:absolute" id=sample> このオブジェクトが移動します </DIV> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> </DIV> <form> clientX=<input type="text" id=sClientX><br> clientY=<input type="text" id=sClientY><br> </form> </BODY> </HTML>

  • 動いてもよさそうなのに動かないのでどこが悪いか見て下さい。

    例：Aをクリックして表示 BをクリックしてAを消す、Bを出す。この時Bが出ずにはまる。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- .hide {display:none;} .show {display:block;} --> </style> <script type="text/javascript"> <!-- var flag=0; function red(a){ id="more"; mor = document.all.item(id,a) if (flag == 1){ if(mor.className=='show'){ mor.className="hide"; flag=0; } else { for (i = 0; i <= document.all.item(id).length; i++){ document.all.item(id,i).className="hide"; if(i == document.all.item(id).length){mor.className="show";} } } } else if(flag == 0){ mor.className="show"; flag=1; } } //--> </script> </head> <body> 例： 何もないときとりあえず今回はAを押すとAが開く(flag=0<br> Aがあいてる時、Aを押すとAを閉じる(flag=1 document.all.item(id,a).className=='show'<br> BやCを押すとAを閉じてBやCを開く(for文<br> for文のところのshowが上手くいかない。<br><br><br> <a href="javascript:red(0);">A</a> <div id="more" class="hide">Aの詳細</div> <br> <a href="javascript:red(1);">B</a> <div id="more" class="hide">Bの詳細</div> <br> <a href="javascript:red(2);">C</a> <div id="more" class="hide">Cの詳細</div> <br><br>概要<br> 1全部閉じてたら対象を開く<br> <br> 2-Yes対象が開いてたら対象を閉じる、1へ<br> <br> 2-No対象が閉じていたら全て閉じるfor文<br> 　　対象を開く//ここが上手くいかない<br> <br><br><br> ※対象はred(a)のdocument.all.item(more,a).classNameがshow（開）かhide（閉）か<br> ここの(more,a)のaは「a」番目のid「more」をもったオブジェクトのこと </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する