dhtml alphabet soup n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
DHTML & ALPHABET SOUP PowerPoint Presentation
Download Presentation
DHTML & ALPHABET SOUP

Loading in 2 Seconds...

play fullscreen
1 / 21

DHTML & ALPHABET SOUP - PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'DHTML & ALPHABET SOUP' - floriane-martin


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
dhtml alphabet soup

DHTML & ALPHABET SOUP

Sp.772 spring 2002

a combination
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
slide3
DOM
  • Document.images[] accesses all the images in a document (we’ve seen it in billboard type image-displays)
  • Suppose we want to access headings, paragraphs, and individual words
  • <p id=“simple”>simple paragraph</p>
  • In javascript: var para = document.getElementByID(“simple”)
getelementsby
getElementsby…
  • Var headings = document.getElementsByTagName(“h1”);
  • Var secondheading = headings[2]
slide5
CSS
  • The element of style
  • Para.style.color = “#00FF00”;
  • Changes the paragraph to green
  • Other properties: style.font-size style.font-family style.background-color, style.background-image
rollover link color changes
Rollover link color changes

<style>

a {text-decoration: none; color: #0000FF; }

</style>

<script language=“javascript”>

Function turnOn(currentLink) {

CurrentLink.style.color = “#990000”;

CurrentLink.style.textDecoration = “underline”;}

continued
Continued…
  • Function turnOff(currentlink) {

currentLink.style.color = “#0000FF”;

currentLink.style.textDecoration = “none”;}

</script>

<head> <a href=“home.html”

onMouseOver=“turnOn(this);” onMouseOut = “turnOff(this);”> home </a>

explained
..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
A dynamic CSS toolbar..hang on!
  • Highlights cells of a table
  • Html for a cell:
  • <td class = “toolbar” id = “news” width -= “120”> <a href=“#” onMouseOver=“linkOn(this, ‘news’);”
  • onMouseOut = “linkOff(this, ‘news’);”>

News! </a> </td>

linkon
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
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
The header
  • <style type=“text/css”>

a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration: none;}

. toolbar { background-color: #666666;}

</style>

style classes
style classes
  • <style type=“text/css”>

.welcome { font-family….}

</style>

….

<p class=“welcome”>Welcome to Bill’s World!</p>

layers
Layers
  • A positionable container (like photoshop)
  • x,y,z dimensions
  • z dimension points out at the user
  • <div id=“MyLayer” style = “position.absolute;z-index:1; left:100px;top:10px; width:300px;height:30px; background-color: #FFCC00;”>
div attributes
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
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
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
Drop Down Menu Example
  • <td width=“100”>
  • <div id = “linksLayer” style=“position:absolute;left:211px….visibility:hidden;z-index:2”>
  • <a href=“#”>DHTML</a><br>
  • <a href=“#>CSS</a><br>

</div>

<a href=“#” onClick=showLayer(‘linksLayer’);” onDblClick=“hideLayer(‘linksLayer’);”>Links</a> </td>

show hidelayer
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
more info
  • w3c.org/style
  • w3c.org/dom
exercise
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 EACHGROUP MUST GO TO PRESENT THAT NIGHT. 7:30pm