Download presentation
Presentation is loading. Please wait.
1
DHTML tidbits
2
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
3
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%;
4
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
5
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=" <!-- jQuery library --> <script src=" <!-- Latest compiled JavaScript --> <script src=" 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=" <!-- Latest compiled JavaScript --> <script src="/js/bootstrap.min.js"></script>
6
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
7
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
8
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
Similar presentations
