2017-08-01

xxxでいけた

Edge js・Ajax jQuery

IE11・Chromeはローカルでjqueryのload()が動かないので
エディタとして愛用している「Aptana」のRUNコマンドを使って開いてました
※これだと　localhost（127.0.0.1）で起動してくれるので、IE11とChromeもloadが動く。FirefoxももちろんOKでした）

が。Edgeでうまくいかない。またしてもjqueryのload()動かない・・。うそん。
散々ググって色々試してうまくいかず・・（元のソースはあまり崩したくないし）
最近はずっと↑のlocalhostでのテストばかりしてきたせいか、基本中の基本を忘れてました。
file:///C:/xxx
で開いてみるってことを・・・!!で、あっさり、load()も動きました。イエス!!
※Edgeは、htmlファイルをドラッグしてきても開いてくれないみたいなので、面倒くさいけど要ファイルパス指定。
日本語のフォルダ名は日本語のままコピペすること。文字変換されてると動かないみたい。

2017.8.1時点の、ゆち的結論。
Edge　→file:///C:/xxx　で開いてテストするべし
IE11/Chrome/Firefox/Safari　→localhostで起動してテストするべし

関連：*以前の記事

IE・Chrome・Aptana−IE11/ChromeはローカルでjQueryのload()が動作しない。のでAptanaのRUNコマンドを使う

2016-07-14

IE−win10 IE11開発者ツール[F12]で注意したいこと

Aptana IE js・Ajax jQuery

◎IE11のローカルでajax（load）を動かす時に注意したいこと
IE11でテストする時（要localhostで起動）、
開発者ツール[F12]だしとくと途中で編集した内容もloadで再度反映することができてましたが
最近Windows10にアップデートしてから同じようにやってみたところ、編集内容が反映されない・・・(汗

開発者ツールの画面がちょっと変わったみたいです。
色々いじっていたところ、ここじゃね？ってところがあったのでメモ。

ここのアイコンをONにしておくと良いみたい（常にサーバーから更新する　をONに）
標準ではOFFになっているみたいで、キャッシュが効いてしまって編集内容が反映されてなかったのかな〜
※win7 IEの開発者ツールでも同じ設定があったかどうかは不明・・でも設定しなくてもいけてた・・
関連：*以前の記事

IE・Chrome・Aptana−IE11/ChromeはローカルでjQueryのload()が動作しない。のでAptanaのRUNコマンドを使う

2016-02-16

CSS-Tableのヘッダ・フッタ・列の固定（縦横スクロールも）

CSS js・Ajax jQuery

やりたかったのは、縦・横スクロール付きのヘッダ固定テーブル。（ヘッダ1行・ヘッダ複数行、列固定は無し）で、
こちらの記事がとても参考になったのでメモ。

css3とjavascriptによるヘッダ固定/フッタ固定/列固定テーブルの実装

→CSSとjavascript（jQuery）を使ってやる方法

これを参考にして自分アレンジしたのが↓↓
※スクロールバーの位置がちょっとおかしい（セルに少しかぶる）のでもうちょっと調整した方が良いかも
▼css（自作サンプル）

/*外枠:div*/
#listContainer{
  position:relative;
  /*width,heightを該当ページに記述*/
  padding-top:22px;     /*headerの高さ-1段*/
  padding-bottom:24px;  /*footerの高さ*/
  overflow:hidden;
}
/*scrollbar box:div*/
#listScroller{
  /*width,heightをcontainerと同じサイズで−該当ページに記述*/
  overflow:auto;
  background:#f5f5f5;
}
/*テーブル幅・高さを固定:div*/
#listFixer{
  /*widthを該当ページ内に記述*/
}
#list{
  margin          : 0;
  /*border          : 1px solid #666;*/ /*こっちだとtbodyでゴミライン出る*/
  border-left:1px solid #666;
  border-collapse : collapse;
  background-color: #fff;
}
/*header-固定用*/
#list thead{
  position:absolute;
  /*widthを該当ページ内に記述*/
  top:0;
  left:0;
  z-index:2;
}
/*body*/
#list tbody{
  /*widthを該当ページ内に記述*/
}
/*footer*/
#list tfoot{
  position:absolute;
  /*widthを該当ページ内に記述*/
  bottom:0;
  left:0;
  z-index:2;
}
#list th{
  padding    : 0;
  height: 20px;   /*thead固定用に指定*/
  color      : #333;
  font-size  : 10pt;
  font-weight: normal;
  border     : 1px solid #666;
  width:200px; /*for smale*/
}
#list td{
  padding    : 0;
  font-size  : 10pt;
  border     : 1px solid #666;
  empty-cells: show;
  line-height: 20px;
  width:200px; /*for sample*/
}

