//////////////////////////////////////// // 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.toggle=()=>{this.els.forEach((e)=>{e.style.display=e.style.display=="none"?"":"none"})}; this.slideToggle=(dur=300)=>{ this.els.forEach((e)=>{ if(e.style.display=="none"){ slidingDown(e,dur); }else{ slidingUp(e,dur); } }) }; this.text=()=>{return this.els.map((e)=>e.textContent);} this.val=()=>{return this.els.map((e)=>e.value);} this.append=(h)=>{this.els.forEach((e)=>{e.innerHTML=e.innerHTML+h;})}; this.prepend=(h)=>{this.els.forEach((e)=>{e.innerHTML=h+e.innerHTML;})} 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 S=1.0; el.style.display=""; (function animate(){ el.style.transform=`scale(${S*(count)/20})`; // el.style.height= H*(count)/20+"px"; ; //console.log(el.style.transform); 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; el.style.display=""; (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; } })(); } function slidingDown(el,dur){ if(isAnimating){setTimeout(()=>{slidingDown(el,dur)},20);return;} isAnimating=true; let count=0; el.style.display=""; let compStyles = window.getComputedStyle(el); let H=parseInt(compStyles["height"]); (function animate(){ el.style.height= H*(count)/20+"px"; ; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ isAnimating=false; } })(); } function slidingUp(el,dur){ if(isAnimating){setTimeout(()=>{slidingUp(el,dur)},20);return;} isAnimating=true; let count=0; let compStyles = window.getComputedStyle(el); let H=parseInt(compStyles["height"]); (function animate(){ el.style.height= H*(20-count)/20+"px"; ; count++; if(count<=20){ setTimeout(animate,dur/20); }else{ el.style.display="none"; el.style.height= H+"px"; isAnimating=false; } })(); } ////////End of JQuery ////////////////////////////// let pIndex=0; let products=[ "

Spoon

Spoons are ideal for eating soup.

", "

Fork

Forks... They have teeth but they don't bite.

", "

Knife

Butter knifes to spread jam or butter on your food.

", "

Plate

Here is a nice plate. Bon appetit.

" ]; let loadedCount=0; function countImages(){ $("img").on("load",()=>{ loadedCount++; if(loadedCount==4){ start(); } }); } function start(){ $("#loader").hide(); $("#products_list li").on("click",(e)=>{ $('section').hide(); $("#products_list").slideToggle(200); $("#products").show(); pIndex=e.target.id; $("#products article").html(products[pIndex]); $("#products img").hide(); $("img").at(pIndex).show(900); }); $("section").hide(); $("section").on("click",()=>{$(".sub_nav_item").hide()}) } $(countImages);

Jquery blog - DropDown menu