jQuery is fun!

-
jQuery is fun!

Hello World!

Hello Sweden!

Basic syntax: $(selector).action()

$(.class).action() &(#id).action() CSSと同じ
$(this).action() JavaScriptの this とほぼ同じ(?)

jquery →

 $(document).ready(function() {
  var myElement = $("#id01");
  $("#demo1").text("The text from the id01 paragraph is: " + myElement[0].innerHTML);
 });

JavaScript → 

    {
  let myElement = 
  document.getElementById("id01");
  document.getElementById("demo2").innerHTML = 
  "The text from the id01 paragraph is: " + myElement.innerHTML;
 }

CSS selectors

style="disply: inline-block;" で横並びに

 $(document).ready(function(){
  $("button#hide1").click(function(){
   $("pre").hide("slow");
 });
 });
 
 $(document).ready(function(){
  $("button.show1").click(function(){$("pre").show("slow")
 });
 });
 $(document).ready(function(){
  $("#JP1").click(function(){
   $("pre.source").toggle("slow");
 });
});

class指定は("element.class name") id指定は("element#id name")

jQuery selectors

//focus
$(document).ready(function(){
 $("input#focusP").focus(function(){
  $("span#FP1").css("display", "inline").fadeOut(4200);
 });
});
jQuery focus()

Move the mouseover this <p> paragraph.

//on()
$(document).ready(function(){
 $("p#onP1").on("mouseover mouseout", function(){
  $(this).toggleClass("intro_onP");
 });
});
jQuery on()

$(selector).on(event,childSelector,data,function,map)on()

event, function are required.


map ({event:function, event:function,...});

jQuery multipe .css()method

.css({"property_name":"value", "property_name": "value",...})

jQuery on() method 

 //on() map attach multiple events
$(document).ready(function(){
 $("div#onP2 > p").on({
  mouseover: function(){
   $(this).css("background-color", "lightgrey");
  },
  mouseleave: function(){
   $(this).css("background-color", "lightblue");
  },
  click: function(){
   $(this).css("background-color", "lightgreen");
  }
 });
});
$(document).ready(function(){
 $("div#onP2").on("click", "button" ,function(event){
  $(event.delegateTarget).css({"background-color": "khaki", "font-size", "2.2vw"});
 });
});

jQuery selectors and, jQuery parent > child selector and,.delegateTarget

some headline

hiding practice
.hide()

some headline

toggle practice
.toggle()

 //hide() toggle() and, show()
    $(document).ready(function(){
 $(".exP .hideP").click(function(){
  $(this).parents(".exP").hide("slow");
 });
    });

    $(document).ready(function(){
 $(".exP1 .hideP1").click(function(){
  $(".exP").show("slow");
  });
    });

    $(document).ready(function(){
 $(".exP1 .hidep1").click(function(){
  $("div.exP1 > p").toggle("slow");
  });
    });
 
//animation progress bar
$(document).ready(function(){
 $("#progressB").click(function(){
  $("#Pbox").animate({
   width: "400px"
  }, {
   duration: 5000,
   easing: "linear",
   step: function(x) {
    $("#progressB1").text(Math.round(x * 100 / 400) + "%");
   }
  });
 });
});

jQuery Effect Methods

display:none; / visibility: hidden;

visibility and toggle

button 3つflexboxに入れたら "hidden"にだけtransition付けたが、他もつられる。
css transition

//fadeIn() fadeOut() fadeToggle()
$(document).ready(function(){
 $("#fadeinP").click(function(){
  $("#dif1").fadeIn();
  $("#dif2").fadeIn("slow");
  $("#dif3").fadeIn(3000);
 });
});

$(document).ready(function(){
 $("#fadeoutP").click(function(){
  $("#dif1").fadeOut();
  $("#dif2").fadeOut("slow");
  $("#dif3").fadeOut(3000);
 });
});

$(document).ready(function(){
 $("#toggleP").click(function(){
  $("#dif1").fadeToggle();
  $("#dif2").fadeToggle("slow");
  $("#dif3").fadeToggle(3000);
 });
});
$(document).ready(function(){
 $("#fadetoP").click(function(){
  $("#dif1").fadeTo("slow", 0.2);
  $("#dif2").fadeTo(2200, 0.5);
  $("#dif3").fadeTo(1500, 0.7);
 })
})

$("#dif1,#dif2,#dif3").fadeTo("slow", 1.00);
multiple id or class divide with conmma: $("#id, #id, #id,...")

hidden box practice

Click to slide down panel
Hello world!
Click to slidetoggle panel
Hello world! 
//slideDown() 

$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideDown("slow");
 });
});
//slideUp()
$(document).ready(function(){
 $("#SU").click(function(){
  $("#panel").slideUp("slow");
 });
}); 
$(document).ready(function(){
 $("#flip1").click(function(){
  $("#panel1").slideToggle("slow");
 });
});

