Disappearing greeting footer and showing textArea footer

dotJoon 2014-04-18 08:04:24 UTC #1

There is a greeting(hello, hi, or welcome) footer which is in red background at the bottom of the page http://dot.kr/joon/046good/.
if you click the button (x) on the left/right end of the footer, the greeting footer will be disappeared, and the textArea footer will be shown.
They "Greeting footer at http://dot.kr/joon/046good/ and textArea footer at http://dot.kr/joon/046good/?c=1" use different "URL".
I like to make it to use same url.
it means both greeting footer and textArea footer are loading at a time at the page of " http://dot.kr/joon/046good/".
and the greeting footer is shown and the textArea footer is not shown at first
but when the user clicks the button (x) on the left/right end of the greeting footer, the greeting footer will be disappeared and the textArea footer will be shown.
Can I do it in CSS with your help?
or
Should I go to javascript forum?

I have one more question on the greeting footer.
The text, "hello, paul/hi, ronpat/welcome, dresden" is not vertically centered in the greeting footer.
How can I make it vertically centered in the greeting footer?
Although I use "vertical-align:middle;", it seems not to work sadly.

PaulOB 2014-04-18 08:56:48 UTC #2

HI,

If all you want to do is hide and show content in the footer then yes js is the way to go.

Here's an example using jquery but vanilla js would be better for something as small as this.

<!DOCTYPE HTML>
<html class="hiP100">
<head>
<meta charset="utf-8">
<title>1st title</title>
<link rel="stylesheet" href="http://dot.kr/joon/style.css">
<link rel="stylesheet" href="http://dot.kr/joon/col.css">
<link rel="stylesheet" href="http://dot.kr/joon/num.css">
<style>
#screen {
	width:500px;
	background:pink;
	margin:0 auto;
}
#title, #middle {
	font-size:40px;
	color:white;
}
#title { display:block; }
#contents {
	overflow:auto;
	font-size:40px;
}
#title>div {
	display:table;
	margin:0 auto;
}
#menu, #search, #sns, #nick {
	border:blue;
	border-radius:20px;
	font-size:40px;
	background:white;
	padding:10px;
}
#foot2{display:none}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body class="hiP100 dpFlex flexCol mgn0">
<header class="dpInline-block alnC grayBack dpTable">
		<div id="menu" class="dpInline-block flL mgn5"> <a href="http://dot.kr/joon/046good/?view=menu&c=1">menu</a> </div>
		<div id="search" class="dpInline-block flR mgn5"> <a href="http://dot.kr/joon/046good/?view=search&c=1">search</a> </div>
		<div id="title" class="dpInline-block pdg25 alnL dpTable alnTM alnM">
				<div class="dpTable">1st title</div>
		</div>
</header>
<main id="contents" class="flex1 whiteBack ovFauto">
		<div id="screen">1st contents<br>
				<a href="http://dot.kr/joon/046good/">index</a><br>
				<a href="http://dot.kr/joon/046good/?c=1">index?c=1</a><br>
				<a href="http://dot.kr/joon/046good/?c=2">index?c=2</a><br>
				<a href="http://dot.kr/joon/046good/?c=3">index?c=3</a><br>
				<a href="http://dot.kr/joon/046good/?c=4">index?c=4</a>
				<hr>
				<a href="http://dot.kr/joon/046good/?view=menu">menu</a><br>
				<a href="http://dot.kr/joon/046good/?view=menu&amp;c=1">menu?c=1</a><br>
				<a href="http://dot.kr/joon/046good/?view=menu&amp;c=2">menu?c=2</a><br>
				<a href="http://dot.kr/joon/046good/?view=menu&amp;c=3">menu?c=3</a><br>
				<a href="http://dot.kr/joon/046good/?view=menu&amp;c=4">menu?c=4</a>
				<hr>
				<a href="http://dot.kr/joon/046good/?view=contents">contents</a><br>
				<a href="http://dot.kr/joon/046good/?view=contents&amp;c=1">contents?c=1x</a><br>
				<a href="http://dot.kr/joon/046good/?view=contents&amp;c=2">contents?c=2</a><br>
				<a href="http://dot.kr/joon/046good/?view=contents&amp;c=3">content?c=3</a><br>
				<a href="http://dot.kr/joon/046good/?view=contents&amp;c=4">content?c=4</a>
				<hr>
				<a href="http://dot.kr/joon/046good/?view=search">search</a><br>
				<a href="http://dot.kr/joon/046good/?view=search&amp;c=1">search?c=1</a><br>
				<a href="http://dot.kr/joon/046good/?view=search&amp;c=2">search?c=2</a><br>
				<a href="http://dot.kr/joon/046good/?view=search&amp;c=3">search?c=3</a><br>
				<a href="http://dot.kr/joon/046good/?view=search&amp;c=4">search?c=4</a>
				<hr>
		</div>
