jsカテゴリー

APIによるGoogleMap

投稿者: にjs, web

真ん中にマーカーが来ている

<div class=“map”>

   <script src=“https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”></script>

    <script>

      var mapZoom = 16;

      var mapCenter = new google.maps.LatLng(39.626028,140.1615576);緯度経度

      function mapCreate(){

        var mapOption={

          zoom:mapZoom,

          center:mapCenter

        };

      var map=new google.maps.Map(document.getElementById(‘map’),mapOption);

        markerCreate(map);

      }

      function markerCreate(map){

        new google.maps.Marker({

          position:mapCenter,

          map:map

        });

      }

      google.maps.event.addDomListener(window, ‘load’, mapCreate);

    </script>

  <div id=“map”></div>

</div>

[css]これは必要

#map {
 width: 50%;
 height: 230px;
}

自作MAPをgoogleMapみたいに

投稿者: にjs, web

 

<iframe class=”mapillare” src=”./zoom_map.html” width=100% frameborder=0></iframe>
<!DOCTYPE html>
<meta charset=”utf-8″>
<style>
html,body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: white;
}
.mapfr{width: 100%;
}
</style>
<body>
<script src=”js/d3.v3.min.js” charset=”utf-8″></script>
<script>
var zoom = d3.behavior.zoom()
.scale(1)
.scaleExtent([.1, 10])
.on(“zoom”, zoomed);

var svg = d3.select(“body”)
.call(zoom);

function zoomed() {
var t = “translate(” + d3.event.translate[0] + ‘px,’ + d3.event.translate[1] +”px) ” +
“scale(” + d3.event.scale + ‘,’ + d3.event.scale + “)”;
d3.select(“img”)
.style(“transform-origin”, “0 0”)
.style(“-moz-transform-origin”, “0 0”)
.style(“-webkit-transform-origin”, “0 0”)
.style(“-o-transform-origin”, “0 0”)
.style(“-ms-transform-origin”, “0 0”)
.style(“transform”, t)
.style(“-moz-transform”, t)
.style(“-webkit-transform”, t)
.style(“-o-transform”, t)
.style(“-ms-transform”, t);
}
</script>
<img class=”mapfr” src=”img/mapillare.svg”>
</body>

デベロッパーツールでデバック chrome

投稿者: にjs, others

デベロッパーツール

Sources］パネル

Sourcesパネルは、CSSやJavaScriptのコードをデバッグできる機能である

この例では、JavaScriptコードが開かれている。

  • 1ページのソースファイルを一覧表示するnavigatorを表示する。
  • 2ソースビュー。
  • 3サイドバー。
  • 4コード整形ボタン。

Chromeのデバッガーが他のブラウザーと比較して優れている点は、デバッグ機能が充実していることである。

Call Stackをさかのぼって、実行済みの呼び出し元をデバッグする機能

　まずはデバッグでブレイク（＝停止）したときにスタックを逆回転できる機能だ。具体的には、停止したときにCall Stackグループには関数の呼び出し履歴が表示されているので、停止している関数よりも前の処理を右クリックして、表示されるコンテキストメニューから［Restart frame］をクリックする（次の画面を参照）。この手順により、呼び出し元にさかのぼってデバッグできる。

高度な条件付きブレイクポイント

　次に、ブレイクポイントについてはあえて説明は不要だと思うので、さらに高度な条件付きブレイクポイントの指定の仕方について、以下のスクリーンキャプチャ画像で説明しよう。

外部スタイルシートをbodyで読み込む

投稿者: にCSS, js

と言うよりスタイルシートは普通に<link>でbody内で読み込める。

elements3

~以下はどうしてもheadで読ませたい場合~

<body>
body内でCSSを外部リンクさせるには、自動実行スクリプトでhead内にappendChildさせる。
これだけでOK

