Examine index.htm in a text editor as well as a browser. Notice that the page has names for each computer model, but the description of each model is missing. You will add JQuery events that will cause the computer model descriptions to be displayed when the user hovers over the computer model names. Code for index.html: Discussion 12 Custom Computers Our custom models Our computer models are built using high-performance hardware The standard model Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet, sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris massa justo, dignissim eget eleifend sit amet, condimentum. The casual gaming model Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet, sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris massa justo, dignissim eget eleifend sit amet, condimentum. The high-end gaming model Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet, sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris massa justo, dignissim eget eleifend sit amet, condimentum. About us Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus velit id massa ullamcorper porta. Nulla ante mi, congue id ante ac, tempus convallis turpis. Vivamus consequat sed velit a tempor. In pellentesque massa at efficitur sagittis. Aenean vestibulum tincidunt varius. Aliquam erat volutpat. Fusce lacinia mauris eget diam elementum iaculis. Vivamus nec mauris eu odio ultrices iaculis nec eget turpis. Praesent lorem dolor, rhoncus eu congue nec, semper non arcu. Code for style.cc: * { font-family: sans-serif; margin: 0; padding: 0; } body { width: 900px; height: auto; margin: 20px auto; background-color: rgba(50, 50, 50, 1); box-shadow: 0px 20px 40px #000000; } header { height: 90px; background-color: rgba(41, 63, 80, 1); font-size: 1.5em; color: white; text-align: center; } header h1 { padding-top: 14px; } section { padding: 20px; background-color: rgba(127, 143, 155, 1); } section > * { text-align: center; } .computer { padding-top: 40px; } .computer div { margin: 0px auto; width: 600px; font-size: 1.4em; color: white; background-color: rgba(41, 63, 80, 1); } .computer p { margin: 0px auto; width: 600px; background-color: rgba(50, 50, 50, .5); display: none; color: white; } #about { margin-top: 40px; } #about p { text-align: left; } The idea is to make a script.js but do not worry about adding the associated
dd JQuery effects to a fictitious computer builder's website.
Examine index.htm in a text editor as well as a browser. Notice that the page has names for each computer model, but the description of each model is missing. You will add JQuery events that will cause the computer model descriptions to be displayed when the user hovers over the computer model names.
Code for index.html:
<!DOCTYPE html>
<html>
<head>
<title>Discussion 12</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header><h1>Custom Computers</h1></header>
<section>
<h2>Our custom models</h2>
<p>Our computer models are built using high-performance hardware</p>
<div class="computer">
<div>The standard model</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,
sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum
metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris
massa justo, dignissim eget eleifend sit amet, condimentum.
</p>
</div>
<div class="computer">
<div>The casual gaming model</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,
sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum
metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris
massa justo, dignissim eget eleifend sit amet, condimentum.
</p>
</div>
<div class="computer">
<div>The high-end gaming model</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet,
sapien nec vestibulum dignissim, sem nunc porta massa, quis vestibulum
metus velit a tortor. Phasellus vel quam eu nunc molestie porta. Mauris
massa justo, dignissim eget eleifend sit amet, condimentum.
</p>
</div>
<div id="about">
<h2>About us</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus
velit id massa ullamcorper porta. Nulla ante mi, congue id ante ac,
tempus convallis turpis. Vivamus consequat sed velit a tempor. In
pellentesque massa at efficitur sagittis. Aenean vestibulum tincidunt
varius. Aliquam erat volutpat. Fusce lacinia mauris eget diam elementum
iaculis. Vivamus nec mauris eu odio ultrices iaculis nec eget turpis.
Praesent lorem dolor, rhoncus eu congue nec, semper non arcu.
</p>
</div>
</section>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Code for style.cc:
* {
font-family: sans-serif;
margin: 0;
padding: 0;
}
body {
width: 900px;
height: auto;
margin: 20px auto;
background-color: rgba(50, 50, 50, 1);
box-shadow: 0px 20px 40px #000000;
}
header {
height: 90px;
background-color: rgba(41, 63, 80, 1);
font-size: 1.5em;
color: white;
text-align: center;
}
header h1 {
padding-top: 14px;
}
section {
padding: 20px;
background-color: rgba(127, 143, 155, 1);
}
section > * {
text-align: center;
}
.computer {
padding-top: 40px;
}
.computer div {
margin: 0px auto;
width: 600px;
font-size: 1.4em;
color: white;
background-color: rgba(41, 63, 80, 1);
}
.computer p {
margin: 0px auto;
width: 600px;
background-color: rgba(50, 50, 50, .5);
display: none;
color: white;
}
#about {
margin-top: 40px;
}
#about p {
text-align: left;
}
The idea is to make a script.js but do not worry about adding the associated <script> tag to index.htm. index.htm already contains the necessary <script> tags to access your JavaScript file, as well as a <script> that links to a JQuery CDN. You do not have to edit any files besides the script.js file you create.
When the user hovers over one of the computer model names, the associated description should slide downward from the model name. Once the user stops hovering over the model name, the description should slide back up toward the model name and disappear again. You should use the slideDown() and slideUp() effects for this.
Step by step
Solved in 4 steps with 2 images
