なんだか面白いサービスを見つけた https://zk-phi.github.io/MEGAMOJI/静止画像を動画GIFにできるって知ったら、ホバーで入れ替えるよね？ html <div id="hop_hoge"><img src="img/hoge.png"></div> JavaScript /* 画像の入れ替え */ $(function(){ $("#hop_hoge > img").hover(function(){ $(this).attr("src…

一覧表だと頭に入ってこないのでグリフパターンを画像に加工してスライドショー的に表示させているけど、新しいパターンが出てくると困る。。。そこでテキストベースのデータにして、Webで表示させる手法を思いつく。http://ingress.houkou-onchi.com/ HTML…

互換モードだと表示されないってなレアな環境なことかと思ったら、バリバリの推奨環境と聞いて対策を考える引っかかっていたのがindexOFだった、、、IE8以下だと動かないのね。（今更それ？）array.indexOf(value)jQuery.inArray(value, array) $.inArray(va…

結果はこんなカンジ $("table.map th, table.map td").click(function() { var index = $(this).index(); //一番左の列は禁止、 if(index>0){ //初期化 $(this).parents().find('tr').each(function() { $('td, th', this).removeClass('click'); }); //最初…

たとえば、hogeの中にdragがある。 <div id="hoge"> <div id="drag">contents</div> </div>で、 $(".drag").draggable({ /* 処理 */ });だけ書いてあるのに、hogeから出れない問題があった。真っ先に疑ったオプションがコレ系なんだけど、「できない」「no work」で調べると殆んどがこのオプションにた…

「http://example_A.com?hoge」にhoge付きでやってきたら、「http://example_B.com?hoge」へリダイレクトしたくなった。 <script type="text/javascript">

やっとこさ動くようになったBotHevenです。 特定の文字列を入力すると、設定した文字列をSlackに投稿するって仕掛けなんですが、辞書を作成して読み込ませることができればいいなーって考えです。 参考 GoogleスプレッドシートのデータをJSONで取得してみた…

古いけどjQueryで作ってみた。formの中にinputのhoge、fugaがある。 hogeに値が入力されたらfugaの値を消して非表示、「隠した」メッセージを表示する。 hogeの値が消去されたらfugaを表示、「隠した」メッセージを除去する。 input id="hoge" input id="fug…

あれれ？となった。 function getText(xml){ console.log(xml) //Object } function xmlHoge(xml){ $.ajax({ url: "data.xml", dateType: "xml", success: function(xml){ hoge = getText(xml);} error: function(){ alert("xml読めねー"}; }); cosole.log(h…

http://www.gravity-works.jp/css_blog/2013/04/google-chrome.html http://frontierline.net/blog/archives/191CSSファイルで指定するときはコレ、これをjQueryで実現したい。 @media print { body { -webkit-print-color-adjust: exact; } }試行錯誤の結果…

search.html.erbとかでFormがあって、submit_tagとかよくある。 このページの中にtoggleを使って表示させているお知らせがある。でも、これってsubmitしたときにtoggleの状態を維持してくれないので非表示にしていても表示されてしまう。 # search.html.erb <div id="toggle"></div>…

jqueryでXMLを読み込むHTMLの修正で久しぶりに開いたらエラーがでた TypeError: $ is not a function $(document).ready(function(){}); だめだったいろいろ ぐぐると幾つか解決策があるらしい。 Getting “TypeError: $ is not a function” with (or without…

IE11のデバッガーで確認してリリースしたら「Chromeで動かないよ！」・・・ここから迷走が始まる。泥沼記録Chromeのconsoleにこんなのが出た event.returnValue is deprecated. Please use the standard event.preventDefault() instead.jQueryを自前でbuild…

ググると並列な取扱方法はすぐに見つかった。同一なデータ構造なら簡単みたいだ。 第5回 ajaxを使って複数ブログの最新記事一覧を表示するデータXMLと詳細XMLとか別情報となっているXMLファイルで片方を読み込んでから、もう一方のXMLを処理したいことってあ…

いろいろ 本家かのDLは見つからなかった http://jquery.com/ どーやって探すのですか？ 適当に探して見つかったところから入手 http://blog.moonstyle.her.jp/ 本家の問題点を修正しているらしいので採用してみる Chromeのコンソールでエラー 「Uncaught Ref…

なぜか特定の端末のIEだけajaxで書き換えしているHTMLを読み込むことが出来ない。いろいろとグルグルした結果、Internet Explorerでconsole.logを使うとダメらしい。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13101633503

こっちも出たり出なかったり。 SCRIPT65535: 予期しないメソッドの呼び出し、またはプロパティ アクセスです。 jquery.js, 行 103 文字479流れ流されて参考にした記事を見つける。 http://blog.livedoor.jp/maru_tak/archives/50545757.html 書き換えられな…

環境によって表示できたり出来なかったり。できないヤツのコンソールログを確認してでてきたのが「SCRIPT1015: 終了していない文字列型の定数です。」といったもの。外部化したjsファイルを眺めると「UTF8、BOMなし、CR+LF」なファイルだったので「UTF8、BOM…

IEのデバッグで「[cycle] terminating; zero elements found by selector」が表示される。 機種によっては「loading」から切り替わらない。 コードはこんな感じhtml <script type="text/javascript">

jQueryでthisの子要素を取得するやり方いろいろjQueryによる要素の存在チェックまとめ

サイドバーにある185x40のバナー画像に仕掛けを入れたい。バナーにマウスを乗せるとマスコットキャラがスルスルと右側に現れて、altの内容を吹き出しに表示したい。 HTML CMSで作られているので変更を加えることができない。 <div id="SIDE"> <ul class="bnrArea"> <li><img src="banner/banner01.png" alt="すばらしいバナーだ"></li> <li><img src="banner/banner02.png" alt="詳細を書くんだよ"></li> <li></li></ul></div>

マスコットキャラクターにイースター・エッグを仕込んでおきたい。 静止画キャラにホバーすると吹き出しにランダムなセリフ ホバーが外れると吹き出しごと消える ドラッグするとキャラがgifアニメ、ドラッグ用の吹き出しとセリフ ドラッグが止まると静止画、…

タブの切替 | よく使うjQuery（finefinefine）よく出来ているのでもっと自分好みに改造してみた。 html <div id="tabs"> <ul id="tab"> <li class="select"><a href="#tabs-1">メニュー 1</a></li> <li><a href="#tabs-2">メニュー 2</a></li> <li><a href="#tabs-3" class="last">メニュー 3</a></li> </ul> <div class="content_wrap"> <p>メニュー 1 の内容。</p> <p>この実装例の、jQue…</p></div></div>

checkboxにチェックが入ったら、別のformフィールドに入力できるようにする仕掛け $("#moved_flag").click(function(){ if (this.checked){ $("#moved").attr("disabled", false); }else{ $("#moved").attr("disabled", true); } });「this.checked」でチェ…

jQueryで出来ないかなーと探して見つけたのが 東京文様をまねっこ jQuery 背景をランダムに（blogzz） こんな感じで書いてみた <script type="text/javascript"><!-- $(function(){var A = Math.floor(16*Math.random());$('#change_back').addClass('bd'+A);}); //--> </script> <style type="text/css"> .bd1{background:ur…

閲覧制限を掛けたいコンテンツがあるけど、表示の一体感が欲しい。 index.html hoge/ .htaccess fuga.html index.html ヘッダー <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", url : "http://www.kenmituo.com/hoge/fuga.html", cache:false,…

難しいことはまったくないとおもう。 /*ヘッダー*/ <script type="text/javascript" src="common/js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="common/js/xmlRss.js"></script> <script type="text/javascript">

流行りのボタンを調べてみた ツイートボタン：twitter プラスワンボタン：google+ Like Button：facebook 他にも沢山あるけど代表的な3つだけ。 どーやって設置するの？ googleの場合 <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'} </script>

XMLデータを取り込んでゴニョゴニョするときにハマった問題 $("h1").html($("documentTitle", xml).text()); $("title").html(" "+$("documentTitle", xml).text()); $("#breadcrumbs_title").html($("documentTitle", xml).text());IE以外だとOKなんだけど…

そんなに激しい改造じゃない。FAQ Builder ver.2.0でデータを入力したり管理したりして、出力されるXMLファイルをjQueryで読み取る方法を考えてみた。いいよFAQ Builder ver.2.0、FAQ作るならとってもGoodだと思う。 <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript">google.load("jquery", "1.4.2");</script> </meta></head></html>