goo blog　サービス終了のお知らせ　

ウィリアムのいたずらの、まちあるき、たべあるき

ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も）

DatePickerの位置をめぐる冒険

2013-04-09 17:08:47 | JavaとWeb
元はといえば、日付を入力するJQueryのdatePickerの位置を、
<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<SCRIPT type="text/JavaScript">
<!--
$(function() {
	$('#jquery-ui-datepicker').datepicker({
            beforeShow: function(input, inst) {
                var calendar = inst.dpDiv;    // Datepicker
                setTimeout(function() {
                    calendar.position({
                        at: 'right bottom',
                        my: 'left bottom',
                        of: input
                    });
                }, 1);
            }
	});
   
});
//-->
</SCRIPT>
<TITLE>DatePicker</TITLE>
</HEAD>
<BODY>
<P>　</P>
<P>　</P>
<P>　</P>
<P>　</P>
<p>　　　　　　　　　　　　日付: <input type="text" id="jquery-ui-datepicker"></p>
</BODY>
</HTML>

と書いたら、
（pは、今回のサンプル用に、位置あわせに使っている）
Chromeでは

で、
IE7では

と、逆になるということから、この冒険は始まった。



Chromeのほうの位置にしたいというので


<HTML>

<HEAD>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<SCRIPT type="text/JavaScript">

<!--

$(function() {

	$('#jquery-ui-datepicker').datepicker({

            beforeShow: function(input, inst) {

                var calendar = inst.dpDiv;    // Datepicker

                setTimeout(function() {

                     calendar.position({

                        at: 'left bottom',

                        my: 'right bottom',

                        of: input          

                    });

              }, 10);

            }

	});

   

});

//-->

</SCRIPT>

<TITLE>DatePicker</TITLE>

</HEAD>

<BODY>

<P>　</P>

<P>　</P>

<P>　</P>

<P>　</P>

<p>　　　　　　　　　　　　日付: <input type="text" id="jquery-ui-datepicker"></p>

</BODY>

</HTML>

と書いて、直しましたよ・・・




そしたら、「setTimeoutとか、使わないで・・・」ということになり、
対応しましたよ


<HTML>

<HEAD>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<SCRIPT type="text/JavaScript">

<!--

$(function() {

	$('#jquery-ui-datepicker').datepicker({

            beforeShow: function(input, inst) {

                var calendar = inst.dpDiv;    // Datepicker

                calendar.css({

                        marginTop: -170+'px',

                        marginLeft: ($('#jquery-ui-datepicker').width()+10)+'px'

                });

            }

	});

   

});

//-->

</SCRIPT>

<TITLE>DatePicker</TITLE>

</HEAD>

<BODY>

<P>　</P>

<P>　</P>

<P>　</P>

<P>　</P>

<p>　　　　　　　　　　　　日付: <input type="text" id="jquery-ui-datepicker"></p>

<P>　</P>

<P>　</P>

<P>　</P>

<P>　</P>



</BODY>

</HTML>

ところが、このやり方だと


スクロールすると

ってことで、位置がずれる




<HTML>

<HEAD>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<SCRIPT type="text/JavaScript">

<!--

$(function() {

	$('#jquery-ui-datepicker').datepicker({

            beforeShow: function(input, inst) {

                var calendar = inst.dpDiv;    // Datepicker

		a = 0 - $('#jquery-ui-datepicker').offset().top;

                calendar.css({

			marginTop: a +"px",

			marginLeft: ( $('#jquery-ui-datepicker').width()+10 )+ "px"});

            }

	});

   

});

//-->

</SCRIPT>

<TITLE>DatePicker</TITLE>

</HEAD>

<BODY>

<P>　</P>

<P>　</P>

<P>　</P>

<P>　</P>

<p>　　　　　　　　　　　　日付: <input type="text" id="jquery-ui-datepicker"></p>

<P>　</P>

<P>　</P>

<P>　</P>

<P>　</P>



</BODY>

</HTML>

として、入力項目の位置を取ってきて、補正するした値（変数a)
をセットすると

のように位置がずれない。たいへんであった・・・
仕事してしまった・・・

＜＜参考文献＞＞
http://alphasis.info/jquery-ui/datepicker/
http://www.northwind.mydns.jp/samples/datepicker_sample8.php

ランキングに参加中。クリックして応援お願いします！


 
 
 
 
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

アニメのキャラクターを大使に－大学も、筑波大図書館の萌えキャラみたいになる？

2013-04-09 10:35:54 | トピックス

　沖縄や京都を「国際ポップカルチャー特区」に認定、アニメのキャラクターを大使に－。９日の政府のクールジャパン推進会議・ポップカルチャー分科会で、こんなアイデアが検討されることが分かった。


だそうな・・・

むかしは、「～大使」というと、外交官の正式な大使じゃない場合、
ミスコンなどで、選ばれていたと思います。
ということは、ミスコンのようなものが、バーチャルなアニメの世界になってきた・・・
ということなんですかね。
加工しやすいし、ダブルブッキング関係ないし、スキャンダルもないですからねえ・・



ミスコンといえば、大学！
昨日、本家にも

筑波大学付属図書館に萌えキャラがいるって、知ってました！？
http://plaza.rakuten.co.jp/struts/diary/201304080000/

というエントリを書きましたけど、

筑波大学付属図書館にも、チューリップさん

という萌えキャラがいるくらいですから、
そのうち、各大学も、ミスコンから、萌えキャラに代わっていくんでしょうかね・・・


沖縄・京都にアニメ特区検討
http://headlines.yahoo.co.jp/hl?a=20130409-00000104-san-pol

（エントリ内の太字は、上記ニュースより引用）

ランキングに参加中。クリックして応援お願いします！


 
 
 
 
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

カレンダー

2013年4月
日 月 火 水 木 金 土
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

ブログランキング


人気ブログランキングへ

アクセス状況

アクセスアクセス
閲覧 1,329 PV UP!
訪問者 566 IP UP!
トータルトータル
閲覧 35,112,147 PV 
訪問者 8,816,754 IP 
ランキングランキング
日別 502 位 UP!
週別 797 位 DOWN!

プロフィール

自己紹介
ろくでもない人です。

最新コメント

バックナンバー

ブックマーク

goo
最初はgoo
  • RSS2.0