DHTML tidbits.

Slides:



Advertisements
Similar presentations
Twitter Bootstrap. Agenda What is it? Grids and Fluid layouts Globals and Typography Tables, Forms and Buttons Navigation Media and thumbnails Responsive.
Advertisements

Very quick intro HTML and CSS. Sample html A Web Title.
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.
CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.
Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.
Bootstrap by:- Vignesh Dhamodaran. What is Bootstrap? Originally created by a designer and a developer at Twitter. So initial name is Twitter Bootstrap.
Positioning Objects with CSS and Tables
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap.
Front-end framework 1.
HTML HTML5 InfoTech Seminar.
Bootstrap L. Grewe.
Laying out Elements with CSS
Bootstrap KS Technologies.
CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.
CNIT131 Internet Basics & Beginning HTML
PHP MySQL Crash Course with HTML CSS
Twitter Bootstrap Grid System
Google fonts CSS box model
CSS Layouts: Grouping Elements
A gentle introduction to Bootstrap
CSS Bootstrap.
Website implementation
Front-End Framework for Responsive Web Sites
Box model.
Web Systems & Technologies
Web Programming– UFCFB Bootstrap Lecture 12
User Interface Design and Usability Bootstrap
CS3220 Web and Internet Programming Page Layout with CSS
CS3220 Web and Internet Programming Introduction to Bootstrap
IS1500: Introduction to Web Development
CS3220 Web and Internet Programming Page Layout with CSS
Bootstrap響應式網頁設計 (Responsive Web Design, RWD)
CSS part 2 Outro.
The Internet 10/25/11 XHTML Tables
Chapter 8 More on Links, Layout, and Mobile Key Concepts
Revision.
Bootstrap Topics What is bootstrap? Documentation
2017, Fall Pusan National University Ki-Joune Li
Objectives Create a reset style sheet Explore page layout designs
CSS Box Model.
DHTML tidbits.
DynamicHTML Cascading Style Sheet Internet Technology.
A gentle introduction to Bootstrap
Creating a Webpage with External CSS
Responsive Web Design and Bootstrap
DynamicHTML Cascading Style Sheet Internet Technology.
Basics of Web Design Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2014 Terry Ann Morris, Ed.D.
DHTML tidbits.
Responsive Grid Layout with Bootstrap
SEEM4570 Tutorial 3: CSS + CSS3.0
Responsive Web Design (RWD)
Chapter 2 Bootstrap Grid System
CSS and Bootstrap MIS 2402 Jeremy Shafer Department of MIS
CS3220 Web and Internet Programming Page Layout with CSS
Responsive Web Design and Bootstrap
CS3220 Web and Internet Programming Introduction to Bootstrap
Web Page Layout Imran Rashid CTO at ManiWeber Technologies.
CSS and Class Tools.
Bootstrap 4 December 17, 2018.
Web Client Side Technologies Raneem Qaddoura
Web Client Side Technologies Raneem Qaddoura
CS3220 Web and Internet Programming More CSS
CSc 337 Lecture 5: Grid layout.
Bootstrap/WebFlow Web development of the future
Presentation transcript:

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