DIV要素のボックスを移動させるスクリプト教えて
- 初心者のためスクリプトをどのように記述すれば、良いか解らず質問させていただきます。
- Ｌ・Ｒという２つのラジオボタンを設置し、ウィンドウ左に配置したＤＩＶ要素のボックスを、Lをクリックでウィンドウ左、Rをクリックでウィンドウ右に配置を変更させる。
- 画像ボタンを設置し、クリックされるとＤＩＶ要素のボックスを、ウィンドウ枠外へスライドさせ、再クリックで元の配置にスライドさせ戻したい。
- ベストアンサー
DIV要素のボックスを移動させるスクリプト教えて
やりたい事は (1) Ｌ・Ｒという２つのラジオボタンを設置し、 ウィンドウ左に配置したＤＩＶ要素のボックスを、 Lをクリックでウィンドウ左、 Rをクリックでウィンドウ右に配置を変更させる。 (2) 画像ボタンを設置し、クリックされると ＤＩＶ要素のボックスを、ウィンドウ枠外へスライドさせ、 再クリックで元の配置にスライドさせ戻したい。 初心者のためスクリプトをどのように記述すれば、 良いか解らず質問させていただきます。 ご教授よろしくお願いします。 http://www11.ocn.ne.jp/~website/sample3/index.html 一応参考アドレスを記載させていただきますが この記述方法だと、ＤＩＶ要素のボックスが左側にあるとき、 画像ボタンクリックで、ＤＩＶ要素のボックスを、 ウィンドウ枠外へスライドさせ、 再クリックで元の配置に戻すと、 その後、Rをクリックしても、ＤＩＶ要素のボックスが ウインドウ右側へ移動しなくなってしまいます。 ===== HTML ==== <body> <div id="wrapper"> <header></header> <nav></nav> <div id="box" class="box_l"> <label> <input type="radio" id="radio1" name="test" checked="checked" /> L</label> <label> <input type="radio" id="radio2" name="test" /> R</label> </div> <div id="tab" class="tab_l"></div> <section id="section01" class="section"> <p>PAGE1</p> </section> </div> <div id="page_top"></div> <footer></footer> </body> ==== CSS ==== .box_l { position: fixed; top:30px; left:0px; z-index: 2000; width: 90px; height: 160px; padding: 20px 5px 5px 5px; background-color: rgba(0,0,0,0.25); } .box_r { position: fixed; top:30px; right:0px; z-index: 2000; width: 90px; height: 160px; padding: 20px 5px 5px 5px; background-color: rgba(0,0,0,0.25); } .tab_l { position: fixed; top:30px; left:100px; z-index: 2000; width: 30px; height: 185px; background-color: rgba(0,0,0,0.25); background-image: url(../images/tnm2.png); background-position: center center; background-repeat: no-repeat; cursor: pointer; border-radius: 0 10px 10px 0; /* CSS3草案 */ -webkit-border-radius: 0 10px 10px 0; /* Safari,Google Chrome用 */ -moz-border-radius: 0 10px 10px 0; /* Firefox用 */ } .tab_r { position: fixed; top:30px; right:100px; z-index: 2000; width: 30px; height: 185px; background-color: rgba(0,0,0,0.25); background-image: url(../images/tnm1.png); background-position: center center; background-repeat: no-repeat; cursor: pointer; border-radius: 10px 0 0 10px; /* CSS3草案 */ -webkit-border-radius: 10px 0 0 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px 0 0 10px; /* Firefox用 */ } #section01 { min-height: 100%; min-width:320px; width: 100%; height: 1000px; } #section01 p { font-style: normal; font-weight: 400; color: #000; font-size: 48px; text-align: center; } ==== SCRIPT ==== $(window).on('load', function() { for (i = 1; i <= 2; i++) { document.getElementById('radio' + i).checked = i==1; } }); $(function() { $("[name='test']").click(function(){ var num = $("[name='test']").index(this); if(num == 1){ $("#box").removeClass("box_l").addClass("box_r"); $("#tab").removeClass("tab_l").addClass("tab_r"); } else { $("#box").removeClass("box_r").addClass("box_l"); $("#tab").removeClass("tab_r").addClass("tab_l"); } }) $(".tab_l,.tab_r").toggle(function(){ $(".box_l").animate({'left':'-100px'},300); $(".tab_l").css('background-image','url(images/tnm1.png)').animate({'height':'40px','left':'0px'},300); $(".box_r").animate({'right':'-100px'},300); $(".tab_r").css('background-image','url(images/tnm2.png)').animate({'height':'40px','right':'0px'},300); }, function(){ $(".box_l").animate({'left':'0px'},300); $(".tab_l").css('background-image','url(images/tnm2.png)').animate({'height':'185px','left':'100px'},300); $(".box_r").animate({'right':'0px'},300); $(".tab_r").css('background-image','url(images/tnm1.png)').animate({'height':'185px','right':'100px'},300); }) })
- QuestionTellme
- お礼率100% (3/3)
- HTML
- 回答数1
- ありがとう数9
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
$("[name='test']").click(function(){ var num = $("[name='test']").index(this); if(num == 1){ $("#box").removeClass("box_l").addClass("box_r").removeAttr('style'); $("#tab").removeClass("tab_l").addClass("tab_r").removeAttr('style'); } else { $("#box").removeClass("box_r").addClass("box_l").removeAttr('style'); $("#tab").removeClass("tab_r").addClass("tab_l").removeAttr('style'); } }) とすればとりあえずうまく動くようです。 animateやcssであてたstyleがclassよりも優先されるのでそのような動作になるようです。 animationをcssだけで表現すればclassのaddとremoveでもっとかんたんに書けるはず。
関連するQ&A
- 2つのDIVを中央と右に横並びにしたい
いつも大変お世話になっております。 wordpressのヘッダー個所に、真ん中にロゴ画像、右手にソーシャルメディアの画像を横並びに配置したいのですが、うまくいきません。 Topというdivの中に「logo」と「social」という２つのdivを入れ、下記のcss、htmlで制作すると、ロゴは中央に配置され、ソーシャルメディアの画像は右に寄るのですが、 横の配置がソーシャルメディア画像が右下にきてしまい、うまくいきません。 是非どなたかご教授いただけますと、非常に助かります。 <div id="top"> <div id="logo"></div> <div id="social"> <div class="fb"></div> <div class="twitter"></div> </div> </div> #top { height: 36px; } #logo { background-image: url(images/logo.png); background-repeat: no-repeat; margin: 0 auto; height: 36px; width: 397px; } #social { float:right; height: 36px; width:56px; } #social .fb { background-image: url(images/fb.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; } #social .twitter { background-image: url(images/twitter.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; }
- ベストアンサー
- CSS
- cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 締切済み
- HTML
- CSSでfloatした要素の高さを100%にしたい
はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。 heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html>
- ベストアンサー
- CSS
- パララックスが出来ない。
javascript初心者です。 http://www.webopixel.net/javascript/350.html を参考にして、以下のようにhtmlファイルを 作りましたが、bg1の画像が繰り返され貼りついているだけです。何が悪いんでしょうか？ <head> <style type="text/css"> <!-- #bg01 { background: url(images/bg1.png); height: 3000px; } #bg02 { background: url(images/bg2.png); } #bg03 { background: url(images/bg3.png); } --> </style> <script type="text/javascript" > $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#bg01').css('background-position', '0 ' + parseInt( -y / 5 ) + 'px'); $('#bg02').css('background-position', '0 ' + parseInt( -y / 50 ) + 'px'); $('#bg03').css('background-position', '0 ' + parseInt( -y / 200 ) + 'px'); }); }); </script> </head> <body> <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --></div> <!-- /#bg02 --></div> <!-- /#bg03 --></div> </body> </html>
- ベストアンサー
- JavaScript
- jQuery 円周上に配置した要素を加工したい
jQuery 円周上に配置した要素を加工したい ここに円周上に等間隔に要素を配置するコードがあります。 これを下記の要件を満たすためには、どんなコードにしたらよいですか？ ＜要件＞ ・基準点を赤丸で表示させる ・時計の文字盤のような数字の配置にする（真上がゼロ） ・円内の文字が上下左右とも、中央に来るようにする ・数字は赤丸を天にした向きに表示させる <script src='https://code.jquery.com/jquery-3.7.0.min.js'></script> <style> .main-board { position: relative; width: 300px; } .circle-box { } div.item { position: absolute; width: 40px; height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #0dd; } </style> <section class="main-board"> <section class="circle-box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </section> </section> <script> $(function(){ var item_num = $('div.item').length; var deg = 360.0 / item_num; var red = (deg * Math.PI / 180.0); var circle_r = $("div.item").width() * 2.5; $('div.item').each(function(i, elem) { var x = Math.cos(red * i) * circle_r + circle_r; var y = Math.sin(red * i) * circle_r + circle_r; $(elem).css('left', x); $(elem).css('top', y); $(elem).text(i); }); }); </script>
- 締切済み
- JavaScript
- ボックスに背景を指定した時、firefoxでうまく表示されない
CSS初心者です。 タイトルの通りなんですが、ボックスにbackground-imageで背景を指定して、ブラウザで表示させると、IE6.0だとちゃんと表示されますが、firefoxだと表示されません。 サンプルソースを書きます。 -HTML- <div id="formbox"> <div id="box01">テストテスト</div> </div> -CSS- #formbox{ background-image: url(./img/bg.gif); background-repeat: no-repeat; width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; background-color:skyblue; float:left; } どなたかご教授お願いできませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSのdivで何故かボックスセンタリング出来ない
CSSのdivで何故かボックスセンタリング出来ません。全体を中央に寄せたいと思っています。 質問させていただきます。 まず、全体をdivで囲い、 #contena { margin-right: auto; margin-left: auto; width: 1000px; height: 1000px; } と、記述したのですが、何故かボックスセンタリングになりません。 しかも、ナビゲーションだけ、センタリングされています。 下記に、htmlを記述します。4000文字入るはずですが、これも何故か400文字程の数が入りきらないので、途中まで記載します。詳しい方がいましたら、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>名称未設定-1</title> <link rel="stylesheet" type="text/css" href="./index.css" media="all"> <!--[if IE]> <style type="text/css" media="all">.borderitem {border-style: solid;}</style> <![endif]--> </head> <body> <div id="contena"> <form action="#" method="get"> <div id="Div"> </div> <div id="Div2"> </div> <h3 id="見出し_3"> This Month PicUp </h3> <div class="1"> <p class="lastNode">テキスト </p> </div> <div id="Div3"> </div> <h3 id="見出し_32"> This Month PicUp </h3> <div class="2"> <p class="lastNode">テキスト </p> </div> <div class="Txt_メールアドレス"> <p class="lastNode">メールアドレス </p> </div> <input type="text" name="テキストフィールド__mac" id="テキストフィールド__mac" value=""> <input type="submit" id="ボタン__win" value="送信"> <img src="images/index_r2_c2.gif" alt="" id="index_r2_c2"> <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600"> <!-- fwtable fwsrc="navibarB.fw.png" fwpage="ページ 1" fwbase="navibar4" fwstyle="Dreamweaver" fwdocid = "68549898" fwnested="0" --> <tr> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="99" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="101" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="97" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1"></td> </tr> <tr> <td colspan="8"><img name="navibar4_r1_c1" src="images/navibar4_r1_c1.gif" width="874" height="223" alt=""></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="157"></td> </tr> <tr> <td rowspan="3"><img name="navibar4_r2_c1" src="images/navibar4_r2_c1.gif" width="99" height="343" alt=""></td> <td><a href="index1.html"><img name="navibar4_r2_c2" src="images/navibar4_r2_c2.gif" width="100" height="28" alt=""></a></td> <td rowspan="3"><img name="navibar4_r2_c3" src="images/navibar4_r2_c3.gif" width="1" height="343" alt=""></td> <td rowspan="2"><a href="navibar.html"><img name="navibar4_r2_c4" src="images/navibar4_r2_c4.gif" width="100" height="30" alt=""></a></td> <td rowspan="3"><img name="navibar4_r2_c5" src="images/navibar4_r2_c5.gif" width="2" height="343" alt=""></td> <td rowspan="2"><a href="navibar1.html"><img name="navibar4_r2_c6" src="images/navibar4_r2_c6.gif" width="101" height="30" alt=""></a></td> <td><a href="javascript:;" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','navibar4_r2_c7','images/navibar4_r2_c7_s2.gif','images/navibar4_r2_c7_s4.gif',1);" onClick="MM_nbGroup('down','navbar1','navibar4_r2_c7','images/navibar4_r2_c7_s3.gif',1);"><img name="navibar4_r2_c7" src="images/navibar4_r2_c7.gif" width="100" height="28" alt=""></a></td> <td rowspan="3"><i
- ベストアンサー
- ホームページ作成ソフト
- Safariでheight:100%のボックスを表示したいのです
Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。 以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0
- ベストアンサー
- HTML
- divで作成したボックスに背景画像がうまく適用させられない。余計な余白ができてしまう。
divで作成したボックスに背景画像がうまく適用させられません。余計な余白ができてしまいます。 例えば、以下のサイトの左側のメニュー欄「資料請求・お見積もり」のような枠をボックスに付けたいのです。 http://www.dai-ichi-life.co.jp/examine/search/index.html それには、 <div>○○</div>上用 <div>○○</div>真ん中用 <div>○○</div>下用 のようにボックスを三つに分け、それぞれ上用の背景画像、真ん中用の背景画像、下用の背景画像を適用して作成しました。 しかし、一番上のdivだけ画像を適用すると、必ず下に数ピクセルの余白ができてしまうのです。 .box-top { height: 7px;←画像の高さ width: 200px;←画像の幅 background-image: url(images/r-menu-box-top.jpg); background-repeat: no-repeat; margin: 0px; padding: 0px; } このようにマージンとパディングをゼロにしても数ピクセル余白が下に出ます。 なぜでしょう。
- ベストアンサー
- HTML
- floatしたdiv内の要素について
下記のようなHTML、CSSで、 floatしたdiv「leftside」内にp要素を配置すると p要素の上下に空間が発生します。 このp要素の上下の空間はなんでしょうか？ どうすれば消えますか？ ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。 または、pタグで囲まなくても空間は消えます。 よろしくお願いいたします。 ■Html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test_style.css" media="all"> </head> <body> <div id="warapper"> <!-- ヘッダ --> <div id="head"> </div> <!-- 左サイト --> <div id="leftside"> <p class="test">leftside</p> </div> <!-- コンテンツ --> <div id="contents"> contents </div> <!-- フッター --> <div id="footer"> <p>fotter</p> </div> </div> </body> </html> ■Css @charset "utf-8"; body{ /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 90%; text-align:center; padding: 0; margin: 0; background-color: #fff; } #warapper{ text-align: left; width: 800px; margin:0 auto; /*ページ全体をセンタリングする指定*/ padding: 0; background-color: #ffffcc; } #head{ background-color: #000; height: 160px; margin: 0 0 20px 0; padding: 0; position: relative; /*ロゴ画像を右下に配置するため*/ } #topbar{ background-color: #dcdcdc; height: 50px; margin: 0 0 20px 0; padding: 0; } #leftside{ background-color: #ccc; width: 180px; float: left; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ overflow:hidden; } #contents{ background-color: pink; width:600px; float: right; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ } #contents_all{ background-color: pink; margin: 0 0 20px 0; /*下方向に余白を設ける*/ padding: 0 0 0 0; } #footer{ background-color:#666; text-align: center; clear: both; margin: 0; padding: 0.5em 0; } .test { background-color: red; }
- 締切済み
- CSS
お礼
早速の返信ありがとうございます。 回答に記載して戴いたスクリプトで動作確認出来ました。 今回の回答大変参考になりました。 ありがとうございました。