</main>
<footer id="foot1" class="alnC dpInline-block redBack fize40" style="vertical-align:middle;">
		<div id="menu" class="dpInline-block flL mgn5"> <a class="showFoot" href="http://dot.kr/joon/046good/?c=1">x</a> </div>
		<div id="search" class="dpInline-block flR mgn5"> <a  class="showFoot" href="http://dot.kr/joon/046good/?c=1">x</a> </div>
		<div id="title" class="dpInline-block pdg25">hi, ronpat!</div>
</footer>
<footer id="foot2" class="alnC dpInline-block redBack">
		<div id="sns" class="dpInline-block flL mgn5"><a href="">sns</a></div>
		<div>
				<form action="action/addTail_a.php?c=1" method="post">
						<textarea name="tail" class="high60 wiP50" style="vertical-align:middle; margin-top:5px;"></textarea>
						<input value="submit" type="submit" class="high60 wide100">
						<div id="nick" class="dpInline-block flR mgn5 " ><a href="">nick</a></div>
				</form>
		</div>
</footer>
<script>
jQuery(document).ready(function() {
		$("#foot1").on( "click", ".showFoot", function() {
		$('#foot1').hide();
		$('#foot2').fadeIn('slow');
		return false;
		});
});
</script>

</body>
</html>

Regarding the vertical alignment of the text in the footer then there is nothing for the text to align with because you only have floats at the side and they are removed from the flow which defectively means the text is centred anyway. If you had used display:table-cell for al three a sin the examples we have given previously then vertical alignment would be easy and automatic. The easiest thing to do now is just fake it with line height or a mragin.

e.g.

#title {
     line-height: 77px;
}

dotJoon 2014-04-18 10:26:14 UTC #3

since the greeting text is dynamic, the code above has too much gap between line like at http://dot.kr/joon/047tag/ when it says "hello, paul".

if you look the code at http://dot.kr/joon/047tag/ when it says "hi, ronpat",
you will see that I use style="diplay:table-cell; for all three divs. but it seems not to work.
(I am afraid, I might use it wrongly )

PaulOB 2014-04-18 10:37:40 UTC #4

Hi,

You've spelled display as diplay in your inline styles but that own;t make it work as table-cells need ot be in source order.

Here's the smallest example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
footer {
	display:table;
	width:100%;
	background:red;
	color:#fff;
	padding:20px 0
}
.tc {
	display:table-cell;
	vertical-align:middle;
	padding:5px;
}
#menu {
	text-align:left;
	width:1px
}
#search {
	text-align:right;
	width:1px
}
#title {
	text-align:center;
	widh:100%;
	font-size:24px
}
</style>
</head>

<body>
<footer>
		<div id="menu" class="tc">x</div>
		<div id="title" class="tc">Welcome <br>
				All</div>
		<div id="search"class="tc">x</div>
</footer>
</body>
</html>

system 2014-10-08 05:55:26 UTC #5

ThemesPodcastArticlesPremium