Friday, June 22, 2012

Searchable DropDown JQuery

Escaping curly brackets ({) in string format


Recently I was trying to use StringBuilder.AppendFormat to build some javascript, and was hit with an exception when trying to do this:
sb.AppendFormat(“function {0}(args) { return false; }”, someVariable);
The problem is that you can’t have { or } inside an input string for string.Format(). The solution is actually fairly straightforward:
sb.AppendFormat(“function {0}(args) {{ return false; }}”, someVariable);
Instead of using “\” as an escape character, you would use { or } (depending on what you want to escape).

Getting RAW Soap Data from a Web Reference Client running in ASP.net


Make the  following changes in web.cofig to get SOAP(Request/Response) Envelope. It makes trace.log file where all the required information are present



 
   
     
   
 
 
   
     
   
 


 


 
 


Validate INDIAN PAN Number Using Regular expression


Hi
Indian PAN is as follows: AAAAA9999A:
Where First five characters are letters, next 4 numerals, last character letter
One rule there the fourth character is choosen from a list Alphabates as bellows.
C – Company
P – Person
H – HUF(Hindu Undivided Family)
F – Firm
A – Association of Persons (AOP)
T – AOP (Trust)
B – Body of Individuals (BOI)
L – Local Authority
J – Artificial Juridical Person
G – Govt
Hence I will create a regular expression
as bellow
^[\w]{3}(p|P|c|C|h|H|f|F|a|A|t|T|b|B|l|L|j|J|g|G)[\w][\d]{4}[\w]$
Here I have a textbox and a regular expression validator in my aspx page as bellow.


        

$(document).ready vs. $(window).load


Query offers two powerful methods to execute code and attach event handlers: $(document).ready and $(window).load. The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.

1$(document).ready(function() {
2 // executes when HTML-Document is loaded and DOM is ready
3 alert("document is ready");
4});
The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.
1$(window).load(function() {
2 // executes when complete page is fully loaded, including all frames, objects and images
3 alert("window is loaded");
4});

Friday, October 8, 2010

dynamically preview large image on mouseover using jquery and css

If it is not helpful please refer : http://kapil103.spaces.live.com

Steps To Follow :



1) Add CSS Styles :


/* Image Hover **/



A.imageEnlarge
{
border-top-width: 0px;
display: block;
border-left-width: 0px;
background: #ffffff;
float: left;
border-bottom-width: 0px;
width: 65px;
height: 65px;
border-right-width: 0px;
text-decoration: none;
}
A.imageEnlarge IMG
{
border-top-width: 0px;
display: block;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
}
A.imageEnlarge:hover
{
z-index: 500;
color: #000;
position: relative;
background-color: #ffffff;
text-decoration: none;
}
A.imageEnlarge B
{
padding-right: 10px;
display: block;
padding-left: 10px;
left: -9999px;
padding-bottom: 10px;
padding-top: 10px;
position: absolute;
-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
opacity: 0;
filter: alpha(opacity=0);
-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-transition: opacity 0.6s ease-in-out;
width: 401px;
height: 401px;
}
A.imageEnlarge:hover B
{
border-right: #aaa 1px solid;
padding-right: 10px;
border-top: #aaa 1px solid;
padding-left: 10px;
background: #ffffff;
left: 80px;
padding-bottom: 10px;
border-left: #aaa 1px solid;
padding-top: 10px;
border-bottom: #aaa 1px solid;
top: -85px;
opacity: 1.0;
filter: alpha(opacity=100);
width: 401px;
height: 401px;
}


/* Image Hover End */




2) Html Format Must be:






















3) Jquery To Be Used :



(function($) {
$.fn.thumbPopup = function(options) {
//Combine the passed in options with the default settings
settings = jQuery.extend({
popupId: "thumbPopup",
imgSmallFlag: "_t",
imgLargeFlag: "_l",
loadingHtml: "Loading"
}, options);

//Create our popup element
popup =
$("
")
.attr("id", settings.popupId)
.appendTo("b").hide();


//Attach hover events that manage the popup
$(this)
.hover(setPopup);

function setPopup(event) {
var fullImgURL = $(this).attr("src").replace(settings.imgSmallFlag, settings.imgLargeFlag);

$(this).data("hovered", true);

//Load full image in popup
$("")
.bind("load", { thumbImage: this }, function(event) {
//Only display the larger image if the thumbnail is still being hovered
if ($(event.data.thumbImage).data("hovered") == true) {
$(popup).empty().append(this);
$(popup).show();
}
$(event.data.thumbImage).data("cached", true);
})
.attr("src", fullImgURL);

//If no image has been loaded yet then place a loading message
if ($(this).data("cached") != true) {
$(popup).append($(settings.loadingHtml));
$(popup).show();
}


}



//Return original selection for chaining
return this;
};
})(jQuery);


...................Thats All Folks..................... Happy Coding ..!!