maxL = 1000;
var bName = navigator.appName;
function taLimit(taObj) {
if (taObj.value.length == maxL) {
return false;
}
return true;
}
function taCount(taObj,Cnt) {
objCnt=createObject(Cnt);
objVal=taObj.value;
if (objVal.length > maxL) {
alert("Description field has to be less than 1000 characters.");
objVal = objVal.substring(0, maxL);
}
if (objCnt) {
if(bName == "Netscape"){
objCnt.textContent=maxL-objVal.length;}
else{objCnt.innerText=maxL-objVal.length;}
}
return true;
}
function createObject(objId) {
if (document.getElementById) return document.getElementById(objId);
else if (document.layers) return eval("document." + objId);
else if (document.all) return eval("document.all." + objId);
else return eval("document." + objId);
}
To update the counter at last, do something like this:
<script type="text/javascript">
taCount(document.getElementById('txtDescription'), 'myCounter');
</script>
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
Wednesday, December 23, 2009
Thursday, November 6, 2008
Collapsing/ Hiding rows in a table
Hiding rows on a table based on a link on a row. Nothing much to talk about, except that this is actually quite an interesting piece of code. Simple but yet complex. Oxymoron i know, but anyhow note that the span tag has an id which corresponds to the row number of the row to height. It is also important to note that there should not be anything other than the value between the span tags. Most things such as styles can be controlled directly using CSS.
<script type="text/javascript">
var hide= true;
function toggleRows(tableId, rowId, tag){
tbl = document.getElementById(tableId);
navispan = document.getElementById(rowId);
var len = tbl.rows.length; if(tag.innerHTML.substring(0,4) == "Show") {
navispan.innerHTML = tag.innerHTML.substring(5); hide= false;
} else {
navispan.innerHTML = "Show " + tag.innerHTML; hide= true;
}
var vStyle = (hide)? "none":"";
tbl.rows[rowId].style.display = vStyle;
}</script>
<style>
.header {
text-align:left; width:100px;
}
.bodyText {
width:150x;
}
</style>
</head>
<body>
Click here to hide/show
<span id="0" onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span>
<span id="1" onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> <span id="2" onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span>
<br /><br />
<table id="myTable" style="width:400px; border:0px;">
<tbody>
<tr>
<td class="header"> <span onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span> </td>
<td class="bodyText"> This annotation Sucks </td>
<td class="bodyText"> This annotation is good </td>
</tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> </td>
<td class="bodyText"> </td> <td class="bodyText"> This annotation cannot make it. </td> </tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span> </td>
<td class="bodyText"> I love this phrase </td> <td class="bodyText"> This phrase is dumb. </td> </tr>
</tbody>
</table>
<script type="text/javascript">
var hide= true;
function toggleRows(tableId, rowId, tag){
tbl = document.getElementById(tableId);
navispan = document.getElementById(rowId);
var len = tbl.rows.length; if(tag.innerHTML.substring(0,4) == "Show") {
navispan.innerHTML = tag.innerHTML.substring(5); hide= false;
} else {
navispan.innerHTML = "Show " + tag.innerHTML; hide= true;
}
var vStyle = (hide)? "none":"";
tbl.rows[rowId].style.display = vStyle;
}</script>
<style>
.header {
text-align:left; width:100px;
}
.bodyText {
width:150x;
}
</style>
</head>
<body>
Click here to hide/show
<span id="0" onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span>
<span id="1" onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> <span id="2" onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span>
<br /><br />
<table id="myTable" style="width:400px; border:0px;">
<tbody>
<tr>
<td class="header"> <span onClick='toggleRows("myTable",0, this)' style='cursor:pointer;color:#cc0000'>Aaron</span> </td>
<td class="bodyText"> This annotation Sucks </td>
<td class="bodyText"> This annotation is good </td>
</tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",1, this)' style='cursor:pointer;color:#cc0000'>Jason</span> </td>
<td class="bodyText"> </td> <td class="bodyText"> This annotation cannot make it. </td> </tr> <tr>
<td class="header"> <span onClick='toggleRows("myTable",2, this)' style='cursor:pointer;color:#cc0000'>Adam</span> </td>
<td class="bodyText"> I love this phrase </td> <td class="bodyText"> This phrase is dumb. </td> </tr>
</tbody>
</table>
Make your screen stay when you click popup
When we use javascript to start a popup for example, most of the time we do so by executing the following script:
<a href="#" onclick="javascript:win.. ">Click</a>
The reason why we have # here is because we want the cursor to show up so that on mouse over, the user knows that the link is 'clickable'. But by doing this, it will cause the page to reload. So how do we show the cursor but yet not cause the page to reload without.
The anwer is, don't use #, use CSS.
<p onClick="javascript:win.." style='cursor:pointer'>Click</p>
Problem Solve!
<a href="#" onclick="javascript:win.. ">Click</a>
The reason why we have # here is because we want the cursor to show up so that on mouse over, the user knows that the link is 'clickable'. But by doing this, it will cause the page to reload. So how do we show the cursor but yet not cause the page to reload without.
The anwer is, don't use #, use CSS.
<p onClick="javascript:win.." style='cursor:pointer'>Click</p>
Problem Solve!
Saturday, November 1, 2008
Javascript Popup with Custom Controls in GridView ASP.NET
Prior to the earlier posting which describes how to use a custom control, the following codes describe how to use a custom control to launch a javascript function. In this case, to start a popup window by clicking on a link from the gridview table.
The codes are as follows:
<asp:TemplateField>
<HeaderTemplate>Manage</HeaderTemplate>
<ItemTemplate>
<asp:HyperLink NavigateUrl='<%# DataBinder.Eval(Container,"DataItem.class_id", "javascript:window.open(\"classstudents.aspx?id={0}\",\"mywindow\",\"menubar=1,resizable=1,width=400,height=500\");") %>' Text="Manage" runat="server" Target="myBuffer"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
The steps as usual are:
1. Create the objectdatasource
2. Creat the grdiview
3. Bind the objectdatasource to the gridview
4. Insert a TemplateColumn (when you select the grid and click edit column)
5. The templatecolumn should contain something liek the code above.
6. Done!
Take note that for javascript to work, it should be contained with a single quote. And if you need to display the quotes in javascript within asp.net, the escape character for asp.net C# is a backslash /
The codes are as follows:
<asp:TemplateField>
<HeaderTemplate>Manage</HeaderTemplate>
<ItemTemplate>
<asp:HyperLink NavigateUrl='<%# DataBinder.Eval(Container,"DataItem.class_id", "javascript:window.open(\"classstudents.aspx?id={0}\",\"mywindow\",\"menubar=1,resizable=1,width=400,height=500\");") %>' Text="Manage" runat="server" Target="myBuffer"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
The steps as usual are:
1. Create the objectdatasource
2. Creat the grdiview
3. Bind the objectdatasource to the gridview
4. Insert a TemplateColumn (when you select the grid and click edit column)
5. The templatecolumn should contain something liek the code above.
6. Done!
Take note that for javascript to work, it should be contained with a single quote. And if you need to display the quotes in javascript within asp.net, the escape character for asp.net C# is a backslash /
Subscribe to:
Posts (Atom)