< Back

Document Subject: Div code snippets
Hint Short Cut: Add this to your code & documentation to help you find this page.
http://#div or http://A555F9/nn.nsf/ByAlias/div

A few javascript Div snippets which I keep reusing.




Divs can be used to organise areas of a webpage, can be used to hide or show when a pull down is changed, or a screen is resized, can be made to float around or flow around text.

 

Divs are similar to Spans but they usually have a break after them, you can make them inline like spans by making the display parameter inline.

To remove the break or newline after a div use:

eg

#TheTopDiv {display: inline}

<div id="TheTopDiv" class="rounded"><a href="http://AdFos.com">Adam Foster</a></div>

or

<div id="TheTopDiv" style="display: inline"><a href="http://AdFos.com">Adam Foster</a></div>

 

If you want a div to be invisible on loading:

<div id='checkStockDiv' style='display:none; visibility:hidden;'> whatever </div>

 

To Hide a div try this javascript function:

function hide(divId) {  
    if (window.document.getElementById) { // DOM3 = IE5, NS6
       //alert(divId);  
        window.document.getElementById(divId).style.display = 'none';  
        }  
        else {  
            if (document.layers) { // Netscape 4  
                document.divId.display = 'none';  
        }  
        else { // IE 4  
                window.document.all.divId.style.display = 'none';  
        }  
    }  
}   

To show a div try this javascript function: NB change to "block" in stead of inline if you want the break after.

function show(divId) {  
    if (window.document.getElementById) { // DOM3 = IE5, NS6  
        window.document.getElementById(divId).style.display = 'block';  
                window.document.getElementById(divId).style.visibility = 'visible';  
    }  
    else {  
        if (document.layers) { // Netscape 4  
            document.divId.display = 'block';  
    }  
    else { // IE 4  
            window.document.all.divId.style.display = 'block';  
    }  
    }  
}   

 

 

To make the div float to the right try:

<div id="TheTopDiv" style="float:right"><a href="http://AdFos.com">Adam Foster</a></div>

 

To make text look more spaced in a div try this:

<div STYLE="text-align: justify; text-justify: newspaper; padding-left:20px; padding-right:20px; line-height:18px;">lots of text</div>

or a grey background with padding:


<div style="padding:5px 5px 5px 6px; background-color:#222222;" > lots of text</div>

or to add a black border:

<div style="border:3px solid #000000"> border</div>