jQuery is fun!

$(document).ready(function(){})

Top News Sticky ≡ Vanish End

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

Nice to meet YOU.

//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);
 })
})

coral

crimson

fuchsia

maroon

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

hidden box practice

This is hidden paragraph

• some link
• some link
• some link

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。

//trigger() and triggerHandler()
$(document).ready(function(){
$("#triggerEventP").select(function(){
 $("#triggerEventP").before("Select event triggered.<br>");
});
$("#btn4").click(function(){
 $("#triggerEventP").before('<span style="color: pink;">this is trigger() method.</span><br>')
 .trigger("select");
});
});
//triggerHandler()
$(document).ready(function(){
 $("#triggerEventP1").select(function(){
  $("#triggerEventP1").before("select event triggered.<br>");
 });
 $("#btn5").click(function(){
  $("#triggerEventP1").before('<span style="color: pink;">triggerHandler() is triggerd</span>.<br>')
  .triggerHandler("select");
 });
});
//
$(document).ready(function(){
 $("#flipB1").click(function(){
  $("#panel2").slideToggle("slow");
 });
});
 

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を付けてあげる。↓

 //getElementsByClassName のloop

 function doubleQ() {
  var x = document.getElementsByClassName("DQ1");
  var y = document.getElementById("DQ");
  var i;
  for (i = 0; i < x.length; i++) {
  x[i].style.color = "red";
  y.style.color = "pink";
 }
 }

 //hidden panel with style="display:none;" fadeToggle() 

 <div id="tem" style="display: none;">

 <script> 
 $(document).ready(function(){
 $("#DQ").click(function(){
  $("#tem").fadeToggle("slow");
  });
    }); 
 

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

Top About End

 <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

• try it of smooth scroll
• Event object↓
• .preventDefault()
• jQuery .scroll()
• jQuery HTML/CSS methods↓
• .scrollTop()
• .offset()
• location object↓
• location hash property Sets or return the anchor part(#) of URL
• window object↓
• windkow .top property

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.