- 締切済み
jqueryの書き方について
知識のある方教えて頂ければと思います。 １ページのみにjsをきかせるため、１ページに複数のjsを書こうと思っています。 そこで1つのjsファイルで全てのjsを書こうと思っているのですが、 ライブラリのような感じで、上部にそのjsのタイトル(例：rollover)などを書いて、 使わない場合は上部のタイトルのみをコメントアウトすれば効かなくなるような記述ができれば 楽なのですが、もしそのようなやり方がございましたらご教示お願いできませんでしょうか。 また、 $(function(){ //ロールオーバーの記述 }); $(function(){ //スライドショーの記述 }); のように$(function(){})を複数記述するのは問題ございますでしょうか。 私自身いろいろ調べましたが、わからず教えて頂けませんでしょうか。 どうぞ宜しくお願い致します。
- yukiponta
- お礼率53% (62/115)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- piraippi
- ベストアンサー率27% (47/168)
関連するQ&A
- jQueryにて複数ライブラリを動かす
wordpressにてWEB制作を行っています。 jQueryにてfullpage.jsというフルページスクロールするライブラリを使用しております。 そのセクションの一つをfullpage.jsの機能の一つ横スライドを行っているのですが、 fullpage.jsのオプションには自動再生はありません。 スライド部分のみ自動再生を行いたいので bxslider.jsというライブラリを使用し、 横スライドしたいセクションをbxsliderで動かしたいのですが、 bxsliderが全く作動しません。 また <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider(); }); </script> の記述を <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#fullpage').fullpage(); }); の上に書くと今度はfullpageが動きません。 jQueryライブラリは同ページで二つ同時には動かないんでしょうか？ また、書き方が間違っていますでしょうか？ 宜しくお願い致します。
- 締切済み
- JavaScript
- ロールオーバーのJava Scriptの書き方
ロールオーバーに関するJava Scriptの書き方教えてください。 $(".js_rollover_png").hover(function(){ $(this)[0].src=$(this)[0].src.replace("-off.png", "-on.png"); },function(){ $(this)[0].src=$(this)[0].src.replace("-on.png", "-off.png"); }); 上記でPC上では問題ないのですが、iphoneなどでロールオーバー画像をクリックしページ移動後、 元ページに戻るとロールオーバー画像が消えて見えなくなってしまいます。 初心者なので少しどうしたらいいか煮詰まってしまいましたので、お知恵をお貸し頂けませんでしょうか。 できましたら、どのように記述すればいいか記述例を教えていただければ幸いです。 ヨロシクお願い致します。 補足ちなみにiphoneなどスマホ、タブレットでロールオーバーは再現されなくてもいいです。 クリック後画像が消えなければそれで満足です。
- 締切済み
- JavaScript
- 同HTML内で複数のjQueryを設置する方法
複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、 片方のみしか作動しません。 色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。 http://stacktrace.jp/jquery/with_other_lib.html こちらのサイトでは意味がわからず・・・ 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="js3/accordian.pack.js"></script> <script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js2/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="js2/jquery.timers-1.1.2.js"></script> <script type="text/javascript" src="js2/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ filmstrip_size: 6, frame_width: 145, frame_height: 160, background_color: 'transparent', nav_theme: 'dark', border: 'none', show_captions:true, caption_text_color: 'black' }); }); </script> ---------------------------------------- タブメニューがaccordian.pack.js、 その下のすべてがスライドショーのものです。 スライドショーはこちらを参考にしてつくりました。 http://spaceforaname.com/filmstrip.html 本当に困っております。 どうかご回答お願い致します。
- ベストアンサー
- JavaScript
- jqueryのscrollfollowが動かない
jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか？ スライドショー用のスクリプトを記述すると、動かなくなります。 スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。 おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと 思いますが、解決方法はあるのでしょうか？ どたなか、よろしければお助けください。 以下が、現在のソースです。 （「※」マークのところがそのスクリプトの記述部分です） ----------------------------------------------------------- <!-- JS -->（※ここからがscrollfollowのスクリプトです。） <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('#sidebar1').scrollFollow({ speed: 500, killSwitch: 'sidebar12' }); }); </script> （※ここまでがscrollfollowのスクリプトです。） <script type="text/javascript" src="smoothscroll.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function backToTop() { var x1 = x2 = x3 = 0; var y1 = y2 = y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } x3 = window.scrollX || 0; y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); window.scrollTo(Math.floor(x / 2), Math.floor(y / 2)); if (x > 0 || y > 0) { window.setTimeout("backToTop()", 25); } } //--> </script> （※画面一番上メインにスライドショーを設置していて、ここからがそのスクリプトです。 下記のスクリプトを削除するとscrollfollowは正常に機能してくれます。記述すると動きません。） <!--スライド--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script> <script type="text/javascript"> $(function(){ $('.slideshow').panelGallery(); }); </script> （※画面一番上メインにスライドショーを設置していて、ここまでがそのスクリプトです。） ------------------------------------------ 以上です。 よろしくお願いいたします！
- ベストアンサー
- JavaScript
- jquery(galleryview)の改修したいのですが。。
写真＋コメントを自動にスライドして表示出来るギャラリーを作成するために、jqueryのライブラリ（garreyview.js）を改修してみたのですが、 上手くカスタマイズが出来ません。(>_<;) 且つ、左右の矢印ボタンを押すとひとつずつ移動していくものを作りたいのですが・・・具体的にどう改変すればよいのかまったく検討がつきません。 参考サイト、もしくは違うライブラリでもよいのですが、 なるべくイメージに沿う形のものを教えていただけませんでしょうか？？
- ベストアンサー
- JavaScript
- jqueryのロールオーバーについて
jqueryのロールオーバー設定に関してご質問です。 あるサイトのコーディングを行ってます。 サイト内のナビーゲーションボタンを瓶の画像でまとめてます。 各瓶の画像にリンクを付け、 マウスを乗せるとその瓶が開いた画像が 切り替わりでフェードインの感じで出てくるという設定を目指しているのですが、 うまくいきません。 色々やった結果マウスを当てると、 切り替わりで空いた瓶がフェードで出るのですが、 その画像奥に閉じた瓶がそのまま残ってて重なってる感じです。 こちらはどのようにすれば上手く画像奥の瓶は消えるのでしょうか？ ちなみに画像はpngです。 フェードの切り替わりは是非そのまま使用したいと考えてます。 あとマウスを外せばまた閉じた瓶がフェードで出るという感じを目指してます。 どなたかご教示いただいてもよろしいでしょうか？ 一応下記htmlとjsコードも載せておきます。 ▼html <script src="../lib/jquery1.8.1.min.js"></script> <script src="../js/jquery.tgImageRollover.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgImageRollover({ selector : 'img.rollover', // セレクタ ←(7) attach : '_on', // ファイル名末尾句 ←(8) onFadeTime : 600, // カーソルON時のアニメーション時間 ←(9) offFadeTime : 400 // カーソルOFF時のアニメーション時間 ←(10) }); }); </script> <a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50"></a> <a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50"></a> ▼jquery.tgImageRollover.js ;(function($){ $.fn.tgImageRollover = function(options){ var opts = $.extend({}, $.fn.tgImageRollover.defaults, options); $(opts.selector).each( function(){ this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2"); this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;">'); $(this).before(this.onHtml); $(this.onHtml).hover( function(){ $(this).stop().animate({'opacity': '1'}, opts.onFadeTime); }, function(){ $(this).stop().animate({'opacity': '0'}, opts.offFadeTime); } ) } ) } // default option $.fn.tgImageRollover.defaults = { selector : 'img.rollover', attach : '_on', onFadeTime : 600, offFadeTime : 400, }; })(jQuery);
- 締切済み
- JavaScript
- Jqueryの干渉について
Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- jQuery GalleryViewスライドショー
http://spaceforaname.com/gallery-customized.html このスライドショーを使いたくて色々と試していますが（ローカル環境・IE8） １） オーバーレイ部分に表示されるテキストの位置、大きさの設定方法が分かりません。 ２） カーソルを画像に持っていった時にスライドショーがストップするハズなのですが止まりません。 ３） 画面上部の矢印ボタン（←・→・↓）が表示されません。 ４） JSに色々なバージョンがあり、どの組み合わせが最適なのか分かりません。 XP-Pro SP3,Dreamweaver8で製作しております。 どなたかお助けください。
- ベストアンサー
- JavaScript
- jqueryでスライダーを設置した時に
jqueryでスライダーを設置した時に設置したページのテキストが画像がスライドするタイミングで点滅してしまうようです。 現象が起こっているのはMacのsafariとchromeです WindowsのIEやモダンブラウザ、MacのFirefoxではオッケーのようです。 ちなみにコンテンツスライダーは、glide.jsやbxslider.jsです。両方とも同じ現象が起きます。 chrome はwebkitではなくなりましたし、、、 該当ページでは、スティッキーヘッダ、トップへ戻るボタン、ロールオーバーや複数のタブパネルなど、jQueryの塊のようなページになっておりまして、、、 ただ、それらをすべて無効にして、スライダだけを実装状態にしても同じようです。 スライダーそれぞれのCSSをみてみましたが、同ページにあるCSSの他のセレクトと同名のセレクタはないようです、、、 どなたか似たような現象を解決された方がいらっしゃいましたらご教示願えますでしょうか？
- 締切済み
- JavaScript
- jqueryでスライドショーができない。。
jqueryでスライドショーを完成させたいのですが、 以下の記述ではページを読み込むと最初の１枚目の画像が現れて、 消えたところで止まってしまいます。 この動作を繰り返して次々と画像を変えていきたいのですが、 どう修正すれば動くでしょうか？ お分かりの方、ご教授ください＞＜； よろしくお願いします。
- ベストアンサー
- JavaScript
- DCP-J926NはIPアドレスが分からないという問題が発生しています。解決策を教えてください。
- Windows 11にアップデートした環境でDCP-J926NのIPアドレスがわからない問題が発生しています。無線LAN接続を使用しています。
- DCP-J926NのIPアドレスの場所が分からないため、困っています。ひかり回線を使用しています。
お礼
ありがとうございます。一応jsは書けるので大丈夫です。jsの応用的なもので質問させていただきました。