본문 바로가기

Web17

[chrome][devtools] elements tab right click not working Search: elements tab right click not working Move to elements tab on chrome "Developer Tools". If you try Zoom in/out with devtools active, right click will work at some point lol Answer: Just [Zoom out / Zoom in] in inspect element window until it work [use Ctrl + + / Ctrl + -]I know it's a crazy thing! but i tried alot and alot and i found that Cannot right click on an element from Dev Too.. 2022. 7. 7.
[javascript][event] Detect mouse right click: context menu Is right click a Javascript event? Search: how to detect mouse right click in javascript window.oncontextmenu = function () { alert('Right Click') } $("#myId").mousedown(function(ev){ if(ev.which == 3) { alert("Right mouse button clicked on element with id myId"); } }); javascript detect right click Code Example document.body.onclick = function (e) { var isRightMB; e = e || window.event; if ("wh.. 2022. 7. 5.
CSS selector with data attribute [css] selector [attributes=”—”], data attributes with data attribute div[data-your-name="tio"] { } with javascript dom manipulation const dom = document.querySelector('div.test[data-id="100"]'); General usage [class="(╯°□°)╯︵ ┻━┻"]{ color: red; font-weight: bold; } [data-value] { /* Attribute exists */ } [data-value="foo"] { /* Attribute has this exact value */ } [data-value*="foo"] { /*.. 2022. 7. 4.
@page: how to change size of page when printing, A4, portrait, landscape The @page CSS at-rule is used to modify some CSS properties when printing a document. @Page @page { } /* example */ @page { margin: 1cm; } @page :first { margin: 2cm; } size Specifies the target size and orientation of the page box's containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet. /* Keyword valu.. 2022. 7. 2.
@media only print: apply css only on print mode pinrt css inside @media only print only applied when printing @media only print { .body { background: black !important; } 2022. 7. 2.
requestFullscreen(): How to make dom Fullscreen [Document.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement) / [ShadowRoot.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/fullscreenElement) The fullscreenElement property tells you the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that's currently being displayed in fullscreen mode on the DOM (or .. 2022. 7. 2.
Event vs CustomEvent && How to trigger event with data Event vs CustomEvent CustomEvent can send data through 'detail' property, but Event can not do that; Event const eventInstance = new Event(':eventName'); // add event on document document.addEventListener(':eventName', (e) => { // TODO console.log(e); }); // trigger event document.dispatch(eventInstance);CustomEvent const customEventInstance = new CustomEvent(':custom.. 2022. 6. 27.