Tuesday, December 30, 2008

Creating modal popup in HTML 4 using CSS and Javascript

10 comments
Hi all,
Creating a modal popup for asp.net users is always easy, its simply a modal panel, modal popup extender of asp.net ajax and all is done. but creating the modal popup that way will not work properly when you are having a following doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

and that's why we are looking into a simple method which uses javascript, and a tricky css to show the same kinda popup to work with the above doctype also.
here is how we can do so.
(1) add following css in your css or html document's style tag:
.graydiv
{
position: absolute;
background-color: #5B5B5B;
left: 0px;
top: 0px;
z-index: 10000;
display: none;
}

.ModalBackground
{
background-color: black;
filter: alpha(opacity=70);
opacity: 0.7;
}


(2) add following html markup at the end of your html document:
<div id="divg" class="ModalBackground graydiv">
</div>
<div id="divSignin" style="border: '1px soild green'; display: none; z-index: 100002;
width: 550px; position: absolute;">
<div style="text-align:right;height:100px;width:100px;background-color:White;border:solid 1px lightyellow">
This is a popup;
<input type="button" value="Close Me" onclick="closePopup();" />
</div>

</div>


(3) add following javascript in the script tag of your document or in your javascript file:
function closePopup()
{
document.getElementById("divSignin").style.display="none";    
objDiv = document.getElementById("divg");
objDiv.style.display = "none"; 
return false;
}
function showPopup()
{
try
{  
document.getElementById("divSignin").style.display="block";    
objDiv = document.getElementById("divg");
objDiv.style.display = "block"; 
objDiv.style.width = document.body.scrollWidth;
objDiv.style.height= document.body.scrollHeight;         
fnSetDivSigninLeft("divSignin");        
}
catch(e)
{
alert(e);
}
return false   
}
function fnSetDivSigninLeft(oElement)
{
var DivWidth = parseInt(document.getElementById(oElement).offsetWidth,10)
var DivHeight = parseInt(document.getElementById(oElement).offsetHeight,10)
document.getElementById(oElement).style.left = (document.body.offsetWidth / 2) - (DivWidth / 2)+200;
document.getElementById(oElement).style.top = (document.body.offsetHeight / 2) -  ( DivHeight / 2);

return false;     
}


and that's it, your popup is ready, the last step is to call this popup in your control and call its showPopup() event. here is a sample input button that calls the popup.

<input type="button" value="Show Popup" onclick="showPopup();" />


Note: If you want to show multiple popups, you can extend this code.
Note: You can use any color for modal background, for doing so, modify the change background color property of the ModalBackground class and try using the code.

Another simple way to implement this thing is to use JQuery Plugin but i don't know if they work well with HTML 4 or not. This one is a simple nice and clean approach to deal with modal poups.

happy coding :)

Monday, December 29, 2008

Javascript : Accessing ASP.NET RadioButtonList or CheckBoxList in Javascript

3 comments
here is a sample radio button list

<asp:radiobuttonlist id="RadioButtonList1" runat="server">
<asp:listitem value="1">One</asp:listitem>
<asp:listitem value="2">Two</asp:listitem>
<asp:listitem value="3">Three</asp:listitem>
</asp:radiobuttonlist>

here is a sample script to check atleast one item should be checked

function validateRadio()
{
var count = <%=RadioButtonList1.Items.Count %>;
var id = "<%=RadioButtonList1.ClientID%>";
var checked = false;
for(i=0;i<count;i++)
{
if(document.getElementById(id+"_"+i.toString()).checked==true)
{
checked = true;
break;
}
}
return checked;
}

RadioButtonList and CheckBoxList works exactly same way, so go ahead and use the same funtion for the CheckBoxList also, and you can create as many validations as you think of! happy coding :)

T-SQL : Updating Database Image Name

0 comments
hey there again,
I had a database table which stores an event image. I have a column called ImageName which stores image name. Now problem was, when i upload an image with new event, and then update something other than an event image, it was set back to null.

That was because, the update query sent to the stored procedure was like that, so this can be solved in many ways, but the minimum change way is this one:

Update Events
set
column1 = @column1Value,
column2 = @column2Value,
column3 = @column3Value,
ImageName = isnull(@imageName,imageName),
[ where condition goes here]


