DHTML tidbits CSS Overflow • Specifies how content larger than its box should behave. o overflow: visible o overflow: hidden → (default) content outside box → (clipped overflow) content hidden o overflow: scroll o overflow: auto → overflow content can be scrolled → Scrollbar when needed CSS: Box Size • Content fitted to the Viewport → Example <style> <style> html, body { #top { height: 100%; height: 80px; margin: 0px; } } #main { #top { height: calc(100vh - 100px); height: 80px; } } img { #main { width: 100%; height: calc(100% - 100px); height: 100%; } object-fit: contain; img { } width: 100%; </style> height: 100%; object-fit: contain; } </style> iFrame Issues • HTML 4: <iframe height=“pixels or %”> • HTML 5: <iframe height=“pixels”> ifr1.htm ← height=“100%” without DOCTYPE ifr2.htm ← height=“100%” with DOCTYPE ifr3.htm ← with CSS ifr4.htm ← with CSS & X-UA-Compatible <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> • IE=edge: IE to use the highest rendering mode available • chrome=1: IE to use chrome frame (chrome inside IE) if available CSS Tooltip Example • CSS • HTML <style> <div class="tooltip">Hover over me /* Tooltip container */ <span class="tooltiptext">Tooltip text</span> .tooltip { </div> position: relative; display: inline-block; } /* Position the tooltip: Top */ position: absolute; /* Tooltip text */ z-index: 1; .tooltip .tooltiptext { bottom: 100%; visibility: hidden; left: 50%; width: 120px; margin-left: -60px; background-color: black; color: #fff; text-align: center; padding: 5px 0; /* Position the tooltip: Left */ border-radius: 6px; position: absolute; z-index: 1; /* Position the tooltip text - see examples below! */ top: -5%; position: absolute; right: 105%; z-index: 1; } /* Position the tooltip: Right */ /* Show the tooltip text when you mouse over the tooltip position: absolute; container */ z-index: 1; .tooltip:hover .tooltiptext { top: -5px; visibility: visible; left: 105%; } </style> Javascript: Mouse Events Example • Javascript • HTML <img id='i0' src="a0.gif“ onmouseout="this.src='a0.gif'" // 1. reset to original images onClick="setImg('i0',‘a0b.gif')“ onmouseover="this.src=‘a0b.gif'“> // 2. restore onmouseout function function resetImg() { <img id='i1' src="a1.gif“ onmouseout="this.src='a1.gif'" var oImg = [“a0.gif",“a1.gif",“a2.gif"]; onClick="setImg('i1',‘a1b.gif')“ onmouseover="this.src=‘a1b.gif'“> for (i=0; i<oImg.length; i++) { var id= "i" + i; <img id='i2' src="a2.gif“ onmouseout="this.src='a2.gif'" var elm=document.getElementById(id); elm.src=oImg[i]; onClick="setImg('i2',‘a2b.gif')“ onmouseover="this.src=‘a2b.gif'“> elm.onmouseout = (function(i) { return function () { this.src=oImg[i]; } }(i)); Menu 1 Menu 2 Menu 3 } } Original & a0.gif a1.gif a2.gif MouseOut // 1. restore images & onmouseout functions MouseOver & a0b.gif a1b.gif a2b.gif // 2. set target image OnClick // 3. disable onmouseout function of target menu function setImg(id,img) { resetImg(); var elm=document.getElementById(id); elm.src=img; elm.onmouseout = function() { } } Bootstrap • What is Bootstrap? HTML + CSS-based design template + Javascript for easier web development Accommodates Responsive Web Design • Automatic adjustment to different devices (e.g. cellphone, tablet, desktop) • How to use Bootstrap Use CDN (Content Delivery Network) <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <!– jQuery, Popper.js, Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> Download from getbootstrap.com • Installed on widit.knu.ac.kr <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="/css/bootstrap.min.css"> <!– jQuery, Popper.js, Bootstrap JS --> <script src=“/js/jquery.min.js "></script> <script src=“/js/popper.min.js "></script> <script src="/js/bootstrap.min.js"></script> Bootstrap • Basic Use HTM5 doctype <!DOCTYPE html> Mobile-device compliance <meta name="viewport" content="width=device-width, initial-scale=1"> Containers → Example • container class → responsive fixed width container • container-fluid class → full width container Grids → Example • Similar to table → 12 columns across • Classes → xs (phone), sm (tablet), md (desktop), lg (large desktop) <div class="row"> <div class="col-sm-12">full width column</div> </div> <div class="row"> full width column <div class="col-sm-4">column 1</div> <div class="col-sm-4">column 2</div> column 1 column 2 column 3 <div class="col-sm-4">column 3</div> </div> W3.CSS • What is W3.CSS? CSS Framework for Responsive Web Design • Simpler than Bootstrap CSS • Independent of JavaScript & jQuery libraries • How to use W3.css Link to w3.css • Original URL <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css "> • Installed on widit.knu.ac.kr <link rel="stylesheet" href=“/css/w3.css "> • W3.CSS Intro Demo Templates • Navigation Examples Using Frames → Midterm Project Template Without Frames → Using PHP, Using CGI 2-level Navigation → Horizontal menus using an iFrame → Horizontal & Vertical menus using two iFrames → Vertical expanding menus 3-level Navigation → Horizontal menus using an iFrame → Horizontal & Vertical menus using two iframes within an iFrame.