Develop Reference

How to create a read more link with fade out background?

I am following this tutorial and I tried to apply it to my case:
HTML
<div class="jiku_text">
<p>I was born in Mauritius in 1967, spending my childhood under the sun of the Indian Ocean, before moving to the UK in July 1976. Punk had just started its own cultural revolution, while reggae and dub were ever present in the neighbourhood “blues” parties, as well as from the first real booming systems in the cars that would ever so often drive casually through the streets of Lewisham, South-East London. I did all of my schooling there, drawing since as far back as I can remember, spending my youth deep into comics, sci-fi and fantasy literature, as well as role-playing games such as “Dungeons & Dragons”.</p>
<p>I can’t forget to mention what effect the release of Star Wars, in 1977, had on my vision of the world around me. Before even getting into J.R.R. Tolkien, this movie was definitely a milestone in my childhood, and stoked a fire for science-fiction and fantasy which would have me look at the world around me in a totally different way from before.</p>
<p>All these influences, as well as the music coming from the radio, the TV and the street, were reflected in what I drew or painted; from comic strip characters to lead figurines, even to the odd oil portrait or landscape painting.</p>
<p>After my school exams in summer ‘84, I started hanging out in Covent Garden, the hub of the London Hip Hop scene, which I had discovered the year before, walking through it with my mother and the younger of my older brothers. My drawing ability led me to pick up the marker and spray-can, doing anything from painting banners for the “Alternative Arts” centre, or customizing the trousers or jackets of some of the other people hanging out with me, whether they were dancers or Mc’s. I was soon trying to make a name for myself, along with my partner Scribla, then with Zaki Dee, Eskimo, and Xerox as The Trailblazers, and eventually as part of a crew called The Chrome , which I formed in the spring of 1985, around the time of a seminal gig called The Rapattack, at the Shaw Theatre in the Euston area of London.</p>
<p class="read-more">Read More</p>
</div>
CSS
.jiku_text {
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
background: #3a3a3a;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 20px;
margin-left: 20px;
color: #fff;
max-height: 200px;
position: relative;
overflow: hidden;
}
.jiku_text .read-more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0; padding: 30px 0;
background-image: linear-gradient(to bottom, transparent, black);
}
JS
var $el, $ps, $up, totalHeight;
$(".jiku_text .btn").on("click", function() {
totalHeight = 0
$el = $(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find("p:not('.read-more')");
// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += $(this).outerHeight();
});
$up
.css({
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height(),
"max-height": 9999
})
.animate({
"height": totalHeight
});
// fade out read-more
$p.fadeOut();
// prevent jump-down
return false;
});
But the expansion creates a jump, see the test case on jsFiddle
UPDATE
tried to provide outerHeight instead of "height": $up.height(), but the text isn't expanding in full see https://jsfiddle.net/fbh0o67o/351/

You have an issue with your container div. Remove paddings from you css 'jiku_text'.
.jiku_text {
/*
padding-top: 80px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 60px;
*/
background: #3a3a3a;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 20px;
margin-left: 20px;
color: #fff;
max-height: 200px;
position: relative;
overflow: hidden;
}

Thanks to an answer in regards of my padding given to .jiku_text, I noticed where the issue was:
In my JS, I had to change "height": $up.height(), to "height": $up.outerHeight(), and then give "height": totalHeight + 140 which is the new calculated height with the padding in my css
https://jsfiddle.net/fbh0o67o/365/

How to adjust a div height automatically when adding content?

