Saturday, January 7, 2012

how to vertically middle align text in div-HTML tip

Recently in one of the project I have to vertical align text in div. so doing some internet search I have found there are no proper way to do it. So I thought it would be good do share this within my readers.

Here is the code do vertically align text in div.

<div style="width: 25%;border:solid 1px red;display: table;vertical-align: middle;float:left;height:100px;">
<div style="display: table-cell;vertical-align: middle;">this is a very long text this is a very long text this is a very long text this is a very long text this is a very long text this is a very long text </div>
</div>

Here in above code you can see that I have created two divs first one will serve container for other div and other div has the text which I want to align vertically in div. So in container div you can see I have given its style to display table and in child div which has the text I have given its display style to table-cell and given vertical-align property to middle. 

That’s it now when you run this in browser you can see text is vertically aligned.

HTML Tip,Div,Vertical Align

Hope you liked it..Stay tuned for more..Till then happy programming.

Shout it

kick it on DotNetKicks.com
Share:

ASP.NET Page Methods with Parameters

In earlier post I have written how we can use page methods to call server-side from the java script. In this post I am going to explain How we can pass parameters to page methods with java script.
So let’s take a simple example to see how we can pass parameters to the page methods. I am going to create a page method Hello World which takes name as parameter and return a string to greet user from that page method below is code for that.

using System;
using System.Web.Services;

namespace PageMethods
{
 public partial class Test : System.Web.UI.Page
 {
    [WebMethod]
    public static string HelloWorld(string name)
    {
        return string.Format("Hi {0}",name);
    }
 }
}

As you can see in following page method it’s returning string with greetings. So now our server-side code is completed. Now it’s time to write HTML and java script code for this. Following is code for java script.

<script type="text/javascript">
 function GreetingsFromServer() {
     var name = 'Jalpesh';
     PageMethods.HelloWorld(name,OnSuccess, OnError);
     return false;
 }
 function OnSuccess(response) {
     alert(response);
 }
 function OnError(error) {
     alert(error);
 }
</script>

As you can see in above code I have created a function called ‘GreetingsFromServer’ which called page method helloworld with passing name parameter. Other two functions are handlers for the page methods Onsucess will be called if page method is called successfully without error other wise it will call onError method and alert error message.

Now we are done with java script so its time to write HTML code. So let’s write a HTML code for this page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="PageMethods.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Page Method with parameter demo</title>
</head>
<body>
 <form id="form1" runat="server">
 <div>
     <asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
     </asp:ScriptManager>

     <asp:button ID="btnHelloWorld" runat="server" Text="Greet User" OnClientClick="return GreetingsFromServer();"/>
 </div>
 </form>
</body>
</html>

As you can see from above code I have enabled page methods true with script manager and then I have called JavaScript function “GreetingsFromServer” on button client click. So it’s now time to run this code in browser. Following is output as expected.

PageMethodWithParameter

That’s it. It’s very easy hope you liked it..Stay tuned for more…Happy programming

Shout it

kick it on DotNetKicks.com
Share:

2011 Recap and Greatest hits

2011 year has been ended before so its time to write the year recap blog post.First of all I like to wish my friends,reader and everybody a happy new year. This year was very exciting in some way for this blog. First thing was happened that I have moved from blogspot domain to my own domain http://www.dotnetjalps.com. I have written this in a blog post why I was moving from blogspot to my personal domain. Another great thing was happened that I was awarded as MIcrosoft most valuable professional for visual C# for year 2011 it was great to be part of MVP communities and meet fellow Mvps.Professionally this year was good year as I have got chance work on the new technologies like Juqery Mobile,ASP.NET MVC and ASP.NET 4.0 on real time projects.

Events I have attended during year 2011

Professionally I was very busy with this year but still I managed to attend few events personally while I have attended lots of events and webcasts during this Year. I have attended two events this year one was Tech On Road 2011 at Ahmedabad and other was Windows Azure camp both event was great and followings are details blog post about it.

http://www.dotnetjalps.com/2011/06/tech-ed-on-road-2011-ahmedabada-great.html

http://www.dotnetjalps.com/2011/05/windows-azure-camp-at-ahmedabad.html

Greatest Hit for 2011

I have written 95 blog posts through year through I was really busy with professional environments but following are greatest hits as per blogger stats.
Sending email through System.Net.Mail.Smtpmail in asp.net 3.5/2.0
How to take ScreenShot in C#
Enumeration in C#.NET,VB.NET
How to call a web service from JavaScript with asp.net Ajax
That’s it. Once again thank you for reading this blog and Happy new year to all of you. Stay tuned for more I am planning to write more and more blog post this year. Till then happy programming.

Shout it

kick it on DotNetKicks.com
Share:

Support this blog-Buy me a coffee

Buy me a coffeeBuy me a coffee
Search This Blog
Subscribe to my blog

  

My Mvp Profile
Follow us on facebook
Blog Archive
Total Pageviews