Notes Ninjas Notes Ninjas
Lotus Notes hints, tips, error messages
Div code snippets

Hint Short Cut: Add this to your code & documentation to help you find this page.
http://www.notesninjas.com/#div or http://www.notesninjas.com/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>

 

 

 

 Jump to:     Notes Tips
    Lotus Notes Index 
  Register for Tips
Previous Lotus Notes Tip 
    Next Lotus Notes Tip
Your company logo here?
Adam Foster
Free Cash Making Web Site
Free Revenue Earning Blog Site
 Free Revenue Earning Newsletter Site   
Free Search Pages Free Web stats
Free Contact Us page
Cheap .com domain names
 Need a website or 
   Lotus Notes
  problem solved?
Adam Foster
Beginning Java Web Services by Andre Tost, Henry Andre Bequet, Meeraj Kunnumpurath, Sean Rhody
Web services are no longer a nascent technology in the programming industry; every major software vendor is rolling out web services-related APIs and products. Today Java developers are successfully adopting web services as the latest technology in application development in order to enable...
See at: Amazon.co.uk | Amazon.com |