I am creating a mobile app where a user will post content to a feed. For each post would have a separate div area where he can add content and a pic. The problem is that when I paste a dummy text and a photo all in the same div, the height is off and not adjusting itself.
The pic below has the grey background area fully covered when I set it to a specific height
Here is what it looks like now when I set the height to auto. Notice the grey background area is cut short.
The goal is for the div area to auto adjust to the height despite the content the user adds. I have tried height:auto, height:auto !important, height: 100%, height:100 !important, and overflow:hidden. None of those gave me the results I wanted. What would be the best way to make the grey background area cover everything automatically? I would accept an answer that uses JavaScript or jQuery to make that happen.
HTML
<!-- Feed Begins -->
<section class="feed section-padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="FalconsFan1 text-center">
<p>FalconsFan1</p>
</div>
<div class="-posts text-center">
<p>497 posts</p>
</div>
<!-- Posts -->
<div class="container Second-Post">
<div class="row">
<div class="col-sm-12">
<img src="img/bitmap_2.jpg" alt="" class="post-avatar">
<h4 class='post-username'>FalconFans1</h4>
<small class="post-timestamp">32 seconds ago</small>
<p class='post-content'>Julio is the best receiver in the game right now!</p>
<img src="img/post-img.jpg" alt="" class="post-img">
<ul class="polling-icons text-center">
<li><img src="img/green-like-button.png" alt=""></li>
<li><img src="img/grey-dislike-button.png" alt=""></li>
<li><img src="img/grey-comment-button.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- Posts -->
</div>
</div>
</div>
</section>
CSS
.feed {
margin-top: -50% !important;
}
.FalconsFan1 {
/* width: 392px;
height: 78px; */
font-size: 64px;
letter-spacing: 0.7px;
text-align: center;
color: #3f3f3f;
margin-left: -15%;
}
.-posts {
/* width: 208px;
height: 49px; */
font-size: 40px;
letter-spacing: 0.5px;
text-align: center;
color: #3f3f3f;
margin-left: -15%;
}
.Second-Post {
object-fit: contain;
background-color: #f8f8f8;
height: auto;
width: 988px !important;
}
.Second-Post::after {
content: " ";
display: block;
clear: both;
}
.post-avatar {
position: absolute;
margin-top: 1%;
left: 5%;
width: 86px;
height: 88px;
}
.post-username {
position: absolute;
left: 20%;
font-size: 42px;
}
.post-timestamp {
position: absolute;
margin-top: 6%;
left: 20.5%;
}
.post-content {
position: absolute;
margin-top: 10%;
left: 20.5%;
width: 754px;
height: 70px;
font-size: 27px;
letter-spacing: 0.8px;
color: #3f3f3f;
}
.post-img {
position: absolute;
margin-top: 17%;
left: 20.5%;
width: 779px;
height: 588px;
}
.polling-icons {
list-style: none;
position: absolute;
margin-top: 80%;
left: 10%;
}
.polling-icons li {
padding: 0;
display: inline !important;
padding: 130px;
}

As long you don't have position:absolute in your stylesheet everything will fall into place, make sure your position is set to relative and leave height at auto (which should be default)
#small_div {
padding: 2rem;
background: orange;
}
#large_div {
padding: 2rem;
background: lime;
}
<div id="small_div">
123
</div>
<div id="large_div">
1 In the beginning God created* the heaven and the earth. 2 And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters. 3 And God said, Let there be light: and there was light. 4 And God saw* the light, that it was good: and God divided* the light from the darkness. 5 And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day. 6 And God said, Let there be a firmament in the midst of the waters, and let it divide the waters from the waters. 7 And God made the firmament, and divided the waters which were under the firmament from the waters which were above the firmament: and it was so. 8 And God called the firmament Heaven. And the evening and the morning were the second day. 9 And God said, Let the waters under the heaven be gathered together unto one place, and let the dry land appear: and it was so. 10 And God called the dry land Earth; and the gathering together of the waters called he Seas: and God saw that it was good. 11 And God said, Let the earth bring forth grass, the herb yielding seed, and the fruit tree yielding fruit after his kind, whose seed is in itself, upon the earth: and it was so. 12 And the earth brought forth grass, and herb yielding seed after his kind, and the tree yielding fruit, whose seed was in itself, after his kind: and God saw that it was good. 13 And the evening and the morning were the third day. 14 And God said, Let there be lights in the firmament of the heaven to divide the day from the night; and let them be for signs, and for seasons, and for days, and years: 15 And let them be for lights in the firmament of the heaven to give light upon the earth: and it was so. 16 And God made two great lights; the greater light to rule the day, and the lesser light to rule the night: he made the stars also. 17 And God set them in the firmament of the heaven to give light upon the earth, 18 And to rule over the day and over the night, and to divide the light from the darkness: and God saw that it was good. 19 And the evening and the morning were the fourth day. 20 And God said, Let the waters bring forth abundantly the moving creature that hath life, and fowl that may fly above the earth in the open firmament of heaven. 21 And God created great whales, and every living creature that moveth, which the waters brought forth abundantly, after their kind, and every winged fowl after his kind: and God saw that it was good. 22 And God blessed them, saying, Be fruitful, and multiply, and fill the waters in the seas, and let fowl multiply in the earth. 23 And the evening and the morning were the fifth day. 24 And God said, Let the earth bring forth the living creature after his kind,
</div>

