IEでふきだし型のツールチップが表示されない問題について
- IEでふきだし型のツールチップを使用しているサイトで、マウスをはなすと文字だけが表示される問題が発生しています。
- safariやfirefox、クロムではふきだしは隠れるが、IEでは隠れずに表示されるというバグが発生しています。
- IEでふきだし型のツールチップを隠す方法が見つかっておらず、他のツールチップの代替案を探しています。
- ベストアンサー
ふきだし型のツールチップがIEだと
こちらのサイトの http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_tooltip Side Navigation Tooltip / Popup Bubble を使用しているのですが、 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_tooltip/sidenavigation_tooltip.inc&ttl=Side+Navigation+Tooltip+%2F+Popup+Bubble%E3%81%AE%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB ふきだしに入れている内容が多いため、縦の長さがナビより長い状態です。 一度マウスオンしてふきだしを出した後、マウスをはなすと本来なら ふきだしが隠れるのですが、文字だけが見えた状態になります。 safariやfirefox、クロムではちゃんと隠れますが、IEだけは触れた後も ナビの下から文字が見えた状態になってしまいます。 IEのバグ？というかIEには対応していないのでしょうか。 どうかご回答お願い致します。 また、探したのですがもし似たようなツールチップがございましたら 教えて頂けると助かります。 どうぞ宜しく御願い致します。
- my_alice
- お礼率80% (24/30)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
早速試して見たところ ＞IEだけは触れた後もナビの下から文字が見えた状態になってしまいます。 は再現しませんでした。でも、サンプルのコードだと、「ul.sidenav li div」の高さが、ul.sidenavの高さより大きいと、マウスアウトした位置によってちぐはぐな動作をしますね。（この現象はIE以外でも発生） この原因は、「ul.sidenav li div」が左端にanimateで戻ってくる際、'fast'を指定していても、PCがとろいとマウスの動きに、間に合わず、戻ってきてるliに対してもマウスオーバーが発生して、ぎくしゃくしちゃってますね。マウスを上方向、左方向にアウトさせるとスムーズに動きます。 対策はさておき、別のバルーンチップのライブラリーを紹介しときます。 jQueryベースの「BeautyTips」です。 http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html http://plugins.jquery.com/project/bt
関連するQ&A
- DWcs4のスニペットにこのJAVAを登録して使用
すいません。詳しい方いましたら教えてください。 DWcs4のスニペットにこのjQueryを登録して使用はできるものなのでしょうか？ http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/pirobox.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB なにぶんJAVAも超初心者なのでよくわからず... お手数をおかけいたしますが宜しくお願いします。
- ベストアンサー
- CSS
- ドリームウィーバーｃｓ４のスニペットでjQuery
すいません。詳しい方いましたら教えてください。 ドリームウィーバーｃｓ４のスニペットにこのjQueryを登録して使用はできるものなのでしょうか？ http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/pirobox.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB なにぶんjQueryとjavaスクリプトが超初心者なのでよくわからず... お手数をおかけいたしますが宜しくお願いします。
- ベストアンサー
- CSS
- ToSelectorについて（ｊQuery）
http://james.padolsey.com/demos/animateToSelector/ http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_navigationmenu/animatetoselector.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB CSSをhtmlソース内ではなく、外部ファイルに変更すると FirefoxとChromeだけアニメーションが反応しなくなってしまいます。 おそらく、 $('#navigation a').animateToSelector({ selectors: ['#navigation a:hover'], properties: [ 'background-color', 'padding-left', 'color' ], events: ['mouseover', 'mouseout'] }); を外部CSS用に作り替えるのだと思うのですが、 http://www.re-creators.jp/blog/2008/10/01_114.html 等を参考にしたのですが、具体的な書き方がわかりません。 どなたかご教授願います。
- ベストアンサー
- JavaScript
- jQuery UIを使用した画像スライダーについて
お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト＠…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか？ 素人の質問なので、わかりにくい部分はあると思いますが、 何卒、お力添えよろしくお願いします！！
- 締切済み
- JavaScript
- jQueryUI自動スライド右側リストを増やしたい
http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 上記の自動スライドなのですが、例では４項目なのですが、10項目くらいに 増やして利用したいと思っています。 単純に10個に増やすと、左の画像部分はきちんと10個目まで表示されますが、 右側は６個目から隠れたままで表示されません。 #featured ul.ui-tabs-navのheightを300pxにして、overflow:hiddenに しています。 ６個目からもカーソルと連動して右のリストを表示して動かすにはどのように したらいいのでしょうか… また、右の動くカーソルを左の画像に重なるようにはできないでしょうか？ 背景のしろが目立ちすぎる気がして… 宜しくお願いいたします！！
- ベストアンサー
- CSS
- IE7バグ？ CSS a:hover で不思議な動き
こんにちは。 なんとも不可解な事になってしまいました。 IE6・FF では問題ないのですが、IE7のみ不思議な動きが起こります。 文章で説明が難しいのでまずは【IE7】でご覧下さい。 http://homepage-tsukuru.com/type_a/ 左のメニューにマウスオンするとコンテンツ+サイドメニュー以下が上に上がります。 次に、横ナビにマウスオンするとまた下に戻ります。 サイドメニューのa:hover を無くすと動きはなくなります。 a:hover を削除する事なく、この不思議な動きを抑える方法を誰か教えて下さい～（T-T） 引き続き試行錯誤してますのでお願いします。
- 締切済み
- HTML
- マウスオーバした部分の画像を隣に拡大して表示させたいと思っています。
マウスオーバした部分の画像を隣に拡大して表示させたいと思っています。 下記URLでやっている動作そのものなのですが、実際にこのソースを使ってみたところ、文字化けしてしまう上、うまく動作しません(Ajaxのソースのようです)。 できればJavascriptを使ってやりたいのですが。。。 初心者です。 よろしくお願いいたします。 参考：http://f32.aaa.livedoor.jp/~azusa/exp3.php?f=include/ajax/jquery_plugin_zoom/jqzoom.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB
- ベストアンサー
- JavaScript
- セレクトボックス幅を小さく、選択肢の文字は全て表示
セレクトボックスの幅を小さめに指定し、選択肢の文字列は全て表示できる方法を探しています。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_forminputcustomize/dropdownchecklist.inc&ttl=%90%DD%92u%83T%83%93%83v%83%8B 上記サイトの「長いテキスト、短いコントロール」のプルダウンのようにする方法が分かりましたら、ご教示よろしくお願いします。
- 締切済み
- JavaScript
- jQuery.jTagging.jsを使った入力
現在、jQuery.jTagging.jsを使った入力支援を 以下のサイトを参考に作っています。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_other/jtagging.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 上記サイトの例のようにテキストボックスだと、問題なく動作するのですが テキストエリアにすると動作しません。 以下、上記サイトを基にして、テキストエリアでテストしたコードです。 <script type="text/javascript"> $(function() { $("#TagTextArea1").jTagging($("#TagDiv1"), ","); }); </script> ・ ・ ・ <h2>例1</h2> <p>your tags: <textarea id="TagTextArea1"></textarea> カンマ区切り</p> <div id="TagDiv1" class="box"> <a href="#" onclick="return false;">javascript</a> <a href="#" onclick="return false;">jquery</a> <a href="#" onclick="return false;">tag</a> <a href="#" onclick="return false;">cool</a> </div> jQuery.jTagging.jsを使用した入力支援は テキストエリアでは、実装することは不可能なのでしょうか？
- ベストアンサー
- JavaScript
- IE11 チェックボタン画像指定でクリックできない
初めまして。JQuery・JavaScriptの初心者で大変恐縮ではございますが、質問させていただきます。 今回、下記参考URLを参考にして、チェックボタンの画像指定に取り組みました。 参考URL http://sygnas.jp/2012/01/30/jquery%E5%80%8B%E5%88%A5%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%92%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%84%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9/ 先日、IE9・IE10においてシングルクリックで指定する事ができなかったため質問させていただき、 お力添えのおかげで無事解決する事ができました。 http://okwave.jp/qa/q8316646.html しかし、その後IE11にて動作確認を行ったところ、ダブルクリック・シングルクリックいぜんの問題として 指定すらできなくなっている事が判明しました。 IE11においてシングルクリックで実装する場合にはどのように行えばよろしいのでしょうか？ また、その他でもおすすめの方法等ございましたら是非お教えいただきたく思っております。 何卒よろしくお願い致します。
- 締切済み
- JavaScript
お礼
前回に引き続きご回答ありがとうございます。 やはりこちらのサンプルだと向いていないということでしょうか・・・残念です・・。 原因を教えて下さりありがとうございます。 そしてバルーンチップをご紹介頂き、ありがとうございます！ Big Big Bigが似たような感じだと思いソースを見ました。全て英語でどのjsを使っているのか「？？？」な状態ですが、ちょこちょこいじっていこうと思います。 本当にありがとうございました。