cnit 133 interactive web pags – javascript and ajax dhtml

CNIT 133 Interactive Web Pags –JavaScript and AJAX

DHTML

Agenda

• My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).

• Dynamic HTML.• DHTML samples.

http://fog.ccsf.edu/~hyip

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.

HTML

• From the earliest days of the web, HTML was only meant to provide structure for a document and context for its content.

<h1>This text</h1><p> This is a paragraph, more … </p><ul><li>item one</li>

<li>item two</li><li>item three</li>

</ul>

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.

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;}

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.

DHTML – only CSS sample<html><head><title>DHTML CSS</title><style type="text/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;

}</style>

DHTML – only CSS sample<script language="JavaScript" type="text/javascript">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"; }</script><body onload="document.getElementById('txt2').style.visibility = 'hidden'"><h1>DHTML CSS</h1><p id="txt1">This is paragraph one with text, more text.</p><p id="txt2">This is paragraph two with less text.</p><input type="button" value="Change Text" onClick="changeIt()"></body></html>

Visibility sample<html> <head>  <title>cnit133 DHTML</title><style type="text/css">/* define css here */

body { background-color: #ffffff; }

.picarea { text-align: center; visibility: hidden; }

/* define psudo */

/* define id #id */

</style>

Visibility sample<script type="text/javascript">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;}

</script>

Visibility sample</head> <body> <h1>DHTML & Event handler</h1><p>Some web page information here: </p><p>Now, if user agree to view terms and conditions, then willdisplay a button to continue. If user disagree, then go backto home page.</p><hr /><div style="text-align: center;"><a href="#" onClick="showimg('a1', 120,120); showimg('a2', 120, 120);">View terms and conditions</a>| <a href="#" onClick="hideimg('a1', 120,120); hideimg('a2', 120, 120);">Dis-agree, Go to home page or hide the contract

info</a></div><div class="picarea"><p id="a1">Contract agreement info here: - </p><input id="a2" type="button" value="Continue"></div><br />

</body> </html>

