Adding a DIV at the end of the HTML that will appear at the top of the page

**clive_b** · 09-24-2012 08:51 AM

I am pretty sure there must be a trivial solution to this, so my apologies for posting such a dumb question, but after searching Google and experimenting with the CSS position attribute I just cannot figure it out.

I'm using JSP to dynamically generate HTML. Under normal circumstances, the main body of the page goes into a DIV. However, during the processing in the JSP code, it may arise that a notice must be added to the HTML, and I want this notice to appear at the top of the page. But the JSP code cannot discover this until after it has started generating the main body DIV.

In other words, I need to generate this most of the time:

Code:

<div class=maintext>
Main body of the page
</div>

But at other times generate this:

Code:

<div class=maintext>
Main body of the page
</div>

<div class=noticetext>
Text of the notice
</div>

such that when the page is rendered the second DIV appears above the first (and pushes it down).

What I just cannot figure out is what CSS attributes I need to use for the maintext and noticetext classes to achieve this.

**cbVision** · 09-24-2012 05:11 PM

Here's a simple jQuery solution:
http://jsfiddle.net/dfreema1/CnB4h/

You can try some positioning hacks with CSS, but JS is how I'd do it.

**clive_b** · 09-25-2012 03:04 AM

Originally Posted by cbVision

You can try some positioning hacks with CSS, but JS is how I'd do it.

Thanks. I assumed that it ought to be easy using CSS and I was just being dumb, but I'll do it with Javascript.

**George88** · 09-26-2012 04:49 AM

If this was my problem, I would have a hidden <div> permanently positioned at the place I wanted the message to appear. I would then just turn it on and add a child element to it so the message could be displayed. Here's a working example:

http://www.sitesupplier.co.uk/tutori..._b/append.html

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Append</title>

<style type="text/css">
#noticetext
{
	border: 1px solid #F0F;
	display: none;
}

.maintext
{
	border: 1px solid #900;
}
</style>

</head>

<body>
<div id="noticetext">
	<!-- Hidden from view, but always present -->
</div>

<div class=maintext>
	Main body of the page
</div>

<input type="button" id="test" value="test" />

</body>
</html>

<script type="text/javascript">

document.getElementById("test").addEventListener("click", whatever, false);

function whatever()
{
	// The element to be created.
	var message = document.createElement("div");

	// The element to contain the div.
	var container = document.getElementById("noticetext");

	message.class = "some_class";
	message.id = "some_id";
	message.textContent = "This gets added to the noticetext.";

	container.style.display = "block";
	container.appendChild(message);
}
</script>

**clive_b** · 09-26-2012 05:18 AM

Originally Posted by George88

If this was my problem, I would have a hidden <div> permanently positioned at the place I wanted the message to appear. I would then just turn it on and add a child element to it so the message could be displayed.

Thanks for your suggestion, but unfortunately that won't work for me.

I should have explained that the content of the notice varies and, like the main body, is dynamically generated by the JSP code. So it can't just sit there waiting to be revealed. The JSP code doesn't know (a) whether the notice is to be added nor (b) what its content will be until after it has generated the main body.

I already have this working with some simple Javascript. If the JSP discovers that the notice needs to be generated, it can simply output this:

Code:

<div id=maintext>
  Content of main body
</div>
<div id=noticetext>
  Content of the notice
</div>
<script language=javascript>
var mt = document.getElementById("maintext");
mt.parentNode.insertBefore(document.getElementById("noticetext"),mt);
</script>

Thread: Adding a DIV at the end of the HTML that will appear at the top of the page

Thread Tools

Display

Adding a DIV at the end of the HTML that will appear at the top of the page

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions