SPACEBESTMIN

글

8월, 2019의 게시물 표시

DOM : improved tooltip behavior

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> body { height: 2000px; /* the tooltip should work after page scroll too */ } .tooltip { position: fixed; z-index: 100; padding: 10px 20px; border: 1px solid #b3c9ce; border-radius: 4px; text-align: center; font: italic 14px/1.3 sans-serif; color: #333; background: #fff; box-shadow: 3px 3px 3px rgba(0, 0, 0, .3); } #house { margin-top: 50px; width: 400px; border: 1px solid brown; } #roof { width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 20px solid brown; margin-top: -20px; } p { text-align: justify; margin: 10px 3px; } </style> </head> <body> <div data-tooltip="Here

자세한 내용 보기

DOM : Selectable list

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> .selected { background: #0f0; } li { cursor: pointer; } </style> </head> <body> Click on a list item to select it. <br> <ul id="ul"> <li>Christopher Robin</li> <li>Winnie-the-Pooh</li> <li>Tigger</li> <li>Kanga</li> <li>Rabbit. Just rabbit.</li> </ul> <script> ul.onclick = function(event) { if(event.target.tagName != "LI") return; //only going to be applied on lis if (event.ctrlKey || event.metaKey) { toggleSelect(event.target); } else { singleSelect(event.target); } } ul.onmousedown = function() { return false; };//disables default mouse action like being selected //as the task a

자세한 내용 보기

DOM : canceling customed / dispatched event

<HTML> <head> <meta charset="utf-8"> </head> <body> <pre id="rabbit"> |\ /| \|_|/ /. .\ =\_Y_/= {>o<} </pre> <button onclick="hide()">Hide()</button> <script> function hide(){ let event = new CustomEvent("hide", { cancelable:true }); if(!rabbit.dispatchEvent(event)) {//if it is not dispatched alert('The action was prevented by a handler'); } else {//if it is dispatched, the tag is hidden as supposed to rabbit.hidden = true; } } rabbit.addEventListener('hide', function(event) { if(confirm("Call preventDefault?")) { event.preventDefault(); } }); </script> </body> </HTML>

자세한 내용 보기

DOM : Customed Event and dispatchEvent

<HTML> <head> <meta charset="utf-8"> </head> <body> <h1 id="elem">Hello from the Min script!</h1> <script> document.addEventListener("hello", function(event) { alert("Hello from " + event.target.tagName); }); //i like it when the code is semantic hahaha let event = new Event("hello", {bubbles: true}); elem.dispatchEvent(event); </script> </body> </HTML>

자세한 내용 보기

DOM : Image Gallery HTML

<HTML> <head> <title>Gallery</title> <link rel="stylesheet" href="gallery.css"></link> <meta charset="utf-8"> </head> <body> <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p> <ul id="thumbs"> <ul> <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-lg.jpg"></a> </ul> <ul> <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-lg.jpg"></a> </ul> <ul> <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-lg.jpg"></a> </

자세한 내용 보기

DOM : Image Gallery css

body{ margin:0; padding:0; font: 75%/120% sans-serif; } h2 { font: bold 190%/100% sans-serif; margin: 0 0 .2em; } h2 em { font: normal 80%/100% sans-serif; color: #999999; } #largeImg{ border:solid 1px #ccc; padding:5px; width: 550px; height:400px; } /*in the example it was thumbs a, but it didnt control the size of image so I changed it to be img, works fine*/ #thumbs img { border: solid 1px #ccc; width: 100px; height:100px; padding:3px; margin:2px; float: left; } #thumbs a:hover { border-color: #FF9900; }

자세한 내용 보기

DOM : Catch links in the element

<HTML> <body> <head> <style> /* # => select the element BY ITS ID*/ #contents { padding:5px; border:1px green solid; } </style> </head> <fieldset id="contents"> <legend>#contents</legend> //legend is for title <p> How about to read <a href="http://wikipedia.org">Wikipedia</a> or visit <a href="http://w3.org"><i>W3.org</i></a> and learn about modern standards? </p> </fieldset> <script> contents.onclick = function(event) { function handleLink (href) { let isLeaving = confirm(`Leave for ${href}`); /*confirm pops yes or no window*/ if (!isLeaving) return false; /*if user clicked no, isLeaving becomes false, link canceled*/ } let target = event.target.closest('a'); /*closest traverses parents(heading towards th

자세한 내용 보기

DOM : Browser default action preventing : how to

<HTML> <body> <Script> function handler(){ alert("..."); return false; } </Script> <a href="http://w3.org" onclick="return handler()">the browser will go to w3.org</a> </body> /*otherwise we can take event parameter into function and use event.preventDefault() when handler's retun value should be used, on* attribute must specify on* "= return handler()" otherwise return value is usually ignored*/ </HTML>

자세한 내용 보기

DOM : Sortable table

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 4px; } th { cursor: pointer; } th:hover { background: yellow; } </style> </head> <body> <table id="grid"> <thead> <tr> <th data-type="number">Age</th> <th data-type="string">Name</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>John</td> </tr> <tr> <td>2</td> <td>Pete</td> </tr> <tr> <td>12</td> <td>Ann</td> </tr> <tr>

자세한 내용 보기

DOM : tree menu - hide when clicked

<!DOCTYPE HTML> <html> <head> <style> .tree span:hover { font-weight: bold; } .tree span { cursor:pointer; /*damn! its to show that its clickable*/ } </style> <meta charset="utf-8"> </head> <body> <ul class="tree" id="tree"> <li>Animals <ul> <li>Mammals <ul> <li>Cows</li> <li>Donkeys</li> <li>Dogs</li> <li>Tigers</li> </ul> </li> <li>Other <ul> <li>Snakes</li> <li>Birds</li> <li>Lizards</li> </ul> </li> </ul> </li> <li>Fishes <ul> <li>Aquarium <ul>

자세한 내용 보기

DOM : Hide messages with delegation

<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="messages.css"> <meta charset="utf-8"> </head> <body> <div id="container"> <div class="pane"> <h3>Horse</h3> <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p> <button class="remove-button">[x]</button> </div> <div class="pane"> <h3>Donkey</h3> <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a

자세한 내용 보기

DOM : Counter button

<html> <body> Counter: <input type="button" value="1" data-counter><br> One more counter: <input type="button" value="2" data-counter> <script> document.addEventListener('click', function(event) { if (event.target.dataset.counter != undefined){ //if THE ATTRIBUTE 'COUNTER' exists... event.target.value++; } }); </script> </body> </html> /*this small little so funny thing ㅠㅠㅠㅠ so cute and funny*/

자세한 내용 보기

DOM : Setting data-action and event listener class using buttons

<HTML> <body> <div id="menu> <button data-action="save">Save</button> <button data-action="load">Load</button> <button data-action="search">Search</button> </div> <script> class Menu { constructor(elem) { this._elem = elem; elem.onclick = this.onClick.bind(this); //- //without the binding in here, //it would reference the DOM element 'elem' //not the menu object } save() { alert('saving'); } load(){ alert('load'); } search(){ alert('search'); } onClick(event) { let action = event.target.dataset.action; //event.target = button //event.target.dataset.action = button data-action="save" //means the DATA-ACTION ATTRIBUTE VALUE. the wo

자세한 내용 보기

DOM : Event delegation practice using table : CSS

#bagua-table th{ } #bagua-table td { width: 150px; white-space: nowrap; text-align: center; vertical-align: bottom; padding-top: 5px; padding-bottom: 12px; } #bagua-table .nw { background: #999; } #bagua-table .n { background: #03f; color: #fff; } #bagua-table .ne { background: #ff6; } #bagua-table .w { background: #ff0; } #bagua-table .c { background: #60c; color: #fff; } #bagua-table .e { background: #09f; color: #fff; } #bagua-table .sw { background: #963; color: #fff; } #bagua-table .s { background: #f60; color: #fff; } #bagua-table .se { background: #0c3; color: #fff; }

자세한 내용 보기

DOM : Event delegation practice using table : html

<HTML> <body> <link type="text/css" rel="stylesheet" href="bagua.css"> <table id="bagua-table"> <tr> <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th> </tr> <tr> <td class="nw"><strong>Northwest</strong> <br>Metal <br>Silver <br>Elders </td> <td class="n"><strong>North</strong> <br>Water <br>Blue <br>Change </td> <td class="ne"><strong>Northeast</strong> <br>Earth <br>Yellow <br>Direction </td> </tr> <tr> <td class="w"><strong>West </strong> <br>Metal <br>Gold <br>Youth </td

자세한 내용 보기

DOM : bubbling and capturing example

<HTML> <head> <meta charset="utf-8"> </head> <style> form{ background-color: green; position: relative; width:150px; height: 150px; text-align: center; cursor:pointer; } div { background-color: blue; position: absolute; top: 25px; left: 25px; width: 100px; height: 100px; } p{ background-color: red; position: absolute; top: 25px; left: 25px; width: 50px; height: 50px; line-height: 50px; margin: 0; } body { line-height: 25px; font-size: 16px; } </style> <body> A click shows both <code>event.target</code> and <code>this</code> to compare <form id="form">FORM <div>DIV <p>P</p> </div> </form> </body> <script> form.onclick = function(event) { event.target.style.backgroudCol

자세한 내용 보기

DOM : making a carousel - CSS aprt

body { padding: 10px; } .carousel { position: relative; width: 398px; padding: 10px 40px; border: 1px solid #CCC; border-radius: 15px; background:#eee; } .carousel img { width:130px; height:130px; /*make it block to remove space around images being inline*/ display:block; } .arrow { position:absolute; /*parent elem position is relative*/ top: 60px; /*FUCKING TOP WAS SET TO 60PX*/ padding: 0; background: #ddd; border-radius: 15px; border: 1px solid gray; font-size: 24px; line-height: 24px; color: #444; display: block; } .arrow:focus { outline: none; } .arrow:hover { background: #ccc; cursor: pointer; } .prev { left: 7px; } .next{ right:7px; } /*gallery is a div wrapping only the images*/ .gallery { width:390px; overflow:hidden; /*scroll-overed images are hidden*/ } .gallery ul{/*the elem which contains all imgs*/ height:130px; width:9999px; /*with those two se

자세한 내용 보기

DOM : Making a carousel - js part

<!DOCTYPE html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="carousel" class="carousel">  <button class="arrow prev">⇦</button> <div class="gallery">  <ul> <li><img src="https://en.js.cx/carousel/1.png"></li> <li><img src="https://en.js.cx/carousel/2.png"></li> <li><img src="https://en.js.cx/carousel/3.png"></li> <li><img src="https://en.js.cx/carousel/4.png"></li> <li><img src="https://en.js.cx/carousel/5.png"></li> <li><img src="https://en.js.cx/carousel/6.png">&

자세한 내용 보기

DOM : Add remove button - CSS part

body { margin: 10px auto; width: 470px; } h3 { margin: 0; padding-bottom: .3em; font-size: 1.1em; } p { margin: 0; padding: 0 0 .5em; } .pane { background: #edf5e1; padding: 10px 20px 10px; border-top: solid 2px #c4df9b; border:dotted; position: relative; /*PARENT POSITION RELATIVE*/ } .remove-button { position: absolute; /*CHILD POSITION ABSOLUTE*/ font-size: 110%; color: darkred; right: 10px; width: 24px; height: 24px; background: transparent; cursor: pointer; /* when parent element has the position relative and the child elem has absolute, ANT ADDITIONAL POSITIONING WILL BE DONE RELATIVE TO THE PARENT ELEMENT */ }

자세한 내용 보기

DOM : Add remove button - JS part

<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="messages.css"> <meta charset="utf-8"> </head> <body> The button code (may need to adjust CSS): <button class="remove-button">[x]</button> <div> <div class="pane"> <h3>Horse</h3> <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p> </div> <div class="pane"> <h3>Donkey</h3> <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E

자세한 내용 보기

DOM : making a toggling menu

<HTML> <head> <meta charset="utf-8"> <style> /*selecting all the ul in the class menu*/ .menu ul { margin: 0; list-style: none; padding-left: 20px; display: none } /*name of object element : menu, adding something at where : before*/ .menu .title { font-size: 18px; cursor: pointer; } .menu .title::before { content: '▶ '; font-size: 80%; color: green; } /*here open is an attribute of menu, should be connected without a space, dot operator*/ .menu.open .title::before { /*it can have open because the menu is span ele*/ content: '▼ '; } .menu.open ul { display: block; } </style> </head> <body> <div id = "sweeties" class="menu"> <span class="title">Sweetie

자세한 내용 보기

DOM : make the ball move by clicking the field

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> #field { width: 200px; height: 150px; border: 10px solid black; background-color: #00FF00; position: relative; overflow: hidden; cursor: pointer; } #ball { position: absolute; left: 0; top: 0; width: 40px; height: 40px; transition: all 1s; } </style> </head> <body style="height:2000px"> Click on a field to move the ball there. <br> <div id="field"> <img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

자세한 내용 보기

DOM : hide itself when clicked

<HTML> <body> <input type = "button" id="hider" value="Click to hide the text" onclick="this.hidden = true"/> <script> </script> </body> </HTML> //I tried to fix the eventlistener fucntion //but then the solution used HTML attrubute which is much simpler //it feels odd to write onclick="this.hidden = true" //it feels as if I am adding a raw line of code for this little bracket machine to run

자세한 내용 보기

DOM : click button to hide the text

<HTML> <body> <input type = "button" id="hider" value="Click to hide the text"/> <div id="text">text</div> <script> document.getElementById('hider').onClick = fuction(){ document.getElementById('text').hidden = true; } </script> </body> </HTML> //you think I thought of it and wrote it all? //nah fuck you I saw the solution and typed it //lol no offence

자세한 내용 보기

DOM : eventlistener object with methods in it

<HTML> <body> <button id="elem">Click me</button> <script> class Menu { handleEvent(event) { // mousedown -> onMousedown let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1); //to generate the array element's name to be same as the functions below //toUppercase to make M //and slice(1) to get the rest of charactors without m, ousedown / ouseup this[method](event); } onMousedown() { elem.innerHTML = "Mouse button pressed"; } onMouseup() { elem.innerHTML += "...and released."; } } let menu = new Menu(); elem.addEventListener('mousedown', menu); elem.addEventListener('mouseup', menu); </script> </body> </HTML>

자세한 내용 보기