animate({css parameter}, speed,callback);

animate(), the property name must be camel-cased style. paddingLeft is OK padding-left is not acceptable.

   /* image hover zoom*/
   /*img {transition-property: width;
        transition-duration: 1s;
        transition-timing-function: ease;
        transition-delay: 0.2s;}*/
   img {transition: width 1s ease 0.2s; }
   img:hover { width: 50%;
                }
   ======
   /* responsive 用に大きく :hoverの無効
   @media screen and (max-width: 768px){
        img { width: 80%; }
        img:hover { width:80%!important; }
       }
CSS transition

Hello!

all HTML elements have a static position, they cannot be moved. To manipulate the position, the CSS position property of the element to relative, fixed, or absolute.

animate()transfrom: rotate(20deg)/skewX(20deg) などは無理。書いてもskipされるCSS trasnform

opacity: '+=0.2', としてもclick毎に透明にはならない
opacity: '0.5', などと決め打ちに

//animation()
$(document).ready(function(){
 $("#aniP").click(function(){
  var div = $("#aniP1");
  div.animate({left: '150px'}, "slow");
  div.animate({transform: '+=skewX(180deg)'}, "slow");
  div.animate({fontSize: '3em'}, "2000");
 });
});
//relative +=
$(document).ready(function(){
 $("#aniP4,aniP7").click(function(){
  $("#aniP2").animate({
   left: '120px',
   opacity: '0.5',
   height: '+=120px',
   width: '+=120px'
  });
 });
});
//animate() height: 'toggle'
$(document).ready(function(){
 $("#aniP5,aniP8").click(function(){
  $("#aniP6").animate({
   height: 'toggle'
  });
 });
});

@media screen and (max-width:768px){} responsive
display: none; → display: block!important;
拡大したときに普段はdisplay:none; のbuttonを@media screen以下の CSS で使っていた末尾の ; を!important;に置き換えることで意図したようになった。
jQueryにも$("#aniP4,#aniP7") と書き加える。

<button id="aniP4">→</button>
<button id="aniP7" style="display: none;">↓</button>
<br>
<button id="aniP5">→</button>
<button id="aniP8" style="display: none;">↓toggle()</button>

 <style>
 @media screen and (max-width: 768px){
  #aniP4 { display: none; }
  #aniP5 { display: none; }
  #aniP7 { display: block!important;}
  #aniP8 { display: block!important;}
 }
 </style>

jQuery is fun!!

jQuery event methods

<input> でselect が出てくるとtag <select> <option> ...を想像してしまう。
mouse でのselect もある。.select .afterも

event → effect/html/css

.tirgger() .tirggerHnadler() の違い

.trigger() はeventもoccurしてくれるが、.triggerHandler()はeventが発生しない。この場合はmouseのselect event。



jQuery chain method のalphaetically順を変えてみるこれだとalphabet順を乱しても動いたが、
↑.trigger().before()では動かず、 .before().trigger()で動く。

$("selector").trigger("event", "eventObj", param1, param2,...)

$("selector").on("event", function(){} ) ここでのfunctionは function name として前後に対象があればいい。

click this paragraph to alert additional parameters.

↑ onclick function
jQueryではない。が、jQuery の.on() event に持っていくとerror でjQuery 全部停止してしまった。

getElementsByClassName の復習

need index number! for all loop through them ↑

hidden panel の作り方
対象を style="display: none;" で隠しておく。 <button>などに.click() event と fadeToggle("slow"/miliseconds) effectを付けてあげる。↓

UUUUU

append test

  1. coffee
  2. milk
  3. tea

event.namespace property

Click this or ↑ or ↓ to make them disappear.

This paragraph can be desappered.

  • how to remove an event handler after the event has been triggered a certain number times.

This paragraph could be bigger by click for 5 times.

$(document).ready(function(){
 var x = 0;
 $("#offSwitch1").click(function(event){
  $("#offSwitch1") .animate({fontSize: "+=5px"},"slow");
  $("#offSwitch1") .animate({letterSpacing:"+=4px"},"slow")
  .css("color", "lightgreen");
  x++;
  if (x >= 3) {
   $(this).off(event);
  }
 });
});
//reset button用
$(document).ready(function(){
 $("#reset1").click(function(){
  $("#offSwitch1")
  .animate({fontSize: "1em"})
  .animate({letterSpacing: "0px"})
  .css("color", "black");
  /*$("#offSwitch1").animate({letterSpacing: "0px"});
  /*$("#offSwitch1").animate({wordSpacing: "0px"});*/
 });
});

