Dotnetcookie

Monday, 8 July 2013

Simple Tooltip Using HTML and CSS

A tooltip is a pop-up message that is shown when the user hovers the mouse over an element such as a TextBox or a Button etcetera.

In this article I show you how to create a simple tooltip using HTML and CSS.

Observe the following table. Here we have placed the Input (Text) controls (txtUsername, txtPassword) inside the anchor tag. We have added a class name (tooltip) to the anchor tag and given some text to the the alt attribute. Using an alt attribute we will display a tooltip for the Input (Text) controls.

<html>

<head>

</head>

<body>

<tr>

<td>

Username:

</td>

<td>

</td>

</tr>

<tr>

<td>

Password:

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</body>

</html>

Now our page looks in browser as follows

Now we will add some CSS style to the anchor tags; see:

.tooltip
{
display: inline;
position: relative;
text-decoration: none;
top: 0px;
left: 4px;
}

Now by using the anchor tags we will display the tooltip for the Input (Text) controls.

Observe the following style of the anchor tags:

.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
top: -5px;
color: #fff;
content: attr(alt);
left: 160px;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 150px;
}

Here we are providing a style whenever the user hover the mouse over the anchor tags.

We are specifying some style using the :after selector.

In the preceding style we have given a border and a border radius etcetera.

Here we have set the content attribute to content: attr(alt); this property will display the tooltip by using the alt attribute of the anchor tag.

Whatever you give to the alt tag of the anchor element it will be displayed as a tooltip.

Now we will add one arrow to the tooltip as follows using the :before selector:

.tooltip:hover:before
{
border: solid;
border-color: transparent black;
border-width: 6px 6px 6px 0;
bottom: 20px;
content: "";
left: 155px;
position: absolute;
z-index: 99;
top: 3px;
}

Finally script of our page is:

<html>

<head>

.tooltip

{

display: inline;

position: relative;

text-decoration: none;

top: 0px;

left: 4px;

}

.tooltip:hover:after

{

background: #333;

background: rgba(0,0,0,.8);

border-radius: 5px;

top: -5px;

color: #fff;

content: attr(alt);

left: 160px;

padding: 5px 15px;

position: absolute;

z-index: 98;

width: 150px;

}

.tooltip:hover:before

{

border: solid;

border-color: transparent black;

border-width: 6px 6px 6px 0;

bottom: 20px;

content: "";

left: 155px;

position: absolute;

z-index: 99;

top: 3px;

}

</style>

</head>

<body>

<tr>

<td>

Username:

</td>

<td>

</td>

</tr>

<tr>

<td>

Password:

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</body>

</html>

Save this script as .html file or download the attachment and open in browser then mouse over on to the username and password Textboxes we will get the tooltip as follows.

Mouse over on to the Username Textbox.

Mouse over on to the Password Textbox

So this is the simple way to display the tooltip using HTML and CSS.

We can use this tooltips procedure for images also.

------

Srinubabu Ravilla

Software Developer

https://www.sharpsrinu.blogspot.com

Tuesday, 2 July 2013

Create Simple PDF File Using iTextSharp Library

In this article I will show you how to create a simple PDF file using the iTextsharp library.

iTextSharp

iTextSharp is a library that allows you to create and manipulate PDF documents.

It enables developers looking to enhance web applications and other applications with dynamic PDF document generation and/or manipulation.

Before proceeding you should have the iTextSharp library file.

You can download the iTextSharp.dll from http://itextpdf.com/download.php.

Open VisualStudio and then create a new ASP.NET web application.
Add a reference to the iTextSharp.dll file to your project.
Add the following namespaces before proceeding:

using System;

using iTextSharp.text.pdf;

using System.IO;

using iTextSharp.text;

using System.Diagnostics;

In the designer, drag and drop two buttons as follows:
For the Generate PDF File button, write the following code to generate the PDF file:protected void btnGeneratePDFFile_Click(object sender, EventArgs e)

{

//Create document

Document doc = new Document();
//Create PDF Table

PdfPTable tableLayout = new PdfPTable(4);

//Create a PDF file in specific path

PdfWriter.GetInstance(doc, new FileStream(Server.MapPath("Sample-PDF-File.pdf"), FileMode.Create));

//Open the PDF document

doc.Open();

//Add Content to PDF

doc.Add(Add_Content_To_PDF(tableLayout));

// Closing the document

doc.Close();

btnOpenPDFFile.Enabled = true;

btnGeneratePDFFile.Enabled = false;

}

