<p id="slowLoris">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<a href="javascript:void();"onClick="expandLoris();">Click for more.</a></p>
It makes the paragraph have a link at the end that says "Click for more." When the user clicks it, the paragraph expands, that is, new content is added to it. In order to make it expand to this:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
We would need to use this function (you can name the function whatever you want, within variable rules):
function expandLoris() {
var expandedParagraph = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
document.getElementById("slowLoris").innerHTML = expandedParagraph;
}
Remember that that function would usually be in a separate JavaScript file, while the original paragraph would be in the initial html file. Here's the html file I used, and you can see the link to the external JavaScript file right above the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Display Modes</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p id="slowLoris">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<a href="javascript:void();"onClick="expandLoris();">Click for more.</a></p>
<script src="myscripts.js"></script>
</body>
</html>
And then here's the JavaScript code (the file, in this case, was named myscript.js):
function expandLoris() {
var expandedParagraph = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
document.getElementById("slowLoris").innerHTML = expandedParagraph;
}
The book actually didn't go over the linking to the JavaScript instruction in this chapter, because we had already gone over that earlier, but since I wanted to test out the material on an actual document, I went ahead and set up an html file, a JavaScript file, and linked the two. I love how everything keeps building on everything else.
Okay, I finished Chapter 51, next is Chapter 52 Manipulating Images and Text. In order to give a user the option to have an image disappear, you first give the image an id, like so:
<img src="picture.jpg" id="picone">
Then we add an event handler:
<img src="picture.jpg" id="picone" onClick="makeInvisible();">
As an aside:
document.getElementById(sampleElementId).innerHTML;
Is for paragraphs, divs, and other HTML elements, while:
document.getElementById(sampleElementId).value;
Is for form fields.
Back to images, then, there's a CSS class for invisibility:
.hidden {display:none;}
And here is the function that gives the image a class of "hidden," so that is disappears.
function makeInvisible() {
document.getElementById("picone").className = "hidden";
}
If you want to add a new class to the element, but also retain any classes it already has, you would do that like so:
function makeInvisible() {
document.getElementById("picone").className += " classname(like hidden)";
}
Make sure to put a space before the class name in the += version. O.k., I completed chapter 52, next is Chapter 53 Swapping Images.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
Javascript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 155)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 29% Complete
3. Ruby Programming 0% Complete
4. Ruby on Rails 0% Complete
5. HTML5 and CSS3 0% Complete
6. Javascript and JQuery 0% Complete
7. Getting Hired as a Web Developer 0% Complete
Hours Spent Coding Today: 3
Total Hours Coding: 585
No comments:
Post a Comment