animate() もchaining で繋げられる。
css letter-spacing: normal は通るが、jQuery .animate({letterSpacing: "normal"}); はダメ。やはり数字でないと。
.animate({letterSpacing: "hide"}) だと<p>自体が消えてしまう。

1回だけの .after()、もう一つ .after() と.remove() で復活.empty()にはfilter機能がない。

testing paragraph

test paragraph with class name "test".

test paragraph with class name "test".

 //remove() filter
$(document).ready(function(){
 $("#btn6").click(function(){
  $("p").remove(".test");
 });
});
$(document).ready(function(){
 var x =0;
 $("#revive").click(function(event){
  $("p.test1")
  .after('<p style="color: red;">This is revived text by after().</p>')
  x++;
  if (x >= 1) {
   $("#revive").off(event);
  }
 });
});

.classList.toggle(""); testing: change the style.

 
<style type="text/css">
 .para1 {
  width:250px;
  height:50px;
  background-color: lightblue;
  color: white;
  font-size: 20px;
  display: block;
  border: 2px solid coral;
  padding:10px;
         }
 .paraNew {
  width:440px;
  height: 130px;
  background-color: lavender;
  text-align: right;
  text-shadow: 2px 2px 5px black;
  color: navy;
  text-indent: 3em;
  animation: animation-test 4s 3;
  animation-fill-mode: forwards;

 }
 @keyframes animation-test {
  0% {
   left: 20px; 
   background-image: linear-gradient(to right, rgba(30,144, 255, 0.2),rgba(30, 144, 255, 1))
  }
  /*30% {
   left: 20px; 
   background-image: linear-gradient(to right,rgba(19, 128, 236, 0.5),rgba(19, 128, 236, 0.7))
  }
  60% {
   left:20px; 
   background-image: linear-gradient(to right,rgba(19, 128, 236, 0.5),rgba(19, 128, 236, 0.7))
  }
  */
  100% {
   left: 200px; 
   background-image: linear-gradient(to right, rgba(30,144, 255, 0),rgba(30, 144, 255, 1));
   font-size: 2em;
   text-align: bottom;
  }
 }
  1. @keyframes
  2. CSS text-shadow
  3. CSS reference
  4. CSS animatable

Dropdown menu 

 <style type="text/css">
 .dropdown {
  position: relative;
  display: inline-block;
 }
 .dropB1 {
  background-color: #4CAF50;
  color:white;
  padding: 12px;
  font-size: 12px;
  border: none;
  cursor: pointer;
 }
 .dropB1:hover, .dropB1:focus {
  background-color: #3e8e41;
 }
 .DRcontent {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  overflow: auto;
  box-shadow: 2px 8px 10px 0px rgba(0, 0, 0, 0.3) ;
 }
 .DRcontent a {
  color: black;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
 }
 .Drcontent a:hover {
  background-color: lightgrey;
 }
 .show2 {display: block;}
