User Interface. Javascript. Social Sharing Buttons using jQuery and XML. Download jQuery.Social.Sharing.Buttons.zip Yet, another social sharing buttons script created by using jQuery and XML for your website. The script is very straight forward and self explanatory. The buttons container and buttons setting are stored in the XML file. Figure 1 Figure 2 How to use it? Download the SocialButton.xml and jquery.social-buttons.js file. Listing 1 <! You have the option to show or hide a particular social button. Listing 2 <! Open the jquery.social-buttons.js file and provide the location of the XML file on your server. Figure 4 Frequent Questions and Answers Does your script work on different platforms? Conclusion I hope someone will find this information useful and make your programming job easier. Watch this script in action Demo See Other Posts.
Cleaning HTML With Regular Expressions. While participating in a forum discussion, the need to clean up HTML from "dangerous" constructs came up. In the present case, it was needed to remove SCRIPT, OBJECT, APPLET, EMBBED, FRAMESET, IFRAME, FORM, INPUT, BUTTON and TEXTAREA elements (as far as I can think of) from the HTML source. Every event attribute (ONEVENT) should also be removed keep all other attributes, though. HTML is very loose and extremely hard to parse. Elements can be defined as a start tag (<element-name>) and an end tag (</element-name>) although some elements don't require the end tag. If XHTML is being parsed, elements without an end tag require the tag to be terminated with /> instead of just >.
Attributes are not easier to parse. We could build a parser, but then it will become costly to add or remove elements or attributes. First, let's capture all unwanted elements with start and end tags. Capture the begin tag character followed by the element name (for which we will store its name - t): <(? <(? <(? (? Enhancing HTML tables using a JQuery DataTables plugin.
Hi i am using pagination and column filter and post method in my code at same time , with this my filtering is not working properly , could u help in this regard.and my code is as below: oTable.fnSetColumnVis( 3, ${hppPatient}); oTable.fnSetColumnVis( 7, ${canInsVerifiedModify}); oTable.fnSetColumnVis( 9, ${canInsVerifiedModify || consultantAccess || pmrCommentAccess}); oTable.fnSetColumnVis( 12, ${labData}); //}}).fail(ajaxFailCallback); }
Playing with List Controls using jQuery. You all must be knowing, I am a fan of jQuery. The kind of neat and clean code and the power provided by jQuery at Client side scripting is unmatchable. List Controls are one of the most used form controls. And we all know that manipulating these controls from JavaScript has always been a tough task. In this post, I’ll be discussing about accessing List controls and manipulating it with the help of jQuery. Hope you all like it and will be able to apply with other controls as well. Let’s discuss it for CheckBoxList. Dictionary dictItems = new Dictionary(); dictItems.Add(1, "Tea"); dictItems.Add(2, "Coffee"); dictItems.Add(3, "Lemon Tea"); dictItems.Add(4, "Expresso"); dictItems.Add(5, "Cappuccino"); chkItems.DataSource = dictItems; chkItems.DataTextField = "Value"; chkItems.DataValueField = "Key"; chkItems.DataBind(); Let's also have a look at the aspx code.
Here you can see that I have put the CheckboxList in a div whose Id is divcheckboxList. Now let's have a look at the rendered code: Brij. A Watermarked Auto-complete jQuery Plugin. Introduction This article presents a watermarked auto-complete jQuery plugin. Background The watermarked auto-complete jQuery plugin is built upon the "jQuery UI" auto-complete. It adds a watermark to the original plugin and offers the ability to limit the user's capability to enter free text into the text box. In this article, I will present this plugin and a small demo application on how to use it. Bug Fixes: Since the first release of this article, some friends have pointed out some bugs related to this plugin.
The watermark text has a wrong capitalization. These bugs have been fixed and I have uploaded the plugin in the "jquery-watermarkAutocomplete-1.0.1.zip" file. The Visual Studio 2010 solution is the demo application. The "jquery-watermarkAutocomplete-1.0.0.js" in the "Scripts" folder is the watermarked auto-complete plugin. This article assumes that the readers have some basic knowledge on "jQuery". I will first present the plugin and then show you how to use it. <! History. Delete Functionality in GridView with Confirmation Using jQuery UI Dialog. Download source code - 537 KB Introduction You're using a GridView web control to list records from a particular data source and you want a delete functionality for each row of data. A dialog must be presented to the user to confirm deletion. There's also a possibility of error when deleting a record from your data source and you want to show a dialog to the user when an error occurs during deletion.
The Solution Minor details: This example uses the (Microsoft) Northwind database's Product table. Initialize the jQuery UI Dialog plug-in. Add a TemplateField in the GridView. <asp:TemplateField><ItemStyle Width="30px" HorizontalAlign="Center" /><ItemTemplate><asp:ImageButton ID="IBtnDelete" runat="server" ToolTip="Click to delete" CommandArgument='<%# Eval("ProductID") %>' OnClientClick="javascript:return deleteItem(this.name, this.alt);" ImageUrl="~/Images/Delete.png" AlternateText='<%# Eval("ProductID") %>' CommandName="Delete" /></ItemTemplate></asp:TemplateField> Last Words Demo.
Load Data From Server While Scrolling Using jQuery AJAX. Download source code - 375 KB Introduction This article will demonstrate how to load data from the server while scrolling. Loading data from the server using AJX will help any application in improving its performance because data which is displayed on the screen alone is loaded the first time and more data, if required, will get loaded from the server as the user scrolls. Background Facebook is the application which inspired me to write code to load data from the server while scrolling. While browsing Facebook, I was amazed to see that as I scrolled on the page, new data from the server got appended to the existing one. I became curious about implementing the same functionality in C#. The code To implement the load on scroll functionality, we will require very few lines of code.
Server method: This method is used to get data from the database or any source and prepares an HTML string depending on the control you are using for appending data to. Output History First version. Cross-browser drag and drop. Download source code - 1.35 KB Introduction I could not find a good Drag and Drop JavaScript example that would work in all browsers (including iPad). So I wrote one myself. I hope someone might find it useful. Please note that this example shows how to “capture” the element so that you don’t lose it if you move outside of the element or outside of the browser window.
Unfortunately, I could not find a good way how not to lose capture over an iFrame in Chrome and Safari. This article is for those that like nuts and bolts and are not using third party libraries like jQuery. Using the code To use this script, use the MakeDragable JavaScript function. I created a single CSS class to make drag-able elements not selectable and to have the cursor suggest that the element is drag-able. Points of Interest. CSS Basics: The Box Model, Margin, and Padding. Introduction One of the powerful features of modern HTML and Cascading Style Sheets (CSS) for web development is that you can almost completely separate the markup of your page in HTML from the rendering details specified in your CSS.
An HTML page using a small selection of tags and some CSS styling can look like… well, just about anything you like. And you can change how it looks by simply changing the CSS. A basic - but often misunderstood - feature of CSS styling is something called the box model. The box model simply defines the rectangular space around an element and is defined by three properties: border padding margin The widths you assign to these CSS properties add up to the space between the associated HTML element and its neighboring elements. The border represents the effective outer limit of the element itself. Padding specifies the spacing between the border and any content within the HTML element. CSS Syntax Let’s construct a simple example so you can see the CSS syntax. How to Round Corners Compatible with All Browsers (Intenet Explorer, Firefox, Chrome, Opera) easily.
Download demo project - 191.25 KB Introduction Recently, I downloaded an ASP.NET open source CMS that was very efficient and powerful. Unfortunately, the provided HTML templates were so bland or strict. I would find an easy solution by adding the least code possible. Finally, I found the brilliant work of Dave Methvin: the jQuery Corner library (based on Jquery framework library) which enables compatibility with all browsers. Go to I attached this page in PDF format at the root of the demo website. This library is excellent because it gives you the possibility to put lots of beautiful shapes in the corner. Background I thought about how to use this library most easily?
JQuery is a very powerful framework that is able to read any tags and read all its attributes. So my idea was to create a new attribute: "corner" to add to tags I want to round (divs tag in my examples). So I added this attribute in all tags that I wanted: Using the Code To summarise: History. HTMLImage - Generating Dynamic Image using Plain JavaScript. Download demo - 2.47 KB Introduction This article is about a simple method of generating dynamic images on the client side, without using new HTML5 <canvas> element. Why this? I got very interested in this topic seeing all the features coming with the new HTML5 standard on its way.
The new <canvas> element offers a lot of freedom to a web developer. In this article, I did a simple experiment using available data-URI feature of images on the web page. Background Here, I would suggest to the reader to visit this place where the author is speaking about client-side generated image animation using data-URI but is focused on the old-school palette based animation of a static GIF image, and also this place where another author has built an image drawing tool upon data-URI feature.
But, in order to better understand what data-URI is useful for, I would suggest this place on Wiki containing general discussion. JavaScript Generated Image The general <img> element is shown below: Using the Code Issues. Passing information using a hidden button and Session from a pop up window. Download source code - 462 KB Introduction The article deals with passing information from a popup page to a parent page using sessions and a hidden button on the parent page.
The main purpose of this article is to let developers know of a way to save some real estate on the parent/main page by doing data entry through a popup page. The developer should have knowledge of C#, ASP.NET, and some idea on JavaScript. Using this logic/solution, a developer can use a popup window to do data entry and the information is transferred from the popup window to the parent window through Session.
Background A lot of times, real estate is an important issue faced by applications. One other example is if you have a scenario where the data entry is disabled on the parent window and you can only do data entry on a popup screen (multiple number of rows at the same time); the information from the popup window is saved into a DataSet or any collection object and finally saved into Session. Using the Code History. Build your own WebMockup Tool using jQuery. This article is to show the capability of Javascript and jQuery Framework’s rather than as reference implementation to create a web mockup tool.
Infact this is not the best architecture to build a mockup tool in javascript. Sample demo is hosted at ( It only Works in Firefox and Chrome) Concepts like Drag/Drop , Resizable , Context Menu , Container’s, Grouping, Cornering element view’s etc…. are being explained through this article. I have used following javascript libraries to create this jquery jqueryui jquery.corner.js jquery.contextmenu.js To create any Mockup tool we first to define few things that are required to build it Creation of Draggable Objects Creation of Droppable Area where object’s can be dropped. Because i ‘m going to build a HTML mockup tool , i’ll define few html element’s as my draggable objects which i’m going to play with.
TextBox Form Button TextArea SelectBox Here is how sample menu is created. OAuth with Facebook. Most of the applications over the web these days need to get connected with each other. With the surge of Social Aware applications, people started integrating all of their social applications in one location. Following is my attempt to solve the "Complex" but easy puzzle for novice developers. To start with, I’ll demonstrate how to Login with Facebook and details of Facebook user into your application. Let me first explain what OAuth means in brief. Below is the diagram which explains it. First, we call Service provider with ClientID / CallBack URL and some additional parameters based on the service provider you use. Then, if we pass the right parameters, the Service provider will give us a call back to given callback URL with Authorization Token and some parameter that states time to live.
Now we can use this Authorization token in our subsequent requests to Service Provider provided services. Here is example of Facebook. Step 1 Go to Facebook developer Page. Step 2 Register your app. Step 3. ASP.NET Suggester - Auto-complete Control. Online Slide Show as pure HTML5 / CSS3 solution: NO Javascript. Solution demonstrates CSS3 coding technique implementing online slide show with "darkbox" or "lightbox" pop-up effects using pure CSS3 and HTML5; it does not use any Javascript/jQuery. Working Demo at:"iPad 2 weekend at Apple Store, New York" slide show[^] Entire solution (i.e., "Apple iPad 2 in NYC" slide show) is encapsulated in a single .htm file (see the code Listing 1, 2). In addition to the darkbox effect and slide navigation, it also demonstrates various aesthetic enhancements via CSS3/HTML5 hew features, like:color gradientsrounded cornersbox shadowtext shadowtext rotate Browser Compatibility Essentially all web browsers supporting HTML5 standard would be able to run this application and its derivatives.
In particular, the list of all major browsers fully/partially compatible with HTML5 follows:Mozilla FireFox 4 and higher Google Chrome 10 and higher Microsoft IE 9 and higher (some issues noticed with color gradients and text rotation) Apple Safari 5 and higher Design Notes.