babu_baboo の回答履歴

全1286件中141～160件表示
  • JavaScriptでテキストボックスの追加

    下記のコードはただ文章を追加するコードです ここまでは勉強して自分で組んでしっかり動きます この文章を追加するところをテキストボックスにして保存したいのですが その方法がわかりません どこをどう変えれば出来るのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <script> function addNode(){ <!--追加する子ノードを生成--> var kodomo = document.createElement("p"); <!--このノードのタグで囲まれている部分のテキストを設定--> kodomo.innerHTML = "これが追加されたｐの領域"; <!--どこに追加するのか親ノードを指定--> var tuika = document.getElementsByTagName("div").item(0); <!--ここから子ノードを追加する命令--> tuika.appendChild(kodomo); } </script> </head> <body> <h1>ノードを追加します</h1> <!--初期状態は何にもなし--> <div></div> <div> <p>ここはHTMLで書かれているテキスト</p> </div> <!--ボタン--> <button onClick="addNode();">追加</button> </body> </html>

  • 最も多くチェックされた項目を調べる

    javascriptで最も多くチェックされた項目を調べて それぞれのページに分岐するようにしたいです。 以下はサンプル <form onSubmit="return color(this)"> 好きな動物は？ <label><input type="radio" name="q1" value="A">うさぎ</label> <label><input type="radio" name="q1" value="B">カメ</label> <label><input type="radio" name="q1" value="C">イルカ</label> <label><input type="radio" name="q1" value="D">くま</label> 好きな場所は？ <label><input type="radio" name="q2" value="A">空</label> <label><input type="radio" name="q2" value="B">森</label> <label><input type="radio" name="q2" value="C">海</label> <label><input type="radio" name="q2" value="D">畑</label> 好きな食べ物は？ <label><input type="radio" name="q3" value="A">豆腐</label> <label><input type="radio" name="q3" value="B">ブロッコリー</label> <label><input type="radio" name="q3" value="B">なす</label> <label><input type="radio" name="q3" value="D">ハンバーグ</label> <input value="診断"> </form> 答えは以下のようにしたいです。 Aにもっとも多くチェックされた=あなたは白が好き Bにもっとも多くチェックされた=あなたは緑が好き Cにもっとも多くチェックされた=あなたは青が好き Dにもっとも多くチェックされた=あなたは茶色が好き これはどういった計算で書けばいいのでしょうか？ 本やネットを探してみましたが自分ではわかりませんでした。 初歩的な質問かもしれませんが何かヒントをくれると幸いです。

  • javascriptで画面サイズごとの表示

    スマホからサイトにアクセスがあった場合に画像を非表示にしたいのですが、うまくいきません。 もともとCSSで試してみたのですが、私のiPhone５ｓでは普通に表示してしまいました。 @media only screen and (max-width: 900px){ .screensize { display:none;} } ブラウザでは900いかにするとちゃんと消えます。文法エラーというわけではないです。 iPhoneの画面は９００PXもないので別の要因で邪魔されているのだと思います。 よって、別の方法javascriptで画像を非表示にしてみたいと思っています。 <script> var orient = window.onorientation; if(Math.abs(window.orientation) === 0){ /*alert("表示なし");*/ } else { /*alert("表示あり");*/ document.write("<img >"); } </script> このように書いてみたのですがそもそもPC側でも表示されなくなってしまいました。 「/**/」のコメントアウトを外すとポップアップは表示されるので、 document.write("<img >"); 個々の部分の書き方だとおもうのですが、さっぱりわかりません。 よろしくお願いします。 <script> var orient = window.onorientation; if(Math.abs(window.orientation) === 0){ alert("縦向き"); document.write("表示する文字列"); } else { alert("横向き"); document.write("表示する文字列"); } </script>

  • 【Javascript】多次元配列の位置取得

    Javacript初心者です。 多次元配列の特定要素を含む配列の位置(何番目の配列要素か)を取得したいのですが、 わからず、お力を貸していただけないでしょうか。 下記testArrayにおいて、bloodの値に「ab」を持つ配列要素が何番目かを取得したいです。 この場合、「3」番目ということを取得したいです。 ---------- var testArray = [ {"name":"yamada","age":30,"weight":62,"blood":"a"}, {"name":"tanaka","age":28,"weight":58,"blood":"b"}, {"name":"kamimura","age":46,"weight":65,"blood":"o"}, {"name":"takahashi","age":21,"weight":70,"blood":"ab"} ]; ---------- 単純に、下記のようなindexOf要素では調べることができませんでした・・・ testArray.indexOf("ab") 多次元配列での要素の位置取得をお教えいただけませんでしょうか。

  • イベントリスナーの部分を関数にしたい

    イベントリスナーの部分で、「load」以外に「change」も必要になったので関数にしたいのですが、 引数の関数の指定方法がわかりません。 どうすればいいのでしょうか。よろしくお願いします。 【イベントリスナーを関数にする前】 function hoge(){ this.view = function(){ var _this = this; window.addEventListener( 'load',function(){ _this.foo()}, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view(); 【やってみたこと】 function hoge(){ this.view = function(){ var _this = this; var func = function(){ _this.foo()}; this.addListener( 'window', 'load', func ); } this.addListener = function(elem,type,func){ elem.addEventListener( type,func, false ); } this.foo =function(){ var txt = document.createTextNode( this.moji ); document.body.appendChild( txt ); } } var a =new hoge(); a.moji="テスト"; a.view();

  • Table内TDの子要素を移動させたいのですが・・

    初心者的な質問になるかもしれませんが、宜しくお願いします。 唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。 <DIV>.....</DIV> ← (*) <Table> <TR> <TD>　　←　(1) <SCRIPT ........</SCRIPT> <A HREF="">........</A> <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD>　　←　(2) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD>　　←　(3) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> </TABLE> (1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。 この(1)～(3)のTDの子要素部分だけを抽出し、(*)の DIVタグの真下に移動させるようなjquery文を作りたいのですが、 http://d.hatena.ne.jp/replication/20120113/1326382090 等の記事を参考に、 var cells, tblcell; // テーブルタグを探して、１番目のテーブルを取得する var rows = $("table")[0].rows; // 列を１つずつ取り出す $.each(rows, function(i) { cells = rows[i].cells; // 行を１つずつ取り出す $.each(cells, function() { // tdタグの値を書き換える tblcell = $(this).detach(); console.log(tblcell); // tdタグのスタイルシートを書き換える $('div').after(tblcell); }); }); このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。 そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、 中々うまいやり方がみつかりません・・・ なにか、よい方法はございませんでしょうか？

  • EventListener による関数呼び出し

    GMのスクリプトで、ボタンクリックにより、任意の テキストの非表示を切り替える機能に取り組んでいます。 端的な質問内容は下記の『問題点』に記していますが、 根本的な実装方法が適当でないという可能性もあると 思いますので、すべてのコードと、目的の機能について 順に説明させていただきます。 『目的の機能』 GMのスクリプトで、ボタンクリックにより、任意の テキストの非表示を切り替える 『実装方法』 具体的な方法としては以下のような内容です。 ・ページ内にランダム数ある <pre> タグ数を xpath の snapshotLengh で得る ・ループで各 <pre> タグの直前に、<form> を追記する ・ループで各 <pre> タグを <div id="dispX"> で囲む // タグ追記後の HTML // <form> <input type="button" value="Display"> <input type="button" value="UnDisplay"> </form> <div id="disp1"> <pre> テキスト </pre> </div> ...... <form> <input type="button" value="Display"> <input type="button" value="UnDisplay"> </form> <div id="disp2"> <pre> テキスト </pre> </div> ・クリックにより eventListener で関数を呼び出して、そのときの 引数が 0 と 1 で style.display = "block" と "none" を切り替える ・切り替える対象は document.getElementById("dispX") で得る　　※ここが問題 『現在期待通りに動作している部分』 タグの追加は期待通りに動作している。 EventListener の引数は、Dispaly クリック時に 0 Undispaly クリック時に 1 が関数 hyoji() に渡されており、期待通り。 『問題点』 以下のEventListener において、 i = 1 のとき、document.getElementById にて disp1 を対象として得たい。 同様に、i = 2 のときは disp2 を対象として得たい。 しかしながら、現在のコードでは(当然ですが。。）　 i の値に寄らず、getElementById で得られる対象は disp に固定されてしまっている。 eval("addInputUndisplay"+i+".addEventListener('click',function(){hyoji(1);}, false);"); function hyoji(num) { if (num == 0) { document.getElementById("disp").style.display = "block"; } else { document.getElementById("disp").style.display = "none"; } } 上記問題点を解決できるような EventListener の使い方や、別の実装方法のヒントなどが ありましたらご教示いただけないでしょうか。 宜しくお願い致します。 ==================== GM の全ソースコード ==================== var i, num; var allObj = document.evaluate("//pre", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (i = 0; i < allObj.snapshotLength; i++){ // Adding <div id="disp"> before target <pre> tag var range = document.createRange(); var newNode = document.createElement("div"); eval("var addId"+i+"= document.createAttribute('id');"); eval("addId"+i+".nodeValue = 'disp"+i+"';"); eval("newNode.setAttributeNode(addId"+i+");"); var thisObj = allObj.snapshotItem(i); range.selectNode(thisObj); range.surroundContents(newNode); var addForm = document.createElement("form"); // Display Button eval("var addInputDisplay"+i+"= document.createElement('input');"); var addTypeDisplay = document.createAttribute("type"); addTypeDisplay.nodeValue = "button"; var addValueDisplay = document.createAttribute("value"); addValueDisplay.nodeValue = "Display"; eval("addInputDisplay"+i+".setAttributeNode(addTypeDisplay);"); eval("addInputDisplay"+i+".setAttributeNode(addValueDisplay);"); eval("addInputDisplay"+i+".addEventListener('click',function(){hyoji(0);}, false);"); // Undisplay Button eval("var addInputUndisplay"+i+" = document.createElement('input');"); var addTypeUndisplay = document.createAttribute("type"); addTypeUndisplay.nodeValue = "button"; var addValueUndisplay = document.createAttribute("value"); addValueUndisplay.nodeValue = "UnDisplay"; eval("addInputUndisplay"+i+".setAttributeNode(addTypeUndisplay);"); eval("addInputUndisplay"+i+".setAttributeNode(addValueUndisplay);"); eval("addInputUndisplay"+i+".addEventListener('click',function(){hyoji(1);}, false);"); // Adding buttons newNode.parentNode.insertBefore(addForm, newNode); eval("addForm.appendChild(addInputDisplay"+i+");"); eval("addForm.appendChild(addInputUndisplay"+i+");"); } function hyoji(num) { if (num == 0) { document.getElementById("disp").style.display = "block"; } else { document.getElementById("disp").style.display = "none"; } } ==========================

  • jQueryを使ってドラムロールを作りたい

    どなたかお力をお貸しいただきたいのですが、 http://mantiddesign.com/archives/10843 このようなドラムロールを作りたいのですが、どのサイトを調べても 本を読んでも詳細な作り方は書いてありませんでした。 また、こちらのプラグインは有料とのことです。 無料で作れないものでしょうか・・・。

  • 最後までスクロールしたら通知。

    ページの最後までスクロールしたら、次のページを読み込む、というようなことを やりたいと思っています。 調べたところ、jQueryを使えばできそうでしたので、以下処理を入れました。 var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { //次の処理 } PCで見る限りは問題ないのですが、タブレット端末（Nexus7で確認できました）で 見たところ、判定部分で0にならず困っています。 タブレット端末だと値の取り方が違ってくるのでしょうか？ ご教授ください。

  • 初回アクセスから●時間経過後、一部を書き換える

    例えば24時間後に、リンクを押せるようにcominngsoonが、詳細はこちら と切り替わるようにしたいのですが、どうすればいいですか？

  • 初回アクセスから●時間経過後、一部を書き換える

    例えば24時間後に、リンクを押せるようにcominngsoonが、詳細はこちら と切り替わるようにしたいのですが、どうすればいいですか？

  • jCarouselLiteでwidth: 100%

    jCarouselLiteを使用し、 .shopList内の<li>要素を横並びに並べたスライダーを作成しています。 <li>要素にwidth: 100%を指定し、 要素の表示を一つにしてウインドウサイズいっぱいのスライダーの作成を考えていました。（矢印をクリックすると、画像がウインドウの端から流れてくるイメージです） <li>内の要素<img class="productimgimg">は、ブロック指定してmargin-left/right:auto;でセンタリングしています。 が、ウインドウを可変しても通常の<div>要素にwidth: 100%指定した時のように 要素が付いてきません。 （リロードすれば指定位置である中央に戻るのですが……） コードは以下の通りです。 <!------------------html内--------------------> <head> $(function() { $(".shopList").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible : 1, speed:800, easing: "easeInOutCubic" }); }); </head> <body> <div class="left"><div class="prev"> <img src="00000000g.png"> </div></div> <div class="right"><div class="next"> <img src="00000000.png"> </div></div> <div class="shopList"> <ul> <li><img src="1111111.jpg" width="000" height="000" class="productimg"/></li> <li><img src="2222222.jpg" width="000" height="000" class="productimg"/></li> <li><img src="3333333.jpg" width="000" height="000" class="productimg"/></li> <li><img src="444444.jpg" width="000" height="000" class="productimg"/></li> <li><img src="555555.jpg" width="000" height="000" class="productimg"/></li> <li><img src="666666.jpg" width="000" height="000" class="productimg"/></li> </ul> </div> </body> <!------------------css設定--------------------> .left { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; left: 30px; z-index: 11; /* 重なる順番 */ cursor: pointer; } .right { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; right: 30px; z-index: 10; /* 重なる順番 */ cursor: pointer; } .shopList { width: 100%; position: relative; margin: 0; padding: 0; height: 520px; } .shopList ul, .shopList ul li { margin: 0; padding: 0; float: left; display: inline; overflow: hidden; width: 100%; } .productimg { display: block; margin-left: auto; margin-right: auto; } <li>内の<img>要素が、常に画面のセンターにあるようにしたいのです。 よろしくお願いします。

  • 外部HTMLの特定のクラス名の文のみとりだしたい

    あるサイトのHPでは <div> <p class="en">AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> <p class="ja">ああああああああああああああああああ</p> </div> <div> <p class="en">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p> <p class="ja">いいいいいいいいいいいいいいいいいいいい</p> </div> となっています。当然、クラス名がenのもｊａのも表示されていますが、 class="en"の文章（AAAAAAAAAAAAAABBBBBBBBBBBBBB)だけ取り出したいのですが、 いい智恵はないでしょうか？ http://highfivecreate.com/blog/course/tips/817.html に挑戦していますが、これ自体、動きません。 jquery.xdomainajax.jsの一行目の＜がおかしいとchrome君が言っています。

  • 外部HTMLの特定のクラス名の文のみとりだしたい

    あるサイトのHPでは <div> <p class="en">AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> <p class="ja">ああああああああああああああああああ</p> </div> <div> <p class="en">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p> <p class="ja">いいいいいいいいいいいいいいいいいいいい</p> </div> となっています。当然、クラス名がenのもｊａのも表示されていますが、 class="en"の文章（AAAAAAAAAAAAAABBBBBBBBBBBBBB)だけ取り出したいのですが、 いい智恵はないでしょうか？ http://highfivecreate.com/blog/course/tips/817.html に挑戦していますが、これ自体、動きません。 jquery.xdomainajax.jsの一行目の＜がおかしいとchrome君が言っています。

  • 外部HTMLの特定のクラス名の文のみとりだしたい

    あるサイトのHPでは <div> <p class="en">AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> <p class="ja">ああああああああああああああああああ</p> </div> <div> <p class="en">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p> <p class="ja">いいいいいいいいいいいいいいいいいいいい</p> </div> となっています。当然、クラス名がenのもｊａのも表示されていますが、 class="en"の文章（AAAAAAAAAAAAAABBBBBBBBBBBBBB)だけ取り出したいのですが、 いい智恵はないでしょうか？ http://highfivecreate.com/blog/course/tips/817.html に挑戦していますが、これ自体、動きません。 jquery.xdomainajax.jsの一行目の＜がおかしいとchrome君が言っています。

  • 【連想配列】配列ごとに表示させたい

    var data = [ { a:"たかし", b:"180cm", c:"70kg" }, { a:"よしお", b:"170cm", c:"60kg" }, { a:"けいこ", b:"160cm", c:"5kg" } ]; 「次へ」ボタンを押すたびによしお、けいこへとデータが入れ替わるようにしたいのですが、どのようにプログラムを組めばいいのでしょうか。 $(".next").click(function(){ for(i = 0; i < data.length; i++){ //a,b,cのデータ表示 } });

  • DOMについて

    以下のソースをIE８で動かすと１と表示してくれます。 http://javascriptist.net/ref/element.firstChild.html ところがIE１０、Chrome、Firefoxなどでは 全てundefinedのエラーとなってしまいます。 根本的にソースがIE８用になっていておかしいと思うのですが、 何がどうおかしいのか分かりません。 正しいソースはどうなるのでしょう。

  • selectボックスの選択結果を変数に代入したい

    質問No.8512768の追加質問です。 先ほど同じ内容をOgre7077さんの補足に入れて投稿してしまいました。 LancerVIIさん、Ogre7077さん ご丁寧な説明を頂き、ありがとうございます。 LancerVIIさんのスクリプトを使ってセレクトボックスの表示内容は完成しました。すごく簡潔になりました。 それに追加してOgre7077さんの内部処理のスクリプトを入れてみましたが、 alertで月名がうまく表示出来ません。 セレクトボックスで月をセレクトした直後にその年月のカレンダーを表示させたいので月のセレクトボックスにもonhangeを追加しました。 勉強不足で大変申し訳ありませんが、下記スクリプトの添削をよろしくお願いします。 <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <style> </style> <script> var monthArray = new Array(); monthArray['y2014'] = new Array ( 1, 2, 3, 4 ); // 2014年が選択された場合に表示する月 monthArray['y2013'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); // 2013年が選択された場合に表示する月 monthArray['y2012'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2011'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2010'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2009'] = new Array ( 10, 11, 12 ); // 2012年が選択された場合に表示する月 function getSelectedText(obj) { var year = obj.options[obj.selectedIndex].value; // 選択された年を取得 var monthObj = document.getElementById('month'); // 月表示用のオブジェクトを取得 if ( year === '' ) { monthObj.length = 1; // 「----」が選択された場合は選択をクリアして処理終了 return; } var month = monthArray['y'+year]; // 年で表示月を取得 monthObj.length = month.length+1; // option用の領域を広げる for ( var i = 0; i < month.length; i ++ ) { monthObj.options[i+1].text = month[i]; // 取得した表示月の分、optionを追加する monthObj.options[i+1].value = month[i]; // 先頭には「--」が存在するためi+1から追加 } monthObj.options[0].selected = true; // 先頭の「--」を選択状態とする } </script> <body> <select name="year" onchange="getSelectedText(this);"> <option value="">----</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> </select><a>年　</a> <select name="month" id="month" onchange="goCalender(this);"> <option value="">--</option> </select><a>月</a> <script>/* function getSelectedText(obj){ var opt = obj.options[obj.selectedIndex]; goCalender.year = opt.text; goCalender(); } function goCalender(obj){ var me = arguments.callee; var selYear = me.year; var selMonth = me,month; alert(selYear + selMonth); }*/ </script> </body> </head> </html>

  • IE11 チェックボタン画像指定でクリックできない

    初めまして。JQuery・JavaScriptの初心者で大変恐縮ではございますが、質問させていただきます。 今回、下記参考URLを参考にして、チェックボタンの画像指定に取り組みました。 参考URL http://sygnas.jp/2012/01/30/jquery%E5%80%8B%E5%88%A5%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%92%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%84%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9/ 先日、IE9・IE10においてシングルクリックで指定する事ができなかったため質問させていただき、 お力添えのおかげで無事解決する事ができました。 http://okwave.jp/qa/q8316646.html しかし、その後IE11にて動作確認を行ったところ、ダブルクリック・シングルクリックいぜんの問題として 指定すらできなくなっている事が判明しました。 IE11においてシングルクリックで実装する場合にはどのように行えばよろしいのでしょうか？ また、その他でもおすすめの方法等ございましたら是非お教えいただきたく思っております。 何卒よろしくお願い致します。

  • option要素の移動が遅い

    よくあるSELECTボックスのデータを左右に移動させるスクリプトなのですが、 ボックス（multiple指定）内のデータが1万件ほどある状態で、1000件程度 （またはそれ以上）移動させようとすると遅くて困っています。 スクリプトは以下の通りです。from、toに移動元・先のIDが来ます。 毎回移動先のリストを舐めて重複チェックをしているため、重くなって しまっているのかなと思うのですが…もっと処理を早くする方法がありましたら ご教授いただけないでしょうか。 宜しくお願いいたします。 function addSelectBox(from,to){ var ids = ($("#" + from + " option:selected").val()) ? $("#" + from + " option:selected").val() : "" ; $("#" + from + " option:selected").each(function(){ if($(this).val()=="")return; ids = $(this).val(); addOptions($(this),ids,from,to); }); } function addOptions(elem,ids,from,to){ //重複チェック var isAdd = true; $("#" + to).children().each(function(){ if ($(this).val() == ids) { isAdd = false; } }); if (isAdd) { $('#' + to).append('<option value="' + ids + '">' + elem.text() +'</option>'); $("#" + from + " option:selected").remove(); } }

活動履歴