(Mootools)スライドインするパネルについて
- こちらのサイトのスライドイン・アウトするパネルを使用したいと思っております。動作は希望通りなのですが、画面サイズを小さくした時(横スクロールバーが出た時)、画面右側が白くなり、背景色が反映されません。
- </div><!-- / container -->の前に<div style="width:2000px;">aaaaaaaaaaaaaaaaaa</div>を入れると、スライドエリアの右側がなくなります。製作者の方が意図的にサイズを決めていると思うのですが、どこでその指定をしているのかわかりません。
- スタイルシートかと思ったのですが、スライドエリアの#loginは100%になっており、私では原因がわかりませんでした。javascriptに詳しい方、お手数ですがご指導をお願い致します。
- ベストアンサー
(Mootools)スライドインするパネルについて
こちらのサイトのスライドイン・アウトするパネルを使用したいと思っております。 http://web-kreation.com/ajax-javascript/nice-login-and-signup-panel-using-mootools-12/ 動作は希望通りなのですが、画面サイズを小さくした時(横スクロールバーが出た時)、 画面右側が白くなり、背景色が反映されません。 例） </div><!-- / container -->の前に<div style="width:2000px;">aaaaaaaaaaaaaaaaaa</div>を 入れると、スライドエリアの右側がなくなります。 製作者の方が意図的にサイズを決めていると思うのですが、どこでその指定をしているのかわかりません。 スタイルシートかと思ったのですが、スライドエリアの#loginは100%になっており、私では原因がわかりませんでした…。 javascriptに詳しい方、お手数ですがご指導をお願い致します。
- 139yuky
- お礼率100% (4/4)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞試しにmin-width:970pxを削除してみたのですが、ログインエリアの幅は ＞固定されたままでした。 CSSはよくわかってないので私の想像ですが、bodyが100%になるので、loginも同じ幅になっているだけでは？ ＞<div style="margin: 0px; position: relative; overflow: hidden; height: 105px;"> ＞が<div id="login">の前に入ってきます。これはスクリプトで入れてるのでしょうか…？ 状況は確認できました。 fx.slide.jsを見る限りは、イベント処理を設定しているだけに見えますね。 #1にも書きましたが、mootoolsはさっぱりなのでこれまた想像ですが、アニメーション対象をラップすることで元の対象のスタイルをいじることなくラップのほうにoverflow:hiddenを設定しておいてheight（やdisplay）を変えることでアニメーションを実行しているのではないでしょうか？ ご提示の内容はloginが表示されている時のものと思いますが、初期（非表示）ではheight: 0px;になっていますので、この値を変化させてアニメーションしていると推測します。 ＞にwidth:100%;を追記した場合は幅は変わらないのですが、 ＞width:500px;などのピクセル指定を入れると変わりました。 値を指定すればその幅が確保されますが、100%だと結局、親要素のbodyの幅に対して100%になるのでは？（cssは自信ありませんが） ＞この幅を100%で可変にしたいのですが #1で回答しましたように、bodyの幅を指定してあげればよろしいのではないでしょうか？ これまた#1でも書きましたが、ドキュメントの幅はレイアウト後に var dc = document.compatMode=='CSS1Compat'?document.documentElement:document.body; var w = Math.max(dc.offsetWidth, dc.scrollWidth); alert(w); みたいにすれば取得できるようなので、この値を元に設定し直すというのもありかも。 （この場合の注意事項も#1にあります）
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ざっと見ただけなので、よくわかってませんが…（mootools知らないし） 多分、スクリプトはほとんど関係ないと思われます。 bodyの幅に100% min-width:970pxの指定がされているので、コンテンツでそれ以上の幅のものを指定するとはみ出した形となって（login部分の幅は保たれる）、残りの部分が白く見えていると思われます。 例示のように2000px幅のdivを加えるなら、同時にbody { width:2000px; }といったようにするか、コンテンツ部分は相対的な指定にしておくとか… content内に2000pxのdivを追加するともう少し複雑になって、900px幅のコンテントがセンタリングされていて、そこから2000pxのdivがとられるので、bodyの幅が3100px必要になったりします。 一方で、表示される内容については製作者が把握できているはずなので、（↑）のような飛び出したレイアウトにならないようにすれば問題ないでしょうし、そのような場合の対策として↓のような策を応用しておくと言うのもありかも。 http://css-eblog.com/csstechnique/overflow-menu.html あるいは、どうせスクリプトを使っているので、レイアウト後にドキュメントの幅を取得して、bodyにその値をセットしてあげるようにするなどの方法でもよいかも。 もっとも、上例のようにマージンが相対的に決まってくるような場合は、値をセット後に対象要素の位置が変わるので、それでも足りないというようなことも起こり得ますが…
お礼
わかりづらい説明でしたが、ご回答頂きありがとうございます。 参考サイトも教えて頂いてありがとうございました！ この方法ならできそうだと思うのですが、もう少しだけ質問させて下さい。 試しにmin-width:970pxを削除してみたのですが、ログインエリアの幅は固定されたままでした。 ページを表示した時のソースをfirebugで見てみると <div style="margin: 0px; position: relative; overflow: hidden; height: 105px;">が <div id="login">の前に入ってきます。これはスクリプトで入れてるのでしょうか…？ 【html】 <body> <div id="login">・・・ 【firebug】 <body> <div style="margin: 0px; position: relative; overflow: hidden; height: 105px;"> <div id="login"> firebugで<div style="margin: 0px; position: relative; overflow: hidden; height: 105px;">にwidth:100%;を追記した場合は幅は変わらないのですが、width:500px;などのピクセル指定を入れると変わりました。 この幅を100%で可変にしたいのですが…できそうでできないです。
関連するQ&A
- mootoolsでアニメーションを実装する方法
javascriptライブラリであるmootoolsに関する質問です。 mootoolsのサイトで実装サンプルがあるのですが、習ってみてもアニメーションを作れません。 どこが間違っているのでしょうか？詳しい方がいらっしゃいましたら、教えていただけないでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <script type="text/javascript" src="../js/mootools-core-1.4.2-full-compat.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ var fx = new Fx.Morph('box', { duration: 500, transition: Fx.Transitions.Quart.easeOut }); $('box').addEvent('click', function(event){ fx.start({ 'width': 300, 'height': 300 }).chain(function(){ log.set('html', 'First effect completed (1/5)'); this.start({ 'opacity': .3 }); }); }); </script> </head> <div id="page"> <body> <div id="box" style="width:100px;height:100px;background-color:red;"></div> </body> </div> </html> boxというIDを持つ項目をクリックすると、段々 300 x 300のサイズにしたいと思いますが。 ご回答をよろしくお願いします。
- ベストアンサー
- JavaScript
- Mootools Toggleを1ページで複数回使用するには？
下記ページのようなJavaScriptのスライドメニューを 1ページで複数回使用したいです。 http://jsajax.com/CSSVerticalMenuArticle944.aspx idを使用せずに、classのみにすればよいかと思うのですが、 JavaScriptのどこを修正すればよいのか、わからず困っています。 <a href="#" id="toggle" class="button"><span>Click Here</span></a> <div style="clear:both"> <ul id="v-menu2" class="v-menu"> おわかりになる方、いらっしゃいましたら どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryタブメニュー内、パネル間のリンク方法。
javascript勉強中です。 立て続けに質問してしまい、ご迷惑おかけしておりますが協力していただければ幸いです。 下記のjQueryタブメニューですが、パネル内から他のパネルへのリンクを実装するには、どのように書いたらいいか教えていただけないでしょうか。例としてtest1のリンクからtab2へ行くように、です。 （下記実装されている機能は、タブメニューと他のページからのタブへのダイレクトリンクです。） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $(".area").hide(); var tabs = $(".tab01 li"); tabs.click(function(){ var i = tabs.removeClass("active").index(this); tabs.eq(i).addClass("active"); $(".content .area").hide().eq(i).fadeIn(400); return false; }); var hash = window.location.hash.match(/#tab(\d+)/); hash = hash?(tabs.eq(hash[1]-1).length?hash[1]-1:0):0; tabs.eq(hash).click(); }); </script> </head> <body> <div id="tabs"> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1"><a href="#tab2">test1</a></div> <div class="area" id="tab2">test2</div> <div class="area" id="tab3">test3</div> </div> </div> </body> </html> 何卒宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- jqueryプラグインの設置方法
すみません、超初心者です。 コチラのサイト（http://laquu.com/plugin/innerslide/demo）の「インナースライド」プラグインを導入したいのですが、カーソルを載せてもピクリとも反応しません。 自分で書いたソースはこんな感じです.↓ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../jquery.laquu.custom-65049.js"></script> <script> jQuery(function(){ laquu("#innerslide1").innerSlide(); }); </script> <body> <div class="innerslide-panel"> <div id="innerslide1"> <p>カーソル載せる</p> <div class="laquu-innerslide"> スライドする内容 <!-- End laquu innerslide --></div> <!-- End innerslide1 --></div> <!-- End innerslide panel --></div> </body> ちなみに今はサーバーにはアップロードしておらず、完全にローカルでプレビューしています。 もしかして.jsファイルをサーバーにアップロードしなくては動かないのでしょうか？？？ 無知で申し訳ありません、ご回答宜しくお願い致します。
- 締切済み
- JavaScript
- cssとjquery
WEBデザインド素人です。 とんちんかんな質問だったらごめんなさい。 単刀直入に質問させていただきます。 div#likebox_container .fbcomments, div#likebox_container .fb_iframe_widget, div#likebox_container .fb_iframe_widget[style], div#likebox_container .fb_iframe_widget iframe[style], div#likebox_container .fbcomments iframe[style], div#likebox_container .fb_iframe_widget span{ width: 100% !important; } 以上のように一括設定したスタイルを、jquery にて、状況に応じて width の設定を替えられないものだろうか、、、と悪戦苦闘中でございます。 ピンと来た方もいらっしゃるかもしれませんが、とあるHTMLページに、自分のfacebookのタイムラインと『いいね！』を配置し、その横幅をレスポンシブにしようとした場合の設定方法（有名？）とのことでした。 確かに、上記スタイルを追加すると、気持ちいいくらい横幅がレスポンシブになってくれますが、ただ１点だけ気になることがあり、iphone5(width=320px)で表示した場合のみ、右側に変な余白が出来てしまいます。 （横幅が320px以上のandroidだと大丈夫とのことで、どうやらタイムライン表示部の横幅が292pxで、加えて両サイドのpadding？margin？が邪魔してズレテしまう、、、みたいです。 それはさておき、、、） これを何とかしようと、２日ググってみましたが解決せず、じゃ最後の砦のjqueryで何とかしたいなと、そこでも色々調べてみましたが、上手く行かず、でした。 width: 100% !important の部分を、iphone 判定の場合のみ width: 320px に変更できないのでしょうか？ $("div#likebox_container .fbcomments").css("width","320px"); $("div#likebox_container .fb_iframe_widget").css("width","320px"); $("div#likebox_container .fb_iframe_widget[style]").css("width","320px"); $("div#likebox_container .fb_iframe_widget iframe[style]").css("width","320px"); $("div#likebox_container .fbcomments iframe[style]").css("width","320px"); $("div#likebox_container .fb_iframe_widget span").css("width","320px"); と動かしてみましたが、どうも上手く行きませんでした。というより無反応。。。 query にこだわってるわけではありませんが、そのCSSスクリプト内の数値をパラメータ化して可変にできるのなら、それでも良いのですが、、、聞いたことないので、どうしたものかと考えております。 何か妙案お持ちの方、あるいは小生の愚問を一蹴・叱責して頂ける方いらっしゃいましたら、ご教示頂けると幸いです。 よろしくお願いいたします。 ※ 上記ソース内のブランク部には、分かりやすいようにと、全角スペースを使用しております。
- ベストアンサー
- CSS
- css で 「Top へ戻る」 の書き方
h2 で右側に 「Top へ戻る」 を置きたいんですが、 以下のように書いてみると IE6 で背景画像が表示されないのと かなり無駄が多いなと思いまして、なにか良い書き方ご存知でしょうか．．． <style type="text/css"> .h2_container{ background: url(images/bg_h2.jpg); } .title{ width: 500px; float: left; } .top{ width: 100px; float: left; } .clear{ clear: both; } </style> <div id="h2_container"> <div class="title"><h2>内容のタイトル</h2></div> <div class="top"><a href="#">Top へ戻る</a></div> <div class="clear"></div> </div>
- ベストアンサー
- CSS
- ブラウザの幅を狭くしてもレイアウトが崩れない方法
ブラウザのサイズを縮小すると画像のようにレイアウトが崩れます。 ウェブ製作の学習をしている初心者です。 現在wrap(container)を1000pxに設定しています。 せめてmin-width: 900pxあたりまではレイアウトが崩れず縮小できるようにしたいと思っています。（スマホ、タブレット用のレスポンシブデザイン”にする必要はなく単にＰＣ上でブラウザの画面を狭くしたケースについての話です。） 現在以下のような記述をしています。ログイン画面なので縦スクロールはなく画面の幅いっぱいに使えます。 レイアウトもうまく並んでくれず、混乱している状態です。 画像ロゴ、フォーム、ログインボタンをきれいに横並びにして、画面の縦横中央にもってきたいと考えています。ちから技でなんとかしたのですが、ブラウザ画面を少し縮小すると崩れてしまいます。 どなたかウェブ制作のできる方いらっしゃいましたら訂正、指摘等を下さい。 宜しくお願いします。 <HTML> <div id="container"> <!--↓main contents↓--> <main> <!-- ↓login-box↓ --> <div id="login-box"> <img src="img/logo2.jpg" alt="ロゴマーク"> <!--↓form login↓--> <form action="index.php" method="post"> <fieldset id="login"> <p><input autofocus type="text" name="login_id" value="'>"placeholder="ユーザーID" minlength="4" maxlength="50" required></p> <p><input type="password" name="pass" value=" ''> placeholder="パスワード" minlength="5" maxlength="20" required></p> <p id="login"><input type="submit" name="login" value="ログイン"> </p> </fieldset> </form> <!--↑form login↑--> </div> <!--↑login-box↑ --> </main> <!--↑main contents↑--> </div> <!--↑container↑--> ---------------------------------------------------- CSS /*↓maincontents↓*/ main fieldset { position: relative; } #login-box { display: flex; justify-content: center; align-items: center; } #login-box form { width: 380px; margin-left: 20px; } #login-box form p:nth-of-type(3) { display: inline-block; position: relative; } #login-box form input[type="submit"] { width: 70px; height: 70px; background-color: #ec9000; }
- 締切済み
- HTML
- ボックスエリアに写真を貼り付けるには（２）
ボックスエリアに写真を貼り付けるため、以下のようにテキストエリアの背景画像として挿入を試みたところ、テキスト・エリアに画像の一部のみ表示されました。 質問１： 画像全体を表示させるにはどうしたらよいでしょうか。 質問２： テキストエリアの右側が空白になっていますが、空白部にも見出し、小見出し、テキストを表示させるにはどうしたらよいでしょうか。 <div style="background-color:#0ff;width:950px;height:200px;overflow:auto;"> <TEXTAREA rows="10" cols="25"style="background-image:url(flower008.jpg);"> </TEXTAREA> <FONT STYLE="font-size:8mm" COLOR="#808000" SIZE="8">見出し</FONT> <h3>小見出し</h3> <FONT STYLE="font-size:5mm" SIZE="5">テキスト</FONT>
- ベストアンサー
- ブログ
- <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>で囲ってしまうと文字サイズは変更できなくなってしまうのでしょうか？ 分かる方いらっしゃいますか？
- 締切済み
- HTML
- Ajax 穴埋め式問題の作り方
自分はAjax初心者で、現在Ajaxを使って穴埋め式問題を作ろうと考えてるのですがうまくいきません。 イメージとしては、 問1ネットワークについて ネットワークとは（ ）という意味が... のように( )にユーザーが入力し解答するプログラムを作っています。 ソースは <html> <head><title>情報ネットワーク-テスト1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> <link rel="stylesheet" type="text/css" href="color.css"> </head> <body> <div> 問1 情報ネットワークについて以下の問いに答えよ。 </div> <div style="marginLeft:10px;"> ネットワークとは<input type="textbox" name="one" size="20"/> という意味を持つ。 </div> </body> </html> というように作ったのですが実際にアクセスするとタイトルに文字化けがおきかつ本文が画面に表示されない現象が起きます。 これは、どうすればイメージのようなものができるのでしょうか？ 知識のある方ご協力お願いします。
- ベストアンサー
- AJAX
お礼
#1さん、回答ありがとうございました！ 頭の中が大混乱していて「htmlをwidth:100%にしているのだから、中のコンテンツが2000pxになったらhtmlも2000pxになる！」とか無茶苦茶な考えになってました…。 #1さんの回答で目が覚めましたので、じっくり取り掛かってみます！ 参考サイトやスクリプトのアドバイス、注意事項までご丁寧にありがとうございました！！