</style>
<div class="dropdown">
 <button id="DRbtn1" class="dropB1">menu</button>
 <div id="dropdownSelf" class="DRcontent">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
 </div>
</div>

<script type="text/javascript">
 document.getElementById("DRbtn1").onclick = function() {dropdownmenu()};
 function dropdownmenu() {
  document.getElementById("dropdownSelf").classList.toggle("show2");
 }
</script>

sticky navibarの下準備 window object>pageX/YOffset→element object>offsetTop→element object>classList

 //style
 #navibar {
  overflow: hidden;
  background-color: #333;
 }
 #navibar a {
  float:left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 11px;
 }
 #navibar a:hover {
  background-color: #ddd;
  color:lightgrey;
 }
 #navibar a.active {
  background-color: #4CAF50;
  color: lightgrey;
 }
 .sticky1 {
  position: fixed;
  top: 0;
  width:30%;
 }
  
 //script 部分
 {
  let navbar = document.getElementById("navibar");
  let sticky = navibar.offsetTop;

  function stickyNavi() {
   if (window.pageYOffset >= sticky) {
    navibar.classList.add("sticky1")
   } else {
    navibar.classList.remove("sticky1");
   }
  }
 }

sticky navigation bar の縦横切替

.className.toggle("") で可能。<body>に付いた onscroll="stickyNavi()" でscroll中は常に .sticky1 が .add("sticky1") される。 getElementById("navibar") でelement取得、常に付いているclassName="sticky1" を .className.toggle("sticky2"); に変更できるように function() を追加するだけ。

font-size を変更するようにしたが、css javascript でうまく行ったのは@media screen and (max-width 768px){} に書いたときだけだった。

<style>
 .sticky1 {
  position: fixed;
  top: 0;
  right: 0;
  width:30%;
 }
 .sticky2 {
  display: flex; //float からflex に変更
  flex-direction: column; //column で縦表示 rowなら横に。
  position: fixed;
  top: 0;
  right: 0;
  width:12%; //width 変更
 }

To make navigation bar dissapear

DOM childrenを使ってみる。

 function Dissapear() {
  var x = document.getElementById("navibar").children;
  var y = document.getElementById("navibar");
  //x.classList.add("sticky3");
  var i;
  for (i = 0; i < x.length; i++) {
   x[i].style.visibility = "hidden";
  } 
  y.style.visibility = "hidden";
  
 }

to get .lastChild element of text use .text → document.getElementById("SSticky").lastChild.text;

This is NOT end of the page

body.lastchild.text で</script> が</body>の前に有るとundefined <p>を無理やり入れると意図したtext return。

.innerWdth() include padding : .innerHeight() include padding:


("#test3 > div > p") に対する :last :last-child :last-of-type


The first paragraph in #test3 div

childNodes[0]

The first <p> childNodes[1]

The last <p>


childNodes[0]
This is a span element childNodes[1]

The first <p> childNodes[2]

The last <p> childNodes[3]

This is the last <span> in the ("#test3 > div") childNodes[4]

childNodes[0]

The first <p> childNodes[1]

The last <p> childNodes[2]

The last <p> in ("#test3")

  $(document).ready(function(){
  $("#test3 > button").click(function(){
   var btn = $(this).text();
   $("#test3 > div> p")
   .css("background-color", "white");
   $("#test3 > div > p" + btn)
   .css("background-color", "yellow");
  });
 });

("#test3 > div > p") に対する :last , :last-child , :last-of-type の違い。


 //selector の指定は丁寧に指定しないと動いてくれない。
     /*section > button {
  text-transform: none;
 }*/
 
 .containergrid > #test3 > button {
  text-transform: none;
 }
 button#btn12 {
  text-transform: none;
 }

Smooth scroll to top

location object access window.location property
.hash .host .href .serch ...

jQuery .scroll() div height:500px にすると<div> 内でscroll event が発生しない。 なにかのelement にscroll() event attach したかったらheight 指定と overflow-Y= scroll に

