jQueryプラグインの読み込み方法とスクロールについてくる方法
- jQueryのプラグインをダウンロードする際には、任意の場所にファイルを保存できます。ただし、指定したフォルダに入れる必要はありません。
- スクロールについてくるようにするためには、scroll-followというプラグインをダウンロードする必要があります。詳しいインストール方法は掲載サイトをご覧ください。
- 読み込みやインストールについて詳しく知りたい場合は、掲載サイトの該当ページを参照してください。
- ベストアンサー
jQueryのプラグインの読み込み方
http://jquery.com/download/ から、jQueryをダウンロードするまでは分かったのですが、 ファイルはディスクトップのどこの場所でもいいのでしょうか？それとも 指定したフォルダに一緒に入れないと読み込まれないのでしょうか？ http://kitchen.net-perspective.com/open-source/scroll-follow/ ここのページにあるサンプルみたいにスクロールについてくるようにするには、 どれをダウンロードして、どこのフォルダに入れればいいのでしょうか？ 翻訳して読みましたが、うまくいきません＾＾；インストールの2～3番目を 詳しく教えてください。お願いします
- afafdasfs
- お礼率33% (1/3)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
>ファイルはディスクトップのどこの場所でもいいのでしょうか？それとも >指定したフォルダに一緒に入れないと読み込まれないのでしょうか？ 外部Scriptファイル（jQueryもこれに該当します）は、画像ファイル（img要素で指定）や外部CSSファイル（link要素で指定）と同様にhtmlからscript要素で読み込ませます。 http://www.tagindex.com/html_tag/page/script_src.html なので公開時にはhttpでアクセスできる場所にないといけません。htmlファイルと同階層（もしくは外部jsファイル用のディレクトリを作って、その中）に置けば相対パスでの指定が楽だと思います。 なお提示されたURLの例ではhtmlソースと同じ階層に置いた状態で書いているようです。 <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="jquery.scrollFollow.js"></script> 当然ですが、適当なディレクトリに入れても問題ありません。htmlソースの階層に「js」というディレクトリを作ってそのなかに入れたなら <script type="text/javascript" src="js/ui.core.js"></script> <script type="text/javascript" src="js/jquery.scrollFollow.js"></script> と編集すればいいだけです。
関連するQ&A
- 複雑なjQuery
このサイトはjQueryを使用していると思いますが、色々な要素が入ってます。 どのようなサンプルを使用しているのか分かる方教えてください。 １．ロゴがばらばらにフェードインします。 ２．下から上にページがスクロール（最初はスピードが速くて、最後は遅くスクロール）して トップページが表示されます。 ３．ロールオーバー（回転）でメニューボタンが変化してます。 ４．背景が何層かになっています。 ５．ビデオの埋め込み jQueryは初めてなので初心者です。 このサイトはとてもカッコいいです。 このようなサンプルデータが書かれている参考サイトを教えてください。 サンプルデータをダウンロードしたいです。 クリスチャン ダダのサイト http://www.christiandada.jp/
- ベストアンサー
- その他([技術者向] コンピューター)
- jqueryのプラグインをダウンロードしたい
jquery.updnWatermark.js をダウンロードしたいのですが、ファイルを紹介しているページからそのjavascriptのダウンロードページへ直で行くとOff lineと表示されます JQuery.comのトップページからplugginに行ってみると The plugins site is currently in development と表示され、現在配布されていないようです そこで他のサイトで提供してくれるところがないか探したのですが見つかりません どなたかこのファイルを提供しているサイトがありましたらぜひ教えてください
- ベストアンサー
- JavaScript
- jQuery
http://blog.daichifive.com/archives/602 このページにあるようなスクロールをさせたいのですが、 jquery.scroller.d5.jsはページ内でダウンロードできますが、 jquery.jsはどこからダウンロードすればよいのですか？ jQueryeasysliderのjqueryjsをつかってみたのですが、 上記サイトではjsファイルの最下部でスクロールさせたいものだけをカスタマイズできるとあるので、 easysliderのjqueryjsは使えないような気がします。 初歩的な質問ですみません。 あまり詳しくないです。 宜しくお願いします。
- ベストアンサー
- CSS
- jQueryでふたつの動作をさせたいのですが？
jQueryでふたつの動作をさせたいのですが、適用のしかたがわかりません。 詳しい方、教えてください。 ■その１：ページのトップに戻す http://iuser.jp/webjin/archives/2009/11/jquery-scroll-to-top-control.html この動作単独では動きました。 ■その2：マウスオーバーで画像を変更 http://www.webcreatorbox.com/tech/jquery-tips20/ その１で、プラグインのscrolltopcontrol.jsで指示する矢印画像：scrollup.gif に、 その2のマウスオーバーをかけたいのです。 その2のマウスオーバーは、<body>内に実存する画像に対応するようになっていて、 scrolltopcontrol.js内に書かれている画像に、指示すにはどうしたら良いのかわかりません。 また、この方法ではできないのなら、「その１：ページのトップに戻す」を生かして、そのボタンに マウスオーバーをかける他の方法を教えてください。
- ベストアンサー
- JavaScript
- jQueryプラグインのメガドロップダウンメニュー
jQueryプラグインのメガドロップダウンメニューについて 当方プログラミング初心者です。 至らない点ばかりですが、どうかご容赦ください。。。 この度、仕事でこのメガドロップダウンメニューを使用することになりました。 サンプルサイトです→(1)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/# (2)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/ 使用したいのは、 (1)にあるサンプル（オンマウスすると車の写真などが出てくる） スタイルは(2)にある、白色のバー なのですが、どうもうまくいきません・・・ 上記サイトからダウンロードしたもの ・jquery.js ・jquery.dcmegamenu.1.3.3.js ・dcmegamenu.css ・white.css その他素材などが、指定した名前のフォルダに入っています。 英語が読めないので、わからない単語は調べたりしてなんとかメニューとして形にはできたのですが バーの色は黒いままだし、まずドロップダウンしません。 今、この状態のまま詰まってしまっています・・・ たぶんめちゃくちゃになってしまっていると思うのですが、 どこが悪いのかわかりません・・・＞＜ ★ＨＴＭＬ（ヘッド） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ～～～ <head> <link rel="stylesheet" href="css/white.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.js"></script> <link rel="stylesheet" href="css/dcmegamenu.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.dcmegamenu.1.3.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $("mega-menu").dcMegaMenu({ rowItems: "3", speed: "fast" }); }); </script> </head> ★ＨＴＭＬ（ボディ） <div class="dcjq-mega-menu demo-container"> <ul id="mega-menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a> <ul> <li id="menu-item-1"><a href="#">Coupe</a> <ul> <li><a href="#">Citroen C4</a></li> <li><a href="#">Honda CR-Z</a></li> <li><a href="#">BMW 3 Series</a></li> <li><a href="#">Volvo C30</a></li> </ul> </li> <li id="menu-item-2"><a href="#">Saloon</a> <ul> <li><a href="#">Volkswagen Passat</a></li> <li><a href="#">Volvo S40</a></li> <li><a href="#">Vauxhall Insignia</a></li> <li><a href="#">Mitsubishi Lancer</a></li> </ul> </li> ～～～～～～～～省略 <li id="menu-item-6"><a href="#">High Performance Cars</a> <ul> <li><a href="#">Lamborghini Gallardo</a></li> <li><a href="#">Ferrari F430</a></li> <li><a href="#">Aston Martin Vantage</a></li> <li><a href="#">Porsche 911 Turbo</a></li> </ul> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Us</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> 名前はまだサンプル通りです。 ★ＣＳＳ(1)（dcmegamenu.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/dcmegamenu.css ★ＣＳＳ(2)（white.css） http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/skins/white.css つっこみ所だらけかと思います・・・すみません・・・ どこが悪いのでしょうか・・・？ 私のような初心者にはまだまだ早いプログラミングなのかもしれませんが、 どうか、お力添えをお願いできれば、、、、お願いします。
- 締切済み
- JavaScript
- safariでjQueryのDLが出来ません
jQueryのダウンロードが上手く出来ません。どなたか教えてください。 OSはMacOS10.6.8 ブラウザはsafari5.1です。 Downloderをクリックしてもソースが記述されたページがブラウザに表示されるだけでした。 http://docs.jquery.com/Downloading_jQuery からMinifiled版をダウンロードしようとしても同様の症状です。 ちなみにアーカイブについても同様でした。 よろしくお願いします。
- 締切済み
- Mac
- jQueryのダウンロードについて
はじめまして、今回の相談内容は、プログラミング言語の「JQuery」についての初歩的な質問です。 「jQueryポケットリファレンス」という本を使い勉強しています。 「jQuery.com」というサイトで、ダウンロードのボタンをクリックすると、膨大なソースコードが出てきます。 これは、コピーして、どこかのファイルに保存すればいいのでしょうか？ 初歩的な質問で大変すみませんが、どうぞよろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- 複数のjqueryを入れると動かなくなる
今サイトを作っているのですが、スライダーと違うjqueryの相性が悪い（？）か自分の記載漏れで、埋め込みをした新しいjqueryは動きますが、スライダーが動かなくなってしまいました。 サイトです：http://blackartcard.com/ ヘッダー内は下記です。 <!--Scroll to Top--> <script src="http://blackartcard.com/backtop/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://blackartcard.com/backtop/scrolltopcontrol.js" type="text/javascript"></script> <!-- ======================================= スライダー ======================================= --> <link rel="stylesheet" href="http://blackartcard.com/slider/panning-slideshow.css"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://blackartcard.com/slider/jquery.easing.1.3.js"></script> <script src="http://blackartcard.com/slider/jquery.timer.js"></script> <script src="http://blackartcard.com/slider/image-rotator.js"></script> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript"> $(document).ready(function(){ //マスオーバー時にキャンプション表示 $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'135px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160}); }); }); </script> </head> 両方とも単体では稼働します。 初心者で大変申し訳ございませんがわかる方宜しくお願い致します。
- ベストアンサー
- JavaScript
- CSSプルダウンメニューとjQueryの重なりについて
CSSプルダウンメニューとjQueryの重なりについて 下記サイト http://www.karuizawanet.com/cgi-bin/database/database.cgi?cmd=s&sc=hotel にてCSSプルダウンメニューと Simple jQuery Spy Effect（要素の自動スクロール） http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=jquery_plugin_scroll を設置していますが、 CSSプルダウンメニューが 要素の自動スクロールの下に隠れてしまい 困っています。 CSSのz-indexを入れてみましたが、改善されません。 どなたかお力添えをお願いいたします。
- ベストアンサー
- AJAX
