ドロワーカスタマイズ方法と注意点
- スマホサイトを構築中で、jquery.mobile-menu.jsというプラグインを使用してドロワーメニューを作成しましたが、一部のアンドロイドで表示に問題があります。
- ドロワーメニューを他のプラグインと併用する際に、z-indexの問題が発生しているようです。
- ドロワーメニューの順番を変更するために、対応する要素の位置を入れ替える必要がありますが、jsの変更が必要です。
- ベストアンサー
ドロワーjsカスタマイズについて
現在スマホサイトを構築中で、jquery.mobile-menu.jsというプラグインを使用してドロワーメニューを作りました。 サンプルは下記のサイトをご覧ください。 http://case-mobile-design.com/demo/smartphone_drawer/ しかし一部のアンドロイドにてz-indexが無視されるということが分かり、一部ページでz-indexを使った他のプラグインと一緒に使用すると、ドロワーメニューが表示されないという現象が起こっています。 ソースを確認したところ、 <div id="build-menu">ドロワーメニュー内容</div> <div id="build-menu-page">コンテンツ</div> が自動的に生成されていますが、この順番を変更したいのです。 つまり <div id="build-menu-page">コンテンツ</div> <div id="build-menu">ドロワーメニュー内容</div> の順番で表示させたいと思います。 js初心者ですので、どこをさわったらよいかわからず大変困っております。 どなたかご教授願えませんでしょうか？ どうぞ宜しくお願いいたします。
- mimita00
- お礼率91% (21/23)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
126行目 _this.$elem.wrapInner('<div id="'+_this.config.page_id+'" />').find("#"+_this.config.page_id).before('<div id="build-menu" />'); ↓ _this.$elem.wrapInner('<div id="'+_this.config.page_id+'" />').find("#"+_this.config.page_id).after('<div id="build-menu" />'); before→afterに変えただけです。 検証はしていませんがどうでしょう？
その他の回答 (1)
- ONEONE
- ベストアンサー率48% (279/575)
これは多分いけるんじゃないかな？ ご紹介のサンプルは確かにAndroid2.3で正常に動作しませんでしたが下記のものは少なくともAndroid2.3で正常に動くようです。 http://plugins.adchsm.me/slidebars/
お礼
ありがとうございます。 こちらのサンプルも試してみましたがAndroid2.3の特定の機種（DIGNO ISW11k）で メニューボタンを押しても反応しませんでした。 コンテンツスライダーのbxSliderも入れており、別のプラグインではAndroid2.3対応でも bxSliderとの兼ね合いがよくなかったりして難航しております。
関連するQ&A
- 「position:absolute」のIEのバグへの対処方法
CSS #navbar { position: absolute; z-index: 1 } HTML <div id="navbar"> 略 </div> <div id="contents"> 略 </div> CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。 このため「position:relative;」としてみたのですが．． メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。 なにかよい方法はありますでしょうか。
- ベストアンサー
- HTML
- IE6で動かないコンテンツ
教えてください。 http://chikusa-eetoko.jp/ ホームページをアップしましたが IE6で div「field」内のコンテンツのみ、まるで positionプロパティをかけたように固定されて動きません。 --------------------- <div id="container"> <!-- コンテンツエリア --> <div id="page"> <div id="header"> <!-- コンテンツ -->・・・・・動く </div><!-- /#header --> <div id="field"> <div id="main"> <!-- コンテンツ -->・・・・・スライドしない </div><!-- /#main --> <div id="second"> <!-- コンテンツ -->・・・・・スライドしない </div><!-- /#second --> <div id="shot"> <!-- コンテンツ -->・・・・・スライドしない </div><!-- /#shot --> <div class="next"><a href="news/index.html"><img src="img/next-navy.gif" width="90" height="22" alt="次ページへ"></a></div>・・・・・動く </div><!-- /#field --> </div><!-- /#page --> </div><!-- /#container --> --------------------- ヘッダーと次へのボタンまでは field 内コンテンツの高さを保ったまま空でスライドします。 どうかご教授ください。よろしくお願いします
- ベストアンサー
- その他（プログラミング・開発）
- node.jsを始めたいが、うまくできない
http://libro.tuyano.com/index3?id=1116003&page=3 このページを参考にnode.jsを入門したいと思っています。 node.jsのコマンドプロンプトに「cd Desktop\node.js-sample\」 を打ち込んで、「node sampleapp.js」も打ち込んだのですが、Server running!!はでません。 勿論、Desktop\node.js-sample\sampleapp.jsというふうに設置しています。 Desktop\node.js-sampleではなくC:\Users\***\Desktop\node.js-sample も試しましたが、できませんでした。 node.jsのコマンドプロンプトは、 > cd Desktop\node.js-sample\ ・・・ この状態でとまっています。 何がいけないのか教えて下さい。
- ベストアンサー
- JavaScript
- ｊｓプラグインのを独学で学習しています
http://kokusai.ecc.ac.jp/ このサイトのトップにあるような、小さい画像にマウスをあてると大きい画像がそれにあわせて スライドしていくような方法を勉強しており、 どうやらボックススライダーというプラグインと、carouFredSelというプラグインを使ってやっているということがわかりました。 さっそく僕も、やってみたのですが、ボックススライダーの方はうまくいきますが、carouFredSelがうまくいかず、firebugで要素を確認したら <div id="thumbs" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 58px; margin: 0px; width: 2070px; height: 38px; z-index: auto;"> となります。 HTMLを確認すると<div id="thumbs">だけなのに、なんでこんなことになるのでしょうか？ また、ここのwidth: 2070px;を 90pｘに変更するにはどこをさわればよいのでしょうか？ 困っています。 お願いします・・・
- ベストアンサー
- JavaScript
- IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> </head> <body> <div id="container"> </div> <div id="menu"> <ul> <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> </ul> </div> </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> <head> <script type="text/javascript" src="bbb.js"></script> </head> <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- ui.tabs.jsとjScrollPane.jsの連動について
いつもお世話になっております。 先日質問させていただいた内容に補足させていただきます。 Ui.Tabs.jsとjQuery1.2.6.jsを使ってタブを動作させ、そのコンテンツが表示領域に収まらなかった場合、jScrollPane.jsを使用してスクロールバーを表示したいと考えています。それぞれ一応動作するまでには到っているのですが、タブを切り替えた時にスクロールバーの長さがリサイズされず、タブの変移にjScrollPaneが対応してくれません。 そこでタブをクリックしたときにjScrollPaneを再度読み込むようにしてみたのですが、下記記述だとクリック前のコンテンツの長さに対応したスクロールバーが表示されてしまいます。 Ui.Tabs.jsの動作の完了後にjScrollPaneを再度読み込むように（クリック後のコンテンツの長さに対応したスクロールバーが表示されるように）スクリプトを組むことはできないでしょうか。ご教授よろしくお願い致します。 #layer1 { height: 500px; width: 600px; position: relative; top: 110px; overflow: auto; visibility: visible; } <script type="text/javascript"> $(function(){ $('#tab > ul').tabs({ fx:{ opacity: 'toggle',duration:500 } }); $('#layer1').jScrollPane({scrollbarWidth: 12}); $('#nor1,#mor12,#ho1,#hov12').click(function(){ $('#layer1').jScrollPane({scrollbarWidth: 12}); }); }); </script> </head> <body> <div id="tab"> <ul> <li><a href="#fragment-1"><span><img id="mon1" src="../diary/2009/1/diary-1mon-nor.png" alt=""/></span></a></li> <li><a href="#fragment-2"><span><img id="mon2" src="../diary/2009/2/diary-12mon-nor.png" alt=""/></span></a></li> <li><a href="#fragment-3"><span><img id="mon3" src="../diary/2009/3/diary-1mon.png" alt=""/></span></a></li> <li><a href="#fragment-4"><span><img id="mon4" src="../diary/2009/4/diary-12mon.png" alt=""/></span></a></li> </ul> <div id="layer1"> <div id="fragment-1"><img src="../2009/1/content-diary-1.png" alt="" width="520" height="950" border="0" /> </div> <div id="fragment-2"><img src="../2009/2/content-diary-2.png" alt="" width="520" height="453" border="0" /> </div> <div id="fragment-3"><img src="../2009/3/content-diary-3.png" alt="" width="520" height="1150" border="0" /> </div> <div id="fragment-4"><img src="../2009/4/content-diary-4.png" alt="" width="520" height="1150" border="0" /> </div> </div> </div> </body>
- ベストアンサー
- JavaScript
- ローディングアイコンの表示
jQuery mobileであらかじめ読み込んであるページへ遷移する際に、 ローディングアイコンを表示する方法を教えてください。 //簡略コード <a href="#page01">ページ1</a> <a href="#page02">ページ2</a> <a href="#page03">ページ3</a> <div id="page01"> ページ1 </div> <div id="page02"> ページ2 </div> <div id="page03"> ページ3 </div>
- ベストアンサー
- JavaScript
- Jquery Mobileでのページ表示について
Jquery Mobile初心者です。 ページ表示についての質問ですが、 ファイルtest.htmlに下記のようにコードを書きました。 ログインのページを通してから、indexのページを表示したいと思っていますが、 ブラウザのアドレスバーに....../test.html#indexと入力すると、 indexのページがそのまま表示されてしまいます。 これではログインページをつける意味がなくなってしまいます。 アドレスバーに....../test.html#indexを入力しても、indexのページが表示されない (ログインページを表示する)ようにするには、どうしたらいいでしょうか？ ご教授をよろしくお願いします。 ------------------------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>テスト</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="login" data-role="page"> <header data-role="header" data-position="fixed"> <h1>ログイン</h1> </header> <div data-role="content"> <div data-role="fieldcontain" class="noborder"> <label for="inputLoginId">ログインID:</label> <input type="text" name="inputLoginId" id="inputLoginId" value="" placeholder="ログインIDを入力" /> <label for="inputPwd">パスワード:</label> <input type="password" name="inputPwd" id="inputPwd" value="" placeholder="パスワードを入力" /> </div> <input type="button" id="loginBtn" value="ログイン" data-theme="f" /> </div> </div> <div id="index" data-role="page"> <header data-role="header" data-position="fixed"> <h1>テスト</h1> </header> <div data-role="content"> <p>メインページ</p> </div> </div> <div id="TR" data-role="page"> <header data-role="header" data-position="fixed"> <a href="#index" data-icon="back" onclick="backPrc()">戻る</a> <a href="#index" data-icon="home" onclick="homePrc()">ホーム</a> </header> <div data-role="content"> <p>サブページ</p> </div> </div> </body> </html> ------------------------------------------------------------
- 締切済み
- HTML
- FacebookのCommentsについて
Facebookのapi(JavaScript)にてFacebookページのウォールを取得し、各投稿ごとに動的にIDを付加したCommentsプラグインを表示したいと思っています。 下記要領で実行すると、htmlは正しく挿入されている（Firebugにて確認）のですが、Commentsが読み込まれません。 同じファイル内でgetWall関数外に静的にHTMLを記述するとCommentsは表示されます。 どうすれば動的に識別子を付加したCommentsを表示させることができますでしょうか？ <!-- SDK読み込み --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script> function getWall() { FB.api( '/ -- ID -- /feed', { access_token: ' -- 取得したアクセストークン -- ' }, function(response) { // 取得後のコールバック var contents = ''; for (var i = 0; i < response.data.length; i++) { if(response.data[i]['message']){ contents += "<div class='topic_block' id='topic_" + response.data[i]['id'] + "'\>"; contents += response.data[i]['message']; contents += "</div>"; contents += "<div class='fb-comments' data-href=' -- パーマリンク等、投稿毎の識別子 -- ' data-num-posts='10' data-width='470'></div>"; contents += "</div>"; */ } } // ウォールの内容を表示させる document.getElementById('topics').innerHTML = contents; }); } window.fbAsyncInit = function() { getWall(); }; </script> <div id='topics'></div>
- 締切済み
- JavaScript
- javascriptで文字を移動後、プルダウン表示させたい。
(1)移動処理 http://www.openspc2.org/JavaScript/Ajax/Effect/Rico/002/index.html (2)上から内容を表示 http://www.openspc2.org/JavaScript/Ajax/Effect/script.aculo.us/004/index.html (1)→(2)の処理の順番動かそうと思い、javascriptを組んでみたのですが、動きません。 new Rico.Effect.Position("movilisez", 400,300, 100, 20);を コメントアウトすると、(2)の処理は動いてくれますが、 コメントを外すと動きません。 原因を教えていただけますでしょうか？ 環境は以下です。 OS:VISTAHomepremium ブラウザ:IE7 --------------------- function toPoint() { new Rico.Effect.Position("movilisez", 400,300, 100, 20); execEffect(); } function execEffect() { document.getElementById("contents").style.visibility = "visible" new Effect.BlindDown($("contents")); } --------------------- --------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="Style_Index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/prototype-1.6.0.3.js"></script> <script type="text/javascript" src="scripts/scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="scripts/rico.js"></script> <script type="text/javascript" src="scripts/BlindDown.js"></script> <title>TestPage</title> </head> <body> <div align="center"> <p></p><div id="Hedder" align="center"><table width="800px" cellspacing="0"> <tr> <td colspan="2" rowspan="2" align="left"><img src="" alt="" name="movilisez" width="200" height="80" id="movilisez" onclick="toPoint()" /></td> </tr> </table></div> <div id="contents"> <div id="menu" align="center"> メニュー </div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 私の質問どおり、こちらで要素の位置を変更することができました。 長いスクリプトですのに見ていただいて感謝します。 ただ、要素の位置を変更しても、別のプラグインでスライドさせている要素の上に ドロワーメニューを表示させることができませんでした。 どうやらソースの位置を変更するだけではこのドロワーのjsは使えないようです。 時間がないので別のプラグインを色々試してみたいと思います。 ありがとうございました！