AJAX
- jqueryのプラグインについて
現在、webサイトにjquery.lazyload.jsを導入しようとしていますが、 firefoxでブラウザサイズが小さいと、左右にガタガタ動いて、ブラウザが 止まってしまいます。 どなたかjquery.lazyload.jsについて解決方法を教えてください。 宜しくお願いいたします。 参考url http://www.skuare.net/test/jLazyLoad.html
- 締切済み
- AJAX
- hunter_999
- 回答数1
- Ajax.Updaterで読み込んだ先の要素にイベントを設定したい
Ajaxの勉強をしているのですが、非同期通信で要素を書き換えた後の処理について困っています。 現在、prototype.jsのAjax.Updaterを利用して下記のようなソースを書き、動作の検証を行っているのですが、読み込み元のファイル(test.1html)から読み込んだ先(test2.html)の要素を取得することは出来ても、その要素に対してイベントを設定することが出来ません。 具体的に言うと、 targ2の要素をクリックすると、test2.html内のtarg3の要素を取得出来てアラートが走りますが、targ3の要素をクリックしてもイベントが実行されないという状況です。 このtarg3の要素に対してイベントを設定するにはどのようにすれば良いでしょうか？ ○test1.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajaxtest</title> <script src="prototype.js"></script> <script> window.onload=function(){ Event.observe('targ1', 'click', handler1); Event.observe('targ2', 'click', handler2); Event.observe('targ3', 'click', handler3); } function handler1() { var myajax = new Ajax.Updater( {success : "targetString"}, "test2.html", {evalScripts:true}); } function handler2() { alert($('targ3').innerHTML); } function handler3() { alert($('targ3').innerHTML); } </script> </head> <body> <div id="targ1">押して非同期通信開始</div> <div id="targ2">非同期通信終了後に押す</div> <div id="targetString"></div> </body> </html> ○test2.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajaxtest</title> </head> <body> <div id="targ3">非同期通信で呼ばれた要素</div> </body> </html>
- jqueryのプラグインの件
http://pure-essence.net/stuff/webTips/jqueryTableRowCheckboxToggle.html 上記サイトにあるテーブルをクリックするとチェックボックスがトグル式 に反応するプラグインの件で、チェックボックスが入っているテーブルに aタグのリンクやbuttonタグが入っていると、そのボタンを押した際にも チェックボックスが反応してしまい困っております。 aタグとbottonタグを押した際にチェックボックスを反応させないためには どうすればいいでしょうか？ どなたかご存知の方、ご教授ください。 宜しくお願いいたします。
- ベストアンサー
- AJAX
- hunter_999
- 回答数2
- ajaxライブラリー cross fadeループの止め方
ホームページを制作しております。 ajaxライブラリーの中のcrossfadeというのを 使いたいと思いサンプルを見つけたのですが トップページの動きとしたいのでループなしで 写真がひととおり表示されたら止まってほしいのですが crossfade.jsのファイルを書き換えればというところまで しかわかりません。 http://users.mswave.com/~finado23/crossfade/ こちらにファイルを置いていますので ファイル保存でご確認いただきましたら 幸いです。 よろしくお願いいたします。
- javascriptを一つのjsファイルにまとめる方法
http://jsajax.com/RecallTextValues2Article691.aspx にあるフォームのサンプルですが、head内のjavascriptとform下にある <script type="text/javascript"> var f1=new rememberForm("demoform") f1.persistfields("txtName", "txtEmail") f1.addtoggle("persistbox") </script> をまとめて一つの外部jsファイルにすることは出来ないものでしょうか？ どなたかご教授いただければとおもいます。 どうぞよろしくお願いいたします。
- 締切済み
- AJAX
- hunter_999
- 回答数2
- jqueryで特定のIDに対して
jqueryで特定IDのdiv要素にのみ実行する場合は どのように記述したらよいでしょう？ $(function() { /* div#testの内容のみに実行*/ }); ご伝授いただけると助かります。 よろしくお願いいたします。
- 締切済み
- AJAX
- renarena85
- 回答数1
- サーバ側プログラム言語について
XHttpRequest()で実行されるサーバ側処理の言語は、参考書ではPHPで記載されているものが殆どです。 PHPのサンプルコードを見ると、単に(検索等は抜かして）echoで標準出力していいる為、 同じような事を例えば perlで記述しても出来ると思い、実際以下の様に簡単な サンプルを実行してるのですが、思うように結果が出てきません ----------------------------------------- #!/usr/local/bin/perl use CGI; $query = new CGI; $project_id = $query->param('emp_no'); $|=1; &main(); sub main { print "AAA"; } ----------------------- 期待する結果はAAAの文字列です しかしながら、実際にHTML側で得られる結果は、 #!/usr/local/bin/perl ・・ とソースそのものが出てきてしまいます。 （perlには実行権を与えています） 同じ事をperlではなく、/bin/sh で echo しても結果は同じでした。 PHPで書けばと言われそうですが、得意な言語で書ければと思っています 何か原因が判れば教えてください。
- jqueryでリンクを無効にしたあとに有効にする方法
jqueryで下記のコードでページ内のリンクを全て無効にしましたが、有効にする方法がわからずに困っております。 どなたかご教授ください。宜しくお願いいたします。 ↓コード↓ $("a[href]").click(function(e){e.preventDefault()}).attr("href","#");
- ベストアンサー
- AJAX
- hunter_999
- 回答数1
- jQueryを利用してドック型のメニューに関して
始めまして。 現在、サイトを作成中なのですが、 グローバルメニューをjQueryのiconDockプラグインを 利用してたjQueryのiconDockプラグインを利用してドック型のメニューを考えています。 横幅を固定したドック型のメニューはどの様にすれば可能でしょうか。 通常は該当アイコンが拡大した時、左右（上下）にメニューエリアが拡がってしまいますが、それを800px内で行いたいのです。 何卒宜しくお願いします。
- グーグルストリートビューについて
いつもお世話になっています。 現在、googleのAPIを使ってストリートビューとマップを二つ出す方法が分からなくて悩んでおります。 具体的には、 １．縦300px、横400pxのグーグルマップが表示されている ２．グーグルマップからストリートビューボタンをクリックする (もしくは、黄色い人形を設置する) ３．縦300px、横200pxのマップとストリートビューが並んで表示される という感じのものを作りたいと考えております。 公式HPや、スクリプトを書かれているHPを見に行き、いろいろと試してみたのですが、どうにもできません。 作成したことがある方が居られましたら、教えていただきたいと思います。 よろしくおねがいいたします。
- tabslide.jsを書き換えたいです
http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2 のサイトよりダウンロードしたファイルでナビゲーションを作成していますが、この機能では一定時間たたないとドロップメニューが消えません。マウスオーバー＆マウスアウトで見えたり消えたりするようにしたいのですが、どのように書き換えれば実現するのか教えてください。 var sliding = 0; var slideTime = ''; // Set is sliding value function setSliding(a_ISliding){ sliding = a_ISliding; } // Get is sliding value function getSliding(){ return sliding; } // Carry out accordian styled effect function accordion(evt) { el = Event.element(evt); var eldown = getNextSibling(el); // If element is visible do nothing if ($('visible') == el) { return; } if ($('visible')) { if( getSliding() == 1 ){ return false; } var elup = getNextSibling($('visible')); setSliding( 1 ); parellelSlide( elup, eldown ); $('visible').id = ''; } else{ setSliding( 1 ); singleSlide( eldown ); } el.id = 'visible'; } // Setup accordian initial state function init() { var bodyPanels = document.getElementsByClassName('panel_body'); var panels = document.getElementsByClassName('panel'); var noPanels = panels.length; var percentageWidth = 100 / noPanels; var position = 0; // Loop through body panels and panels applying required styles and adding event listeners for (i = 0; i < bodyPanels.length; i++) { bodyPanels[i].hide(); panels[i].style.width = percentageWidth + '%'; panels[i].style.position = 'absolute'; panels[i].style.left = position + '%'; Event.observe(panels[i].getElementsByTagName('h3')[0], 'mouseover', accordion, false); Event.observe(panels[i].getElementsByTagName('h3')[0], 'mousemove', accordion, false); Event.observe(document.body, 'mousemove', resetIdle, false); position += percentageWidth; } if( $('visible') ){ // Set panel with id of visible to be initial displayed var vis = $('visible').parentNode.id+'-body'; $(vis).show(); } setIdle(); } // Next sibling method to work around firefox issues function getNextSibling(startBrother){ var endBrother=startBrother.nextSibling; while(endBrother.nodeType!=1){ endBrother = endBrother.nextSibling; } return endBrother; } function parellelSlide( elup, eldown ){ new Effect.Parallel( [ new Effect.SlideUp(elup), new Effect.SlideDown(eldown) ], { duration: 0.3, afterFinish: function() { setSliding( 0 );} }); } function singleSlide( eldown ){ new Effect.Parallel( [ new Effect.SlideDown(eldown) ], { duration: 0.3, afterFinish: function() { setSliding( 0 );} }); } function resetTabs(){ var resetEl = getNextSibling( $('visible') ); setSliding( 1 ); new Effect.Parallel( [ new Effect.SlideUp( resetEl ) ], { duration: 0.3, afterFinish: function() { setSliding( 0 );} }); $('visible').id = ''; } function resetIdle(){ if( $('visible') ){ window.clearTimeout( slideTime ); slideTime = window.setTimeout( "resetTabs()", 10000 ); } } function setIdle(){ if( $('visible') ){ slideTime = window.setTimeout( "resetTabs()", 10000 ); } } Event.observe(window, 'load', init, false); 上記がダウンロードしたtabslide.jsです。 よろしくお願いいたします。
- IE8で動かないJQuery
Javascriptのカテゴリとどちらに質問するか迷いましたが、 こちらで質問させていただきます。 ちなみにJQueryやJavascriptには慣れていません。 以下のような方法で、セレクトボックスで選択された値をcode.cgiに 引き渡し、code.cgiが返す値をalertで表示しようとしています。 セレクトボックスのIDは selectid です。 code.cgiでは、いくつかの値を : で区切って表示（返す）しています。 FirefoxやSafari、またIE7のときには動いたのですが、 IE8(Windows7と一緒にインストールされたもの)では なぜか動きません。 原因の分かる方いらっしゃいますでしょうか。 <script type="text/javascript"> $(function(){ $('#selectid').change(function(){ $.get("code.cgi?code=" + $('#selectid').val(), function(data){ var a; a = data.split(":"); alert(a[0]); }); }); }); </script>
- Ajaxを使った検索サイト作成
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>
- ベストアンサー
- AJAX
- youthful97
- 回答数3
- AJAX+PHPでセレクトボックスの連動
AJAX+PHPでセレクトボックスの連動をしようとしています。 function SelAjax(){ var x = $('#category1').val(); $.ajax({ type: "POST", url: "category.php", data: {"prm":x}, dataType: "json", success: function(data, status){ $.each(data,function(i) { $('#category2').append($('<option>').attr({ value: i }).text(data[i])); }); }, error: function(XMLHttpRequest, status, errorThrown){ alert("エラーが発生しました！"); } }); } としています。 PHP側で $CATEGORY2 = array( 1 => array( 1 => "a", 2 => "b", 3 => "c", 4 => "d", ), 2 => array( 1 => "e", 2 => "f", 3 => "g", 4 => "h", ), 3 => array( 1 => "i", 2 => "j", 3 => "k", 4 => "l", ), 4 => array( 1 => "m", 2 => "n", 3 => "o", 4 => "p", ), 5 => array( 1 => "q", 2 => "r", ), 6 => array( 1 => "s", 2 => "t", 3 => "u", ), ); $ary = array(); if($_POST["prm"]){ for($i=1;$i<=6;$i++){ if($i ==$_POST["prm"] ) $ary = $CATEGORY2[$i]; } } echo json_encode($ary); としています。 一回目に1番目のセレクトボックスを選択してAjaxでPOSTし2つ目のセレクトボックスを生成できました。 しかし、2回目として1番目のセレクトボックスを選択した際に、1回目にPHPから受け取った配列に積みあがってしまいます。 どのように対処すればいいかわかりません。 教えてください。
- ajaxでPHPにPOST送信して結果データを受信しようとしていますがうまくいきません。
セレクトボックスの値を受け取りPOST送信 <HTML側> function SelValue(){ var x = $('#category1').val(); $.ajax({ type: "POST", url: "category.php", data: {"prm":x}, dataType: "json", success: function(data, status){ alert(data.address1 + data.address2); }, error: function(XMLHttpRequest, status, errorThrown){ alert("エラーが発生しました！"); } }); } 以下category.php if(!$_POST) header("Location: input.php"); $CATEGORY2 = array( 1 =>array( 1 => "a", 2 => "b", 3 => "c", ), 2 => array( 1 => "d", 2 => "e", 3 => "f", ), 3 => array( 1 => "g", 2 => "h", 3 => "i", ), ); $ary = array(); if($_POST["prm"]){ for($i=1;$i<=3;$i++){ foreach($CATEGORY2[$i] as $key => $value){ if($key == $_POST["prm"]) $ary = $CATEGORY2[$i]; } } } json_encode($ary); としています。 PHPにPOSTしたデータも確認できないし jsonデータを表示できないです。 どのようにしたらいいかわかりません。 ajax初心者でわからないことだらけです。 教えてください。
- AJAXでPHPの配列を用いたセレクトボックスの連動
AJAXでPHPの配列を用いたセレクトボックスの連動を行いたいと思っています。たとえば、 PHPで配列をセットしセレクトボックスを生成します。 1番目のセレクトボックスで1番目の項目を選択すると 2番目のセレクトボックスの内容が連動して変化する。 といった動きを目指しています。 2番目のセレクトボックスの内容もPHPで持って設定したいと考えています。 1番目のセレクトボックスのvalue値が2ならばajaxで通信して21から29までのkeyの配列を設定するという形式ですが。どのようにして良いかわかりません。 教えて下さい。
- タブ切り替えを日程指定したいのですが
タブの最初に表示される内容をアクセスした日付で調整したいと考えています。 例えば、3枚のパネルがあり、 パネル1は2009年4月10日～5月10日まで パネル2は5月11日～11月20日まで パネル3は11月21日以降 としておき、 アクセスした日によって最初に表示されるパネルが変わるというイメージです。 Ajaxのみで作成するのは難しい気もしますが、見当がつかず、質問させて頂きました。 よろしくお願いします。
- 締切済み
- AJAX
- sakizorock
- 回答数1
- 同一名称imageファイルの自動更新、画像入れ替え
ブラウザ：FireFox 表示中の画像を定期的に更新するページを作っています。 現在は、javascriptで作成しておりますが、Ajaxでできるのかなと考えております。ただ、Ajaxでの作成方法が分かりません。 お分かりの方いらっしゃいましたら、宜しくお願い致します。 <div id='test'></div> <script type='text/javascript'> hoge=""; hoge += "<img src='test.png'>"; $("document").ready(function(){ $('#test').append(hoge); }) setInterval('update()', 10000); function update(){ hoge=""; hoge+= "<img src='test.png'>"; $('#test').empty(); $('#test').append(hoge); } </script> test.pngの画像内容は、グラフです。 定期的に中の内容を更新していくので、それを画面に反映させたいと思っております。 画像を切り替える際、ファイル名が別の場合は画像は切り替わるのですが、同一名称だと画像が切り替わりません。 宜しくお願い致します。
- phpとajaxの比較
webアプリケーションを作成する場合 phpとajaxのどちらが良いでしょうか？ また、メリット、デメリットなどあるでしょうか？ (ajaxはjsとxmlを使った非同期通信ということは認知しています) webに関して色々と勉強しているのですが 上記のような疑問を感じで質問させていただきました。 どうかご教授願いたいと思っています。 よろしくお願いします。 そもそもこのような疑問自体が間違っていたら申し訳ございません。 （私はphp初心者です）
- テキスト1文字をドラッグ＆ドロップするには
<div id="from">あいうえお</div> <div id="to">かきくけこ</div> とあって、「あ」の文字をドラッグ＆ドロップで「か」と「き」の間に挿入させるようなことがしたいのですが、何か良い方法とかライブラリとかありますか？よろしくお願いします！ # <div>は2つとも任意の場所にあって、絶対位置指定ではありません。