1. CNIT 133 Interactive Web Pags – JavaScript and AJAX DHTML

2. Agenda My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).http://fog.ccsf.edu/~hyip Dynamic HTML. DHTML samples.

3. What is Dynamic HTML? Dynamic HTML is a combination of Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. HTML provides document structure and context for the information contained in a Web page. CSS provides the details on how to present that information. JavaScript provides the interactivity and dynamism.

4. HTML From the earliest days of the web, HTML was only meant to provide structure for a document and context for its content. This text This is a paragraph, more … item one item two item three

5. Cascading Style Sheet (CSS) CSS provides a rich selection of presentation effects that can be applied to all HTML elements, such as color, background, margins, and borders. With CSS, Web developers can set indents on paragraphs, specify a default font for an entire Web site with one line of code, use small caps, assign an image as a bullet for a list item, and accomplish many more things that are impossible with HTML alone.

6. Cascading Style Sheet (CSS) body { background-color: white; color: black; margin: 20px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } h1 { font-weight: bold; text-align: center; color: purple; background-color: yellow; }

7. JavaScript JavaScript brings dynamism and interactivity to DHTML. Not only can it provide interactivity with event handlers, it can also modify document object properties on the fly, pop up windows, and write content dynamically. In the HTML arena, JavaScript is primarily used to modify stylesheet properties on the fly, after a Web page is loaded, to create animations and special effects.

8. DHTML – only CSS sample DHTML CSS /* CSS embed style */ h1 { color:red; text-align: center; } p { background: white; color: black; font-style: normal; font-vairant: normal; font-weight: 400; font-size: 5.6mm; letter-spacing: 2.3mm; text-decoration: none; text-transform: none; text-align: left; }

9. DHTML – only CSS sample function changeIt() { document.getElementById("txt2").style.background = "green"; document.getElementById("txt2").style.color = "white"; document.getElementById("txt2").style.fontStyle = "italic"; document.getElementById("txt2").style.fontVariant = "small-caps"; document.getElementById("txt2").style.fontWeight = "bolder"; document.getElementById("txt2").style.fontSize = "0.5in"; document.getElementById("txt2").style.textDecoration = "underline"; document.getElementById("txt2").style.visibility = "visible"; document.getElementById("txt1").style.visibility = "hidden"; } DHTML CSS This is paragraph one with text, more text. This is paragraph two with less text.

