✍ 📁 🙈 🙉 🙊

get IP

jquery Get IP https://api.ipdata.co cckedit

<h1>https://ipinfo.io<br>
$.getJSON("https://ipinfo.io", function (data) {....}</h1><br>
<div id="D1"></div>
<div id="D2"></div>
<div id="D3"></div>

$("#D1").html( "<r>JSON.stringify(data)</r> = " + JSON.stringify(data)) ;
$("#D2").html( "<br> <r>Object.keys(data).length</r> = " + 
                Object.keys(data).length) ;

$("#D3").html( "<br><r> data.ip</r> = " + data.ip + 
"<br> <r>data.hostname</r> = " + data.hostname + 
"<br> <r>data.city</r> = " + data.city + 
"<br> <r>data.region</r> = " + data.region + 
"<br> <r>data.country</r> = " + data.country + 
"<br> <r>data.loc</r> = " + data.loc + 
"<br> <r>data.org</r> = " + data.org + 
"<br> <r>data.timezone</r> = " + data.timezone + 
"<br> <r>data.readme</r> = " + data.readme  ) ; 
})

</script>

<ol>
<li><<o>h1>https://ipinfo.io<<o>/h1>
<li><<o>div id="D1"><<o>/div>
<li><<o>div id="D2"><<o>/div>
<li><<o>div id="D3"><<o>/div>
<br>
<li><<o>script src="https://code.jquery.com/jquery-3.4.1.min.js" > <<o>/script>
<br><br>
<li><<o>script>        
<li>var obj ;         
<li>$.getJSON("https://ipinfo.io", function (data) {  
<br><br>
<li>$("#D1").html( "JSON.stringify(data) = " + JSON.stringify(data))
<li>$("#D2").html( "<br> Object.keys(data).length = " + 
                Object.keys(data).length) ;
<br><br>
<li>$("#D3").html( "<<o>br> data.ip = " + data.ip + 
<li>"<<o>br> data.hostname = " + data.hostname + 
<li>"<<o>br> data.city = " + data.city + 
<li>"<<o>br> data.region = " + data.region + 
<li>"<<o>br> data.country = " + data.country + 
<li>"<<o>br> data.loc = " + data.loc + 
<li>"<<o>br> data.org = " + data.org + 
<li>"<<o>br> data.timezone = " + data.timezone + 
<li>"<<o>br> data.readme = " + data.readme  ) ;
<li>})

<li><<o>/script>

</ol>
<br>

<<o>script src="<r>https://secure.geobytes.com/GetCityDetails?key=7c756203dbb38590a66e01a5a3e1ad96&callback=var%20</r><b>cck</b><r>%20</r>">
<<o>/script>

http://ipinfo.io/json<br><br>
<ol>
<li><<c>div id="DP1"><<c>/div>
<br>
<li><<c>script>
<li>function ipinfo(cb, ip) {
<li>    var request ;
<br>       // Mozilla, Safari, ...
<li>       if (window.XMLHttpRequest){ request = new XMLHttpRequest(); } 
<br><br>       // IE
<br>       else if (window.ActiveXObject){ 
<br>            try { request = new ActiveXObject('Msxml2.XMLHTTP'); } 
<br>            catch (e) {
<br>            try { request = new ActiveXObject('Microsoft.XMLHTTP');} 
<br>            catch (e) {}  }  } ; 
  
<br><br>
<li>request.open("GET", '//ipinfo.io/' + ((ip) ? ip : ''), false) ;
<li>request.setRequestHeader("Accept", "application/json") ;
<br><br>
<li>       request.onreadystatechange = function() {
<br>       if (request.readyState == 4 && request.status == 200)
<br>            { cb(request.responseText);  } } ;
<br><br>
<li>    request.send(null);
<li> }
<br><br>
<li>ipinfo(function(response) { DP1.innerHTML = response;
});

<li><<o>/script>

</ol> 
 
<div id="DP1"></div>

request.open("GET", '//ipinfo.io/' + ((ip) ? ip : ''), false);
request.setRequestHeader("Accept", "application/json");
request.onreadystatechange = function() {

if (request.readyState == 4 && request.status == 200) {
            cb(request.responseText);   }
    };
    request.send(null);
}

ipinfo(function(response) { DP1.innerHTML = response;
});

</script>

