IEでモーダル IE z-index がうまくいかないとき (自作ポップアップの元・自作ダイアログの元)
ダイアログやポップアップ(以降<pop>)を出すさい、
<pop>のz-indexを最大にし、その背景を<div>要素などで表現すると
<pop>は操作できるのに、ほかの要素が操作できない！
というモーダルな<pop>ができます。
背景
<div class="pop-back" style="z-index: 9000; display: none; position:absolute; top: 0; left: 0; width: 1300px; height: 800px;"></div>
<pop>
<div class="my-popup ui-corner-all" style="display:none; position: absolute; top: 300px; left: 300px; width: 300px; height: 200px; background-color: white; color: black; z-index: 10000; border: 3px solid #000;">
hogehoge<br>
hogehoge
</div>
こんな感じ。
まぁ、本当は背景<div>のサイズはjsとかでWindow Size取得して設定してやった方がいいですね。
ってか、CSSファイルを別途作りましょうねｗ
これでjsでボタンを押したら両方表示されるようにすればいいです！
そして、背景がクリックされたら両方隠せばいいでしょう。
思い通りに動いた・・・
しかし、IE10では背景の後ろにある要素が指定できるではありませんか！
他のバージョンのIEは・・・知りません。
なぜ？
IEのz-index問題？
違いました。
背景の<div>の中身はありません。
IEで中身がない場合。
ホントに透過します。
・・・すべて透過します。
ちょっと悩みましたよ。
ってなことで、
背景の<div>に
background-color: #333; opacity: 0;
を追加
背景の色を追加し、完全透過！
ま、色はなんでもいいんですけどね。
opacityを0.5くらいにすると、なんか「後ろは操作できませんよ！」って強調されてるようで逆にいいかもしれません。
ってことで、私の壁はz-index問題ではなくて
「<div>の背景に何もしてなければIEでは、完全透過！問題」
でした。
何かの役に立てればいいですね。
fullcalendar で、特定日付の背景色を変更する javascript
FullCalendarはGoogleライクなカレンダー(Google カレンダーみたいなカレンダー)です。
jQuery と jQuery UI を使用してたように思います。
・・・jQuery UIどこで使ってんだ？ｗ
詳しくはFullCalendarの公式を見てください。
それでは題にあることに取り掛かってみます。
こいつは、ちょっとGoogleさんに聞いてみてぱっと出てこなかったので、メモ程度にちょちょいっと。
まず、特定の日を指定したい！
FullCalendarでカレンダーを描画後、htmlを見てみると。
まぁ、表でカレンダーが作成されています。
そして、個々の日は
<td class="fc-day fc-mon fc-widget-content fc-first" data-date="2013-09-02">
ってな感じで記述されていました。
data-date="日付"
ってことで特定の日を指定することは簡単でしたね。
ちなみに曜日はclassで指定されているので特定曜日の色も簡単に変更できそうです。
それではjavascriptで変更していきます。カレンダー描画後
$("td[data-date = '2013-09-02']").hoge("background", "#ff0000");
hogeをcssに変更してください
これで特定日の背景色が変更できました。
ASP.NETって流行ってない？
ここ最近やってる仕事のある個所でASP.NETを使用していました
これってIEでしか動かないですよね？
結構縛りがきつい気がします。
「機能は最低限、最小の機能のみを！」
って感じでiPhoneアプリの作りかた見たいなドキュメントで書いてますよね
それからするとASP.NETも対象を絞ってるのでいいのかな？
ですが、Javaなどに代表されるようにマルチデバイスで実行できるのがWeb
そんな気がします。
今後、いつでもどこでもどんな端末でも見れるページが優位になってくるのではないでしょうか？
そういえばMSDNなんかで載ってるサンプルコードのタブにjavascriptなんてのも・・・
Microsoftさんはどうしていくつもりなんでしょうか？
ってか。。。javascriptを一般的なブラウザに対応させるのも一苦労ってのは・・・ブラウザ1つがっていうよりも、動作が1つがデファクトスタンダードになるように願ってます。
話が吹っ飛びますが、正直Web系の単価が高いのはあまりにもいろいろできてしまうがために方向性の取れていないものをまとめる作業に時間がかかるからでは・・・
まぁAPS.NETは形か開発方法、また、設計方法が変わってきそうですね。
ちなみに、ASP.NETは何？って感じの私なので適当なこと言ってます。
Flotをピンチイン、ピンチアウトで拡大縮小をする ついでに２点タッチで移動
結構前にやったけど、載せてなかったのでメモ程度に
//グラフ上ではスクロール禁止をバインド（有効に）
$('#placeholder').bind('touchstart', function(){
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});
});
//グラフ上でスクロール禁止をアンバインド（無効に）
$('#placeholder').bind('touchend', function(){
$(window).off('.noScroll');
});
//中央座標？移動前の値
var movePoint = { x: 0, y: 0 };
$('#placeholder').bind('gesturestart', function(ev){
movePoint.x = ev.originalEvent.layerX;
movePoint.y = ev.originalEvent.layerY;
});
$('#placeholder').bind('gesturechange', function(ev){
//拡大縮小倍率
var scale = ev.originalEvent.scale;
//中央座標？ (canvas全体からの座標なので少しずれている)
var lX = ev.originalEvent.layerX;
var lY = ev.originalEvent.layerY;
//拡大縮小
var position = { "left": lX, "top": lY }
plot.zoom({"amount": scale, "center": position});
//移動
var moveP = { "left": movePoint.x - lX, "top": movePoint.y - lY};
plot.pan(moveP);
movePoint.x = ev.originalEvent.layerX;
movePoint.y = ev.originalEvent.layerY;
});
こんな感じです。
"#placeholder" はグラフの表示領域のIDです
"plot" はflotのグラフそのもの？の変数名です
ポイントはgesturestartと言ったところでしょうか
gestureほげほげは前にも書いたかもしれませんが、タッチデバイスで２点同時タッチした場合のイベントです。
イベント発生順番は曖昧にしか覚えてませんが
touchstart
gesturestart
gestureend
touchend
だった気がします。
そして、間にほげmoveなどが入ってきます。
この辺りはググればすぐに出てきますので説明しなくてもいいかなって・・・
gesturechangeは２点タッチした状態で動かした時のイベントだったかな？
たしかmoveがないんだかな？
ちなみにjQueryだけでgesture系は既にイベント登録されていたはずです。
そしてコメントで「中央座標？」ってなってるところは、２点タッチ時の
タッチ箇所とタッチ箇所の中央座標だと・・・
なんか座標とれたからこいつでいいかって使ってます。
出来そこないでごめんなさいｗｗｗ
実際にグラフを動かしてみた感想ですが・・・
結構シビア
操作に慣れたらいいのですが、なかなか思った位置に移動や思った倍率にするのが難しいです。
たぶんscaleをそのまんま突っ込んでるのが原因でしょうが。。。
今回はおまけ機能的なものなのでそこまでしません！ｗｗｗ
いい計算方法ありましたら教えてください！
あっと。iPadで動作確認しました
WebRTC 002
WebRTC 001
WebRTC
Web Real-time Comunication
みたいな感じだったきがする
ま、こいつはWebブラウザで動画、音声でコミュニケーションしようぜ！ってもの
W3Cのグループは2011年から動いてるらしい。
ここから私の過去のお話
大学3年時にWebブラウザで動画チャット出来るものを作ろうとして盛大に失敗
Flashとかがつがつ使ってやるか、出たばかりのSilverlight使うかで結局金銭的にFlashは諦め、Silverlightは参考が少な過ぎあわわわわってなったので・・・
そこで諦めたのがダメだったのかな
使ったライブラリはDirect・・・のラッパ
Webカメラから画像取得、ソケット作って、バッファ確保して、画像を分割、パケット作って、送信、受信、画像に復元して表示
みたいな流れをやった。ほんで作るの結構苦労したｗ
動画ってなんぞやって感じだったからな～。。。今もだけど
結局Webカメラとかのデバイスから受け取ったデータをバッファに溜めて、エンコしながらそのデータを流して、受け取り側でデコードして表示？の流れなのかな？
これが出来ないｗ
そんなことは、置いておいて
その時はWebブラウザで動画チャットが一般化する！また、そういった技術を使ったサービスがいっぱい出てくるって思ってた
で、現在ブラウザがそんなのをJavascript書くだけでサポートしてくれる時代になります
いや～いろんなサービス考えて一通り作ったら下に流すだけの仕事ないかな～ｗ
仕事時間中に考えて実装ね。
今だと、休暇に考えて・・・
ふ！
話がそれました。
今後も書いていくつもりWebRTC
なのでメモ程度にリンクを張っておきます
WebRTC
ちなみにwebrtc.orgのサイトにはデモがあった！
まだ、全然見れてないけどデモがあるってことは、ちょちょいっと実装できそうだね
最近の仕事
最近の仕事は面白くない。
一つ一つが面白くなく。全体を通して面白ければいいけど。
逆
プログラムちょろちょろっと組むのはいいんだけど
それ組んだところで・・・
って感じで
ま、仕方がないんだけどさ。
受託開発だし
っと文句を言ってみる
