HTML - CaffeineCat

ajax†

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
$(function(){
  var data = "1234";
  $.ajax({
    type: "GET",
    url: "/hogehoge",
    data:{
      query: data
    },
    cache: false,
    timeout: 1000
  }).then(
    function(data){
      console.log("success:"+data);
    },
    function(data){
      console.log("failed:"+data);
    }
  );
});
    </script>
  </head>
  <body>
  </body>
</html>

data に入れないと IE で url encode されない

↑

google map†

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>google map</title>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js"></script>
    <script src="//code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
    <style type="text/css">
html,body,#map {
  width:   100%;
  height:  100%;
  padding: 0;
  margin:  0;
}
    </style>
    <script type="text/javascript">
$(function() {
    var options = {
      zoom: 12, 
      center: new google.maps.LatLng(35.6811673, 139.7670516),
    };
    var map = new google.maps.Map( $("#map")[0], options);
});
    </script>
  </head>
  <body>
    <div id="map"></div> 
  </body>
</html>

localhost 以外の場合は api key を入れないといけない

↑

progress bar†

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.1/sprintf.min.js"></script>
    <link href="//fonts.googleapis.com/css?family=Economica" rel="stylesheet"> 
    <style type="text/css">
.progress {
  width: 100px;
}
.progress .border {
  border-width: 1px;
  border-style: solid; 
  border-color: #a0a0ff;
}
.progress .bar {
  height: 3px;  
  background-color: #e0e0ff;
}
.progress .num{
  text-align: center;
  font-family: 'Economica';
  color: #a0a0ff;
}
    </style>
    <script type="text/javascript">
$(function() {
  var progress = 0;
  function init(){
    setInterval(tick , 10);
  }
  function tick(){  
    if(progress < 100){
      progress+=0.1;
      $(".bar").css("width",progress+"%");
      $(".num").text(sprintf("%02d%%",progress));
    }
  } 
  init();
});
    </script>
  </head>
  <body>
  <div class="progress">
    <div class="num"></div>
    <div class="border"><div class="bar"></div></div>
  </div>
  </body>
</html>

↑

縦横センタリング†

<head>
<style>
.center {
  position:          absolute;
  top:               50%;
  left:              50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform:    translate(-50%, -50%);
  transform:         translate(-50%, -50%);
}
</style>
</head>

<body>
<div style="background-color:red; width:500px; height:400px;">
  <div class="center" style="background-color:blue; width:100px; height:100px;">ほげ</div>
</div>
</body>

Linux Install

Android

Linux Tools

Linux AV

Linux Memo

WINDOWS

PROGRAM

動画 Memo

音楽 Memo

モバイルアプリ Memo

FILE FORMAT

PROTOCOL

DEVICE

BookMark

その他

ajax†

google map†

progress bar†

縦横センタリング†