Enlarge Text sample<html><head><title>CNIT 133 Homework</title><style type="text/css">/* 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; }</style><script type="text/javascript">function changetext(id, textsize) {obj=document.getElementById(id);obj.style.fontSize = textsize; }</script>

Enlarge Text sample

</head> <body> <h1>DHTML Example 1 - enlarge text</h1><div align="center" class="normaltext"><h4>Links</h4> <a href="http://www.ccsf.edu"><span id="t1" onMouseOver="changetext('t1', 20);“ onMouseOut="changetext('t1', 12);">City College of San Francisco

</span></a>|<a href="http://fog.ccsf.edu/~hyip"><span id="t2" onMouseOver="changetext('t2', 22);“ onMouseOut="changetext('t2', 12);">Home</span></a>|<a href="http://www.google.com"> <span id="t3" onMouseOver="changetext('t3', 23);"onMouseOut="changetext('t3', 12);">Google</span></a>|<a href="http://www.yahoo.com"><span id="t4" onMouseOver="changetext('t4', 24);"onMouseOut="changetext('t4', 12);">Yahoo</span></a></div> </body> </html>

Change Background Color sample<html><head><script type="text/javascript">function bgChange(bg) {document.body.style.background=bg;}</script></head><body><b>Mouse over the squares and the background color will change!</b><table width="300" height="100"> <tr><td onmouseover="bgChange('red')“ onmouseout="bgChange('transparent')" bgcolor="red"> </td> <td onmouseover="bgChange('blue')“ onmouseout="bgChange('transparent')" bgcolor="blue"> </td> <td onmouseover="bgChange('green')“ onmouseout="bgChange('transparent')" bgcolor="green"> </td></tr></table></body></html>

Text innerHTML sample<html><head>

<script type="text/javascript">function nameon(){document.getElementById('h2text').innerHTML="WELCOME!";}function nameout(){document.getElementById('h2text').innerHTML="How are you today?";}</script>

</head><body><h2 id="h2text" onmouseout="nameout()"onmouseover="nameon()">Mouse over this text!</h2></body></html>

Text onmousemove sample<html><head>

<script type="text/javascript">var i=1;function moveright(){document.getElementById('header').style.position="relative";document.getElementById('header').style.left=i;i++;}

</script></head><body onmousemove="moveright()">

<h1 id="header">Move the mouse over this page</h1>

</body></html>

Text onload/onunload sample<html><head><script type="text/javascript">var i=1function 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);}</script></head><body onload="starttimer()" onunload="stoptimer()"><h1 id="h_one">Header one</h1><h1 id="h_two">Header two</h1></body></html>

Text tooltip sample<html><head><script type="text/javascript">function gettip(txt) {document.getElementById('tip').innerHTML=txt;}function reset() {document.getElementById('tip').innerHTML="";}</script></head><body><p>Mouse over these drinks:</p><span onmouseover="gettip('Hot black drink')"onmouseout="reset()">Coffee</span><br /><br /><span onmouseover="gettip('Cold white drink')"onmouseout="reset()">Milk</span><p id="tip"></p></body></html>

Text typewriter message sample<html><head><script type="text/javascript">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);}</script></head><body onload="writemsg()" onunload="stoptimer()"><form><input id="msgfield" size="65"></form></body></html>

Bigger Text sample<html><head><script type="text/javascript">txtsize=0;maxsize=100;function writemsg() { if (txtsize<maxsize) {

document.getElementById('msg').style.fontSize=txtsize;txtsize++;timer=setTimeout("writemsg()",10);}

}function stoptimer() {clearTimeout(timer);}</script></head><body onload="writemsg()" onunload="stoptimer()"><p id="msg">City College of San Francisco</p></body></html>

Text blinking header sample<html><head><script type="text/javascript">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);}</script></head><body onload="blinking_header()" onunload="stoptimer()"><h1 id="blink">Blinking header</h1> </body></html>

Shaking link sample<html><head><script type="text/javascript">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);}</script></head><body><a id="myLink" href="http://www.ccsf.edu/"onmouseover="shakeleft()" onmouseout="stoptimer()">Mouse over this link</a></body></html>

css Menu sample<html><head><title>Pseudo-class Menu</title><style type="text/css">/* 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}</style>

css Menu sample (continue…)</head> <body> <h1>Pseudo-class (Rollover effect)</h1><div id="links"><a href="#" class="newgroup">California</a><a href="#" class="item">Los Angeles</a><a href="#" class="item">San Francisco</a><a href="#" class="newgroup">Nevada</a><a href="#" class="item">Las Vegas</a><a href="#" class="item">Reno</a></div>

</body> </html>

JS Menu sample<html><head><title>JS Menu</title><script language="JavaScript" type="text/javascript">function go(){location=document.forms[0].gowhere.value;}</script>

</head> <body>

<h1>With JS</h1><form><select id="gowhere" onchange="go()"><option>-Select location-<option value="http://www.ccsf.edu">CCSF<option value="http://www.yahoo.com">Yahoo!<option value="http://www.google.com">Google</select></form>

</body> </html>

DHTML Menu sample<html><head><title>DHTML Menu</title><style>#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;}

</style>

DHTML Menu sample (continue…)<script language="JavaScript" type="text/javascript">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";

}}</script></head> <body>

<h1>DHTML Menu </h1><div id="button" onclick="openMenu()">Open</div>

DHTML Menu sample (continue…)<div id="menu1"><a href="#">Option 1</a><br/><a href="#">Option 2</a><br/><a href="#">Option 3</a><br/></div>

</body> </html>

Scrolling Content sample<html><head><title>Scrolling content</title>

<style type="text/css">

#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;}

</style>

Scrolling Content sample (continue…)

<script type="text/javascript">/************************************************ 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=marqueespeedvar pausespeed=(pauseit==0)? copyspeed: 0var 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"

}}

Scrolling Content sample (continue…)

function initializemarquee() {cross_marquee=document.getElementById("vmarquee")cross_marquee.style.top=0marqueeheight=document.getElementById("marqueecontainer").offsetHeightactualheight=cross_marquee.offsetHeightsetTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)}</script></head><body onload="initializemarquee();"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed"

onMouseout="copyspeed=marqueespeed"><div id="vmarquee" style="position: absolute; width: 98%;"><h1>scroll text here</h1>Enter your scroll text here, it will move up slowly......More text here...Enter more and more text here...</div></div></body></html>

cnit 133 interactive web pags – javascript and ajax dhtml

Documents