1 / 27

Style Sheets (CSS)

Style Sheets (CSS). Separate structure (HTML tags) from browser presentation Control a site’s look and feel Three types Inline : apply to a single HTML tag Document level : apply to groups of a document’s tags External : apply to groups of tags in a set of web site documents

jerrod
Download Presentation

Style Sheets (CSS)

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Style Sheets (CSS) • Separate structure (HTML tags) from browser presentation • Control a site’s look and feel • Three types • Inline: apply to a single HTML tag • Document level: apply to groups of a document’s tags • External: apply to groups of tags in a set of web site documents • JavaScript: alters CSS properties in an element’s style property object

  2. Style Sheets in an HTML Document • Inline:<div style="foo:bar; … foo:bar"> • Document Level<style type="text/css"> tag.class {foo:bar; … foo:bar} /* name attribute selector */ . . . tag.#id {foo:bar; … foo:bar} /* id attribute selector */</style> • External: <link rel="stylesheet" type="text/css href"="foo.css"> • Note: fileName.css is a text file • The syntax is the same as a document level CSS without the style tag

  3. HTML Example Markup Code JavaScript Version <html><head><title>Demo</title></head> <body> <input type="button" id="button" value="ok" /> <script type="text/JavaScript"> var tag = document.getElementById("button"); tag.style.borderStyle = "outset"; tag.style.backgroundColor = "#F0F0F0"; tag.style.color = "blue"; tag.style.textAlign = "center"; tag.style.borderWidth = "5px"; </script></body></html> <html> <head><title> Demo</title> <style type="text/css"> Input#button { border-style:outset; background-color:#F0F0F0; color:blue; text-align:center; border-width:5px } </style></head><body> <input type="button" id="button" value="ok”/> </body></html>

  4. How Does JavaScript Fit? More Complete Reference: http://www.htmlhelp.com/reference/css/properties.html W3Schools: http://www.w3schools.com/css/

  5. JavaScript Example // Create component for confirmation messages var messageBackground = acorns.system.getColor(255, 255, 204); div = document.createElement("div"); div.id = "message"; div.style.display = "none"; div.style.borderStyle = "solid"; div.style.backgroundColor = "#C0C0C0"; div.style.color = "black"; div.style.textAlign = "center"; div.style.position = "absolute"; div.style.maxWidth = Math.max(200, Math.ceil(body.clientWidth*3/4))+"px"; div.style.maxHeight = (windowSize.height - 50) + "px"; div.style.margin = "auto"; // Centers div, but not in IE div.style.overflow = "auto"; body.appendChild(div);

  6. Resolve Pixel Differences // Pixels per inch var getPixelsPerInch = function() { var element = document.createElement('div'); element.style.width = '1in'; element.style.padding = '0'; document.body.appendChild (element); var ppi = element.offsetWidth; element.parentNode.removeChild (element); return ppi; } // Pixels per point vargetDefaultFontSize = function() { var element = document.createElement('div'); element.appendChild (document.createTextNode('M')); document.body.appendChild(element); varfs= [element.offsetWidth, element.offsetHeight]; element.parentNode.removeChild (element); return fs[1]; }

  7. Create a Custom Label var span = document.createElement("span"); span.style.height = (15*getPixelsPerInch())+"px"; span.style.backgroundColor = "black"; span.style.color = "white"; span.style.fontSize = (6 * getDefaultFontSize()) + "pt"; span.style.borderStyle = "solid"; span.style.position = "relative"; span.style.verticalAlign = "super"; // superscript alignment span.style.borderWidth = "1px"; span.id = "layername"; div.appendChild(span);

  8. Creating a Popup Menu var makePopupMenu = function() { var div = document.createElement("div"); div.style.overflow = "auto"; div.style.zIndex = 99; // Higher numbers always in front div.style.borderStyle = "solid"; div.style.backgroundColor = BACKGROUND_COLOR; div.style.position = "absolute"; div.style.display = "none"; div.id = "popup"; return div; }

  9. Events and Listeners • Event: Object created in response to a user or programming action. • Listener: A function, which processes an event when it occurs • Event Processing • Capturing: The outermost tag’s listener fires first, an handling proceeds down to inner tags. • Bubbling: The innermost tag’s listener fires first, and handling proceeds up to outer tags. • Explorer bubbles; other browsers handle both

  10. Attaching a Listener to a Tag • Attaching listener by setting a tag’s event attribute tag.onclick = function(e) {}, tag.onmousedown = foo, tag.onmouseup = foo, image.onload = foo, tag.onkeydown = foo, tag.ontouch = foo, tag.onmousemove = foo, image.onabort = foo, window.onresize = foo, and many more • Call a tag’s method to add a listener (IE 9 is now compatible) this.addListener = function(tag, type, handler) { if (this.isExplorer()) { tag.attachEvent("on" + type, handler); } else tag.addEventListener(type, handler, false); // bubble up } // false for bubbling, true for capturing • Removing a listener • If (isExplorer()) { tag.detachEvent(“click”, functionName);else tag.removeEventListener(tag, functionName); • Tag.onclick = undefined; // attach & detatch if multiple listeners

  11. Capture or Bubble Events • Capture: broadcast an event to all the sub nodes in the DOM • Bubble: broadcast an event to all the parent nodes. • addEventListener last argument (onCapture argument) • true implies capture • false implies bubble • Eliminate capture and bubbling • event.preventDefault() • return false;

  12. The Event Object Created in response to a user or programmatic event Key Properties • altKey, ctrlKey, metaKey, shiftKey: Boolean indicator if special keyboard keys pressed • keyCode or charCode (IE): Unicode value of pressed key • clientX, clientY: mouse position relative to web-page • offsetX, offsetY: mouse position relative to element • Type: type of event causing this listener to be called • bubbles: boolean (not IE) • button: Indicates which mouse button is pressed, 0=left, 1=middle,2=right • target or srcElement (IE): The element to which listener is attached

  13. Event Listener Example var pictureHandler = function(event, category) { if (!event) event = window.event; // IE strikes again var element; if (event.currentTarget) element = event.currentTarget; else event = event.srcElement.parentNode; // IE strikes again element.style.borderStyle = "inset"; category.displayMultiplePictureData(element); var setBorder = function() { element.style.borderStyle=“outset”; } setTimeout(setBorder, 250); } Display button depress and then release ¼ second later

  14. Event Listener Example (DnD) var mouseDownHandler = function(event) // Grab element for Dragging { if (!eventl) event = window.event; var element = document.elementFromPoint(event.clientX, event.clientY); if (element.name != "magnet") return; startPos = {x: event.clientX, y: event.clientY }; offsetPos = {x: parseInt(element.style.left), y: parseInt(element.style.top) }; dndTag = element; } var mouseMoveHandler = function(event) // Move element during drag { if (dndTag==undefined) return; var left = offsetPos.x + event.clientX - startPos.x; var top = offsetPos.y + event.clientY - startPos.y; setPosition(dndTag, left, top); }

  15. Event Listener Example var buttonHandler = function(event) { if (!event) event = window.event; var element = (event.currentTarget) ? event.currentTarget : event.srcElement; element.style.borderStyle = "inset"; value = element.getAttribute("alt"); switch (value) { case "play“: /* Play the audio */ break; case "replay“: /* Replay from user selected starting point */ break; case "pause“: /* Pause the audio playback */ break; case "stop“: /* Stop the audio playback */ break; } setTimeout(function() { element.style.borderStyle = "outset" }, 250); }

  16. User Interface (UI) Bunch of GUI components within a form tag (if submitting to a server) • Submitting to Server <form method="post" enctype="text/plain" action="http://www.mydomain.com/handler.cgi" onsubmit="/* JavaScript function call for local processing */" > <!– all your input components here --> </form> • <input> for text boxes, radio buttons, check boxes, submit buttons, reset buttons, hidden fields, etc. • <textarea> for multiple rows of input • Drop down menu items: <option> within <select> tag Use JavaScript to style and position the components, attach listeners, and establish the user look & feel

  17. The Input Tag Use this tag to create most of the GUI components • <input type="button" value="button name" /> • <input type="text" size="10" /> • <input type="button" value ="click to display" /> • <input type="submit" value ="click to submit" /> • <input type="reset" value="click to reset" /> • <input type="hidden" value="user does not see this" /> • math<input type="checkbox" value="math" /> • yes<input type="radio" name="group" value="yes" /> Note: hidden components are useful for adding data to a form that a user does not have to enter, like time of day.

  18. Browser Differences A Few Explorer Differences Typical Pseudo Code Internet Explorer If (internet explorer) Do the weird thing Else Do what all other browsers do Some properties are not universally supported If (property defined) Property-based logic Else Perform fallback code • AttachEvent, not addEventListener • No HTML5 before version 9.0. • IE Only browser supporting bgsound • Extra margin around block tags • No onload event for cached images • Different bounds of image tags • Event handler object is not always passed to listenersIf (!event) event = window.event; Hopeful Signs To Make Matters Worse • IE ’s market share is dropping • IE version 9 is closer to the W3School standard, but not perfect. • Microsoft outsources Explorer for MAC; is differs from the PC version • Each Explorer version is significantly different from the previous

  19. Explorer Differences (Partial List) Suggestions: Stick to w3School standards Check w3Schools, which indicates browser support Find an alternate approach other than if (isExplorer()) There are many subtle differences. Thoroughly test on Explorer after debugging on other browsers

  20. Fonts and Audio • Font face style: supports fonts not installed on the client computer@font-face { font-family:"Aboriginal Sans Majdy"; src: url("allLessons/Assets/Fonts/aboriginalsansmajdy.eot"); }@font-face { font-family:"Aboriginal Sans Majdy"; src: local("Aboriginal Sans Majdy"), // In case already on client systemurl("allLessons/Assets/Fonts/aboriginalsansmajdy.ttf") format("truetype"); } • Explorer does not support TTF font files; EOT is a non-standard Microsoft format • Both fonts need to be present for cross browser compatibility • HTML audio tag • Browsers supports different codecs; Explorer is only one without wav support • For Safari, a browser plugin is required to playback audio files

  21. Attributes are not a Tag’s Property • <tag foo="bar"> sets foo attribute to value, bar. • attributes is tag’s property, pointing to a DOM Node object with the tag’s attributes • foo is one of the tag’s attributes • setAttribute("foo“,"bar") sets foo in attributes property • tag.foo sets a property in the tag object, not necessarily the value in the tag’s attribute object • If foo is both an attribute and a property, some browsers set both; others do not. Class Id Value Src Name id attributes Note: id is both an attribute and a tag property

  22. Lots of Browser Differences this.getWindowSize = function() { var width = 0, height = 0; if( typeof( window.innerWidth ) == 'number' ) { width = window.innerWidth; height = window.innerHeight; } // Not IE else try { width = document.documentElement.clientWidth; // IE 6+ height = document.documentElement.clientHeight; } catch (e) { try { width = document.body.clientWidth; // IE 4 height = document.body.clientHeight; } catch(e) {} } return {width:width, height: height }; }; // End of getWindowSize()

  23. Width of String in Pixels this.widthOfString = function(text, size) { if (testComponent==undefined) { testComponent = document.createElement("span"); testComponent.style.position = "absolute"; testComponent.style.left = "-1000px"; testComponent.style.top = "-1000px"; testComponent.style.visibility = "hidden"; document.body.appendChild(testComponent); } iftestComponent.style.fontSize = size + "px"; testComponent.innerHTML = text; return testComponent.clientWidth; }

  24. AJAX • Acronym • Wikipedia: Asynchronous JavaScript and XML • Inaccurate: AJAX is Asynchronous JavaScript and XML, Text, and HTML. So AJAX now is not a descriptive acronym. • Purpose: Facilitate communication between client (through JavaScript) and server using XMLHTTP calls. • Advantage: Parts of pages can be updated without requiring a full download from the server • Disadvantage:The back browser buttons don’t work unless using HTML 5 pushState() and popState() methods and binding the popstate event to the window object • Solution:HTML5 history pushState method

  25. AJAX calls Collection of technologies fostering client/server communication 2005, James Garrett, AJAX, a new Approach to Web Applications ajaxFunction() { try // Browsers other than IE { return new XMLHttpRequest(); } catch (e) { try // Newer IE versions { return new activeXObject("Msxml2.XMLHTTP"); } catch (e) { try // Older IE versions { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ return false; } } } } Note: A complete example is in one of the last chapters of the text

  26. AJAX Limitations • Local host files in directory containing the web-site • Firefox, Safari: work fine • IE: asks user if they want to proceed • Chrome: Can’t unless local host is a server • Opera: Requires a hack. Add iframe with XML, extract text, then remove iframe. • Problem • Distributing applications on CDs becomes problematic • Users likely won’t be able to set up their computer as a server • ACORNS solution: The XML file containing lesson information is a JavaScript string, which all browsers can parse

  27. Parse XML from a String this.parseXMLString = function(fileName, xmlString) { if (window.DOMParser) { parser=new DOMParser(); xmlDoc=parser.parseFromString(xmlString,"text/xml"); if (xmlDoc.documentElement.nodeName=="parsererror") return false; } else // Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(xmlString); } var root = xmlDoc.documentElement; // Doc = XML DOM root element if (root) return getAcorns(fileName, root); // Now can traverse the DOM return undefined; }

More Related