http://ipinfo.io/json<br>
<ol>
<li><<c>div id="DP1"><<c>/div>
<br>
<li><<c>script>
<li>function ipinfo(cb, ip) {
<li>       var request = new XMLHttpRequest();
<li>       request.open("GET", '//ipinfo.io/' + ((ip) ? ip : ''), false);
<li>       request.setRequestHeader("Accept", "application/json");
<br><br>
<li>       request.onreadystatechange = function() {
<li>              if (request.readyState == 4 && request.status == 200)
<br>                     { cb(request.responseText);   }
    };
<br><br>
<li>       request.send(null);
<li>}
<br><br>
<li>ipinfo(function(response) { DP1.innerHTML = response; });
<li><<c>/script>

</ol>
  
<div id="DP1"></div>

function ipinfo(cb, ip) {
     var request = new XMLHttpRequest();

request.open("GET", '//ipinfo.io/' + ((ip) ? ip : ''), false);
request.setRequestHeader("Accept", "application/json");
request.onreadystatechange = function() {

if (request.readyState == 4 && request.status == 200) {
            cb(request.responseText);   }
    };
    request.send(null);
}

ipinfo(function(response) { DP1.innerHTML = response;

});

</script>

Edit

#html #網頁格式 #style #div #textarea #獲取 IP #IP address data

fullScreen 全螢幕顯示的

script requestFullscreen() 全螢幕

<div id="mmm">
  <pre>  <<c>div id="mmm">  <button id="B6" onclick="Fullscreen()" > fullscreen </button>
     整個頁面或某個區塊變成全螢幕的形式，
     呼叫 全螢幕 elem.requestFullscreen()
     離開 全螢幕 document.exitFullscreen

<<c>script>
  function Fullscreen() {
    if (!window.screenTop && !window.screenY) {
          if ( mmm.requestFullscreen) 
             { mmm.requestFullscreen(); }
     else if ( mmm.msRequestFullscreen) 
             { mmm.msRequestFullscreen(); }
     else if ( mmm.mozRequestFullScreen)
             { mmm.mozRequestFullScreen(); } 
     else if ( mmm.webkitRequestFullscreen)
             { mmm.webkitRequestFullscreen(); }
     B6.innerHTML ="exitFullscreen" ; return; }

if ( document.exitFullscreen)
            { document.exitFullscreen(); } 
    else if ( document.mozCancelFullScreen)
            { document.mozCancelFullScreen(); }
    else if ( document.webkitCancelFullScreen)
            { document.webkitCancelFullScreen(); }
    else if ( document.msExitFullscreen) 
            { document.msExitFullscreen(); }
   B6.innerHTML ="fullscreen"
  }
  <<c>/script>

判斷現在是否全螢幕
    if (!window.screenTop && !window.screenY) {....}

css 全螢幕 設定 背景顏色
    #mmm:-webkit-full-screen {background-color: cornsilk;}
    #mmm:-moz-full-screen    {background-color: cornsilk;}
    #mmm:-ms-fullscreen      {background-color: cornsilk;}
    #mmm:fullscreen          {background-color: cornsilk;}

</pre>
</div>

if ( document.exitFullscreen)
           { document.exitFullscreen(); } 
   else if ( document.mozCancelFullScreen)
           { document.mozCancelFullScreen(); }
   else if ( document.webkitCancelFullScreen)
           { document.webkitCancelFullScreen(); }
   else if ( document.msExitFullscreen) 
           { document.msExitFullscreen(); }
   B6.innerHTML ="fullscreen "
}

</script>

#B6{ height:40px; width:180px ;
      font-size: 20px ;
      cursor: pointer ;
      color: black ;
      background-color: lightgray ;
      border-radius: 50%;
      box-shadow: 4px 4px #999 ;}

#B6:hover { background-color: gainsboro ;}

#B6:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

#B6{animation: mymove 1s infinite;}

@keyframes mymove { 60%  {color:crimson; }
                    80%  {color:yellow;  }
                    90%  {color:orange;  }
                    100% {color:brown;   }  }

pre     {font-size: 20px; }
h1{font-size: 30px;color : blue;font-weight : bold;text-align: center;}

B {font-weight : bold;color : blue;}
r {color:red}
</style>

.div-F:-webkit-full-screen {display:block}
.div-F:-moz-full-screen    {display:block}
.div-F:-ms-fullscreen      {display:block}
.div-F:fullscreen          {display:block}
</style>