Nice fix, I know generally people choose front end way to pass proper data, but this one is also nice one

Thursday, December 25, 2008

Wednesday, December 24, 2008

T-SQL : Display structure of a table

1 comments
Hi all,
Last night, when i was dealing with some server side error with my module of dotnetnuke and using the SQL page of the dotnetnuke, i was trying to access structure of an sql table, i search throug the web and here is what i get:
1)using a select statement:

SELECT *
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_CATALOG = 'Database name' AND
TABLE_NAME = 'Table Name'

This will display a nice table formated output of the columns with all the data associated with it.
2)Another way is:

exec sp_columns TableName

Monday, December 22, 2008

DotNetNuke : Getting Portal Alias By PortalID

7 comments

// using DotNetNuke.Entities.Portals;
// using System.Collections;
PortalAliasController paController = new PortalAliasController();
PortalAliasCollection paCollection = portalControler.GetPortalAliasByPortalID(PortalId);
IDictionaryEnumerator hs = paCollection.GetEnumerator();
hs.MoveNext();
PortalAliasInfo paInfo = (PortalAliasInfo)hs.Entry.Value;
string PortalAlias = paInfo.HTTPAlias;


In most of the cases when you are in Module developement, and coding in Module control, you will directly get the HTTPAlias from PortalSetting.PortalAlias.HTTPAlias.

When you are coding in a DotNetNuke page, i.e. if you have inherited an aspx page from DotNetNuke.Framework.PageBase, at that time also you will get the same property as well.

But when you are in a parent portal and you want to do redirects to child portals, at that time you can use this code.
This code can be easily modified to get all the http alias of a portal.

Wish you all happy coding with DotNetNuke :)

Thursday, December 18, 2008

Creating a DotNetNuke User Dynamically

0 comments
Hey friends,
Working on DotNetNuke is really a great experience. I really love DotNetNuke. DotNetNuke is an aswer to great CMS solution for asp.net and there is no doubt about that. Recently, we decided to develop some modules which are really simple and don't required CMS facilities, so we decided to go for pur asp.net module in place of a dotnetnuke module.
Because we were using dotnetnuke providers for storing users and registering them, we have two questions regarding the new modules:
1) how to make existing dotnetnuke users use the module without new registration
2) how to make new registrations in module that can make the user use whole site. (i.e. new module's users can use all the site)

Well after some juggling, I got both the things working. To implement this, we implemented login and registration pages which uses dotnetnuke's apis for login and creating a new user respectively.

here are some code snippets which you can use to create a new DotNetNuke User:

DotNetNuke.Entities.Users.UserInfo uInfo = new UserInfo();
uInfo.Username = txtEmail.Text.ToString();
uInfo.Membership.Password = txtPassWord.Text.ToString();
uInfo.PortalID = 0;
uInfo.Email = txtEmail.Text.ToString();
DotNetNuke.Security.Membership.UserCreateStatus status = DotNetNuke.Entities.Users.UserController.CreateUser(ref uInfo);
if (status == DotNetNuke.Security.Membership.UserCreateStatus.Success)
{
//TODO User Created Successfully
}
else
{
//TODO Error Creating user s
lblError.Text = status.ToString();
}

Wednesday, December 17, 2008

ASP.NET Radio Button List Styling problem with IE 6

2 comments
Hey friends.
Another strange problem. I'm having an ASP.NET control RadioButtonList on my page which is having some background color other than white. now when i see the page in firefox it was looking proper. but when i see the same in IE 6 its was not looking proper. see this:
So as you can see the output, i was not not happy at all and wondering why my page is displayed like that in IE.
So I started analyzing it by IEDeveloper tool bar plugin.

here is my markup of the drop down:

<asp:RadioButtonList ID="rdoSize" runat="server" CellPadding="3" class="rdo" RepeatDirection="Horizontal">
<asp:ListItem Value="1" Selected="True"><br/><span class='rdoItem'>12"x18"<br/>Rs. 349</span></asp:ListItem>
<asp:ListItem Value="2"><br/><span class='rdoItem'>16"x20"<br/>Rs. 449</span></asp:ListItem>

<asp:ListItem Value="3"><br/><span class='rdoItem'>20"x24"<br/>Rs. 549</span></asp:ListItem>
<asp:ListItem Value="4"><br/><span class='rdoItem'>20"x30"<br/>Rs. 649</span></asp:ListItem>
</asp:RadioButtonList>

so I just added this to my css and its fixed now and looking proper in both browsers.

table.rdo td /*this is only for good formating */
{
vertical-align:top;
text-align:center;
width:50px;
background-color:Transparent;
}
table.rdo td input /*this has resolved the actual problem*/
{
background-color:Transparent;
border:none;
}

and here is what I get:

Hope this will help you all as well.
wish you all happy coding :)