<script>
window.onload=function(){
var css=document.createElement(“link”);
css.setAttribute(“rel”,”stylesheet”);
css.setAttribute(“type”,”text/css”);
css.setAttribute(“href”,”http://xxxxx.mmm/theme/original.css”);
document.getElementsByTagName(“head”)[0].appendChild(css);
}
</script>

サイト内検索 Google カスタム検索 と表示させない

投稿者: にjs

カスタム検索エンジンの作成

まず「カスタム検索エンジンの作成」をして、カスタム検索を設置するサイト（自分のウェブサイト）の登録をします。

  1. Google の「カスタム検索エンジン」ページを開く。
    ログインしていない場合は、[カスタム検索エンジンにログイン]から、Googleアカウントでログイン。
    Googleカスタム検索エンジン
  2. 左メニューの[検索エンジンの編集]をクリック。
    [検索エンジンの編集]の下のグレーの枠は「すべて」（もしくは「All」）を選択。
    「検索エンジンの編集」ページで[Add]をクリック。
    Google カスタム検索
  3. [検索するサイト]にGoogleカスタム検索を設置するサイトのURLを入力。
    URLの入力の仕方は、[URL パターン]を参照のこと。
    私は今回「http://www.ultimai.com/」のサイト内の「kenchiku」フォルダ内を検索させたいため、「www.ultimai.com/kenchiku/*」と入力。
  4. [言語]を[日本語]に設定。
  5. 名前（検索エンジンの名前）を設定する。 [名前を変更]をクリックして任意の名前を入力。
    上記 1. の「検索エンジンの編集」ページでこの名前が表示されます。
  6. [作成]ボタンクリック。
    これでカスタム検索エンジンの作成が完了。

以下、自分のホームページにカスタム検索を設置する方法を説明します。

自分のホームページにカスタム検索を設置する

今回は、検索窓と検索結果ページを分ける方法で設置する仕方をご紹介します。

  1. まず、検索結果ページのレイアウトを設定する。
    左メニューの[検索エンジンの編集]をクリック。
    [検索エンジンの編集]の下の、グレーの枠の箇所は、今回設定した検索エンジンの名前を選択
    左メニューの[デザイン]をクリック。
    開いたページの上の方、[レイアウト]タブをクリック。
    レイアウト例がいくつか並んでいる中の、[2ページ]をクリックし、[保存]をクリック。

  2. 検索結果ページのURLを登録する。
    左メニューの[設定]をクリック。
    開いたページ中ほど、「詳細」の項目の[コードを取得]をクリック。

ページ読み込み時に実行したい処理がある場合

通常はjavascriptのonloadイベントを使用します。

BODY要素にonload属性を追加したり、
下記のようなjavascriptの指定を追加する方法がよく見られます。

1
2
3
window.onload = function(){
// ページ読み込み時に実行したい処理
}

 
次にCSSをヘッダー内で

input#gsc-i-id1{background: url('images/inputback.png')!important }

serch_google

リンク画像を拡大表示&移動可能にする

投稿者: にCSS, js

zoomy2

<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/prototype.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/scriptaculous.js?load=effects,dragdrop"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/effects.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/dragdrop.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/zoomy.js"></script>

<script type="text/javascript">
Event.observe(window,"load",function() {

$$("div.entry-content a").each(function(element){
new Zoomy(element, { draggable: true });
});
});
</script> 


/* thumbnails grid */
.zoomy, .zoomy2 { float:left; width:100%; }
.zoomy li, .zoomy2 li { list-style:none; float:left; display:inline; margin-right:5px; margin-bottom:5px; width:150px; height:100px;  }
.zoomy a, .zoomy2 a { text-decoration:none; display:block; width:150px; height:100px; }


/* ..... ZOOMY */
#zoomy { position:absolute; overflow:hidden; background:#000000; padding:0px; border:1px solid #FFFFFF; text-align:center; color:#fff; line-height:0; }
#zoomy img { margin:5px; }
#zoomy p { position:relative; margin:10px 5px 5px 5px; line-height:100%; text-align:left  }

#close { position:absolute; right:5px; width:12px; height:12px; background:url(close.gif) no-repeat; cursor:pointer;}

基本的に”prototype.js”はjQeryとは競合するので、もし共存させたければこの記事を参考に
｢jQueryとprototype.js共存させる為にする事｣

タグに付けられたIDにClassを追加する

投稿者: にCMSいろいろ, js

body内にないとダメらしい。うまく行かなかったらあちこち移動してみる。
prototype.jsがほしいのでどっかから参照する。

<script src="/js/prototype.js" type="text/javascript"></script>


<script>// <![CDATA[

 var element4=document.getElementById("menu-item-71") 
 element4.addClassName("shake");  //クラス shakeを追加

element4.removeClassName("menu-item-object-page"); //menu-item-object-pageクラスを除去
// ]]></script>

javascript カレンダーからの日付入力

投稿者: にjs

datepicker でカレンダーを2つ作って開始日～終了日にする

日付フォーマットが海外スタイルなのでyyyy/mm/ddになおす


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="js/jquery.ui.datepicker-ja.js"></script> <!--これを読ませるだけで日付フォーマット完成-->

<script language="javascript" type="text/javascript">

$(function() {     $( "#datepicker_begin" ).datepicker();   });

$(function(){   　$("#datepicker_end").datepicker();   });

</script

</pre>

 

<h3>開始日が終了日より後にならないようにする</h3>

<p>ボタンはsubmitさせて､jsでfalseを返して止めるやり方</p>

<pre>

function next_button(){

var datepicker_begin = document.getElementById("datepicker_begin");

var datepicker_end = document.getElementById("datepicker_end");

// 最終確認

if (  datepicker_begin.value >=  datepicker_end.value  ) {

alert('到着日を返却日よりも前にしてください');

return false; //submit の返り値が false なら submit の処理が中断される

}

}

 

 

 

html


<form  name="frm" id="frm" method="post" action="add.php?<?=SID ?>"  onSubmit="return next_button();" >

<dl>

<dt>到着日</dt>

<dd>

<input name="datepicker_begin" id="datepicker_begin" type="text" placeholder="--年--月--日" size="11" maxlength="10" required />

</dd>

<dt>返却日</dt><dd>

<input name="datepicker_end" type="text" class='list_dd trs_bg' id="datepicker_end" placeholder="--年--月--日" size="11" maxlength="10"  required />

</dd>

</dl>

javascript ラジオボタンでDOMの開閉をしたい｡

投稿者: にjs 


異なる配送先を選んだ場合には住所の入力欄が作られるスクリプト


<script>

window.onload = function() { /* チェックボックス */

var check = document.getElementById(“check”); /* 同じ住所 */

var non = document.getElementById(“non”); /* 違う住所 */

var frm = document.getElementById(“frm”); /* formのID */


//

non.checked = false;

non.value = ‘off’;


/* チェックボックスにonclickイベントハンドラをセット */


non.onclick = function() {

var hide_area = document.getElementById(“hide_area”);

check.checked = false; /* */

check.value = ‘off’;


if( non.value == ‘off’ ) {


hide_area1.innerText=”郵便番号:”;


var zipp = document.createElement(“input”);

zipp.type = “text”;

zipp.id = “zipp”;

zipp.name = ‘zipp’;

zipp.size = ‘4’;

zipp.maxLength = ‘3’;

hide_area1.appendChild(zipp);


var zipp2 = document.createElement(“input”);

zipp2.type = “text”;

zipp2.id = “zipp2″;

zipp2.name = ‘zipp2’;

zipp2.size = ‘5’;

zipp2.maxLength = ‘4’;

zipp2.onKeyUp=”AjaxZip3.zip2addr(‘zipp’,’zipp2′,’pref31′,’haisosaki’);”

hide_area1.appendChild(zipp2);

}

};


//上記と同じ住所 clicked

check.onclick = function() {

non.value = ‘off’;

hide_area.addClassName(“hide_class”);

};


</script>


書いているうちにもっと簡単な方法を思いついた｡


display:none のクラスをあてたり､とったりすればいいのだ｡


$(“hide_area”).removeClassName(“hide_class”);  // 一行で片付いた｡

											
						
				
				
				
						

		
			
		
	

					

						
javascriptバリデーション

	投稿者: 
	
	
		にjs
	

	 
					
				
										

						



javascriptバリデーション form.js






 


var gGlobalCheckFlag = 0; // １の場合は一回ボタンを押したとき


var gCheckFormArray = { // 3

  "name_last":"姓名(姓)",

  "name_first":"姓名(名)",

  "name_last_kana":"フリガナ(姓)",

  "name_first_kana":"フリガナ(名)",

  "zip21":"郵便番号",

  "zip22":"郵便番号",

  "pref21":"都道府県",

  "addr21":"住所（市区町村）",

  "uDateYJ":"予約日（年）",

  "uDateM":"予約日（月）",

  "uDateD":"予約日（日）",

  "email":"メールアドレス",

  "tel_num1":"電話番号（市外局番）",

  "tel_num2":"電話番号（市内局番）",

  "tel_num3":"電話番号（加入者番号）"

        }; // 3
      


var gCheckFormKanaArray = {

  "name_last_kana":"フリガナ(姓)",

  "name_first_kana":"フリガナ(名)"

        };


function checkForm( pType ) {// 36

        if (( gGlobalCheckFlag == 0 ) && ( pType == 1 )) { // 37

        gGlobalCheckFlag = 1;

        }// 37 


        if ( gGlobalCheckFlag == 1 ) { // 41

        // 入力チェック

        aErrorFlag = "";

        aErrorStr = "";


 for (var i in gCheckFormArray) { // 45  ; 

        if ( $F(i) != "" ) {  // 46

        $( i ).removeClassName("cssErr"); 


 // アラート非表示 

        if ( $( i + "_msg" ) != undefined ) { // 47


        $( i + "_msg" ).innerHTML = "";

        }  // 47

        }  // 46

        else { // 54 $F(i)の値がない場合

        //

        aErrorMsg = "「" + gCheckFormArray[ i ] + "」を入力してください。";

        aErrorFlag = 1;

        aErrorStr += "<div>" + aErrorMsg + "</div>" ;

        // 色変更

        $( i ).addClassName("cssErr"); 

        // アラート表示

        if ( $( i + "_msg" ) != undefined ) {// 63

        $( i + "_msg" ).innerHTML = aErrorMsg;

        // 

        }  // 63 if

        } // 54 else

        } // 45 for
      



        // カタカナチェック

        for (var i in gCheckFormKanaArray ) {//alert ($F(i));

        if ( $F(i) != "" ) {

        if ( checkZenkakuKana( $F(i) ) == true ) {

        $( i ).removeClassName("cssErr"); 


        // アラート非表示

        if ( $( i + "_msg" ) != undefined ) {

        $( i + "_msg" ).innerHTML = "";

        }

        } else {

        aErrorMsg = "「" + gCheckFormKanaArray[ i ] + "」を全角カタカナで入力してください。";

        aErrorFlag = 1;

        aErrorStr += "<div>" + aErrorMsg + "</div>" ;


        // 色変更

        $( i ).addClassName("cssErr"); 


        if ( $( i + "_msg" ) != undefined ) {// アラート表示

        $( i + "_msg" ).innerHTML = aErrorMsg;

        }

        }

        }

        }


        // 追加チェックalert ("メールアドレス書式"); 

        if ( checkAlphabet($F(‘email’)) == false ) {

        aErrorFlag = 1;

        aErrorMsg = "「メールアドレス」の形式に誤りがあります。正しいメールアドレスを入力して下さい。";

        aErrorStr += "<div>" + aErrorMsg + "</div>";

        if ( $( "email_msg" ) != undefined ) {

        $( "email_msg" ).innerHTML = aErrorMsg;

        }


        // 色変更 alert ("色変更"); 

        $( ‘email’ ).addClassName("cssErr"); 

        }
      


 // 追加チェック（電話番号チェック） alert ("追加チェック"); 

        if (( $F( "tel_num1" ) != "" ) && ( $F( "tel_num2" ) != "" ) && ( $F( "tel_num3" ) != "" )) {

        len = ( $F( "tel_num1" ) + $F( "tel_num2" ) + $F( "tel_num3" ) ).length;

        if (( len == 11 ) || ( len == 10 )) {

        ; 

        } else {

        aErrorFlag = 1;

        aErrorMsg = "「電話番号」は10桁(IP電話は11桁)の数値で入力してください。";

        aErrorStr += "<div>" + aErrorMsg + "</div>";


        if ( $( "tel_num1_msg" ) != undefined ) {

        $( "tel_num1_msg" ).innerHTML = aErrorMsg;

        }


        $( ‘tel_num1’ ).addClassName("cssErr");

        $( ‘tel_num2’ ).addClassName("cssErr");

        $( ‘tel_num3’ ).addClassName("cssErr");

        }

        }


        // 追加チェック（番地情報を含むか） alert ("追加チェック"); 

        if ( checkNumeric( $F( ‘addr21’ )) != true ) {

        aErrorFlag = 1;

        aErrorMsg = "「住所」は番地まで入力して下さい。";

        aErrorStr += "<div>" + aErrorMsg + "</div>";


        if ( $( "addr21_msg" ) != undefined ) {

        $( "addr21_msg" ).innerHTML = aErrorMsg;

        }


        $( ‘addr21’ ).addClassName("cssErr");

        }


        // 最終確認

        if ( aErrorFlag == 1 ) {


        return false; //submit の返り値が false なら submit の処理が中断される

        } 

        else {

        if ( pType == 1 ) {

        return true;

        }

        }

        }

        }
      


function checkNumeric( pStr ) {

        if( pStr.match( /[0-9０-９]/ ) ) {

        return true;

        } else {

        return false;

        }

        }


function checkZenkakuKana( pStr ) {

        if( pStr.match( /[^ァ-ンー]+/ ) ) {

        return false;

        } else {

        return true;

        }

        }


function checkAlphabet( pStr ) {

        if( pStr.match( /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/ ) ) {

        return true;

        } else {

        return false;

        }

        }