- 締切済み
jQuery.illuminateの使い方
jquery.illuminateを使って、ボタンを点滅させようとしています。 あるサイトのサンプルコーディングを参考にして、作ってみました。 実行させると、jquery.illuminateの中の rgb2hex（）で「１」が無効のエラーが出ます。 具体的には、下の original_color = rgb2hex(obj.css('background-color'));で、 cssのbackground-colorが亘っていないためのようで、 return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);がエラーとなってしまいます。 return this.each(function() { obj = $(this); if(obj.is("input")){ if(obj.css('border') == ''){ obj.css('border', 'none') }; } dead = false; original_color = rgb2hex(obj.css('background-color')); } function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } プログラムコーディングを一部割愛して表示します。 どこが間違っているのか教えてください。 よろしくお願いします。 <html> <head> <title>工事実行予算管理システム</title> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/common/kjiact.css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <jsp:useBean id="MNT2000_00Form" scope="request" class="jp.co.nics.kjiact.web.MNT2000_00Form" /> <Script type="text/javascript" src="common/jquery-1.9.1.js"> </Script> <Script type="text/javascript" src="common/jquery-ui-1.10.2.custom.min.js"> </Script> <Script language="JavaScript" src="common/jquery.illuminate.0.7.js"> </Script> <Script language="JavaScript"> $('#next_btn').illuminate(); </Script> <!-- CSS --> <style media="screen,projection" type="text/css"> #next_btn { background:#333333; padding:20px; color:#ffffff; width:400px; } </style> </head> <body > <td width="15%" align="left"> <div id="next_btn"><input type="button" class="next_btn" name="next" value="次へ（代価表）" onClick="toDetail();"/></div></td> </body> </html>
- Horirin39
- お礼率81% (125/154)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 ＞あるサイトのサンプルコーディングを参考にして、作ってみました。 単に設置したいだけなら、設置サンプルをそのまま実行してみて動くかどうか試してみた方が早そう。 それで動くなら、そこから変えていけばいいし、動かないなら設置方法を間違えているか、そのライブラリがご使用のブラウザに対応していないとか… jquery.illuminateって全然知りませんが、通常のライブラリではイニシャライズはDOM Ready後に設定するものが多いと思いますけれど、jquery.illuminateは自前で待つようにできているのでしょうか？ 単に設定して動かないというのなら、こちらの方が怪しいですね。 jquery.illuminateの使い方と、設定のしかたを確認してみてください。 ご質問自体が何なのか、よくわからなくなりましたけれど、 ＞rgb2hex（）で「１」が無効のエラーが出ます。 #1の回答は、ご質問文の前半に対する回答です。 CSSの指定方法を言っているのではなく、obj.css('background-color') で返される値はブラウザによって異なる可能性が高いということを言っているだけです。（もちろん指定方法にもよりますが） 一方で、関数 rgb2hex(rgb) はrgb( )形式しか受付ないようになっているみたいなので、大丈夫？って話。 ご提示の部分だけでは、this値に何が入っているのかわかりませんが（多分DOM要素のjQueryオブジェクトかな）、イニシャライズ時にrgb形式に読み替えて再指定しているのならよいですけれどね。
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかってないし、試してもいませんが… obj.css('background-color') をノーチェックでrgb( )形式と仮定しているようですが、#xxxとか#xxxxxxとか色名とかが返ってくる可能性があるのではないでしょうか？ 全てrgb( )に変換して戻してくれるんでしたっけ？ そのあたりを確認してみてください。（はずれてたら失礼）
関連するQ&A
- 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をはじめて導入したのですが、
JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。
- ベストアンサー
- JavaScript
- jQueryのfilterについて
jQuery初心者です。 .filterを使って、特定のCSSプロパティの値を持つものを検索し、抽出したもののCSSを書換えたいのですが、うまくいきません。 -------------------- z-indexの値が0以上のdivのwidthを200pxに変えるというコードを書いたつもりなんですが動きません。 ※head内 <style type="text/css"> <!-- div.animal { height:50px; border:5px solid red; background:rgb(255,140,0); } #neko { width:50px; position: absolute; z-index: 0; top: 50px; left: 50px; } #inu { width:50px; position: absolute; z-index: 1; top: 70px; left: 70px; } //--> </style> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> $('div').filter(function(){ return (parseInt($(this).css("z-index").text())>0); }).css("width","200px") </script> ※body内 <div id=neko class=animal></div> <div id=inu class=animal></div> 詳しい方が居られましたら、ご教授いただけませんでしょうか？よろしくお願いします。
- ベストアンサー
- 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 lightboxを設定しようとしていますが問題がでてます
jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>
- ベストアンサー
- JavaScript
- jqueryの色値取得について質問です。
JQueryで、SPAN要素を作成し色情報を色名で取り出したいのですが、 $('<span style="color: blue; background-color: blue"></span>').css("color") とすると値が"blue"と返ってくるのですが、 $('<span style="color: blue; background-color: blue"></span>').css("background-color") では、"rgb(0, 0, 255)"とRGB表記になって返ってきてしまいます。どうすれば色名の"blue"で取得できるのでしょうか？ブラウザはFirefox限定でお願いします。色テーブルを作って変換することなしにできないでしょうか？ どうかお知恵を下さい。
- ベストアンサー
- JavaScript
- jqueryプルダウンメニュー個別着色
すみません。デザイナーでjqueryの配布しているものをお借りしているのですが、 プルダウンメニューで、メニューの色を個別に変えたいのですが、 CSSクラス名ごとに、下記のスクリプトを書かないといけないのでしょうか？ それとも、$('.btn')のところを、＄（'.btn','.btn2','.btn3')とかって省略はできますか？ 基本を解ってなくてすみません； どうぞ宜しくお願い致しますm（＝＝）m <script type="text/javascript"> $(function(){ $('.btn').hover(function(){ var btn = $(this).find('li').length; $(this).animate({'height':24 * btn + 'px'},'fast'); },function(){ $(this).animate({'height':'24px'},'fast'); }); }); </script>
- ベストアンサー
- JavaScript
- js、 jQuery の手直しを助けてください
js, jQuery 初心者です。下記のコードの手直しを助けて下さい このコードはページ内の複数設置されたリンクのいずれかをクリックすると 背景の画像がフェードしながら変わるというものです。 例えばリンク１を押すと背景画像１がフェードしながら呼び込まれ、 リンク２を押すと背景画像２が呼び込まれるといった感じです。 このソースコードを使うに当たって問題が２つあり、 初心者の自分では手直しできないため こちらに質問させていただきました。 問題１，Firefox 4 では作動するのに、他のブラウザではうごかない。 テスト済みブラウザ→ Chrome v.11.0, IE8, Safari 5 問題２、次画像のフェードインが、前画像のアウトの後にならないと読み込みが始まらない。 これだとフェード時に画像が一時期消える（真っ白になってしまう）時間ができてしまうので 出来れば次の画像をフェードなしでストレートに読込み、その上で前の画像をフェードアウトさせたいです。 どなたか問題解決の手直し方法をわかる方がいらっしゃいましたら ぜひ教えてください [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <style type="text/css"> #wrapper { width: 100%; height:100%; background-image:url(img/img1.jpg); background-repeat:repeat;} #container{ width:1000px; height:1000px;} </style> <script type="text/javascript"> $(function(){ $("#nav a").click(function(){ var val = this.rel, layer = $("#wrapper"); layer.fadeOut(500, function(){ layer.css("backgroundImage", "url(img/"+val+".jpg)").fadeIn(500); }); }); }); </script> </head> <body> <div id="wrapper"> <div id="container"> <div id="nav"> <a href="#" id="btn1" rel="img1">background1</a> <a href="#" id="btn2" rel="img2">background2</a> <a href="#" id="btn3" rel="img3">background3</a> </div> </div> </div> </body> </html> [/code]
- ベストアンサー
- AJAX
- jquery、javascriptについて
あるdivエリア内をクリックすると、特定のチェックボックスに チェックが入るということをしています。 （チェックボックスにチェックを入れるとdiv内の色が変わります。） つまり、divとチェックを連動させたいのです。 その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、 もっと簡単にまとめる方法はないのでしょうか？ さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名で あわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。 そんなことができるのでしょうか？ 具体的に教えていただけると幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- SafariでJqueryが動きません
JqueryのEasySliderという横に画像がスライドさせる機能を導入したく、 ホームページを制作しています（WORDPRESSではありません）。 IE、FireFoxでは動作確認が出来るのですが、Safariだけ（OS LION、Iphone、Ipad）動作がしません。 また、Iphoneのデバッグコンソールを使ってエラーチェックをしてもエラーが表示されません。 何の問題が生じているのか教えて頂けたら幸いです。 JavaScriptの知識はほとんどありません。 一から制作したことはなく、いつもダウンロードしたものをそのまま使用しています。 サイトを検索した限り、原因は多分タグか何かが足りないのではとは思うのですが…何がたりないのかが分からない状況です。 ■動かないときの現象 スライドの画像がNEXTボタンをクリックしても、 一枚目の画像が固定されたまま、他の画像にスライドされません。 ■EasySliderのバージョン easySlider1.7.jsを使用しています。 ■HTMLソース <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title>★☆</title> <link href="../css/styles.css" rel="stylesheet" type="text/css" /> <link href="../★☆/css/screen.css" rel="stylesheet" type="text/css" /> <link href="★☆.dwt" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.5");</script> <script type="text/javascript" src="../▼▼/js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider').easySlider({autoPlay: false, autoPlayInterval: 5000, autoPlayReverse: false, effect: 'slide',speed: 800,showButtonBar: false}); }); </script> 色々検索で現象を調べたり他のJSを入れてみたりと策を講じてみましたが、 本当に困っています…(>_<)。他にも必要な情報があらば教えて下さい！
- ベストアンサー
- JavaScript
お礼
早速のご回答ありがとうございます。 CSSのbackground-colorに何をセットしても（＃○○○でもBLUEでも）同じ結果です。 jquery.illuminateにalertを入れて確認しましたが、空白でした。 よろしくお願いします。