private PdfPTable Add_Content_To_PDF(PdfPTable tableLayout)

{

float[] headers = { 20, 20, 30, 30 }; //Header Widths

tableLayout.SetWidths(headers); //Set the pdf headers

tableLayout.WidthPercentage = 80; //Set the PDF File witdh percentage

//Add Title to the PDF file at the top

tableLayout.AddCell(new PdfPCell(new Phrase("Creating PDF file using iTextsharp", new Font(Font.HELVETICA, 13, 1, new iTextSharp.text.Color(153, 51, 0)))) { Colspan = 4, Border = 0, PaddingBottom = 20, HorizontalAlignment = Element.ALIGN_CENTER });

//Add header

AddCellToHeader(tableLayout, "Cricketer Name");

AddCellToHeader(tableLayout, "Height");

AddCellToHeader(tableLayout, "Born On");

AddCellToHeader(tableLayout, "Parents");

//Add body

AddCellToBody(tableLayout, "Sachin Tendulkar");

AddCellToBody(tableLayout, "1.65 m");

AddCellToBody(tableLayout, "April 24, 1973");

AddCellToBody(tableLayout, "Ramesh Tendulkar, Rajni Tendulkar");

AddCellToBody(tableLayout, "Mahendra Singh Dhoni");

AddCellToBody(tableLayout, "1.75 m");

AddCellToBody(tableLayout, "July 7, 1981");

AddCellToBody(tableLayout, "Devki Devi, Pan Singh");

AddCellToBody(tableLayout, "Virender Sehwag");

AddCellToBody(tableLayout, "1.70 m");

AddCellToBody(tableLayout, "October 20, 1978");

AddCellToBody(tableLayout, "Aryavir Sehwag, Vedant Sehwag");

AddCellToBody(tableLayout, "Virat Kohli");

AddCellToBody(tableLayout, "1.75 m");

AddCellToBody(tableLayout, "November 5, 1988");

AddCellToBody(tableLayout, "Saroj Kohli, Prem Kohli");

return tableLayout;

}

// Method to add single cell to the header

private static void AddCellToHeader(PdfPTable tableLayout,string cellText)

{

tableLayout.AddCell(new PdfPCell(new Phrase(cellText, new Font(Font.HELVETICA, 8, 1, iTextSharp.text.Color.WHITE))) {HorizontalAlignment = Element.ALIGN_CENTER, Padding=5, BackgroundColor =new iTextSharp.text.Color(0, 51, 102) });

}

// Method to add single cell to the body

private static void AddCellToBody(PdfPTable tableLayout, string cellText)

{

tableLayout.AddCell(new PdfPCell(new Phrase(cellText, new Font(Font.HELVETICA, 8, 1, iTextSharp.text.Color.BLACK))) { HorizontalAlignment = Element.ALIGN_CENTER,Padding = 5, BackgroundColor = iTextSharp.text.Color.WHITE });

}

Don't be confused by the code above, I am extracting the methods for reusability purposes.

I will explain whats happening in the preceding methods.

btnGeneratePDFFile_Click

In this method I am creating the PDF file in a specific location. Then I am calling the Add_Content_To_PDF method.

Add_Content_To_PDF

In this method I am giving the sizes of the cells as well as PDF file width and then I am adding content to the PDF file usigng the two methods AddCellToHeader and AddCellToBody.

AddCellToHeader

In this mehtod I am adding a single cell to the PDF header with some style.

AddCellToBody

In this mehtod I am adding a single cell to the PDF body with some style.

Now in the Open PDF button click write the following code to open the PDF that has been created:protected void btnOpenPDFFile_Click(object sender, EventArgs e)
{
//Open the PDF file
Process.Start(Server.MapPath("Sample-PDF-File.pdf"));
btnGeneratePDFFile.Enabled = true;
btnOpenPDFFile.Enabled = false;
}
Save the files and run the project. Click on Generate PDF; your PDF file will be generated. Then click on the Open PDF file, you will get the created PDF.
If your code is not working download the project from here Download

So in this way we can create a PDF simply by using the iTextSharp library.

Pages

Monday, 8 July 2013

Simple Tooltip Using HTML and CSS

Tuesday, 2 July 2013

Create Simple PDF File Using iTextSharp Library