CSS often uses hyphens in CSS property names but JavaScript uses camel case, e.g. color: blue; p { <!DOCTYPE html> <meta charset="utf-8" /> <head>

Size: px

Start display at page:

Download "CSS often uses hyphens in CSS property names but JavaScript uses camel case, e.g. color: blue; p { <!DOCTYPE html> <meta charset="utf-8" /> <head>"

Jacob Bishop
5 years ago
Views:

1 1 of 9 CS1116/CS5018 Web Development 2 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Recap To find nodes: queryselector, queryselectorall To create new element nodes: document.createelement To create new text nodes: document.createtextnode To insert an extra child node: appendchild To change the text of a text node: assign to nodevalue To change the value of an attribute of an element node: assign to an element node's properties 2 of 9 Changing an element's CSS in JavaScript JavaScript can retrieve and change an element's CSS by accessing and setting properties of its style object E.g. some_node.style.color = 'blue'; The visual display of the element is automatically changed CSS often uses hyphens in CSS property names but JavaScript uses camel case, e.g. CSS JavaScript background-color style.backgroundcolor font-family style.fontfamily Another of my pointless examples <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>example D</title> <link rel="stylesheet" href="exampled.css"> <script src="exampled.js"> </script> </head> <body> First paragraph. Second paragraph. </body> </html> p { color: blue; background-color: yellow; (function() { document.addeventlistener('domcontentloaded', init, false); function init() { first_p_element = document.queryselector('p:first-child'); first_p_element.style.color = 'yellow'; first_p_element.style.backgroundcolor = 'blue'; )();

2 3 of 9 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>apartment For Sale</title> <link rel="stylesheet" href="styles.css"> <script src="slideshow.js"></script> </head> <body> <header> <h1>sherlock Homes Estate Agents</h1> </header> <main> <h1>apartment for sale 12A Ivory Towers, Cork</h1> We at <i>sherlock Homes</i> are proud to present 12A Ivory Towers <figure> <img src="photo.jpg" alt="front view" /> </figure> <section> <h1>accommodation</h1> This property is a spacious 70 square metres apartment </section> <section> <h1>price</h1> The price is available upon request. </section> </main> <aside> <ul id="slideshow"> <li><img src="photo1.jpg" alt="dining Area" /></li> <li><img src="photo2.jpg" alt="living Room" /></li> <li><img src="photo3.jpg" alt="bathroom" /></li> <li><img src="photo4.jpg" alt="bedroom" /></li> <li><img src="photo5.jpg" alt="exterior" /></li> </ul> </aside> <footer> Sherlock Homes Ltd. </footer> </body> </html> 4 of 9 * { margin: 0; padding: 0; html { color: white; background-color: seagreen; header { padding: 1em; main { color: black; background-color: white; float: left; width: 70%; padding: 2.5%; figure { aside { margin-left: 75%; font-family: monospace; aside ul { list-style: none; aside width: 100%; footer { clear: both; padding: 1em;

3 5 of 9 (function() { var img_elements; var num_of_images; var current_image_index; var prev_link; var next_link; var count_display; document.addeventlistener('domcontentloaded', init, false); function init() { // Get the images img_elements = document.queryselectorall('#slideshow img'); num_of_images = img_elements.length; // Hide them all for (var i = 0; i < num_of_images; i += 1) { img_elements[i].style.display = 'none'; // Display the controls var control_div = create_control_div(); var aside_element = document.queryselector('aside') aside_element.appendchild(control_div); // Show the first image current_image_index = 0; goto_image(null); function create_control_div() { // Create the prev link prev_link = document.createelement('a'); prev_link.appendchild(document.createtextnode(' < ')); prev_link.addeventlistener('click', goto_image, false); // Create the next link next_link = document.createelement('a'); next_link.appendchild(document.createtextnode(' > ')); next_link.addeventlistener('click', goto_image, false); // Create the span to display the counter count_display = document.createtextnode(''); // Create a div containing the prev link, counter display and next link var control_div = document.createelement('div'); control_div.appendchild(prev_link); control_div.appendchild(count_display); control_div.appendchild(next_link); return control_div; function goto_image(event) { // Hide the current slide img_elements[current_image_index].style.display = 'none'; // Show the new current slide if (! event) { // don't change slide else if (event.target === prev_link) { current_image_index -= 1; else if (event.target === next_link) { current_image_index += 1; img_elements[current_image_index].style.display = 'inline'; // Hide the prev link if there is no previous slide if (current_image_index === 0) { 6 of 9 prev_link.style.visibility = 'hidden'; else { prev_link.style.visibility = 'visible'; // Hide the next link if there is no next slide if (current_image_index === num_of_images - 1) { next_link.style.visibility = 'hidden'; else { next_link.style.visibility = 'visible'; // Update the counter count_display.nodevalue = (current_image_index + 1) + ' of ' + num_of_images; )(); : CSS visibility whether an element is visible or not visible the element is visible hidden the element is invisible, but it still takes up space display the type of box used for the element inline takes up as much width as necessary, and does not force line breaks block takes up the full width available, and has a line break before and after it none not displayed at all with no effect on layout (i.e. does not take up any space) lots of other variations

4 7 of 9 Questions about the case study Why document.queryselectorall('#slideshow img')? Why not document.queryselectorall('img')? Why does it make images invisible using display: none but make the '<' and '>' symbols invisible using visibility: hidden? Give a major limitation of this JavaScript program 8 of 9 An observation People overuse JavaScript especially for simple changes of style Sometimes CSS alone suffices E.g. a list of links made to look like buttons: <nav> <ul> </ul> </nav> <li><a href="pagea.html">a</a></li> <li><a href="pageb.html">b</a></li> <li><a href="pagec.html">c</a></li> nav ul { list-style: none; margin: 0; padding: 0; nav li { display: inline; nav a { padding: 0.5em 1em 0.5em 1em; border: 1px solid #711515; text-decoration: none; color: white; background-color: #B51032; Adding a hover effect does not require JavaScript: nav a:hover { background-color: #711515; A B C

9 of 9 An observation, continued Combine :hover with CSS transforms, e.g.

An observation, continued CSS even has animations now, e.g.

5 9 of 9 An observation, continued Combine :hover with CSS transforms, e.g.: transform: rotate(-30deg); img:hover { transform: scale(2) rotate(0deg); Combine :hover and CSS transforms with CSS transitions, e.g.: transform: rotate(-30deg); transition: all 2s linear 1s; img:hover { transform: scale(2) rotate(0deg); An observation, continued CSS even has animations now, e.g.: position: relative; animation: myanimation 5s myanimation { 0% {left: 0px; 50% {left: 400px; 100% {left: 0px; Can achieve remarkable things using CSS alone, e.g.

CSS: Layout Part 2. clear. CSS for layout and formatting: clear

CSS: Layout Part 2. clear. CSS for layout and formatting: clear CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear