✍ 📁 🙈 🙉 🙊

dialog window

自製彈出對話視窗 Self made dialogue window

<div id="DP">
<input type="button" onclick="MYalert('Self made dialogue window <br> 自製 彈出對話視窗')" value="Self made dialogue window 
 自製 彈出對話視窗" >

var newDiv = document.createElement("div");
newDiv.id="ckalerttxt" ; 
document.body.appendChild(newDiv) ; 
   ckalerttxt.style.position = "absolute";
   ckalerttxt.style.padding  = "20px";
   ckalerttxt.style.textAlign  = "center";
   ckalerttxt.style.backgroundColor ="rgba(255,255,240,0.6)" ;
   ckalerttxt.style.zIndex = "999";
   ckalerttxt.style.width  = "100%";
   ckalerttxt.style.left   = "0%" ;
   ckalerttxt.style.top    = "100px" ;
   ckalerttxt.innerHTML    =  xx  ;
   ckalerttxt.innerHTML   += "<br>" ;
   var tt = "<button type='button' onclick='Cclose()'>close</button>" ;
   ckalerttxt.innerHTML += tt ;

document.body.style.overflow="hidden";
}
</script>
</div>

<div id="PG"></div>
<script>
var txt = DP.innerHTML ;

txt = txt.replace( /</g ,"<<c>" )
txt = txt.replace( /;/g ,";<br>" )
txt = txt.replace( "//" ,"<br><br>" )
txt = txt.replace( /<<c>script>/ ,"<br><br><<c>script>" )

PG.innerHTML = "<br>" + txt ;

</script>

Edit

#html #網頁格式 #style #div #alert() #dialog window #對話框窗口

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

blockquote

<blockquote> <cfieldset> <legend>

<div id="S1" onclick="DPcss(S1)">
  <blockquote class="ccs1" > blockquote 1</blockquote>
     <style>
         .ccs1 { font-size: 24px;color: #555555; 
                 width:150px ; height:60px ;
                 border-left:20px solid #78C0A8 ;
                 background:#EDEDED;
                 box-shadow: 12px 12px 8px #ccc;
                 display:flex ;
                 align-items : center;
                 justify-content: center;cursor:pointer;  }
  </style></div>

<div id="S2" onclick="DPcss(S2)">
  <blockquote class="ccs2">blockquote 2</blockquote>
    <style>
     .ccs2 { font-size: 24px;color: #555555;
             width:150px ; height:60px ;
             border-left:15px solid #78C0A8 ;
             background:#EDEDED;
             box-shadow: 12px 12px 8px #ccc;  
             display:flex ;
             align-items : center;
             justify-content: center ;cursor:pointer;}

.ccs2::before { font-size:40px;
                      content: "\201C";}
  </style></div>

<div id="S3" onclick="DPcss(S3)">
  <blockquote class="css3" >blockquote 3</blockquote>
  <style>
    .css3 { font-size: 20px ; color: #666;
            width:150px ; height:60px ;
            background-color: yellow;
            border-left:  15px solid #00aae1;
            border-right: 15px solid #00aae1;
            box-shadow: 12px 12px 8px #ccc;
            display:flex ;
            align-items : center;
            justify-content: center;cursor:pointer; }
  </style></div>  
  
</div>
<div id="Textcss"></div>
<script>
var newDiv = document.createElement("textarea");
 newDiv.id="Textcss" ; 
 newDiv.readOnly = "true" ;
 document.body.replaceChild(newDiv, Textcss);

function DPcss(x){
Textcss.value = x.innerHTML ;
//alert(x.innerHTML  )
}
DPcss(S1)
</script>
<style>
#Textcss {width:98%; height:80%;
font-size: 20px;}
</style>

Edit

#html #style #script #javascript #css #blockquote #fieldset #legend #標題內容 #文章內容 #pre

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

dialog window

自製彈出對話視窗 Self made dialogue window

get IP

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

fullScreen 全螢幕顯示的

script requestFullscreen() 全螢幕

CSS：Float

CSS Float 浮動

blockquote

<blockquote> <cfieldset> <legend>

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

dialog window

自製 彈出對話視窗 Self made dialogue window

get IP

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

fullScreen 全螢幕顯示的

script requestFullscreen() 全螢幕

CSS：Float

CSS Float 浮動

blockquote

<blockquote> <cfieldset> <legend>

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

自製彈出對話視窗 Self made dialogue window