- ベストアンサー
jQueryのプラグインについて
- jQueryのプラグインを使用して画面上部に戻る操作を行う方法について教えてください
- scrolltopcontrol.jsを使用したトップへ戻るボタンの配置方法を教えてください
- 画面の中央に配置され、画面下よりの位置にボタンを配置する方法について知りたいです
- YOKOHAMA-Boy
- お礼率42% (23/54)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
関連するQ&A
- 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のいくつかが順番によって機能しなくなります。 干渉を起こしているのかと思うのですが、どうすれば解決できるのでしょうか？var j = jQuery.noConflict();などをやってみましたが、知識不足でうまくいきませんでした。 ・top messageのみ動く。 var j = jQuery.noConflict(); <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> ・fontsizeとtop messageのみ動く。 <!--script--> <a href="#main" class="gotop"></a> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> <!--script end--> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> jQuery(function(){ jQuery("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--script end-->
- 締切済み
- JavaScript
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </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
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- このjqueryが稀に動かない
画像が無いときに表示されるscriptですが稀に動かない時があります１０分の４位動かないです。どのようにすればよろしいでしょうか？ <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });
- 締切済み
- JavaScript
- ｊQuery。セレクタに変数を使えないケース？
Javascript勉強駆け出しの者です。ＷＩＮ7、Chromeを主に使っています。 <!DOCTYPE html> <html> <head> <meta carset="utf-8"> <script src="js/jquery-1.11.0.min.js"></script> <style> .chr{ position:absolute; } </style> </head> <body> <div id="gyoku" class="chr" style="top:60px;left:0;"> <img src="parts/gyoku.png"> </div> <div id="hisya" class="chr" style="top:120px;left:0;"> <img src="parts/hisya.png"> </div> <div id="kaku" class="chr" style="top:180px;left:0;"> <img src="parts/kaku.png"> </div> <script> var chrid; dragflg=false; $(".chr").css("position","absolute") .mousedown(function() { dragflg=true; chrid=$(this).attr('id'); }) .mouseup(function(){ dragflg=false; }); // $("#gyoku").mousemove(function(e){ $("#"+chrid).mousemove(function(e){ if(dragflg) { e.preventDefault(); $(this).css("left",e.clientX-20+"px") .css("top",e.clientY-20+"px"); } }); </script> </body> </html> 一応、シンプルにドラッグドロッププログラムを書くというのを目指したものです。 対象のキャラ（約35×50px）を3つほど用意し、mousedown時に変数chridにid名を読み込み、切り替えてドラッグドロップするという狙いですが、うまくmousemoveがいきません。mousemove行を１行上のコメント行に差し替えて個別にidを直接書けば意図通り動くのに、変数を使用するとダメなようです。ｊQuery解説サイトでも、セレクタに"文字列"+変数という書き方は使える、という説明で、"#gyoku"と chridに"gyoku"を読み込んでいる時の"#"+chrid は同じ意味と認識しているのですが、違うのでしょうか？ どうすればうまく動くのか、どなたかご教示お願いします。 ｊQueryUIを使った方が手っ取り早いというご指摘もあるかと思いますが、この際、ｊQueryのセレクタで変数が無効なケースとは何かを知りたくなってしまったので、これはこれとして教えていただければ幸いです。
- ベストアンサー
- JavaScript
- jQuery UIのdraggableについて
こちらでは初めて質問させていただきます。 よろしくお願いします。 現在、jQuery UI の draggable を使用してWebブラウザ上での ドラッグ＆ドロップを実装中なのですが、 期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内で スクロール（必須です）させています。 ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。
- 締切済み
- JavaScript
- jQuery 記述方法
今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。
- ベストアンサー
- JavaScript
- Jqueryスライダーが動きません。
WEB制作の素人です。 簡単といわれている「FlexSlider2」ですが、私がやったところ、 画像は出たもののスライドにならず、そのまま上下に出てしまいます。 一度見ていただき、間違えを教えていただけますか？ （ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 ボタンの表示位置もセンターになり、日本語のtitle表示も、utf-8に統一して文字化けが直りました。 的確な教授、感謝です。
補足
さっそく、ありがとうございます。 教えてもらった手法で、ボタンの表示位置が変わりました。 最初の質問の解決はOKですが、すみません、もう一個教えてください。 .attr({title:'Scroll Back to Top'}) という行で、オンマウスの場合の表示内容が指定できるようですが、これを「ページトップ」という日本語表示をさせたいと思っています。 今のままで日本語を入れると、文字化けします。 この.jsに修正もしくは追加で対応するのか、読み込むhtmlサイドにも修正が必要なのか、教えてください。