//////////////////////////////////////// // Vanilla JQuery by Paul Caron /////////////////////////////////////// const $ = (query)=>{ if(typeof(query)==="function"){ document.addEventListener("DOMContentLoaded", query); return; }else if(query===window){ this.els=[window]; }else if(typeof(query)==="object"){ this.els=[query]; }else{ this.els=Array.from(document.querySelectorAll(query)); } this.html=(h="")=>{ if(h!=""){this.els.forEach((e)=>e.innerHTML=h);} return this.els.map((e)=>e.innerHTML); }; this.css=(property, value)=>{this.els.forEach((e)=>e.style[property]=value)}; this.on=(e,f)=>{this.els.forEach((elem)=>elem.addEventListener(e,f,true));}; this.off=(e,f)=>{this.els.forEach((elem)=>elem.removeEventListener(e,f,true));} this.attr=(a,value="")=>{ if(value!="") this.els.forEach((e)=>e.setAttribute(a,value)); return this.els.map((e)=>e[a]); } this.hide=(duration="")=>{ if(typeof(duration)==="number"){ this.els.forEach((e)=>hiding(e,duration)); }else{ this.els.forEach((e)=>e.style.display="none");} } this.show=(duration="")=>{ if(typeof(duration)==="number"){ this.els.forEach((e)=>showing(e,duration)); }else{ this.els.forEach((e)=>e.style.display="");} } this.fadeIn=(duration=600)=>{this.els.forEach((e)=>fadingIn(e,duration))} this.fadeOut=(duration=600)=>{this.els.forEach((e)=>fadingOut(e,duration))} this.text=()=>{return this.els.map((e)=>e.textContent);} this.val=()=>{return this.els.map((e)=>e.value);} this.append=()=>{} this.prepend=()=>{} this.at=(index)=>{return $(this.els[index]);} return this; } let isAnimating=false; function hiding(el,dur){ if(isAnimating){setTimeout(()=>{hiding(el,dur)},10);return;} isAnimating=true; let count=0; let W=el.width; let H=el.height; let O=el.style.opacity; (function animate(){ el.style.width=W*(20-count)/20+"px"; el.style.height= H*(20-count)/20+"px"; ; el.style.opacity=(20-count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.display="none"; el.style.height=H+"px"; el.style.width=W+"px"; el.style.opacity="1.0"; isAnimating=false; } })(); } function showing(el,dur){ if(isAnimating){setTimeout(()=>{showing(el,dur)},10);return;} isAnimating=true; let count=0; let W=el.width; let H=el.height; let O=el.style.opacity;el.style.display=""; (function animate(){ el.style.width=W*(count)/20+"px"; el.style.height= H*(count)/20+"px"; ; el.style.opacity=(count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="1.0"; isAnimating=false; } })(); } function fadingIn(el,dur){ if(isAnimating){setTimeout(()=>{fadeIn(el,dur)},10);return;} isAnimating=true; let count=0; (function animate(){ el.style.opacity=(count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="1.0"; isAnimating=false; } })(); } function fadingOut(el,dur){ isAnimating=true; let count=0; (function animate(){ el.style.opacity=(20-count)/20; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.opacity="0.0"; isAnimating=false; } })(); } ////////End of JQuery ////////////////////////////// function hideAll(){ $('section').hide(); $('.tab').css('border-bottom','1px solid black'); } function start(){ $("section").hide(); $("#news").show(); $('.tab').at(0).css('border-bottom','1px solid beige'); $("article").html(articles[0]); } $(start); let articles=[ "

Date: January 1, 2019

Happy new year everybody.

", "

Date: December 28, 2018

Example of tabs using custom made JQuery.

", "

Date: December 26, 2018

Custom made JQuery with ES6

" ]; let artIndex=0; function previousArticle(){ if(++artIndex>articles.length-1) artIndex=0; $("article").html(articles[artIndex]); } function nextArticle(){ if(--artIndex<0) artIndex=articles.length-1; $("article").html(articles[artIndex]); }

JQuery Blog - Tab