//smoothscroll
$(document).ready(function(){
 $("#Sa").on('click', function(event){
  if (this.hash !== "") {  // #hash 自体にdefault 動作以外の valueが有るようにする・見せかける
   event.preventDefault(); //#Sa をclick event 時の動作を防ぐ・overrideする(本来ならば、id="Sa" がある場所まで飛んでいく)
   var hash = this.hash; //click event 時の動作をvariable として格納(animate()で動けるように$(hash).offset().top で動ける)
   $('html, body').animate({scrollTop: $(hash).offset().top}, 900, function(){
    window.location.hash = hash; //(#) がURL に加えられる。
   });
  } //end if
 });
});

↑ 失敗

 ↑
 function makeHappen() {
  var x = document.getElementById("MH").children;
  var y = document.getElementById("MH");
  var i;
  for (i = 0; i < x.length; i++ ) {
   x[i].style.visibility = "visible";
  }
  y.style.visibility = "visible";
  /*var navibar = document.getElementById("navibar");
  var sticky = navibar.offsetTop;
  /*if (window.pageYOffset >= sticky) {
  if (x.style.visibility == "hidden") {
   x.style.visibility = "visible";  } else {
    x.style.visibility = "visible";
   }
  }
  • lolipop
  • marshmallow
  • nougat
  • oreo
  • pie

this is paragraph

this is another paragraph with class name of TP

.toggleClass("class name", true/false);
true/false で add/remove を操作できる。↓

↑last <div> will .css({"transform":"rotato(15deg)",
"opacity": "0.5"});

↑ .css({"transform":"rotate(0deg)",
"opacity":"1"}); -15degではない。
.toggleClass("show3"); ではもとに戻らず。

test

test2

対象が同じで別のfunction() 2つを割り当ててしまうと、最後に実行した方だけ有効になる(??)。
test2→.last()→Reset↑ →test2 の順だと2回目のtest2が効かない。

To the $("p").last() 
<style>
 .listitem_1, .listitem_3 {
  color: coral;
 }
 .listitem_0, .listitem_2, .listitem_4 {
  color:blue;
 } 
 </style>
 <script>
  $(document).ready(function(){
  $("#toggleP1").click(function(){
   $("#UL > li").toggleClass(function(n) {
    return "listitem_" + n;
   });
  });
 });
 //
  $(document).ready(function(){
  $("#toggleP2").click(function(){
    $(".containergrid > div > p").toggleClass("TP");
  });
 });
 //add and remove .toggleClass("class name", true/false);
  $(document).ready(function(){
  $("#add1").click(function(){
  $(".containergrid > div > p").toggleClass("TP1",true);
 });
  $("#remove1").click(function(){
    $(".containergrid > div > p").toggleClass("TP1", false);
  });
 });
 // 
 $(document).ready(function(){
  $("#btn7").click(function(){
  $("div").last()
  .css({"transform":"rotate(15deg)",
       "opacity":"0.5"});
 });
  $("#btn8").click(function(){
   $("div").last()
   .css({"transform":"rotate(0deg)",
          "opacity":"1"});
   /*.toggleClass("show3")*/
  });
 });
 </script>
 <style>
 .show3 {
   transform:rotate(0deg);
   opacity: 1;
  }    </style>

This is end of the page.

コメント

コメントを投稿

このブログの人気の投稿

スタートアップフォルダとAmatsukazeのエンコード設定

