DHTML tidbits
iFrame Issues HTML 4: <iframe height=“pixels or %”> 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 /* Position the tooltip: Top */ <style> /* Tooltip container */ .tooltip { position: relative; display: inline-block; } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; } </style> HTML <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> /* Position the tooltip: Top */ position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* Position the tooltip: Left */ position: absolute; z-index: 1; top: -5%; right: 105%; /* Position the tooltip: Right */ position: absolute; z-index: 1; top: -5px; left: 105%;
Javascript: Mouse Events Example // 1. reset to original images // 2. restore onmouseout function function resetImg() { var oImg = [“a0.gif",“a1.gif",“a2.gif"]; for (i=0; i<oImg.length; i++) { var id= "i" + i; var elm=document.getElementById(id); elm.src=oImg[i]; elm.onmouseout = (function(i) { return function () { this.src=oImg[i]; } }(i)); // 1. restore images & onmouseout functions // 2. set target image // 3. disable onmouseout function of target menu function setImg(id,img) { resetImg(); elm.src=img; elm.onmouseout = function() { } HTML <img id='i0' src="a0.gif“ onmouseout="this.src='a0.gif'" onClick="setImg('i0',‘a0b.gif')“ onmouseover="this.src=‘a0b.gif'“> <img id='i1' src="a1.gif“ onmouseout="this.src='a1.gif'" onClick="setImg('i1',‘a1b.gif')“ onmouseover="this.src=‘a1b.gif'“> <img id='i2' src="a2.gif“ onmouseout="this.src='a2.gif'" onClick="setImg('i2',‘a2b.gif')“ onmouseover="this.src=‘a2b.gif'“> Menu 1 Menu 2 Menu 3 Original & MouseOut a0.gif a1.gif a2.gif MouseOver & OnClick a0b.gif a1b.gif a2b.gif
Bootstrap What is Bootstrap? How to use 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) <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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 library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="/js/bootstrap.min.js"></script>
Bootstrap Basic Use HTM5 doctype Mobile-device compliance <!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"> <div class="col-sm-4">column 1</div> <div class="col-sm-4">column 2</div> <div class="col-sm-4">column 3</div> </div> full width column column 1 column 2 column 3
Bootstrap Other Examples Images Example Grids 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) Classes → img-rounded, img-circle, img-thumbnail, img-responsive Collapse Example Webpage Template Example
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 & Vertical menus using two iframes within an iFrame