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
height: 100%; object-fit: contain; } iFrame Issues
• HTML 4:
ifr1.htm ← height=“100%” without DOCTYPE ifr2.htm ← height=“100%” with DOCTYPE ifr3.htm ← with CSS ifr4.htm ← with CSS & X-UA-Compatible
• 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 Javascript: Mouse Events Example
• Javascript • HTML // 2. restore onmouseout function function resetImg() { for (i=0; i • 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) Download from getbootstrap.com • Installed on widit.knu.ac.kr Bootstrap • Basic Use HTM5 doctype Mobile-device compliance 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)
• 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
• Installed on widit.knu.ac.kr
• 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