www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Sep 2012
    Posts
    3

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

    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.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    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.

  3. #3
    Join Date
    Sep 2012
    Posts
    3
    Quote Originally Posted by cbVision View Post
    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.

  4. #4
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    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>

  5. #5
    Join Date
    Sep 2012
    Posts
    3
    Quote Originally Posted by George88 View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles