bgiframeとdatepickerの共存
- IE6での<input>要素のz-indexバグを解決するために、bgiframeを使用
- jQueryのdatepickerを使いたいが、bgiframeとの共存がうまくいかない
- bgiframeを外すことで、両方の機能を導入することができる
- ベストアンサー
bgiframeとdatepickerの共存
IE６対策について。 IE6では<input>がz-indexを無視するというバグがあります。 これは、jQueryのbgiframeを使うことにより解決できました。 （参考） http://d.hatena.ne.jp/nzm_o/20100614/1276529390 ここで、同じくjQueryのdatepickerを加えて、こんな仕様にしたいと考えております。 http://jsajax.com/Articles/jQueryDatePicker/1144 ところが、うまくいかないので、いろいろ試してみたところ、bgiframeを外したらうまく行きました。 では、両方とも導入したい場合はどうしたらよいのでしょうか。 よろしくお願いします。
- charlie432
- お礼率100% (53/53)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どこからdatepickerに必要なjsとcssを入手されたか解りませんが、全て配布元本家↓ http://jqueryui.com/demos/datepicker/ http://jqueryui.com/download http://brandonaaron.net/code/bgiframe/docs から入手して、検証してみました。全てデフォルトのままの設定でも同時に使用可能で、もちろんIE6でも正常に効果が出ました。 うまくいったHTML↓ <html lang="ja"> <head> <meta charset="UTF-8"> <title>gomi</title> <style type="text/css"> #wrapper { position: relative; width: 100%;} form { position: absolute; top: 0; left: 0; width: 100%; } select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; color: #ccc; } .box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; } </style> <link rel="stylesheet" type="text/css" media="screen" href="/jslib/jqueryUI/css/ui-lightness/jquery-ui-1.8.2.custom.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.5");</script> <script type="text/javascript" src="/jslib/jquery.bgiframe.js"></script> <script type="text/javascript" src="/jslib/jqueryUI/js/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript" src="/jslib/jqueryUI/development-bundle/ui/jquery.ui.datepicker-ja.js"></script> <script type="text/javascript"> $(function(){ $('#day').datepicker(); $('#box').bgiframe(); }); </script> </head> <body> <div id="wrapper"> <form action="#" method="get" accept-charset="utf-8"> <select name="test"><option>Testing Testing</option></select> <select name="test"><option>Testing Testing</option></select> <select name="test"><option>Testing Testing</option></select> <select name="test"><option>Testing Testing</option></select> <select name="test"><option>Testing Testing</option></select> <select name="test"><option>Testing Testing</option></select> <select name="test"><option>Testing Testing</option></select> </form> <div id="box" class="box"> <input type="text" id="day"> </div> </div> </body> </html>
関連するQ&A
- jQuery-datepicker on IE8
以下のような非常にシンプルなHTMLでjqueryのdatepicker()を使用しています。 他のブラウザでは問題なく動作するのですが、IE8でのみ、カレンダーは表示されるものの、 日付を選択してもカレンダーが閉じず、テキストボックスにも選択日付が設定されません。 どなたか解決方法をご存知の方、教えてください。 以下にHTMLソースと、テスト用に設置してあるURLを記載します。 よろしくお願いします。 http://apps.spiral-software.com/test/datepicker.html <html> <head> <title>datepicker</title> <link rel="stylesheet" href="jquery-ui.css" type="text/css" /> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.11.min.js"></script> <script type="text/javascript"> $(function () { $("#incidentDateId").datepicker({ dateFormat: "yy/mm/dd" }); }); </script> </head> <body> <form> <input id="incidentDateId" name="incidentDateName" type="text" value="" /> </form> </body> </html>
- 締切済み
- JavaScript
- jQueryのclass属性削除ができません
OS：Windows7 ブラウザ：IE１０ いつもこちらでお世話になっています。 以下のようなjQueryで、removeClassでclass属性を削除しようとしていますが、削除できません。 －－スクリプト－－ $(function () { $(".datepicker").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: false, dateFormat: 'yy-mm-dd', showOn: "button", buttonImage: "calendar.gif", buttonImageOnly: true, buttonText: "カレンダ表示", yearRange: "2003:2025", speed: "fast" }); $("#ID").click(function(){ (".datepicker").removeClass("datepicker"); }); －－HTML(簡略)－－ <input type='text' class='datepicker' size='12' maxlength='10' style='ime-mode:disabled'> <input type='button' id='ID'> jQuery UIのdatepickerが関係していると思うのですが、どこか記述に問題があるのでしょうか。 どなたかご教示お願いいたします。
- 締切済み
- JavaScript
- Jquery Datepickerについて。。
質問させてください。 javascriptが非常に苦手な初級エンジニアです。。 JqueryのDatepickerを使って、「レンタル希望日」という入力項目に入った日付を見て、「レンタル返却日」の選択できる日にちを変える、っというようなものを作っています。レンタル希望日の入力をする前にレンタルもとの販売店の選択をし、休店日も選択した販売店によって切り替えるような仕様です。苦手ながらも何とかそこまではできたのですが1点問題点が。。 レンタル希望日、返却予定日は第三希望まで入力する必要があります(必須)。 以下1ソースで第３希望までの入力を一元で行う方法があればと思っています。 丸ごと関数化すればいいのかと思い色々試してみましたが上手くいきませんでした。ソースを3回書くのはできれば避けたいです。 何卒よろしくお願いいたします。 ---------------------以下ソース $(function() { $( "#from" ).datepicker({ defaultDate: "+1w", minDate: '+3', maxDate: '2014年12月26日', dateFormat: 'yy年mm月dd日', changeMonth: true, beforeShow:function(){ var kyoten = $("select[name='kyoten']").val(); try{ if(kyoten == ''){ throw new Error('販売店を選択してください'); } }catch(e){ alert(e.message); window.location.reload();//あまりよろしくない。。 } }, beforeShowDay: function(day) { // カレンダー表示前に実行 var kyoten = $("select[name='kyoten']").val(); kekka = kyoten.split('_'); var result; switch (day.getDay()) { case 2: // 火曜日を選択できないようにする if(kekka[1] == 1){ result = [false]; }else{ result = [true]; } break; case 3: // 水曜日を選択できないようにする if(kekka[1] == 2){ result = [false]; }else{ result = [true]; } break; case 6: // 土曜日を選択できないようにする result = [false]; break; case 0: // 日曜日を選択できないようにする result = [false]; break; default: result = [true]; // それ以外は選択できる break; } return result; }, onClose: function( selectedDate ) { var toDate = $('#from').datepicker('getDate'); var toMin = $('#from').datepicker('getDate');//toDate var toWeek = toDate.getDay(); var tiNum = ''; var niNum = ''; // maxDateの挙動(選択した日にちの曜日番号によって(#to)で選択できる日にちを絞り込む) if(toWeek == 1) { // 月 tiNum = 4; } else if(toWeek == 2){ // 火 tiNum = 3; } else if(toWeek == 3){ // 水 tiNum = 2; } else if(toWeek == 4){ // 木 tiNum = 1; } else if(toWeek == 5){ // 金 tiNum = ''; } // minDateの挙動（金曜日のみ1を加算しない） if(toWeek == 5){ niNum = ''; }else{ niNum = 1; } toMin.setDate(toMin.getDate() + tiNum); toDate.setDate(toDate.getDate() + niNum); $( "#to" ).datepicker('option', {minDate: toDate, maxDate: toMin}); } }); $( "#to" ).datepicker({ defaultDate: "+1w", minDate: '+1', maxDate: '2014年12月26日', dateFormat: 'yy年mm月dd日', changeMonth: true, beforeShow:function(){ var kyoten = $("select[name='kyoten']").val(); try{ if(kyoten == ''){ throw new Error('拠点を選択してください'); } }catch(e){ alert(e.message); window.location.reload(); } }, beforeShowDay: function(day) { // カレンダー表示前に実行 var kyoten = $("select[name='kyoten']").val(); kekka = kyoten.split('_'); var result; switch (day.getDay()) { case 2: // 火曜日を選択できないようにする if(kekka[1] == 1){ result = [false]; }else{ result = [true]; } break; case 3: // 水曜日を選択できないようにする if(kekka[1] == 2){ result = [false]; }else{ result = [true]; } break; case 6: // 土曜日を選択できないようにする result = [false]; break; case 0: // 日曜日を選択できないようにする result = [false]; break; default: result = [true]; // それ以外は選択できる break; } return result; } }); }); </script> 以下html部分 <select name="kyoten"> <option value="">選択してください</option> <?php foreach( $kyotenArr as $key=>$var):?> <option value="<?php echo $var;?>"><?php echo $key;?></option> <?php endforeach;?> </select> 第一希望日<input type="text" id="from" readonly="readonly"> 第一希望返却日<input type="text" id="to" readonly="readonly"> <!--第3希望まであります。。
- ベストアンサー
- JavaScript
- IE6だけ、<select>がプルダウンメニューより上にくる
お世話になります。困っています。知恵を貸して下さい。 ウェブページのレイアウトで、ページの最上部に横長の メニューを配置して、そのメニューをプルダウンにしました。 そして、メニューの下に、セレクト<select><option>中略</select>を 配置したところ、肝心なIE６だけ、セレクトがプルダウンメニューの 上になります。floatで、z-indexの数値を入れたりもしたのですが、 どうやっても、上にくるのです。 これは、IE6のバグでしょうか？ 何か、回避する方法はないでしょうか？ 教えて下さい。 よろしく、お願いします。
- ベストアンサー
- HTML
- jQueryが動きません。
表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。
- 締切済み
- JavaScript
- firefoxについて何点か質問です。
IEで画像表示トラブルが直らないので、先日よりfirefoxにしました。 超初心者ですがよろしくお願いしますo ＊今この質問を書いてる入力枠？の中の字が HPのフォントサイズより大きいのですが、解消できますか？ ＊OKwaveの新規質問のところの、質問内容やタイトルを入力するセル幅が妙に大きく、 逆にその右にある説明の場所が狭いのですが・・・o （説明の場所は3文字で折り返されてしまってます） ＊IEはリンクをクリックし、ブラウザの戻るボタンで戻ると そのクリックした所は既読の色になってるのですが firefoxは既読色に変りませんo 再読み込みすると既読色になってるのですが、仕様でしょうか？ ＊拡張機能というのがあるようですが、 これは導入すると基本的には重くなると考えていいんでしょうか？ （まだまだやるつもりはありませんが、後々のために） ＊IEではパスワード入力部は自動的に半角になってくれたのですが firefoxはならないようですが、仕様でしょうか？ たくさんありますが、宜しくお願いしますo
- ベストアンサー
- ブラウザ
- IEで表示されてしまう余白をなくしたい
ブログポータルのテンプレをカスタマイズしたことがあるレベルの私ですが、今回初めてHPを作っています。 トップページに、jQueryでスライドショーを設置しているのですが、IEで確認したところ、そのスライドショーの上下に、不要な余白ができてしまいます。 スライドショーが参照しているCSSに原因があるんだろうということは、なんとなく分かるのですが、解決方法がわかりません。 スライドショーのCSSですが、オリジナルは以下です。 position:relative; が影響し、上下のcontents（menuやheader）に重なってしまうため、各数値を変更しました。 ------------------ @charset "utf-8"; /*crossFader*/ .crossfader{ position:relative; height:340px; } .crossfader img{ position:absolute; top:0; left:0; z-index:8; opacity:0; cursor:pointer; } .crossfader .active{ z-index:10; opacity:1.0; } .crossfader .last-active{ z-index:9; } ------------------ ソースを見てもらったほうが確実と思いますので、URL記載します。 ほかにも、HTMLの不備などありましたらご指摘下さい。よろしくお願いいたします。 http://miyauchi-babymomcare.com/
- ベストアンサー
- CSS
- POST中にローダーを表示
Javascriptにつきまして、ちょっと困っておりまして、どなたか助けていただけないでしょうか。。 <form>のpost中にローダー画像（GIFアニメ）を表示したいと思っています。 そこで、以下のようにしたのですが、GIFアニメが出ません。 これはどのようにしたらよいのでしょうか。 <form method="post" action="index.php"> <input type="text" name="tel" value="" > <input type="submit" name="submit" value="送信" onclick="loader();"> </form> <script type="text/javascript"> function loader() { jQuery('<div />').css ({ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#fff', opacity: 0.7 }).html('<table style="width:100%;height:100%;"><tr><td style="text-align:center;vertical-align:middle;"><img src="loader.gif"></td></tr></table>').appendTo(jQuery("body")); } </script> 因みに、GIFアニメではなく、テキストでしたら普通に表示されます。 ブラウザはchrome, FF, IE7, IE8で試しましたがどれも一緒でした。 よろしくお願いします。
- 締切済み
- JavaScript
- chromeでフォームの値が取得できない
PHPでフォームに入力された値を取得して画面に表示させる処理において、 Javascriptでフォームの値を変更した場合、chromeだと変更後の値が 取得できません。 例えば、 <form name="form" method="post" action="index.php"> <input type="checkbox" name="chk1" value="111"> <input type="hidden" name="data1" value="AAA"> <input type="submit" value="送信"> </form> というようなフォームがあったとして、Javascriptで値を <form name="form" method="post" action="index.php"> <input type="checkbox" name="chk1" value="222"> <input type="hidden" name="data1" value="BBB"> <input type="submit" value="送信"> </form> と、変更しても送信ボタンを押して取得できる値は、上の方の値になります。 IEやFireFoxでは問題なく変更後の値が取得できるのですが、chromeだと 取得できません。 なにか解決方法があるのか、それともchromeの仕様なのかご教示いただければと 思います。 どうかよろしくお願いいたします。
- 締切済み
- JavaScript
- display: none をすると Enter キーでサブミットできなくなる
問題の原因がJavaScriptの範疇なのか(JSなのかHTMLなのかIEなのか CSSなのかそれとももっと別の部分なのか)どうかも分かりませんが、 以下のようにすると(恐らくIEのバグ?によって)IEでEnterキーで サブミットできなくなります。 (テストのために重要な部分だけPerlで簡略化して出力しています) #!perl print "Content-type: text/html\n\n"; print <<"HTML"; <body onload="document.form1.style.display = 'block'; document.form1.input0.focus();"> <form name="form1" style="display: none;"> HTML for(my $i = 0; $i < 50; $i++) { print qq(<input type="text" name="input$i"><br>\n); } print <<"HTML"; <input type="submit"> <input type="reset"> </form> </body> HTML 概要 1. 画面外にはみ出す量のフォーム内容をdisplay: noneしてから JavaScriptで表示します。 2. フォームにフォーカスを与えてEnterキーを押しても反応しません。 3. display: noneしなければEnterキーが効きます。 4. 一度画面内にサブミットボタンを表示させると効くようになりますが サブミットボタンを画面から外した後に更新をかけるとまた効かなく なります。 4. IE 以外では正常動作するようです(テストしたIEのバージョンは 6.0 SP2)。 説明が下手で分かりにくいかもしれませんがこれの原因の詳細と 対策はありませんか。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！ うまくできました。 実は、原因はjsにあったのではなく、cssで「overflow:hidden」となっていたのが原因でした。 ありがとうございます。