• Like
DHTML
Upcoming SlideShare
Loading in...5
×
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,163
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
78
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Ajax, JavaScript and PHP DHTML
  • 2. 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.
  • 3. 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>
  • 4. 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.
  • 5. 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;
      • }
  • 6. 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.
  • 7. DHTML – all css
    • <html>
    • <head><title>DHTML CSS</title>
    • <style type=&quot;text/css&quot;>
    • /* 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>
  • 8. DHTML – all css
    • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
    • function changeIt() {
    • document.getElementById(&quot;txt2&quot;).style.background = &quot;green&quot;;
    • document.getElementById(&quot;txt2&quot;).style.color = &quot;white&quot;;
    • document.getElementById(&quot;txt2&quot;).style.fontStyle = &quot;italic&quot;;
    • document.getElementById(&quot;txt2&quot;).style.fontVariant = &quot;small-caps&quot;;
    • document.getElementById(&quot;txt2&quot;).style.fontWeight = &quot;bolder&quot;;
    • document.getElementById(&quot;txt2&quot;).style.fontSize = &quot;0.5in&quot;;
    • document.getElementById(&quot;txt2&quot;).style.textDecoration = &quot;underline&quot;;
    • document.getElementById(&quot;txt2&quot;).style.visibility = &quot;visible&quot;;
    • document.getElementById(&quot;txt1&quot;).style.visibility = &quot;hidden&quot;;
    • }
    • </script>
    • <body onload=&quot;document.getElementById('txt2').style.visibility = 'hidden'&quot;>
    • <h1>DHTML CSS</h1>
    • <p id=&quot;txt1&quot;>This is paragraph one with text, more text.</p>
    • <p id=&quot;txt2&quot;>This is paragraph two with less text.</p>
    • <input type=&quot;button&quot; value=&quot;Change Text&quot; onClick=&quot;changeIt()&quot;>
    • </body>
    • </html>
  • 9. Visibility
    • <html>
    • <head>
    • <!-- CNIT 133 example Page
    • Author: Hans Yip
    • Date: 7/10/2006
    • -->
    • <title>cnit133 DHTML</title>
    • <style type=&quot;text/css&quot;>
    • <!--
    • /* define css here */
    • body { background-color: #ffffff; }
    • .picarea { text-align: center; visibility: hidden; }
    • /* define psudo */
    • /* define id #id */
    • //-->
    • </style>
  • 10. Visibility
    • <!-- Show Picture -->
    • <script type=&quot;text/javascript&quot;>
    • <!—
    • function showimg(id, w, h)
    • {
    • obj=document.getElementById(id);
    • obj.style.visibility = &quot;visible&quot;;
    • obj.width = w;
    • obj.height = h;
    • }
    • function hideimg(id, w, h)
    • {
    • obj=document.getElementById(id);
    • obj.style.visibility = &quot;hidden&quot;;
    • obj.width = w;
    • obj.height = h;
    • }
    • //-->
    • </script>
  • 11. Visibility
    • </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 will
    • display a button to continue. If user disagree, then go back
    • to home page.</p>
    • <hr />
    • <div style=&quot;text-align: center;&quot;>
    • <a href=&quot;#&quot; onClick=&quot;showimg('a1', 120,120); showimg('a2', 120, 120);&quot;>View terms and conditions</a>
    • | <a href=&quot;#&quot; onClick=&quot;hideimg('a1', 120,120); hideimg('a2', 120, 120);&quot;>Dis-agree, Go to home page or hide the contract info</a>
    • </div>
    • <div class=&quot;picarea&quot;>
    • <p id=&quot;a1&quot;>Contract agreement info here: - </p>
    • <input id=&quot;a2&quot; type=&quot;button&quot; value=&quot;Continue&quot;>
    • </div>
    • <br />
    • </body>
    • </html>
  • 12. Enlarge text
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot; ?>
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
    • <head>
    • <!-- CNIT 133 Homework
    • Author: Hans Yip
    • Date: 7/7/2007
    • -->
    • <title>CNIT 133 Homework</title>
    • <style type=&quot;text/css&quot;>
    • <!--
    • /* 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; }
  • 13. Enlarge text
    • //-->
    • </style>
    • <!-- text enlargement -->
    • <script type=&quot;text/javascript&quot;>
    • <!--
    • function changetext(id, textsize)
    • {
    • obj=document.getElementById(id);
    • obj.style.fontSize = textsize;
    • }
    • //-->
    • </script>
  • 14. Enlarge text
    • </head>
    • <body>
    • <h1>DHTML Example 1 - enlarge text</h1>
    • <div align=&quot;center&quot; class=&quot;normaltext&quot;>
    • <h4>Links</h4>
    • <a href=&quot;http://www.ccsf.edu&quot;><span id=&quot;t1&quot; onMouseOver=&quot;changetext('t1', 20);&quot;
    • onMouseOut=&quot;changetext('t1', 12);&quot;>City College of San Francisco </span></a>|
    • <a href=&quot;http://fog.ccsf.edu/~hyip&quot;>
    • <span id=&quot;t2&quot; onMouseOver=&quot;changetext('t2', 22);&quot;
    • onMouseOut=&quot;changetext('t2', 12);&quot;>Home</span></a>|
    • <a href=&quot;http://www.google.com&quot;>
    • <span id=&quot;t3&quot; onMouseOver=&quot;changetext('t3', 23);&quot;
    • onMouseOut=&quot;changetext('t3', 12);&quot;>Google</span></a>|
    • <a href=&quot;http://www.yahoo.com&quot;>
    • <span id=&quot;t4&quot; onMouseOver=&quot;changetext('t4', 24);&quot;
    • onMouseOut=&quot;changetext('t4', 12);&quot;>Yahoo</span></a>
    • </div>
    • </body>
    • </html>
  • 15. change background color
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • 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=&quot;300&quot; height=&quot;100&quot;>
    • <tr><td onmouseover=&quot;bgChange('red')“ onmouseout=&quot;bgChange('transparent')&quot;
    • bgcolor=&quot;red&quot;> </td>
    • <td onmouseover=&quot;bgChange('blue')“ onmouseout=&quot;bgChange('transparent')&quot;
    • bgcolor=&quot;blue&quot;> </td>
    • <td onmouseover=&quot;bgChange('green')“ onmouseout=&quot;bgChange('transparent')&quot;
    • bgcolor=&quot;green&quot;> </td>
    • </tr>
    • </table>
    • </body>
    • </html>
  • 16. text innerHTML
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • function nameon()
    • {
    • document.getElementById('h2text').innerHTML=&quot;WELCOME!&quot;;
    • }
    • function nameout()
    • {
    • document.getElementById('h2text').innerHTML=&quot;How are you today?&quot;;
    • }
    • </script>
    • </head>
    • <body>
    • <h2 id=&quot;h2text&quot; onmouseout=&quot;nameout()&quot;
    • onmouseover=&quot;nameon()&quot;>
    • Mouse over this text!</h2>
    • </body>
    • </html>
  • 17. text onmousemove
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • var i=1;
    • function moveright()
    • {
    • document.getElementById('header').style.position=&quot;relative&quot;;
    • document.getElementById('header').style.left=i;
    • i++;
    • }
    • </script>
    • </head>
    • <body onmousemove=&quot;moveright()&quot;>
    • <h1 id=&quot;header&quot;>
    • Move the mouse over this page
    • </h1>
    • </body>
    • </html>
  • 18. text onload/onunload
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • var i=1
    • function starttimer() {
    • document.getElementById('h_one').style.position=&quot;relative&quot;;
    • document.getElementById('h_one').style.left=+i;
    • document.getElementById('h_two').style.position=&quot;relative&quot;;
    • document.getElementById('h_two').style.top=+i;
    • i++;
    • timer=setTimeout(&quot;starttimer()&quot;,10);
    • }
    • function stoptimer() {
    • clearTimeout(timer);
    • }
    • </script>
    • </head>
    • <body onload=&quot;starttimer()&quot; onunload=&quot;stoptimer()&quot;>
    • <h1 id=&quot;h_one&quot;>Header one</h1>
    • <h1 id=&quot;h_two&quot;>Header two</h1>
    • </body>
    • </html>
  • 19. text tooltip
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • function gettip(txt) {
    • document.getElementById('tip').innerHTML=txt;
    • }
    • function reset() {
    • document.getElementById('tip').innerHTML=&quot;&quot;;
    • }
    • </script>
    • </head>
    • <body>
    • <p>Mouse over these drinks:</p>
    • <span onmouseover=&quot;gettip('Hot black drink')&quot;
    • onmouseout=&quot;reset()&quot;>Coffee</span>
    • <br /><br />
    • <span onmouseover=&quot;gettip('Cold white drink')&quot;
    • onmouseout=&quot;reset()&quot;>Milk</span>
    • <p id=&quot;tip&quot;></p>
    • </body>
    • </html>
  • 20. text typewrite message
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • message=&quot;CNIT 133 is a very interesting class.&quot;;
    • 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(&quot;writemsg()&quot;,50);
    • }
    • }
    • function stoptimer() {
    • clearTimeout(timer);
    • }
    • </script>
    • </head>
    • <body onload=&quot;writemsg()&quot; onunload=&quot;stoptimer()&quot;>
    • <form>
    • <input id=&quot;msgfield&quot; size=&quot;65&quot;>
    • </form>
    • </body>
    • </html>
  • 21. text bigger text
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • txtsize=0;
    • maxsize=100;
    • function writemsg() {
    • if (txtsize<maxsize) {
    • document.getElementById('msg').style.fontSize=txtsize;
    • txtsize++;
    • timer=setTimeout(&quot;writemsg()&quot;,10);
    • }
    • }
    • function stoptimer() {
    • clearTimeout(timer);
    • }
    • </script>
    • </head>
    • <body onload=&quot;writemsg()&quot; onunload=&quot;stoptimer()&quot;>
    • <p id=&quot;msg&quot;>City College of San Francisco</p>
    • </body>
    • </html>
  • 22. text blinking header
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • function blinking_header() {
    • if (document.getElementById('blink').style.color==&quot;red&quot;) {
    • document.getElementById('blink').style.color=&quot;black&quot;;
    • }
    • Else {
    • document.getElementById('blink').style.color=&quot;red&quot;;
    • }
    • timer=setTimeout(&quot;blinking_header()&quot;,100);
    • }
    • function stoptimer() {
    • clearTimeout(timer);
    • }
    • </script>
    • </head>
    • <body onload=&quot;blinking_header()&quot; onunload=&quot;stoptimer()&quot;>
    • <h1 id=&quot;blink&quot;>Blinking header</h1>
    • </body>
    • </html>
  • 23. shaking link
    • <html>
    • <head>
    • <script type=&quot;text/javascript&quot;>
    • function shakeleft() {
    • document.getElementById('myLink').style.position=&quot;relative&quot;;
    • document.getElementById('myLink').style.left=&quot;3&quot;;
    • timer=setTimeout(&quot;shakeright()&quot;,10);
    • }
    • function shakeright() {
    • document.getElementById('myLink').style.left=&quot;0&quot;;
    • timer=setTimeout(&quot;shakeleft()&quot;,10);
    • }
    • function stoptimer() {
    • clearTimeout(timer);
    • }
    • </script>
    • </head>
    • <body>
    • <a id=&quot;myLink&quot; href=&quot;http://www.ccsf.edu/&quot;
    • onmouseover=&quot;shakeleft()&quot; onmouseout=&quot;stoptimer()&quot;>Mouse over this link</a>
    • </body>
    • </html>
  • 24. Css menu
    • <html>
    • <head><title>Pseudo-class Menu</title>
    • <style type=&quot;text/css&quot;>
    • /* 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>
  • 25. Css menu
    • </head>
    • <body>
    • <h1>Pseudo-class (Rollover effect)</h1>
    • <div id=&quot;links&quot;>
    • <a href=&quot;#&quot; class=&quot;newgroup&quot;>California</a>
    • <a href=&quot;#&quot; class=&quot;item&quot;>Los Angeles</a>
    • <a href=&quot;#&quot; class=&quot;item&quot;>San Francisco</a>
    • <a href=&quot;#&quot; class=&quot;newgroup&quot;>Nevada</a>
    • <a href=&quot;#&quot; class=&quot;item&quot;>Las Vegas</a>
    • <a href=&quot;#&quot; class=&quot;item&quot;>Reno</a>
    • </div>
    • </body>
    • </html>
  • 26. Js menu
    • <html>
    • <head><title>JS Menu</title>
    • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
    • function go()
    • {
    • location=document.forms[0].gowhere.value;
    • }
    • </script>
    • </head>
    • <body>
    • <h1>With JS</h1>
    • <form>
    • <select id=&quot;gowhere&quot; onchange=&quot;go()&quot;>
    • <option>-Select location-
    • <option value=&quot;http://www.ccsf.edu&quot;>CCSF
    • <option value=&quot;http://www.yahoo.com&quot;>Yahoo!
    • <option value=&quot;http://www.google.com&quot;>Google
    • </select>
    • </form>
    • </body>
    • </html>
  • 27. Dhtml menu
    • <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>
  • 28. Dhtml menu
    • <script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
    • function openMenu() {
    • var a;
    • a = document.getElementById(&quot;menu1&quot;).style.visibility;
    • if (a == &quot;visible&quot;) {
    • window.document.getElementById(&quot;menu1&quot;).style.visibility = &quot;hidden&quot;;
    • } else {
    • window.document.getElementById(&quot;menu1&quot;).style.visibility = &quot;visible&quot;;
    • }
    • }
    • </script>
    • </head>
    • <body>
    • <h1>DHTML Menu </h1>
    • <div id=&quot;button&quot; onclick=&quot;openMenu()&quot;>
    • Open
    • </div>
  • 29. Dhtml menu
    • <div id=&quot;menu1&quot;>
    • <a href=&quot;#&quot;>Option 1</a><br/>
    • <a href=&quot;#&quot;>Option 2</a><br/>
    • <a href=&quot;#&quot;>Option 3</a><br/>
    • </div>
    • </body>
    • </html>
  • 30. Scrolling content
    • <html>
    • <head><title>Scrolling content</title>
    • <style type=&quot;text/css&quot;>
    • #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>
  • 31. Scrolling content
    • <script type=&quot;text/javascript&quot;>
    • /***********************************************
    • * 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+&quot;px&quot;
    • } else {
    • cross_marquee.style.top=parseInt(marqueeheight)+8+&quot;px&quot;
    • }
    • }
  • 32. Scrolling content
    • function initializemarquee() {
    • cross_marquee=document.getElementById(&quot;vmarquee&quot;)
    • cross_marquee.style.top=0
    • marqueeheight=document.getElementById(&quot;marqueecontainer&quot;).offsetHeight
    • actualheight=cross_marquee.offsetHeight
    • setTimeout('lefttime=setInterval(&quot;scrollmarquee()&quot;,30)', delayb4scroll)
    • }
    • </script>
  • 33. Scrolling content
    • </head>
    • <body onload=&quot;initializemarquee();&quot;>
    • <div id=&quot;marqueecontainer&quot; onMouseover=&quot;copyspeed=pausespeed&quot; onMouseout=&quot;copyspeed=marqueespeed&quot;>
    • <div id=&quot;vmarquee&quot; style=&quot;position: absolute; width: 98%;&quot;>
    • <!-- scroll text here -->
    • <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>