Dhtml & Alphabet Soup - Mit

Dhtml & Alphabet Soup - Mit

DHTML & ALPHABET SOUP Sp.772 spring 2002 A combination Html 4.0 Javascript The document object model (DOM) -accessing individual document objects Cascading style sheets -- separation of form and content Netscape 6, IE 5.5/6

DOM Document.images[] accesses all the images in a document (weve seen it in billboard type image-displays) Suppose we want to access headings, paragraphs, and individual words

simple paragraph

In javascript: var para =

document.getElementByID(simple) getElementsby Var headings = document.getElementsByTagName(h1); Var secondheading = headings[2] CSS

The element of style Para.style.color = #00FF00; Changes the paragraph to green Other properties: style.font-size style.fontfamily style.background-color, style.background-image

Rollover link color changes

home

..explained When the users mouse goes over a link the event handler passes it to turnOn, modifying the style of the current link Note that values for style elements are specified as strings (e.g. underline) A dynamic CSS toolbar..hang on!

Highlights cells of a table Html for a cell:

News!

linkOn

Function linkOn(currentLink, cell) { currentLink.style.color = #990000; currentLink.style.fontWeight = bold; currentLink.style.textDecoration = underline; Var CurrentCell = document.getElementById(cell); currentCell.style.backgroundColor=#CCCCCC; } linkOff

Function linkOn(currentLink, cell) { currentLink.style.color = #FFFFFF; currentLink.style.fontWeight = normal; currentLink.style.textDecoration = none; Var CurrentCell = document.getElementById(cell); currentCell.style.backgroundColor=#666666; } The header

style classes

.

Welcome to Bills World!

Layers

A positionable container (like photoshop) x,y,z dimensions z dimension points out at the user

div attributes position: can be absolute or relative (to any containing elemnt) left: distance from left edge of document/containing element (eg 100px) top: distance from top..(in pixels, too) z-index: stacking order of display if layers are overlapping. higher numbers win. elements without a z-index lose

Tabbed Folders (a la Hotmail) visibility:visible visibility:hidden have some function keep track of the current tab and the moused-over newtab, change their visibilities appropriately Browser Detection

if (document.getElementById) {isDOM = true;} else if(parseInt(navigator.appVersion) >= 4) { if(navigator.appName == Netscape) {isNN4 = true;} else if (navigator.appName==Microsoft Internet Explorer) {isIE4= true;}

Drop Down Menu Example

n;z-index:2> DHTML
CSS

Links

show/hideLayer function showLayer(layerid) { var layer=document.getElementByID(layerid); layer.style.visibility = visible;} function hideLayer(layerid) { var layer=document.getElementByID(layerid);

layer.style.visibility = hidden;} more info w3c.org/style w3c.org/dom Exercise

drop linkys WEDNESDAY: SHIGERU MIYAGAWA GUEST LECTURES!!!!!!!!!!! WILL BE FUN.

UROP OPPRTUNITIES ABOUND! REMINDER: May 15th FINAL PROJECTS DUE AT LEAST ONE MEMBER FROM EACH GROUP MUST GO TO PRESENT THAT NIGHT. 7:30pm

Recently Viewed Presentations

  • Pathogens - CEE Cornell

    Pathogens - CEE Cornell

    Public Health Implications of Water Supply Improvements Did Environmental Engineers save the world? Review: Public Health Implications of Water Supply Improvements The life expectancy transition The role of water supply, sanitation, and hygiene In the Global North a century ago...
  • Accrediting undergraduate professional skills Bill Mitchell ...

    Accrediting undergraduate professional skills Bill Mitchell ...

    BCS Academy of Computing. Initially offer different academic and professional skills accreditation. Continue with Academic accreditation focusing on knowledge and understanding, including professionalism. Introduce Professional Skills accreditation: currently for placements and based on RITTech standard
  • State/Local Responsibilities An Evolving Relationship

    State/Local Responsibilities An Evolving Relationship

    Joseph M. Healy, Jr. PhD, Chief Executive Officer, Comprehensive Care Management Corp. Tom Holt, President & CEO, Lutheran Social Services. Work Group Members. Mark Lane, President & CEO, New York State Catholic Health Plan, Inc., Fidelis Care New York ......
  • Transgnicos, plen, mel, comrcio, conhecimento cientfico... Rubens Onofre

    Transgnicos, plen, mel, comrcio, conhecimento cientfico... Rubens Onofre

    Transgênicos, pólen, mel, comércio, conhecimento científico... Rubens Onofre Nodari Prof. Titular, UFSC, , Florianópolis, SC Programa de Pós-graduação em Recursos Genéticos Vegetais
  • Does higher education support the integration of ... - CDPA

    Does higher education support the integration of ... - CDPA

    AODA. first legislation of its kind in the world. Proactive, specific measures to prevent, identifying and remove barriers to general accessibility. Standards in several areas. Universities: must do both: enhance general accessibility while providing individualized accommodations
  • LE RETARD - Académie de Lyon

    LE RETARD - Académie de Lyon

    LE RETARD C' est un simple décalage de maturation d'une fonction par rapport à une norme d'âge ou sociétale, mais l'évolution spontanée et/ou la prise en charge adaptée vont entrainer la récupération ad intégrum LE TROUBLE Le trouble est une...
  • Vocabulary Workshop

    Vocabulary Workshop

    Asylum (n.) an institution for the care of children, elderly people, etc.; a place of safety. Synonyms: sanatorium, sanctuary, refuge
  • Accomplishments of Affordable Care Act March 19, 2019

    Accomplishments of Affordable Care Act March 19, 2019

    Thanks to the Affordable Care Act (ACA), more than 20 million people have gained health coverage. About half of the increase reflects gains in private coverage, due to ACA policies such as subsidies for individual market coverage, reforms to the...