How to get the height of a div container through jQuery?

I am developing a webpage for authors section for a book publishing website and working on the show more/ show less button. There are two media div's, one for the author image(on the left side) and his summary(on the right side). I want to enable/disable the show more/ show less button based on the height of the summary content. I want to enable the show more/less button only when the height of the summary content is more than that of the fixed height image (180px).
Referred from : http://jsfiddle.net/thebabydino/U7Cyk/
NOTE : media, media-left and media-body are bootstrap classes.
HTML Code :
<div id = "author-page">
<div>
<h3>
Chetan Bhagat
</h3>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="http://img01.ibnlive.in/ibnlive/uploads/2014/10/chetan_bhagat_151110.jpg"/>
</div>
<div class = "media-body">
<div class="info-wrapper">
(more)
(less)
<div class="info">
Chetan Bhagat is the author of six blockbuster books. These include five novels—Five Point Someone (2004), One Night # the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009),
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release.
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info#chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (#chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
</div>
</div>
</div>
</div>
CSS :
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: scroll;
position: relative;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
bottom: 1.5em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less { display: none; }
.info-wrapper .more:focus ~ .info,
.info-wrapper .more:active ~ .info {
max-height: none;
}
.info-wrapper .more:focus {
display: none;
}
.info-wrapper .more:focus + .less {
display: block;
}

If i understood your question properly,you can use jquery height functionality
$('window').height(); //gives height of browser viewport
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property
http://api.jquery.com/height

Put overflow hidden and programmatically identify
if the scrollHeight is higher than the the height of the div then make the "more" visible
var outerHeight = $(".info").outerHeight();
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible"});
$(".info").css({"max-height": "inherit"});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden"});
$(".info").css({"max-height": outerHeight + "px"});
$("a.more").show();
$("a.less").hide();
return false;
});
here outerHeight will reach your max-height when the content overflows
Therfore you can put #media queries for various screen size and use max-height accordingly
Check this http://jsfiddle.net/ZigmaEmpire/9dgs6432/11

I asked others also for this task and I got a solution. :-)
Thank you Nanang for answering the question. And here is exactly what I wanted,
http://jsfiddle.net/rraagghhu/9dgs6432/15/
HTML:
<div class = "container">
<div class="info-wrapper">
<div class="info">
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night # the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009),
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release.
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info#chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (#chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
(more)
(less)
</div>
<div class = "footer"> THIS IS FOOTER </div>
</div>
CSS:
.container{
background-color: yellow;
}
.footer{
background-color: yellow;
}
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
background-color: red;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: hidden;
position: relative;
text-align: justify;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
position: relative;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; }
jQuery:
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible", 'maxHeight': '100%'});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden", 'maxHeight': '180px'});
$("a.more").show();
$("a.less").hide();
return false;
});
$(window).resize(function() {
var hg = $('.info').height();
if (hg && hg >= 180) {
$('.info').css({ 'maxHeight': 180 });
$('a.more').show();
} else {
$('.info').css({ 'maxHeight': '100%' });
$('a.more').hide();
}
});
Now, expand and shrink the Result column in JSFiddle and see what happens. Happy playing. :-)

