• ベストアンサー

jQueryアコーディオンについて

noname#163110の回答

  • ベストアンサー
noname#163110
noname#163110
回答No.1

上記のサイトのソースを見たのですが・・・ /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); -moz-transform-origin: 20px 0px; ・・・とあるので /* Opera */-o-transform: rotate(-90deg); -o-transform-origin: 20px 200px;(←200は適当) でとりあえず回転しましたよ。(01とか02も回転したのですがw) なので回転(rotate)を制御している部分を探していけばいいんじゃないでしょうか? パソコンがIE9なのでIE8はチェックできません。 そこらへんはjQuery Easy Accordion Plugin IE8とかで検索すれば良いかと思います。

gspopo
質問者

お礼

教えて頂いた内容をもとにちょこちょこ弄りましたらOperaとIE9はなんとかなりました! ありがとうございます! IE6で新たな問題が生じたのですが、それは改めて質問します。 本当にありがとうございました。

関連するQ&A

  • jQueryアコーディオン(IE6の対応)

    どなたかご教授頂けると嬉しいです。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-easy-accordion.html 上記のjQueryがIE6対応とあるのですが、実際に表示を確認してみると崩れてしまっています。 どうにかIE6で正常に表示出来ないか試行錯誤しているのですが上手くいきません……。 もしわかる方がおられましたら教えてください。 宜しくお願いします。

  • アコーディオンメニューの最初に開く場所について

    こちらのサイト http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-simple-accordion.html で紹介されているアコーディオンメニューを使用しているのですが アクセス時に自動で開く場所の変更を行う場合 どの様に変更をしていいのかわかりません。 //Set default open/close settings $('.acc_container').hide(); //Hide/close all containers $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container おそらくこの部分ではと思うのですがどうにもうまくいきません。 ご教授お願いいたします。

    • ベストアンサー
    • AJAX
  • 画像を回転させる方法

    質問させてください。 今、下記のような画像をドラッグとホイールで360度回転させる機能 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-reel.html に、更にスライダー機能(http://zack.dtiblog.com/blog-entry-15.html)も使える様にしたいのですが、参考サイトも見つからず、うまい事組み合わせようとしても実装できません。 もしわかる方いらっしゃいましたら教えて頂ければと思います。 何卒宜しくお願い致します。

  • dreamweaverCS6 CSSwidget

    以下のような機能はあるのでしょうか? 挿入パネルなどの項目自作、例えば、画像リンクのhoverで画像を透過させる下のリンクのような噴出しツールチップ、下のリンクのような付箋紙挿入などのような、頻繁に使うデザインをテンプレートあるいは自作ライブラリのような形でdreamweaverに登録することは可能でしょうか? http://coliss.com/articles/build-websites/operation/css/css3-only-tooltips-by-paulund.html http://coliss.com/articles/build-websites/operation/css/css-tutorial-sticky-notes-with-css3.html

    • ベストアンサー
    • CSS
  • jQueryアコーディオンでリストウィジェット表示

    jQuery UI Accordionというjavascriptを使用しているのですが、Twitterのリストウィジェットを入れるとウィジェット内のリンクが機能しなくなってしまいます。 どのようにしたら良いでしょうか。 http://jqueryui.com/demos/accordion/ 上記のサイトの一番上にあるアコーディオンを使いました。 下記のページをiframeで表示しています。 http://www.seraphen.com/ff14/accordion.html

  • Queryのプラグイン(jAni)を 全画面表示

    背景画像をアニメーションさせるjQueryのプラグイン(jAni)を、 全画面表示にさせる方法を教えてください。 全くのjQuery初心者で、本当に困っています。 助けてください。お願いいたします。 jQueryのプラグイン (jAni)を導入したのですが、 全画面で表示させなければならなくなってしまい どうしようもなく困っています。 URL 背景画像をアニメーションさせるjQueryのプラグイン -jAni http://coliss.com/articles/build-websites/operation/javascript/jque... ソースの19行目と20行目で表示の大きさを決めているところまでは分かりましたが 何をどう変えればいいか、行詰ってしまいました。 宜しくお願いいします。 18行目 function _build(){ 19行目 element.width(settings.frameWidth); 20行目 element.height(settings.frameHeight); 21行目 element.css('background-position', '0 0'); 22行目 };

  • jQuery UI Accordion Plugin(jQuery U

    jQuery UI Accordion Plugin(jQuery UI アコーディオン プラグイン)でアコーディオンメニューを作っています。 下記のような要素を ↓html <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> プラグインを読み込んで ↓javascript $("#accordion").accordion(); みたいな簡単な記述でアコーディオンメニューが実装できます。 サンプルURL:http://jquery.bassistance.de/accordion/demo/ これを自動で上から順に一定間隔で展開するようにしたいのですが(クリックして展開する動作も生きで)、 動きイメージ:http://www.au.kddi.com/ aubyKDDIサイトの左側のメニュ↑ このプラグインを使わないやり方とかでもいいです。 ご教授の程お願いいたします。

  • jQuery UI accordionの改造

    jQueryについて質問させていただきます。 ただいま、jQuery UIのアコーディオンのプラグインを用いてWebサイトを制作しているのですが、このプログラムを少々改造したいと考えています。 行わせたいアクションは、jQuery UIを反映させたナビゲーション(video, photo, illust, text, contact といった具合にカテゴリーを設けています)に置かれているリンクをクリックした際に、そのリンク部分(例えば、videoというカテゴリーを選択したときにはvideoというコンテンツ名)とアコーディオン内に格納されている内容を上に向かってアニメーションさせる、といったものです。 浅学なうえ、javascriptやactionscriptなどのプログラミングが非常に苦手で手詰まりの状態です。 拙い説明ではございますが、よろしければ皆さまならどのように解決するかを教えていただけませんでしょうか? よろしくお願いいたします。

  • jQueryの関数内の変数について教えてください

    jQueryで外部の関数の中にある変数の値の取得方法について教えてください。 文法等全く分かっていない、初心者で大変恐縮しております。 外部にある変数の値を取得し、その値を必要な変数に代入したいと思っております。 下記に大まかなコードを記述いたしました。 サイトを開いた時に「mLivre」を実行し、リサイズ処理をした時に もう一度「mLivre」を実行しております。 「var mLivre」内にある数値を、「jQuery(window).resize」の中の 「 jQuery.fn.mLivre」の中にある変数に代入しようと思っております。 私のやりたいことは、「mLivre」というプラグイン(下記※参考サイト)を レスポンシブにしたいと思っております。 「mLivre」は画像を本の様にめくってくれるスクリプトです。 下記のコードの流れで、ブラウザサイズに合わせて表示の大きさを 変えることができましたが、リサイズするごとに初期化され ページが1ページ目からになってしまうので、 リサイズ後も変わらないページで表示させたいと思っております。 ※参考サイト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html 全くの初心者で大変恐縮しておりますが、 ご享受いただけたらと思います。 また、記述についてもご指摘いらだけたら幸いです。 宜しくお願いいたします。 -------ソースコード---------- //実行外部ファイル jQuery('#slide').mLivre({ }); //コアファイル (function(jQuery) { jQuery.fn.mLivre = function(options,num) { }; jQuery(window).resize(function(){ var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 } jQuery.fn.mLivre = function(options,num) { //この中の変数に代入したい }; jQuery('#slide').mLivre({  //リサイズ後の実行部 }) ; }); })(jQuery); var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 }

  • セレクタでidは使わない?

    http://coliss.com/articles/build-websites/operation/css/css-lint-rules.html のサイトで、 「セレクタでidは使わない セレクタでの指定にはidではなくclassを使用するようにします。 idは再利用しにくいです。」 と書いてあるのですが、IDは使わず、全てCLASSにするといいということでしょうか?

    • 締切済み
    • CSS