Using DotNetNuke Module Control in WebParts

0 comments
Some days ago i was working on an assignment and was wondering how we can use a DotNetNuke module control in Web Part control. I developed a dotnetnuke module's view type of control which shows top 10 guest book comments and its working properly in dotnetnuke. Now the questions is, how can I use the same control in webparts framework also?

Well I've started some research and started with some basics. DotNetNuke module controls are inherited from DotNetNuke.Entities.Modules.PortalModuleBase. They can then import various DotNetNuke interfaces for plugable features like IActionable, IModuleListener, IModuleCommunicator etc. To use a control as a webpart control, it must inherit IWebPart interface and implement it. So I just do that:

#region IWebPart Members
private string _ImageUrl;
private string _title;
private string _description;
private string _subtitle;
private string _titleIconImageUrl;
private string _titleUrl;
public string CatalogIconImageUrl
{
get
{
return _ImageUrl;
}
set
{
_ImageUrl = value;
}
}

public string Description
{
get
{
return _description;
}
set
{
_description = value;
}
}

public string Subtitle
{
get { return _subtitle; }
}

public string Title
{
get
{
return _title;
}
set
{
_title = value;
}
}

public string TitleIconImageUrl
{
get
{
return _titleIconImageUrl;
}
set
{
_titleIconImageUrl = value;
}
}

public string TitleUrl
{
get
{
return _titleUrl;
}
set
{
_titleUrl = value;
}
}

#endregion

After that, I started using it on my webpart's page. I just register that control and use it under CatalogZone control's WebPartTemplate.

My module is working well as well as my webpart control is also working cool. Anybody who want to do this can simply learn the basics for implementing webparts, and for that, just go through the walkthroughs of msdn for webparts and then try my trick.

Javascript : Dynamically setting onclick event

1 comments
hey friends,
some time ago I was working on a project which required a little functionality. I was trying to implement that using dynamically adding an onclick event to the anchor tag using DOM. As it seems too easy to deal, it was not too straight. so after some googling i found following code which is now working in IE and FireFox both.


if(navigator.userAgent.indexOf("Gecko")>-1)
signIn.setAttribute("onclick","functionName(args)");
else
signIn.onclick = function() { functionName(args) }

Wednesday, December 3, 2008

Javascript Snippet : Select All, None, Invert checkbox

0 comments

//int mode
// mode = 0 invert selection
// mode = 1 select none
// mode = other than 0 or 1, select all
function checkChange(mode)
{
for(i=0;i<document.forms[0].elements.length;i++)
{
var ele = document.forms[0].elements[i];
if(ele.type == 'checkbox')
{
if(ele.disabled=false)
{
if(mode==0) //invert selection
ele.checked = !ele.checked;
else if(mode==1) //none
ele.checked = false;
else
ele.checked = true;
}
}
}
}

Tuesday, December 2, 2008

Cannot create file when it already exists

0 comments
hey friends,
when i was workin on my DotNetNuke project's module, which has functionality to upload a photo, i was getting a strange error like following:

Cannot create file when its already exists.
Message Cannot create a file when that file already exists.
Source mscorlib
TargetSite Void WinIOError(Int32, System.String)
StackTrace at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath) at System.IO.__Error.WinIOError() at System.IO.FileInfo.MoveTo(String destFileName) at your function

This is strange, i looked at my code and it was almost perfect. so I was not able to find the any error.

After some debugging, i was able to find the error, and you will be surprised to know that it was coming when someone uploads a read only file.

:) i hope this will help you in case you are getting the same kinda error