Popping up with position:absolute

for SO-31931474 at http://stackoverflow.com/q/31931474/17300

by Stephen

HTML

<section id="notes">
    <p>Since you're already using jQuery, I went with more jQuery, such as <code>$('&lt;div>').addClass('messagebox')</code> rather than plain DOM <code>document.createElement(...)</code>
    </p>
    <p>Also, <em>Best Practices</em>.
        <br>Don't attach a bunch of inline styles; instead, just attach a class then use CSS to style that class. See how I use <code>div.messagebox</code> and <code>div.messagebox .message</code> to apply the styles.
        <br>Also, the tags <code>&lt;b></code> and <code>&lt;i></code> are (long) <strong>deprecated</strong>, as they are presentational tags. Presentation should be done with CSS. See how I made them part of the .message style.</p>
</section>

<section class="explanation">
    <p>This represents your basic page. It has several parts to it.</p>
    <p>Let's say you want to add your message after the top part, which could be your standard page header for your site.</p>
    <section class="demonstration" id="before">
        <div class="above">Basic part above</div>
        <div class="middle">Middle part</div>
        <div class="below">Part Below</div>
        <footer>This is the page footer</footer>
    </section>
</section>
<section class="explanation">
    <p>When you add a &lt;div&gt; to it, it naturally takes up space and moves other things around. This time, the div is just added in the markup, but the same is true if the div is added via javascript DOM manipulation.</p>
    <p>You can see the <em>top</em> and <em>left</em> styles don't have any effect. This is because the messagebox position is the default <em>static</em>, and height and width are <em>auto</em>. "top" and "left" need a different kind of positioning to work with, and generally something that also has some limit on its width.</p>
    <section class="demonstration" id="natural">
        <div class="above">Basic part above</div>
        <div class="messagebox"> <span class="message">The Session Timed Out (1)</span>

       ...

CSS

div.messagebox {
    font-size: 16px;
    width: auto;
    height: auto;
    top: 20%;
    left: 20%;
    background-color: white;
    border: 2px solid black;
}
div.messagebox .message {
    color: red;
    font-style: italic;
    font-weight: bold;
}
div.messagebox.positioned {
    position: absolute;
    width: 40%;
    padding: 1.5em;
}
section#hasposition {
    position: relative;
}
/* These are used to make the individual div pieces stand out from each other */
section.explanation {
    margin: 1em 0.5em;
    padding: 0.5em;
    border: 1px solid gray;
}
 .demonstration {
    margin-left: 1em;
    padding: 1em;
    background-color: #e0e0e0;
}
.demonstration .above {
    background-color: #fff0f0;
}
.demonstration .middle {
    background-color: #f0fff0;
}
.demonstration .below {
    background-color: #f0f0ff;
}
.demonstration footer {
    background-color: white;
}
p {
    margin-top: 0;
    padding-top: 0;
}
section {
    font-family: sans-serif;
}

JavaScript

function ShowSessionTimeoutPlain() {
    var styler = $('<div>').addClass('messagebox');
    styler.html('<span class="message">The Session Timed Out (2)</span>');
    $('#added .above').after(styler);
}

function ShowSessionTimeoutStyled() {
    var styler = $('<div>').addClass('messagebox').addClass('positioned');
    styler.html('<span class="message">The Session Timed Out (3)</span>');
    $('#hasposition .above').after(styler);
}

setTimeout(ShowSessionTimeoutPlain, 8000);
setTimeout(ShowSessionTimeoutStyled, 12000);