</div>

</div>

<script>
function Mclick( xx,event){
var x = event.clientX;
var y = event.clientY;
var cw = document.body.clientWidth ;
var Mid = xx.parentElement  ;
var BTA = Mid.getElementsByClassName("BT") ;
if(x > cw/2){FTAA(xx) }
if(x < cw/2){FTLL(xx) }

//BTA[3].innerHTML = cw ;
//alert( y + "[]" + y);
}

function FPTs(id){
var Mid = id.parentElement
var PTL = Mid.getElementsByClassName("PT-img") ;
for(var x = 0; x < PTL.length ;x++){
PTL[x].setAttribute("title", x  ); }
//PTL[x].title= "end" ;
//DP.innerHTML =Mid.id;
}

//DP.innerHTML = Mid.id + " [" +  PTL.length + "] " + MsrcU ;
}

//* +++++++++ out Fullscreen ++++++++++++++++++++++++++++++++++++++++++ *//

//*  +++++++++++++++++++++++++++++++++++++++++++++++++++ *//
function FTAA(xx) {
var Mid = xx.parentElement  ;
var PTL = Mid.getElementsByClassName("PT-img") ;
var BTA = Mid.getElementsByClassName("BT") ;
xx.title = parseFloat(xx.title)+1   ;
if(xx.title > PTL.length-1 ){xx.title = 1} 
  var Msrc = PTL[xx.title].src ;
  var MsrcU= Msrc.replace(/s100/i ,"s1600") ;
PTL[0].style.backgroundImage = 'url(' + MsrcU + ')';
PTL[0].title = PTL[xx.title].title ;
BTA[0].title = PTL[xx.title].title ;
BTA[1].title = PTL[xx.title].title ;
BTA[3].innerHTML = "[" + xx.parentElement.title + "] " + PTL[xx.title].title + " / " +PTL.length  ;
}

//*  ------------------------------------------- *//
function FTLL(xx) {
var Mid = xx.parentElement ;
var PTL = Mid.getElementsByClassName("PT-img") ;
var BTA = Mid.getElementsByClassName("BT") ;
xx.title = parseFloat(xx.title)-1   ;
if(xx.title == 0 ){xx.title = PTL.length-1 } 
  var Msrc = PTL[xx.title].src ;
  var MsrcU= Msrc.replace(/s100/i ,"s1600") ;
PTL[0].style.backgroundImage = 'url(' + MsrcU + ')';
PTL[0].title = PTL[xx.title].title ;
BTA[0].title = PTL[xx.title].title ;
BTA[3].innerHTML = "[" + xx.parentElement.title + "] " + PTL[xx.title].title + " / " +PTL.length  ;
//alert(PTL.length  );  
}

</script>

.div-F:-webkit-full-screen {display:block}
.div-F:-moz-full-screen    {display:block}
.div-F:-ms-fullscreen      {display:block}
.div-F:fullscreen          {display:block}
</style>

</div>

//BTA[3].innerHTML = cw ;
//alert( y + "[]" + y);
}

//DP.innerHTML = Mid.id + " [" +  PTL.length + "] " + MsrcU ;
}

//* +++++++++ out Fullscreen ++++++++++++++++++++++++++++++++++++++++++ *//

</script>

Edit

#html #網頁格式 #style #div #requestFullscreen() 全螢幕 #exitFullscreen() 全螢幕 #css fullscreen

CSS：Float

CSS Float 浮動

<div id="MMM" >
<div id="Mn1" onclick="MmDd(0)">float left</div>
<div id="Mn2" onclick="MmDd(1)">float right</div>
<div id="Mn3" onclick="MmDd(2)">float none </div>
<div id="Mn4" onclick="MmDd(3)">float left</div>
</div>
<div id="DDD">

<div id="DP1">
<img id="IMG" style="width:auto;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg?quality=82&strip=all&w=200"  />
Float浮動屬性:通常是想在版面上做出文繞圖的效果，但也可以應用在元素的左右對齊。
<br>
讓元素脫離normal flow，浮動到父容器的上內緣（top），並往右right或往左left貼齊父容器的左內緣或右內緣。

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:left 。

<<c>style>
#img { float: left ;padding: 7px;}
<<c>/style>

</pre>

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:right。

<<c>style>
#img { float: right;padding: 7px;}
<<c>/style>

