Posts

Showing posts with the label CSS

Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control

Image
In this blog I will explain with an example how to build a Modal Popup ASP.Net AJAX ModalPopupExtender control. First of all register the AJAX Control Toolkit Library by putting the following line just below the @PageDirective :: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> Now add the following code inside the <body> tag :: <form id="form1" runat="server">     <asp:ScriptManager ID="ScriptManager1" runat="server">     </asp:ScriptManager>     <div>         <asp:Button ID="BtnShow" runat="server" Text="Show Modal PopUp" BackColor="Yellow"             BorderStyle="Groove" />         <asp:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="BtnShow" CancelControlID="BtnClose" Backgro...
Post a Comment
Read more

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

Image
In this blog i am going to show we could show enlarded image when hover on Link or an image like we see on any e-commerce website. First of all right click on your application >> Select Add New Folder and Give name as images >> Once folder created place some images in folder to show preview of images when hover on link using JQuery in asp.net. After completion of folder creation and insertion of images in folder write the following code in your aspx page :: Put the below code inside the <heaD> tag::  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript" language="javascript">     $(document).ready(function () {         ShowPreview();     });     // Configuration of the x and y offsets     function ShowPreview() {      ...
Post a Comment
Read more

Code for showing Attractive Validation hints and Alert Message using JavaScript

Image
In this blog i am going to show how to alert users with message in a very attractive way while entering values in textbox areas (i.e. Validation Hint) and how to get values from HTML controls and show those values in alert message through JavaScript.       Validation Hints is a simple script that aides in form validation. It makes sure that password and username fields are the specified length, and can even validate against regular expressions. Small and handy. First of add all the functions and the CSS code given below inside the <head> tag ::   <style type="text/css"> form { width:500px; border:1px solid #ccc; } fieldset { border:0; padding:10px; margin:10px; position:relative; } label { display:block; font:normal 12px/17px verdana; } input {width:160px;} span.hint { font:normal 11px/14px verdana; background:#eee url(images/bg-span-hint-gray.gif) no-repeat top left; color:#444; border:1px solid #888; padding:5px 5px 5px 40p...
Post a Comment
Read more

Show ToolTip message using CSS in Asp.Net

Image
In this blog i am going to explain with example How to show tooltip guideline/instruction/message on mouse over in asp.net website using CSS(Cascade  Style Sheets). First of all in the design page(.aspx) add table(4*3) having First column for Lable, second column for textboxes and the last column for the help image over which user mouseover and will get tooltip as shown in image below: Add the below code inside the <head> tag or create a separate CSS file and attach it tour aspx page. Here i am including in the same page. Add codes as below :: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextBoxToolTip.aspx.cs" Inherits="TextBoxToolTip" %> <!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></title...
1 comment
Read more

Show GridView row details in tooltip on mouseover with jQuery using asp.net inside GridView in c#

Image
In this blog i am going to explain how to show gridview row details in tooltip on mouseover with jQuery using asp.net in C# First of all in the design page(.aspx) write place Gridview as following:: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewToolTipaspx.aspx.cs" Inherits="GridViewToolTipaspx" %> <!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></title>     <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script> <script src="js/jquery.tooltip.min.js" type="text/javascript"></script> <script type="text/javascript">     function InitializeToolTip() {         $(".gridViewTool...
3 comments
Read more

Show/ Hide Div, Toggle Div on Button click using Jquery and JavaScript with example

Image
Here I will explain how to show / hide div using jQuery. jQuery show & hide div content example. By using few lines of jQuery coding we can show or hide div content elements. Write the below code for implementing this :: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Show_Hide_Div.aspx.cs" Inherits="Show_Hide_Div" %> <!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></title>     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript">     $(function () {         $('.showhide').click(function () {             $(".slidediv").slideToggle();         });     }); </script...
Post a Comment
Read more

Hide/ Show Password on button click by using JavaScript and Jquery

First of all add the below code inside your <head> tag ::  <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>   <script type="text/javascript">     $(function () {         $('#showpwd').hide();         $('#btnpwd').click(function () {             var txt = $('#btnpwd').val()             var pwd = $('#hidepwd').val();             if (pwd.length > 0) {                 if (txt == 'Show Password') {                     $(this).val('Hide Password');                     $('#showpwd').val($('#hidepwd').val());                     $('#showpwd').show();          ...
Post a Comment
Read more

Use of AJax Collapsible Panel Extender tool in Asp.Net with attaractive background and Collapse and Expand images

Image
First of all add a referance for AjaxControlToolKit to your page :: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> Add following css inside <head> tag ::   <style type="text/css"> .pnlCSS{ font-weight: bold; cursor: pointer; border: solid 1px #c0c0c0; width:30%; border-radius:10px; background-color:white; } .pnlClick {     font-weight: bold; cursor: pointer; border: solid 1px #c0c0c0; width:30%; border-radius:10px; background-color:Gray; } .Water {     font-weight:lighter;     font-style:italic;     color:Gray;     width:220px;     border-round:5px;   } </style> Add two panel inside your <body> tag and Attach AjaxControlToolKit control and drag and drop the CollapsiblePanelExtender like below::    <asp:Panel ID="pnlClick" runat="server" CssClass="pnlClick"> <div style="width:100%; h...
Post a Comment
Read more
go to top image