Category js

js

jquery 要素を取得 いろいろ

太平洋 0 Comment

指定した要素本体の取得


   $('#youso').prop('outerHTML');

自分の親要素の順位

 
 var this_index = jQuery('.oya p').index(jQuery(this).parent());
 oyaクラスの中のpが何番目かが取得できる this は同じ親を持つボタンとか

チェックされているラジオボタン､checkBoxの値を取得

 
jQuery('input[name="shipper"]:checked').val();

セレクトメニューに値をセット

 
jQuery(this).prop("selectedIndex", 0); //最初のoption指定

セレクトメニューで選択されたoption要素のdata属性を取得

 
jQuery('select').children('option:selected').data('id');
js

読み込み時に実行されるscriptの実行順

太平洋 0 Comment 
 



   $(window).on('load', function() {
//  window.onload = function () {
      // 完全に読み込み終わってから実行する処理
      $('header').append("onload");
   });

    $(function () {
      //DOM構築後実行 画像等は待たない
      $('header').append("$(fnction)");
    });

    $(document).ready(function () {
      //DOM構築後実行 画像等は待たない
      $('header').append("ready");
    });

    document.addEventListener('DOMContentLoaded', function () {
      //最初の HTML 文書の読み込みと解析が完了したとき
      $('header').append("addEventListener");
    });

    window.addEventListener('load', function() {
         $('header').append("window addEventListener");
    });
実行順

addEventListener

onload

window addEventListener

$(fnction)

ready

js web

APIによるGoogleMap

太平洋 0 Comment

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

<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;
}
js

自作MAPをgoogleMapみたいに

太平洋 0 Comment

 


 
<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>
js

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

太平洋 0 Comment

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

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

  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

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

太平洋 0 Comment

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共存させる為にする事｣