</pre>

<pre>
Float參數值：float:none （元素的預設值）
            float:left （向左浮動）
            float:right（向右浮動）

如上圖 img CSS 用 float:none。

<<c>style>
#img { float: none ;padding: 7px;}
<<c>/style>

</pre>

<pre>
<<c>div class="normal">
<<c>div class="float">
<<c>/div><<c>/div>
<<c>style>
.float{ background-color: red;
        width: 300px;
        height: 100px;
        float: left; }
.normal{ background-color: green;
         width: 400px;
         height: 120px; }
<<c>/style>

</pre>

</div>

</div>
</div>

#MMM { position: fixed;
       top:5px ;z-index:2  }

#DP1 ,#DP2 ,#DP3 ,#DP4 { height: 550px;
                         width: 96%;
                         border: 1px solid black;
                         margin-top:-0px;
                         background-color:linen ;
                         display:none ;
                         padding:3px;
                         font-size: 22px;
                         position: fixed;
                         top:35px ;
word-break: keep-all; word-wrap: break-word;}
//word-break: normal|break-all|keep-all;

</style>

function MmDd(xx){
MMM.children[0].style.backgroundColor = "silver"; 
MMM.children[0].style.opacity = 0.6 ;
MMM.children[1].style.backgroundColor = "silver"; 
MMM.children[1].style.opacity = 0.6 ;
MMM.children[2].style.backgroundColor = "silver"; 
MMM.children[2].style.opacity = 0.6 ;
MMM.children[3].style.backgroundColor = "silver"; 
MMM.children[3].style.opacity = 0.6 ;

DDD.children[0].style.display = "none" ; 
DDD.children[1].style.display = "none" ; 
DDD.children[2].style.display = "none" ; 
DDD.children[3].style.display = "none" ;

MMM.children[xx].style.backgroundColor = "linen"; 
MMM.children[xx].style.opacity = 1 ; 
DDD.children[xx].style.display = "block" ; 
}

DP1.style.display = "block";
Mn1.style.backgroundColor = "linen ";
Mn1.style.opacity = 1;
</script>

<div>
<img id="IMG" style="width:auto;" src="https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg?quality=82&strip=all&w=200" />
<pre>
Float參數值： none （元素的預設值）
             left （向左浮動） 
             right（向右浮動）
 
但也可以應用在元素的左右對齊，浮動到父容器的上內緣（top），
並往右right或往左left貼齊父容器的左內緣或右內緣。
</pre><br><br>

<div id="ch">
<div id="DP" >Css img{ float: left }</div>

<label class="container" >float: left
  <input type="radio" checked="checked" name="radio" 
          onclick="Ccc('left')" >
  <span class="checkmark"></span>
</label>
<label class="container" >float: right
  <input type="radio" name="radio" onclick="Ccc('right')" >
  <span class="checkmark"></span>
</label>
<label class="container" >float: none 
  <input type="radio" name="radio" onclick="Ccc('none' )" >
  <span class="checkmark"></span>
</label>
</div>

}
</script>

.container { position: relative;
             padding-left: 25px;
             cursor: pointer;
             font-size: 22px; }
.container input { opacity: 0;
                   cursor: pointer;}
.checkmark { position: absolute;
             top: 0;
             left: 0;
             height: 25px;
             width: 25px;
             background-color: #C0C0C0;
             border-radius: 50%;}
.container:hover input ~ .checkmark {
                background-color: #808080; }
.container input:checked ~ .checkmark {
                background-color: #2196F3; }
.checkmark:after { content: "";
                   position: absolute;
                   display: none }
.container input:checked ~ .checkmark:after {
    display: block; }

.container .checkmark:after { top: 9px;
                              left: 9px;
                              width: 8px;
                              height: 8px;
                              border-radius: 50%;
                              background: white;}

</style>

Edit

用JavaScript連結Google Sheets #html #網頁計設計 #script #style #float left #float right #float none

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

get IP

jquery Get IP https://api.ipdata.co cckedit

fullScreen 全螢幕顯示的

script requestFullscreen() 全螢幕

CSS：Float

CSS Float 浮動

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

get IP

jquery Get IP https://api.ipdata.co cckedit

fullScreen 全螢幕顯示的

script requestFullscreen() 全螢幕

CSS：Float

CSS Float 浮動

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單