mbasilica: HTML

Showing posts with label HTML. Show all posts

Friday, June 13, 2008

Customize a button display

We can customize a button as below

<style type="text/css">
.button{background-color:#008800;text-decoration: none;color:#000000;font-size:10px;font-weight:bold;Border: 1px solid #333333;height:20px;margin-left:2px;}
</style>

Scrollable Label

To make a ready only label using a textfield so that the label is scrollable, use the code below

<html:text style="border:0" name="fop" property="account" size="16" readonly="true" />

Distinguish servlet requests

To find out if a servlet request button action is coming from a forward or not, use this code below

if( instForm.isBtnClose() )
{
// check if this "CLOSE==TRUE" comes from other pages;

if( null==request.getAttribute("javax.servlet.forward.servlet_path") )
{
return mapping.findForward("close");
}
}

Tuesday, May 27, 2008

Dynamically Add or Remove HTML elements

<HTML>
<HEAD>
<script type="text/javascript">

var sequence = 0;

function addTextBox()
{
var dynDiv = document.getElementById('dynamicDiv');
var newDiv = document.createElement("DIV");
var newDivIdName = 'Div'+sequence;
newDiv.setAttribute('id',newDivIdName);
var newSpan = document.createElement('SPAN');

addField(newSpan,{ type :"text", name :"test"+sequence, value:"test"+sequence , size:30 });
addField(newSpan,{ type :"button", name :"delete"+sequence, value:"delete", id:"delete"+sequence });

newDiv.appendChild(newSpan);
dynDiv.appendChild(newDiv);

var deleteButton = document.getElementById('delete'+sequence);
deleteButton.onclick=function()
{
removeTextBox(newDivIdName);
}

sequence++;
}

function addField(form,json)
{
var inp=document.createElement("input");
for(var i in json)
{
inp[i]=json[i];
}
form.appendChild(inp);
}

function removeTextBox(divNum)
{
var dynDiv = document.getElementById('dynamicDiv');
var obj = document.getElementById(divNum);
dynDiv.removeChild(obj);
}

</script>

</HEAD>

Wednesday, March 19, 2008

Scrollable table

We can add scrollbars to an html table by simply adding the below line of code to the table

<div style="border:1px solid; width:300px; height:400px; overflow:auto;">

Example

<div style="border:1px solid; width:300px; height:400px; overflow:auto;">
‎<table>
<tr>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
</table>
</div>

The "height" attribute is very important in order for scrollbars to appear