Remove max-height when show more is clicked
$(".more").click(function(){
$(".info").css("max-height","none");
$(this).hide();
$(".less").show();
});
$(".less").click(function(){
$(".info").css("max-height","120px");
$(this).hide();
$(".more").show();
});
http://jsfiddle.net/dggupta25/U7Cyk/150/

Traversing up the DOM to show the individual content according to each anchor

Im working on an some code to fade toggle information out of its relevant link. Because i want to show the content so it doesn't hide the anchor. Does anyone know if there is a way to go up the DOM and show the individual content according to each anchor? My code shows that its going up the DOM. I'm struggling to get it working using the jsfiddle code below.
http://jsfiddle.net/g1mn79td/
<div class="info">
<p>South Korea</p>
<p>South Korea is known globally for its thriving energy industry, providing a large number of overseas employment opportunities. The majority of foreign nationals make themselves at home in the larger cities such as Seoul, Busan and Incheon. If you’ve found a great role in South Korea, then follow the link to find out more about what you’ll need to think about when moving yourself or your family to this fascinating country.</p>
</div>
<div class="info">
<p>Angola</p>
<p>As one of the largest countries in southern Africa, Angola has great natural resources in oil, diamonds, gold and copper. Portuguese is the most commonly spoken language in Angola so learning some of the basics can be instrumental in helping you get by. The prospect of moving yourself and even your family to a new country can be overwhelming with many elements to think about when planning your relocation. All of this information and more is available in this guide.</p>
</div>
<div class="t">
<div class="tc rel">
<div class="book" id="book">
<div class="page cover"></div>
<div class="page two">
<div class="block">
<h1>passport</h1>
click
</div>
</div>
<div class="page three">
<div class="block">
<h1>passport</h1>
click
</div>
</div>
</div>
</div>
</div>
html, body {
margin: 0;
height: 100%;
}
body {
background-color: #333;
}
body.hide-overflow {
overflow: hidden;
}
/* helpers */
.t {
display: table;
width: 100%;
height: 100%;
}
.tc {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rel {
position: relative;
}
/* book */
.book {
margin: 0 auto;
width: 90%;
height: 90%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: 140px;
}
.book .page {
height: 100%;
float: left;
}
.book .cover {
background:white url(pages/1.jpg) no-repeat;
background-size:cover;
}
.book .two {
background:url(pages/2.jpg) no-repeat;
background-size:cover;
}
.book .three {
background:url(pages/3.jpg) no-repeat;
background-size:cover;
}
.book .page img {
max-width: 100%;
height: 100%;
}
.block {
background:red;
width:50%;
height:50%;
display:block;
margin:60px auto;
padding:10%;
overflow:hidden;
}
.green {
background:green;
}
body .info {
background: none repeat scroll 0 0 white;
height: auto;
margin: 30px;
position: absolute;
width: 80%;
z-index: 1;
display:none;
padding:10px
}
body .info p {
font-size:15px;
line-height:20px
}
var $findtip = $('.page');
$findtip.find('a').on('mouseenter mouseleave', function () {
var $link = $(this);
$(this).parents().eq(7).find('.info').fadeToggle();
});

http://jsfiddle.net/g1mn79td/6/
var o;
$('.page a').on('mouseenter mouseleave',function(){
o = $(this).parent().parent().index();
i = parseInt(o) - 1;
$('body').find('.info').eq(i).fadeToggle();
});

Since there is no direct structural connection between a given link and a given info section (e.g. they are not each uniquely in a sub-tree of the DOM), you will have to create such a link. I'd suggest adding an id to each info section:
<div id="koreaInfo" class="info">
<p>South Korea</p>
<p>South Korea is known globally for its thriving energy industry, providing a large number of overseas employment opportunities. The majority of foreign nationals make themselves at home in the larger cities such as Seoul, Busan and Incheon. If you’ve found a great role in South Korea, then follow the link to find out more about what you’ll need to think about when moving yourself or your family to this fascinating country.</p>
</div>
<div id="angolaInfo" class="info">
<p>Angola</p>
<p>As one of the largest countries in southern Africa, Angola has great natural resources in oil, diamonds, gold and copper. Portuguese is the most commonly spoken language in Angola so learning some of the basics can be instrumental in helping you get by. The prospect of moving yourself and even your family to a new country can be overwhelming with many elements to think about when planning your relocation. All of this information and more is available in this guide.</p>
</div>
And, the add a custom attribute to each link:
click
....
click
The, you can fetch the custom attribute for the hovered link and use that to show/hide the relevant info area.
$(".tip").hover(function() {
$(".info").hide();
var id = $(this).data("info");
$("#" + id).show();
}, function() {
$(".info").hide();
});

I can't get my slide menu to change lists as I click on the links

I am currently working on a Web page that shares recipes for cooking. I am trying to use a slide menu to hide some of the menu options. Basically what I am wanting to do is show a menu with all the food categories as clickable links. When a user clicks one of these links a slide menu appears with the sub-categoroies. I am able to get the slide menu to show but will not change if the user clicks on a different menu category. How do I get the slide menu to change as the user clicks another category?
Thank you for any help. Here is my code:
HTML File:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC-"//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Name: Collin Klopstein
Date: December 14, 2013
filename: dinnerplate.htm
supporting files: dinner.css, menus.js
description: A web site created to let people share their love for cooking, post favorite recipes, share tips, and learn about cooking. The site consists of several links to link the users to specific recipes for breakfast, lunch and dinner, as well as recipes organized by food groups and dietary concerns. The menus.js file will use javascript to place the links into a simple menu system that will not overwhelm the web page. The dinner.css will style the Web Page.
-->
<title>Dinner Menu</title>
<link type="text/css" rel="stylesheet" href="dinner.css">
<script type="text/javascript" src="menus.js"></script>
</head>
<body>
<div id="page">
<div id="left">
<h3>Assignments</h3>
<ul class="assignmentLinks">
<li>Index</li>
<li>Happy Birthday</li>
<li>Dinner Plate</li>
<li>Shakespeare</li>
</ul>
<hr style="color: white" />
<h3>Menu</h3>
<ul class="menu">
<li class="categories">Home</li>
<li class="slideMenus">Appetizers
<ul>
<li>Antipasto</li>
<li>Seafood</li>
<li>Beans and Legumes</li>
<li>Canapes</li>
<li>Cheeses</li>
<li>Dips and Spreads</li>
<li>Fruits</li>
<li>Meat</li>
<li>Nuts and Seeds</li>
<li>Pastries</li>
<li>Vegetables</li>
</ul>
</li>
<li class="slideMenus">Breakfast/Brunch
<ul>
<li>Baked Goods</li>
<li>Beverages</li>
<li>Casseroles</li>
<li>Cereals</li>
<li>Fruits</li>
<li>Meat</li>
<li>Potatoes</li>
<li>Quiches</li>
<li>Crepes</li>
<li>Egg Dishes</li>
<li>French Toast</li>
<li>Pancakes</li>
<li>Waffles</li>
</ul>
</li>
<li class="slideMenus">Desserts
<ul>
<li>Cakes</li>
<li>Candies</li>
<li>Chocolate</li>
<li>Cookies</li>
<li>Custards and Puddings</li>
<li>Gelatins</li>
<li>Pies</li>
<li>Frozen Treats</li>
<li>Meringues</li>
<li>Mousse</li>
<li>Trifles</li>
</ul>
</li>
<li class="slideMenus">Main Dishes
<ul>
<li>Burgers</li>
<li>Casseroles</li>
<li>Fish and Seafood</li>
<li>Salads</li>
<li>Meatless</li>
<li>Meatloaves</li>
<li>Pizza and Calzones</li>
<li>Quiche</li>
<li>Ribs</li>
<li>Roasts</li>
<li>Sandwiches</li>
<li>Steaks and Chops</li>
<li>Stir-Fries</li>
<li>Stuffed Peppers</li>
<li>Mexican</li>
</ul>
</li>
<li class="slideMenus">Salads
<ul>
<li>Bean</li>
<li>Coleslaw</li>
<li>Croutons and Toppings</li>
<li>Dressings and Vinaigrettes</li>
<li>Egg Salads</li>
<li>Fruit Salads</li>
<li>Grains</li>
<li>Green Salads</li>
<li>Pasta Salads</li>
<li>Potato Salads</li>
<li>Vegetable Salads</li>
</ul>
</li>
<li class="slideMenus">Soups
<ul>
<li>Beans and Legumes</li>
<li>Broths and Stocks</li>
<li>Chili</li>
<li>Chowders</li>
<li>Cream and Cheese</li>
<li>Dessert Soups</li>
<li>Dry Soup Mixes</li>
<li>Noodle Soups</li>
<li>Seafood</li>
<li>Slow Cooker Soups</li>
<li>Stews</li>
<li>Vegetables</li>
<li>Vegetarian</li>
</ul>
</li>
<li class="slideMenus">User
<ul>
<li>Post a Recipe</li>
<li>Discussion Forum</li>
<li>My Profile</li>
<li>My Recipe Book</li>
</ul>
</li>
</ul>
</div>
<div id="logo">
<img src="dplogo.jpg" alt="Dinner Plate" />
</div>
<div id="main">
<img src="torte.jpg" height="300" width="320"alt="Apple Bavarian Torte" />
<h1>Recipe of the Week</h1>
<h2>Apple Bavarian Torte</h2>
<h3>Ingredients:</h3>
<ul id="ingrd">
<li>1/2 cup butter</li>
<li>1/3 cup white sugar</li>
<li>1/4 teaspoon vanilla extract</li>
<li>1 cup all-purpose flour</li>
<li>1 (8 ounce) package cream cheese</li>
<li>1/4 cup white sugar</li>
<li>1 egg</li>
<li>1/2 teaspoom vanilla extract</li>
<li>6 apples - peeled, cored, and sliced</li>
<li>1/3 cup white sugar</li>
<li>1/2 teaspoon ground cinnamon</li>
<li>1/4 cup sliced almonds</li>
</ul>
<h3>Directions</h3>
<ol id="dir">
<li>Preheat oven to 450° F (230° C).</li>
<li>Cream together butter, sugar, vanilla, and flour</li>
<li>Press crust mixture into the flat bottom of a 9-inch springform pan. Set aside</li>
<li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla. Pour cheese mixture over crust.</li>
<li>Toss apples with sugar and cinnamon. Spread apple mixture over all.</li>
<li>Bake for 10 minutes. Reduce heat to 400° F (200° C) and continue baking for 25 minutes.</li>
<li>Sprinkle almonds over top of torte. Continue baking until lightly browned. Cool before removing from pan.</li>
</ol>
<div id="summer">
<h3>Summer Entertainment Tips</h3>
<p>With the summer fast approaching, it's time to start planning outdoor parties. Keep your guests cool and happy with the summer time tips.</p>
<ul class="tips">
<li>Keep plenty of ice on hand for cooling people, food, and drinks by filling plastic freezer bags with ice from your trays.</li>
<li>For extra flavor, use frozen cubes of lemonade or juice to cool drinks instead of regular ice.</li>
<li>Keep a bag packed with picnic gear for spur-of-the-moment excursions.</li>
<li>Throw a summer harvest party to swap surplus fruits and vegetables with your gardener friends.</li>
<li>Stock extras for guests including sunblock, bug repellant, hats, and towels</li>
</ul>
</div>
<div id="grill">
<h3>Grilling Tips</h3>
<p>Is there anything better on the grill than beef? To get the most out of steaks, apply the following tips:</p>
<ul class="tips">
<li>For direct grilling place beef 3 to 6 inches from the heat source and cook at medium heat.</li>
<li>For thicker cuts, use indirect grilling with the beef placed farther that 6 inches from the heat source.</li>
<li>Leave at least 1/8" of fat in your steaks to help seal in the juices while the meat is cooking. Slash the fat at 1" intervals around the steak perimeter so that the meat willl not curl up during the grilling process.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JavaScript File:
/*
Name: Collin Klopstein
Date: December 14, 2013
Filename: menus.js
Function List:
makeMenus()
Initializes the contents of the mystery.htm Web page, locating
the sliding menus, setting their initial positions and
display styles and defining the onevent handlers.
showSlide()
Shows a sliding menu while hiding any inactive menus
closeSlide()
Closes an inactive sliding menu
moveSlide()
Moves a sliding menu horizontally across the page
-------------------------------------------------------------
Global Variable List:
currentSlide
An object variable pointing to the currently active sliding menu
leftPos
The current left position of the sliding menu as it is
moved across the page
*/
window.onload = makeMenus;
var currentSlide = "null";
var leftPos = 0;
function makeMenus() {//create a reference to all sliding menus in the doc and apply event handlers
var slideMenus = new Array();//creates slideMenus array
var allElems = document.getElementsByTagName("*");//stores all elements in the document in allElems array
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "slideMenus") slideMenus.push(allElems[i]);
}
for (var i = 0; i < slideMenus.length; i++) {
slideMenus[i].onclick = showSlide;//creates eventhandler onclick to call showSlide()
slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";//sets the left property value of ul elements to 0px
}
//create event handler onclick that calls the closeSlide() when a user clicks anywhere in the "logo" or "main" div
document.getElementById("logo").onclick = closeSlide;
document.getElementById("main").onclick = closeSlide;
document.getElementById("left").onclick = showSlide;
}
function showSlide() {//displays a sliding menu on the web page
var slideList = this.getElementsByTagName("ul")[0];
//test whether a sliding menu is currently displayed on the page
if (currentSlide != "null" && currentSlide.idName == slideList.idName)
closeSlide;
else {
closeSlide;
currentSlide = slideList;
currentSlide.style.display = "block";
currentSlide.style.backgroundColor = "black";
currentSlide.style.border = "2px solid rgb(218, 165, 32)";
currentSlide.style.left = "125px";
currentSlide.style.top = "-100px";
}
}
function closeSlide() {//close any active sliding menu
if (currentSlide) {
currentSlide.style.left = "0px";//sets style of left property to 0px of currentSlide object
currentSlide.style.display = "none";//sets display of currentSlide to "none"
currentSlide = "null";//sets value of currentSlide to "null"
}
}
function moveSlide() {//move a sliding menu horizontally across page until left coordinate exceeds 220
leftPos += 5;
if (parseInt(currentSlide.style.left) <= 220)
currentSlide.style.left = leftPos + "px";
else {
leftPos = 0;
}
}
And the CSS:
body {background-color: black}
ul {list-style-type: none}
ul a {text-decoration: none; color: black}
#left {width: 150px; float: left; background-color: black; height: 100%;}
#left h3{text-align: center; font-weight: normal; letter-spacing: 0.25em;
font-size: 14px; color: white; margin-bottom: 15px}
#left li {position: relative; margin: 5px; padding-top: 0.5em}
#left a {color: rgb(218, 165, 32); text-decoration: underline; display: block}
#left a:hover {color: white; text-decoration: underline; font-weight: bold}
#left ul ul {display: none; position: absolute; top: 0px; left: 100%; width: 100%}
#left.slideMenu > a {z-index: 2; position: relative;}
#logo {float: left; width: 1200px; padding-left: 10px; margin-left: 20px; margin-bottom: 15px; background-color: white}
#main {float: left; width: 1200px; padding-left: 10px; margin-left: 20px; background-color: white;}
#main h1 {font-weight: normal; font-family: Script; letter-spacing: 0.5em; border: 1px solid black; background-color:
rgb(218, 165, 32); margin-right: 20px}
#main img {float: right; margin: 0px 0px 10px 10px; position: absolute; top: 325px; left: 925px; border: 25px inset
rgb(218,165,32)}
#main p {margin: 10px 0px; font-size: 1.25em; }
#main h2, h3 {text-decoration: underline}