10. Visibility sample <!--CNIT 133 example Page Author: Hans Yip Date: 7/10/2006 --> cnit133 DHTML /* define css here */ body { background-color: #ffffff; }.picarea { text-align: center; visibility: hidden; } /* define psudo */ /* define id #id */

11. Visibility sample function showimg(id, w, h) { obj=document.getElementById(id); obj.style.visibility = "visible"; obj.width = w; obj.height = h; } function hideimg(id, w, h) { obj=document.getElementById(id); obj.style.visibility = "hidden"; obj.width = w; obj.height = h; }

12. Visibility sample DHTML & Event handler Some web page information here: Now, if user agree to view terms and conditions, then will display a button to continue. If user disagree, then go back to home page. View terms and conditions | Dis-agree, Go to home page or hide the contract info Contract agreement info here: -

13. Enlarge Text sample <!-- CNIT 133 Homework Author: Hans Yip Date: 7/7/2007 --> CNIT 133 Homework /* define css here */ body { background-color: #ffcccc; } /* define class */.glowtext { filter: glow(color=yellow,strength=3); width: 100%; }.toptext { border-style: double; background-color: white; width: 50%; text-align: center; }.req { background-color: yellow; }.normaltext { font-size: 12pt; } tb.tab { font-size: 10pt; } function changetext(id, textsize) { obj=document.getElementById(id); obj.style.fontSize = textsize; }

14. Enlarge Text sample DHTML Example 1 - enlarge text Links City College of San Francisco | Home | <span id="t3" onMouseOver="changetext('t3', 23);" onMouseOut="changetext('t3', 12);">Google | <span id="t4" onMouseOver="changetext('t4', 24);" onMouseOut="changetext('t4', 12);">Yahoo

15. Change Background Color sample function bgChange(bg) { document.body.style.background=bg; } Mouse over the squares and the background color will change! <td onmouseover="bgChange('red')“ onmouseout="bgChange('transparent')" bgcolor="red"> <td onmouseover="bgChange('blue')“ onmouseout="bgChange('transparent')" bgcolor="blue"> <td onmouseover="bgChange('green')“ onmouseout="bgChange('transparent')" bgcolor="green">

16. Text innerHTML sample function nameon() { document.getElementById('h2text').innerHTML="WELCOME!"; } function nameout() { document.getElementById('h2text').innerHTML="How are you today?"; } <h2 id="h2text" onmouseout="nameout()" onmouseover="nameon()"> Mouse over this text!

17. Text onmousemove sample var i=1; function moveright() { document.getElementById('header').style.position="relative"; document.getElementById('header').style.left=i; i++; } Move the mouse over this page

18. Text onload/onunload sample var i=1 function starttimer() { document.getElementById('h_one').style.position="relative"; document.getElementById('h_one').style.left=+i; document.getElementById('h_two').style.position="relative"; document.getElementById('h_two').style.top=+i; i++; timer=setTimeout("starttimer()",10); } function stoptimer() { clearTimeout(timer); } Header one Header two

19. Text tooltip sample function gettip(txt) { document.getElementById('tip').innerHTML=txt; } function reset() { document.getElementById('tip').innerHTML=""; } Mouse over these drinks: <span onmouseover="gettip('Hot black drink')" onmouseout="reset()">Coffee <span onmouseover="gettip('Cold white drink')" onmouseout="reset()">Milk

20. Text typewriter message sample message="CNIT 133 is a very interesting class."; pos=0; maxlength=message.length+1; function writemsg() { if (pos<maxlength) { txt=message.substring(pos,0); document.forms[0].msgfield.value=txt; pos++; timer=setTimeout("writemsg()",50); } function stoptimer() { clearTimeout(timer); }

21. Bigger Text sample txtsize=0; maxsize=100; function writemsg() { if (txtsize<maxsize) { document.getElementById('msg').style.fontSize=txtsize; txtsize++; timer=setTimeout("writemsg()",10); } function stoptimer() { clearTimeout(timer); } City College of San Francisco

22. Text blinking header sample function blinking_header() { if (document.getElementById('blink').style.color=="red") { document.getElementById('blink').style.color="black"; } else { document.getElementById('blink').style.color="red"; } timer=setTimeout("blinking_header()",100); } function stoptimer() { clearTimeout(timer); } Blinking header

23. Shaking link sample function shakeleft() { document.getElementById('myLink').style.position="relative"; document.getElementById('myLink').style.left="3"; timer=setTimeout("shakeright()",10); } function shakeright() { document.getElementById('myLink').style.left="0"; timer=setTimeout("shakeleft()",10); } function stoptimer() { clearTimeout(timer); } <a id="myLink" href="http://www.ccsf.edu/" onmouseover="shakeleft()" onmouseout="stoptimer()">Mouse over this link

24. css Menu sample Pseudo-class Menu /* define psudo */ a:link { color: red; } a:visited { color: green; } a:hover { color: blue; } a:active { color: yellow;} /* define id #id */ #links { top: 5px; left: 0px; width: 90px; font-family:Arial, Helvetica, sans-serif; font-size:8pt} #links a {color:black; text-decoration:none; display: block} #links a.newgroup {margin-top: 10px} #links a.item {margin-left: 10px } #links a:hover {color:blue; background-color: orange}

25. css Menu sample (continue…) Pseudo-class (Rollover effect) California Los Angeles San Francisco Nevada Las Vegas Reno

26. JS Menu sample JS Menu function go() { location=document.forms[0].gowhere.value; } With JS -Select location- CCSF Yahoo! Google

27. DHTML Menu sample DHTML Menu #button { position: relative; background: yellow; left: 10px; top: 20px; width: 160px; height: 20px; } #menu1 { position: relative; background: orange; left: 20px; top: 20px; width: 150px; visibility: hidden; }

28. DHTML Menu sample (continue…) function openMenu() { var a; a = document.getElementById("menu1").style.visibility; if (a == "visible") { window.document.getElementById("menu1").style.visibility = "hidden"; } else { window.document.getElementById("menu1").style.visibility = "visible"; } DHTML Menu Open

29. DHTML Menu sample (continue…) Option 1 Option 2 Option 3

30. Scrolling Content sample Scrolling content #marqueecontainer{ position: relative; width: 200px; /*marquee width */ height: 200px; /*marquee height */ background-color: white; overflow: hidden; border: 3px solid orange; padding: 2px; padding-left: 4px; }

31. Scrolling Content sample (continue…) /*********************************************** * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds) var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10) var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)? ////NO NEED TO EDIT BELOW THIS LINE//////////// var copyspeed=marqueespeed var pausespeed=(pauseit==0)? copyspeed: 0 var actualheight='' function scrollmarquee(){ if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) { cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" } else { cross_marquee.style.top=parseInt(marqueeheight)+8+"px" }

32. Scrolling Content sample (continue…) function initializemarquee() { cross_marquee=document.getElementById("vmarquee") cross_marquee.style.top=0 marqueeheight=document.getElementById("marqueecontainer").offsetHeight actualheight=cross_marquee.offsetHeight setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll) } scroll text here Enter your scroll text here, it will move up slowly...... More text here... Enter more and more text here...