- ベストアンサー
Jqueryのプラグインについて
下記参考サイトのように、 ページ右端にタブのような形で告知を表示させたいと思っております。 ※「レビュー対象」という告知 参考URL：http://www.rakuten.ne.jp/gold/askashop/ Jqueryのプラグインにて、似たような事が可能でしたら ご教授いただきたいです。 よろしくお願い致します。
- piguemon
- お礼率71% (28/39)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
以下のようなスタイルとHTMLで似たようなことが再現できます。 例ではタブのような部分の色を変えているだけですが、実際の画面では背景画像をセットしておき、background-position で位置を動かすことで背景画像が切り替わったように見せているのだと思います。 <!DOCTYPE html> <html lang='ja'> <head> <title>タイトル</title> <style> * { margin: 0px; padding: 0px; } #main_container { margin: 0px 50px; background:#ffcc66; } #side_link { position: fixed; top: 20px; right: 0px; width: 50px; height: 100px; color: #ccc; background: blue; } #side_link:hover { background: red; } </style> </head> <body> <div id="side_link"></div> <div id="main_container"> 本文<br> 本文<br> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
示されたページにそれらしきものが見えないのですが？？？ 根本的に誤解されている点 HTMLとしては、次のように考えます。 ・HTML内の告知ブロックをウィンドウ、あるいはページの右端に表示したいがどのようにスタイルシートを書けば良いのでしょう。 具体的には、HTMLが <body> ・・・・ <div id="news"> <h2>・・・ ・・・・ </div> ・・・ </body> とマークアップしています。このdiv(汎用ブロック)を、ウインドウの右下に常に表示しておきたいが、スタイルシートは？ と質問されると良いでしょう。HTMLは文書構造を記述します。スタイルシートはその表現(プレゼンテーション)を指定します。
お礼
おかげさまで無事実現させることが出来ました。 ご教授いただきありがとうございました。
補足
アドバイスをいただきましてありがとうございます。 すみません。さらに文字も間違えてしまっておりました。 ※「レビュー大賞」という告知ブロックですね。 大変勉強になります。 ありがとうございました。
- t_ohta
- ベストアンサー率38% (5085/13292)
JavaScriptやjQueryを使うまでも無く、スタイルシートだけで実現可能だと思いますが、どうしてもJavaScript / jQueryを使わなければいけないのでしょうか。
補足
早速、ご返答いただきましてありがとうございます。 私自身があまり詳しくないもので「jQuery」の方が実現しやすいものだと思っておりました。 スタイルシートで実現可能ならば、それに越したことはないのでもしよろしければ、 スタイルシートで実現させるために参考になるサイトやアドバイスをご教授いただけますでしょうか。
関連するQ&A
- JQueryのプラグインに関して
どなたかご存知の方、どうかご回答をお願い致します。 下記参考URLをご覧下さい。 JQueryのプラグインまたはCSSなどで参考のページを作成したいと思います。 はじめに、表示する画像はフルスクリーン表示、そして左上にある、メニューを配置して メニューごと画像が切り替わる。 最後に左右→を表示して切り替えできる。 上記の内容に近いもので、JQueryのプラグインまたCSSなどで出来るのでしょうか。 ネットで毎日調べていますが…なかなか見つからずで…こちらにたどりつきました。 お手数ですがどうぞ宜しくお願い致します。 ※backgroundは静止画を導入します。 参考URL https://www.facebook.com/paper
- ベストアンサー
- JavaScript
- jQueryプラグインについて教えてください
こちらのサイトのTOPページ http://www.domainedeverchant.com/fr/hotel-luxe-montpellier を実現できるjQueryプラグインはありますでしょうか？ 自分でも調べているのですが、キーワードのボキャブラリが乏しくて うまく検索できません。 ということで、ダイレクトに質問させて頂きました。 お手数ですが、ご教授頂ければ幸いです。 よろしくお願いします。
- 締切済み
- CSS
- illuminatというJQUERYのプラグイン
illuminatというJQUERYのプラグインを下記サイトに導入したのですが全く光りません。 どこに問題があるのでしょうか？ sample1.digi2.jp/sample/ また、こちらのプラグインは商用可と聞いたのですが、特にリンクを付けないといけないなど規定も無く使えるのでしょうか？ 英語なのでコマーシャルもかと言う部分しかわかりませんでした。 ご存知なかたがいましたら教えてください。
- ベストアンサー
- JavaScript
- jQueryプラグインの併用について
jQueryプラグインの併用について 失礼します、WEB制作初心者です。 現在jQueryのプラグインであるcolorboxを使用し、 以下のように外部ファイル（PHP）を読み込んでいます。 $(document).ready(function(){ $("#inline").colorbox({ contentWidth:"500px", contentInline:"#inline-content" }); }); この際、読み込んだPHP内で同じくjQueryプラグインである FlexPlayerをお借りして、音楽を再生しようとしたのですが・・・ 個別では動作するものの、併用すると外部ファイルが読み込まれた後、 プレイヤーの表示がされるだけで、再生ボタンを押しても反応がない状態です。 情けない話ですがリファレンス等を見ても自力では解決できず 悩んでいたので、こちらでお伺いすることにした次第です。 これらのプラグインは同時に使うことはできないのでしょうか、初心者丸出しの 質問で申し訳ないですが、参考になるページだけでも教えてもらえたら幸いです。
- ベストアンサー
- JavaScript
- jquery easingプラグイン
下記サイトのeasingプラグインを利用しております。 http://gsgd.co.uk/sandbox/jquery/easing/ ここにeasingを追加する方法がお分かりでしたらお願いします。 $(text01).animate({"right":"20px"},{"duration":2500,queue:false});
- 締切済み
- JavaScript
- jQueryの基本的なことについて教えてください
自サイトで 「jQuery Slider²」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 （google chrome、IE8で見ています） 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか？ それとも、このプラグインに限ってはxhtmlなのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ページ遷移時にスライドするjQuery（Ajax）
クリックして、ページを遷移した際にスライドで表示してくれるjQueryを探しています。 詳細はサイトをご参照の上、下記の文言をご確認ください。（サイト内右側のSOLUZIONIをクリックしてください） http://www.galvanmobili.it/ 上記URLのサイトのように複雑な動きはいりません。 単純に横にスライドしたいです。 A B と表示されていて、Bをクリックすると ←B C とスライドで表示ができるようにしたいです。 Cを画像にしてスライドショーとして使用するのではなく、あくまでページが遷移して欲しいです。 参考サイトのようにCは下にスクロールすることができます。 検索してみたのですが、スライド前に一度フェードで切り替わったりするjQueryが多かったので、プラグインの名前や参考サイト等知っている方いらっしゃれば教えて下さい。
- 締切済み
- CSS
- jQueryイメージギャラリーに関しての質問です。
jQueryに関して。下記URLを参考に、イメージギャラリーを設置しました。 http://www.webdesignerwall.com/demo/jquery/img-replacement.html この、大きく表示されている画像に対して、さらにリンクを設定し、画像をさらに大きく表示させられるようなjQueryプラグインはあるでしょうか。 たとえばこの画像は 550px × 400px となっていますが、さらにこの画像をクリックすることで、別に用意された倍のサイズの画像をlightbox効果を付けて表示できるような、そういったプラグインです。 また、この画像が表示されている部分に、別のHTMLファイルを表示させられるようなプラグインがあるかどうかも知りたいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryプラグイン「Skitter」について
jQueryのプラグイン「Skitter」の表示で、thumbsの表示で質問させてください。 http://thiagosf.net/projects/jquery/skitter/ 表示には「Numbers」「Dots」「thumbs」の3種類あり、「thumbs」でサイト作りをしているのですが、 「Numbers」「Dots」では表示されるlabelが、「thumbs」では表示されず、困っています。 javascriptの設定は下記のようにしています。 <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({thumbs: true, label: true}); }); </script> labelを表示するかしないかで、“label: true”にしているのですが、これでは表示されません。 オプションを見ても、そのあたりの記載が見当たらず、どこを調整すればいいのか分らずにいます。 どなたかご存知の方、いらっしゃいましたらご教授をお願い致します。m(__)m
- ベストアンサー
- JavaScript
- jQuery Cycle Pluginについて
JavaScriptで、右から左に自動で画像が流れるスライドショーを表現するために、 現在いろいろなプラグイン等を見ています。 その中に、「jQuery Cycle Plugin」というのがあったのですが、 こちらのサイトに行き all となっているファイルのダウンロードを するために対象のリンクをクリックすると、なぜか403エラーになってしまいます。 こちらはすでに配布を終了してしまった、ということなのでしょうか？ 試しにと思い、同じページにあるLite Pluginを設置しても、 私の望む動きは得られませんでした。 同じようなプラグインを使用中の皆様、どうかご意見やご指摘、アドバイスをいただけないでしょうか？ ※ちなみに、正常に動いているサイトさんでは、jQueryは1.2.6を、 ※「jQuery Cycle Plugin」のallを使用していました。
- ベストアンサー
- JavaScript
お礼
試したところ、実現することが出来ました！ ご親切にご教授いただきまことにありがとうございました。 困っていたので大変助かりました。
補足
ご教授いただきましてありがとうございます。 さっそく試してみたいと思います。 大変ご丁寧なアドバイスをいただきまして、 感謝しております。