-
イメージ
スタートアップフォルダとAmatsukazeのエンコード設定 windows + R を押して shell:startup 打ち込めばスタートアップフォルダが出てくる。 今回はネットで調べず、もしかしたらwindows のヘルプも使えるんじゃないかなと思って使ってみたらバッチリだった。 対話型botのヘルプ ショートカットを作成する場合は、エクスプローラのアドレスバーを右クリックしてアドレスをコピーすればOK。 C:\Users\ user name \AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup windws help が意外と使えた。フォルダの名前が前もってわかっているのと、ここにショートカットをコピーすればいいのは知っていたからだが。 AmatsukazeServer のショートカットをここに置きたかった。EDCB で録画後のbatでエンコードする際にウィンドウのフォーカスが奪われてしまうのを防ぐため。 AmatsukazeServer を起動すると通常のAmatsukazeは起動しててもエラーが出るのでAmatsukazeClientを使う。 Amatsukaze のエンコード設定がGUIが独特でビットレート指定を弄っても、aviUtlでエンコードしたときのようにならず苦戦したので、参考に設定を載せておく。 お手軽エンコード設定。1080P TVで離れて見ても違いはわからない程度がNVEnc 2100Kbps くらいだと思う。PCの画面で近くで見るとちょっと劣化してるなぁとは感じる。特にこだわりは無く、h.264 3000Kbps でエンコードしたものと同等くらいの画質だと思う。1800~1500まで落とすとブロックノイズは無くても何か汚いなぁと感じると思う。 30分番組をCMカットして22分程度で380MBくらいのファイルが出来上がる。 TV の画質向上エンジンってすごいなぁと感じる部分でもあります。 -c hevc --profile main10 --vbrhq 2100 --vbr-quality 15 --maxbitrate 15500 --qp-init 15 --gop-len 90 git...
続きを読む

EDCB Recname_MacroのRMで文字削除がうまく行かない

-
EDCB Recname_Macro.dll EDCB Recname_Macro.dll で[]と文字を消す EDCBはxtne6fさんのものを使っています。 Read.me通りの設定で、Title2で[]でくくられている部分は削除出来るが、SSだけが欲しかったときのメモ(妥協案) Recname_Macro.dll と.iniをコピー コピーしたものは、Recname_Macro - コピー.dll と Recname_Macro.dll - コピー.ini となり、Recname_Macro.dll - コピー.iniをメモ帳などで編集。 簡単な使い方を少し Recname_Macroでタイトル内にある全角文字を半角に。サブタイトル先頭30文字を録画ファイル名に。 [SET] Macro=$ZtoH(Title2)$ $Head30(ZtoH(SubTitle))$$ZtoH(SDMM)$月$ZtoH(SDDD)$日$ZtoH(SDYYYY)$$SDW$.ts $ZtoH(Title2)$ ZtoH で全角を半角に。(Title2)で番組名（[]の括弧でくくられている部分を削除したもの）。ここで区切りをつけるため$で囲むと、$ZtoH(Title2)$ で上のは後ろに半角スペースが入っている。 $Head30(ZtoH(SubTitle))$ Head30でサブタイトル(SubTitle)の先頭30文字を指定し、先程と同じように ZtoH で全角を半角に、そして指定する対象がサブタイトル(SubTitle)。 半角に変換したサブタイトルの30文字が欲しいので()で括ると Head30(ZtoH(SubTitle)) 先頭30としたが15文字だけ欲しい場合は、Head15と変更出来る。 $ZtoH(SDMM)$月 全角から半角にした録画開始の2桁表示の月 $ZtoH(SDDD)$日 全角から半角にした録画開始の2桁表示の日にち $ZtoH(SDYYYY)$$SDW$.ts 全角から半角にした録画開始の西暦4桁 .ts で拡張子をtsに指定。 Rm/削除したい文字/ で文字を消す。 $Rm/[初][映]【最新作】/ZtoH(Title)$ 番組タイトル(Title)から[...
続きを読む

冠山トンネル周辺のライブカメラ

-
イメージ
冠山峠トンネル周辺のライブカメラ 国道303号 新城山橋 北のライブカメラ LINK 国道303号 大蔵谷橋 南のライブカメラ LINK 国道303号 道場山隧道 北のライブカメラ LINK 国道417号 藤橋根尾交差点福井方面のライブカメラ LINK 国道476号 白粟のライブカメラ LINK 福井県道2号武生美山線 清水谷のライブカメラ LINK 福井県道2号武生美山線 相木のライブカメラ >LINK> 国道476号 河原橋のライブカメラ 福井県道229号福井鯖江線 花堂のライブカメラ >LINK> 国道417号 南坂下町のライブカメラ LINK 福井県道229号福井鯖江線 赤十字病院入口のライブカメラ LINK> ...
続きを読む