▼script(要-jQuery)

▼HTML
</p> <p><div style="width:600px;background:#ffffcc"></p><p> </p><p> <div id="listContainer" style="width:400px;height:200px"></p><p> <div id="listScroller" style="width:400px;height:200px"></p><p> <div id="listFixer" style="width:500px;"></p><p> <table id="list" cellpadding="0" cellspacing="0"> <thead style="width:500px;"> <tr> <th>H1</th><th>H2</th><th>H3</th><th>H4</th><th>H5</th> </tr> </thead> <tfoot style="width:500px;"> <tr> <td>F1</td><td>F2</td><td>F3</td><td>F4</td><td>F5</td> </tr> </tfoot> <tbody style="width:500px;"> <tr> <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td> </tr><tr> <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td> </tr><tr> <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td> </tr><tr> <td>41</td><td>42</td><td>43</td><td>44</td><td>45</td> </tr><tr> <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td> </tr><tr> <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td> </tr><tr> <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td> </tr><tr> <td>41</td><td>42</td><td>43</td><td>44</td><td>45</td> </tr><tr> <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td> </tr><tr> <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td> </tr><tr> <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td> </tr><tr> <td>41</td><td>42</td><td>43</td><td>44</td><td>45</td> </tr> </tbody></p> <p> </table></p><p> </div></p><p> </div></p><p> </div></p><p> </p><p></div></p><p>

2014-11-12

jQuery−prototype.jsと共存させるには

jQuery

以前にprototype.jsで構築したシステムで改善などが必要になってきた場合に
もう、まるっとjQueryに変更したい！けど、現実的に難しい・・
部分的にjQueryを利用したいと思って調べてみた内容。

prototype.jsと同時に使うには｜jQuery日本語リファレンス

jQueryを他のライブラリと共存させるには？（jQuery.noConflict）

2014-06-09

IE・Chrome・Aptana−IE11/ChromeはローカルでjQueryのload()が動作しない。のでAptanaのRUNコマンドを使う

Aptana jQuery Chrome IE js・Ajax

IE11になって、ローカルでjQueryの*.load()が動かないっぽいので、
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE10">
を入れてIE10にしてテストしてましたが、そろそろ何とかするか…と思って頑張ってググってみたけど解決策を見つけられず…
Chromeも同じ症状ですが、こちらは色々と情報はでてくるものの、これでいくか!的な解決策を見つけられず…

ローカルファイルとして開くとダメなようなので（サーバにアップすると問題無く動作している）
エディタとして愛用している「Aptana」のRUNコマンドを使って開いてみました。
これだと　localhost（127.0.0.1）で起動するので
インターネットゾーンで開いてることになり、IE11やchromeでもload()がちゃんと動作してくれました。

当面はこれでいくしかないかなぁ・・ん〜。

＜追記：2014.8.28＞
↑では、最初の読込の時の内容の範囲では動作OKでしたが、途中でソースを編集したりすると、メインのウィンドウを開き直さないと編集内容は反映されませんでした。トホホ。
じゃ、開き直せば良いじゃないっていう話ですが、少しずつ編集してその都度画面の状態確認したいんだ〜！ウィンドウいちいち開き直したくないよ！
って、もやもやしてたら、IEだと「F12（開発ツール）」出しとけば、該当オブジェクトのみ読込み直ししても反映されました。
Firefoxだと、IEみたいな事しなくても編集した内容はオブジェクトの読込直しですぐに反映されるみたいです