Tuesday, September 8, 2009
Ajax Round Corner Extender
Ajax Round Corner Extender: Ajax Round corner extender displays a panel/html table with round corners. Here you get the flexibility to round the number of corners as per your requirement. E.g. make round corner for Left corners only or right corners only.
Here is the sample code:
< id="rceBasic" runat="server" radius="8" targetcontrolid="pnlShow" corners="Left" bordercolor="black">
< id="pnlShow" runat="server">
<>
<>
<>
Show your contents here.
<>
Your contents will appear here.
< /td>
< /tr>
< /table>
< /asp:Panel>
Thursday, August 13, 2009
Dynamically loading pages using iFrame.
Use following steps to load pages dynamically using iFrame.
1. Declare an iFrame in HTML part of your code. You can use following code for this.< id="frmShow" runat="server" width="600px" height="300px" scrolling="auto" frameborder="1">
2. Now use src property of iFrame to set its source dynamically from code behind. Like following code:
frmShow.Attributes.Add("src", "Blank.aspx?Check=Blank");
here you can set URL as per your requirement.
3. To refresh the contents within the iFrame you need to take care of following things:
< id="SearchFrame" runat="server" width="550" height="220">
< id="HyperLink2" runat="Server" text="Go to Google" navigateurl="http://www.google.com" target="SearchFrame">
E.g. 2
< name="SearchFrame" id="SearchFrame" runat="server" width="550" height="220">
< id="HyperLink2" runat="Server" text="Go to Google" navigateurl="http://www.google.com" target="SearchFrame">
Now compare both e.g.s They are using same syntax. So they should behave in same manner. But E.g.1 will show the contents in new Window/Tab where as the second E.g. will display the contents within iFrame. No doubt, second case will perform better as it won't lead to Page reload. This is because of the the property "name". The "name" property has to be there in order to refresh contents within iFrame.
You can also refresh parent page from iframe.
< type="text/javascript">
function reloadParent()
{
window.parent.location.href='Page3iMain2.aspx?check=True';
}
On body part use following code:
< onload="reloadParent()">
1. Declare an iFrame in HTML part of your code. You can use following code for this.< id="frmShow" runat="server" width="600px" height="300px" scrolling="auto" frameborder="1">
2. Now use src property of iFrame to set its source dynamically from code behind. Like following code:
frmShow.Attributes.Add("src", "Blank.aspx?Check=Blank");
here you can set URL as per your requirement.
3. To refresh the contents within the iFrame you need to take care of following things:
- Use hyperlink as far as possible if you want to set Target property to iframe.
- There is a property called "name" which need to be specified when referring to iframe.
< id="SearchFrame" runat="server" width="550" height="220">
< id="HyperLink2" runat="Server" text="Go to Google" navigateurl="http://www.google.com" target="SearchFrame">
E.g. 2
< name="SearchFrame" id="SearchFrame" runat="server" width="550" height="220">
< id="HyperLink2" runat="Server" text="Go to Google" navigateurl="http://www.google.com" target="SearchFrame">
Now compare both e.g.s They are using same syntax. So they should behave in same manner. But E.g.1 will show the contents in new Window/Tab where as the second E.g. will display the contents within iFrame. No doubt, second case will perform better as it won't lead to Page reload. This is because of the the property "name". The "name" property has to be there in order to refresh contents within iFrame.
You can also refresh parent page from iframe.
< type="text/javascript">
function reloadParent()
{
window.parent.location.href='Page3iMain2.aspx?check=True';
}
On body part use following code:
< onload="reloadParent()">
Labels:
charandeep,
dynamically,
iFrame,
loading,
pages
Thursday, July 23, 2009
Handling FCKEditor Events Using Javascript
Handling FCKEditor Events Using Javascript
In order to exploit events of FCKEditor we need to use following javascript function. Here I am using onblur and onfocus events of FCKEditor to collapse and expand the toolbar when the user places the cursor in or out of the editor panel.
The first method "FCKeditor_OnComplete" will fire once the FCKEditor is loaded completely and will attached onBlur and OnFocus events to the editor instance.
< type="text/javascript">
function FCKeditor_OnComplete( editorInstance )
{
editorInstance.Events.AttachEvent( 'OnBlur' , FCKeditor_OnBlur ) ;
editorInstance.Events.AttachEvent( 'OnFocus', FCKeditor_OnFocus ) ;
}
function FCKeditor_OnBlur( editorInstance )
{
editorInstance.ToolbarSet.Collapse() ;
//alert('Lost Focus');
}
function FCKeditor_OnFocus( editorInstance )
{
var oEditor = FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>').EditorWindow.parent ;
editorInstance.ToolbarSet.Expand() ;
//alert('Got Focus');
}
FCKEditor declaration in HTML:
<>
<>
<>
< id="FCKeditor1" basepath="~/fckeditor/" runat="server" toolbarset="Basic" width="550" height="450">
< /td>
< /tr>
< /table>
The purpose of showing declaration of FCKEditor here is to make user clear about the use of "FCKeditor_OnComplete" method. user need not to call this method from any part of FCKEditor. In fact this method will call itself once the loading is complete.
In order to exploit events of FCKEditor we need to use following javascript function. Here I am using onblur and onfocus events of FCKEditor to collapse and expand the toolbar when the user places the cursor in or out of the editor panel.
The first method "FCKeditor_OnComplete" will fire once the FCKEditor is loaded completely and will attached onBlur and OnFocus events to the editor instance.
< type="text/javascript">
function FCKeditor_OnComplete( editorInstance )
{
editorInstance.Events.AttachEvent( 'OnBlur' , FCKeditor_OnBlur ) ;
editorInstance.Events.AttachEvent( 'OnFocus', FCKeditor_OnFocus ) ;
}
function FCKeditor_OnBlur( editorInstance )
{
editorInstance.ToolbarSet.Collapse() ;
//alert('Lost Focus');
}
function FCKeditor_OnFocus( editorInstance )
{
var oEditor = FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>').EditorWindow.parent ;
editorInstance.ToolbarSet.Expand() ;
//alert('Got Focus');
}
FCKEditor declaration in HTML:
<>
<>
<>
< id="FCKeditor1" basepath="~/fckeditor/" runat="server" toolbarset="Basic" width="550" height="450">
< /td>
< /tr>
< /table>
The purpose of showing declaration of FCKEditor here is to make user clear about the use of "FCKeditor_OnComplete" method. user need not to call this method from any part of FCKEditor. In fact this method will call itself once the loading is complete.
Labels:
charandeep,
Dotnetdna,
FCKEDITOR Events,
Javascript
Tuesday, July 14, 2009
Validate FCK Editor Using Custom Validator
Validate FCK Editor Using Custom Validator
In asp.net there is no direct way to validate FCKEDITOR so In order to do so we need to write a java script function which will validate FCKEDITOR on client side.
Here are the steps to make it possible:
Step1: Include following javascript function in ur html part.
< script language="javascript" type="text/javascript">
function ValidateFCK(source, args) {
var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}
Step2: Now add a asp Custom Validator in ur HTML part and call ValidateFCK function.
< asp:CustomValidator Text="" runat="server" ID="CustValDesc" ControlToValidate="FCKeditor1" ClientValidationFunction="ValidateFCK" ValidateEmptyText="True">
Thats it [:)]
In asp.net there is no direct way to validate FCKEDITOR so In order to do so we need to write a java script function which will validate FCKEDITOR on client side.
Here are the steps to make it possible:
Step1: Include following javascript function in ur html part.
< script language="javascript" type="text/javascript">
function ValidateFCK(source, args) {
var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}
Step2: Now add a asp Custom Validator in ur HTML part and call ValidateFCK function.
< asp:CustomValidator Text="" runat="server" ID="CustValDesc" ControlToValidate="FCKeditor1" ClientValidationFunction="ValidateFCK" ValidateEmptyText="True">
Thats it [:)]
Friday, June 19, 2009
Use Multiple Controls to open ajaxToolkit:CalendarExtender control..
Problem Area: Check out the image above, its showing a calendar control which is being displayed on click of Image button adjacent to text box. Now if you want to display calendar on click of both text box as well as image button then there will be a problem. You can set one control at a time in PopupButtonID property. That means in above scenario either you can use textbox to open this calendar OR you can use image to open calender. Now there is small trick to perform this. Yes, you can use a simple trick and make it open on click of both textbox and image.
Solution: Set PopupButtonID property of the control with multiple control ids as shown in following example.
< ajaxtoolkit:calendarextender id="CalendarExtenderStartDate" runat="server" targetcontrolid="StartDateText" popupbuttonid="StartDateText DateStart">< id="CalendarExtenderStartDate" runat="server" targetcontrolid="StartDateText" popupbuttonid="StartDateText DateStart">
Use popupbuttonid property and specify various control Ids in it.(separated by space)
Thanks....
Solution: Set PopupButtonID property of the control with multiple control ids as shown in following example.
< ajaxtoolkit:calendarextender id="CalendarExtenderStartDate" runat="server" targetcontrolid="StartDateText" popupbuttonid="StartDateText DateStart">< id="CalendarExtenderStartDate" runat="server" targetcontrolid="StartDateText" popupbuttonid="StartDateText DateStart">
Use popupbuttonid property and specify various control Ids in it.(separated by space)
Thanks....
Friday, June 5, 2009
How to use Text Wrap feature in Mozilla...
For using text wrap in Mozilla you need to perform following steps:
1. Create following javascript function :
function textwrap()
{
if (ie==0)
{
var tag = document.getElementsByTagName("span");
for (var i = 0; i < classname ="=" text_final =" tag.item(i).innerHTML;" re =" /(<([^">]+)>)/gi;
text_final = text_final.replace(re, "")
tag.item(i).innerHTML = text_final.replace(/(.*?)/g, "< wbr >");
}
}
}
}
-------------------------------------------------------------------------------------------
2.
Call textwrap() javascript function on your page and call it only for browser mozilla.....
Here I am assuming that you have already identified the browser type.....
textwrap();
3.
Apply the CSS class named "wraptext" to the label control who's text you want to wrap.
E.g. test.CssClass = "wraptext";
IE can handle word wrap with some CSS properties so there is no need to use above mentioned Javascript function. In case of IE we can simply use following CSS properties:
style="word-wrap: break-word; text-wrap: wrap;"
1. Create following javascript function :
function textwrap()
{
if (ie==0)
{
var tag = document.getElementsByTagName("span");
for (var i = 0; i < classname ="=" text_final =" tag.item(i).innerHTML;" re =" /(<([^">]+)>)/gi;
text_final = text_final.replace(re, "")
tag.item(i).innerHTML = text_final.replace(/(.*?)/g, "< wbr >");
}
}
}
}
-------------------------------------------------------------------------------------------
2.
Call textwrap() javascript function on your page and call it only for browser mozilla.....
Here I am assuming that you have already identified the browser type.....
textwrap();
3.
Apply the CSS class named "wraptext" to the label control who's text you want to wrap.
E.g. test.CssClass = "wraptext";
IE can handle word wrap with some CSS properties so there is no need to use above mentioned Javascript function. In case of IE we can simply use following CSS properties:
style="word-wrap: break-word; text-wrap: wrap;"
Subscribe to:
Posts (Atom)