How to dynamically adjust an iframe’s height?

Last day when I was using iframe in one of my project , i came across one problem & I have solved it now.

so I think why not to share with you all. I was looking to display content of the other aspx page inside iframe but i wasnt able to adjust the height of the iframe. so try out this solution to resolve it.

Insert iframe on page

   <iframe scrolling='no' frameborder='0' id='frmid' src=’getad.aspx'
            onload='javascript:resizeIframe(this);'>
   </iframe>

Use this javascript to resize iframe based on the height & width of child page

<script language="javascript" type="text/javascript">
 function resizeIframe(obj)
 {
   obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
   obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
 }
 </script>

What does this code do? When the body of the parent frame loads, it looks up the document element “childframe” which corresponds to the iframe. Then the page calls a function resizeFrame(). The function sets the height of the frame to be the scrollHeight, which effectively removes the scrollbar.

Hope this will help !!!

CodeRun Web Toolkit: C# to JavaScript web framework

What is CodeRun Web Toolkit?

CodeRun Web Toolkit (CWT) is a complete framework for creating Rich Internet Applications with C#. CWT provides the following components:

• C# to JavaScript converter
• C# to JavaScript remoting handler
• Rich UI library, loosely modeled after WPF (Windows Presentation Foundation)

You can use CodeRun Web Toolkit to:

• Implement client side scripts for existing ASP.NET applications with C#
• Work with external JavaScript libraries (such as YUI) in C#.
• Develop compelling and optimized AJAX Applications in C#

CodeRun Web Toolkit Added Features

Language Features

• Namespaces
• Classes
• Interfaces
• Properties
• Events
• Method Overloads
• Polymorphism
• Extension Methods
• Delegates
• Indexers
• Generics
• LINQ
• Reflection and Attributes
• Object Initializers

Productivity Features (in Visual Studio)

• Compilation Error Reporting
• Code Coloring
• Code Refactoring
• Performance Profiling

Toolkit Features

• Ajax as method calls
• Rich UI Library

Simple code example

The following example demonstrates how to write a simple C# method and use CodeRun Web Toolkit to convert it to JavaScript:

//Demonstrates how to execute a C# class at the browser
namespace CWT_Samples
{
  public partial class SimpleExample : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
     {
       this.RegisterRunAtClientScripts(SimpleExample_Client.Main, head, body);
     }
   }

  //The following class will be converted to JavaScript
  [RunAtClient]
  public class SimpleExample_Client
  {
     public static void Main()
     {
        var window = HtmlDom.Window;
        window.alert("Hello from C#!");
     }
  }
}

for more information – click here

Hide/Change Sort expression link in gridview

Today I was reading www.asp.net forums for some Q/A  & I found one interesting Query regarding Gridview sorting. So I feel that let me share it with others also.

Query Posted by Kamran Shahid

I am using built in sorting in gridview. The links on the headers column shows like

javascript:__doPostBack(‘GridView1′,’Sort$au_fname’)

Is tehre any way I can change the display of that link like for example it may show # or au_fname only.

Solutions by Imran Baloch

With JQuery

<script language="javascript">
$(function(){
    $("a[href]").each(function(n){
        if(this.href.indexOf("GridView1")>-1)
        {
            var a=this.href;
            this.href="#";
            $(this).click(function(event){
                this.href=a;
            });
        }
    });
});
</script>

Without JQuery

<script language="javascript">
 var tags = document.getElementsByTagName('a');
 for (var i=0; i < tags.length; i++)
 {
      if(tags[i].href.indexOf("GridView1")>-1)
      {
            tags[i].custom1=tags[i].href;
            tags[i].href="#";
            tags[i].onclick=function(event){
                alert(this.custom1);
                thisthis.href=this.custom1;
            }
      }
 }
</script>  

Hope this will help !!!

Happy Programming

Color Picker

There are lots of way show color picker on web site. Today I was search for such color picker which I want to use it in one of my website.

I have searched a lot of color picker that can be useful, so here I m writing about it.

ColorPicker AJAX Extender

ColorPicker is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control. You can interact with the ColorPicker by clicking on a colored area to set a color. It requires a binary reference to the ASP.NET AJAX Control Toolkit.

ColorPicker extender is multi-browser compatible: it works with IE 6/7/8, Firefox, Safari and Goggle Chrome. ColorPicker is built on top of ASP.NET AJAX Control Toolkit and internally utilizes a Popup extender. ColorPicker is compatible with the UpdatePanel: can be placed inside the UpdatePanel.

ColorPicker is included in Ajax Control Toolkit since Release 30512. For those who use previous release of Ajax Control Toolkit this ColorPicker project will continue to evolve and stay in sync with the Ajax Control Toolkit.

Read more…

Color Picker using javascript

This widget is used to select a color, in hexadecimal #RRGGBB form. It uses a color "swatch" to display the standard 216-color web-safe palette. The user can then click on a color to select it.

This script is very simple to implement, and can add a lot of style to your page that requires color values!

Because of the size of the table, this color picker may be slow on lower-end machines. Consider your target users when deciding whether or not it operates fast enough.

Read more…

Moving Values Between Select Boxes

These functions allowed you to do commonly-requested actions with select boxes.

For example, you can easily pass values between two select boxes. This makes a nice Windows-style interface for choosing components, adding and removing items from a list, etc. Options are re-ordered as they are added and removed from the lists.

Several other functions are included in the source that are not in the examples. This includes copying items in lists instead of moving them, copying/moving all items, and automatically selecting all items in a list.

read more

Other related articles 

• using jQuery moving Items in Listboxes
• using javascript moving Items in Listboxes

Processing.js

Today when i am reading Linq articles on Scott Hanselman blog, i found one very useful information. so i feel that let me write about it so reader of my blog also get benefit from that.

I was reading Article Titled : LINQ to Regular Expressions and Processing in Javascript

In this article I read about ‘Processing’ in Javascript that is open-source Java-based visualization language. And i feel this is really great stuff !!! so I am sharing some information regarding it that i have read from http://processingjs.org.

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.

Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Processing.js runs in FireFox, Safari, Opera, Chrome and will also work with Internet Explorer, using Explorer Canvas.

The Processing language was created by Ben Fry and Casey Reas. It evolved from ideas explored in the Aesthetics and Computation Group at the MIT Media Lab and was originally intended to be used in a Java run-time environment.

In the Summer of 2008, John Resig ported the 2D context of Processing to Javascript for use in web pages. Much like the native language, Processing.js is a community-driven project, and continues to grow as browser technology advances.

Click here for more info…

JSON.Net

The Json.NET library makes working with JavaScript and JSON formatted data in .NET simple. Quickly read and write JSON using the JsonReader and JsonWriter or serialize your .NET objects with a single method call using the JsonSerializer.

Features

• LINQ to JSON
• The JsonSerializer for quickly converting your .NET objects to JSON and back again
• Json.NET can optionally produce well formatted, indented JSON for debugging or display
• Attributes like JsonIgnore and JsonProperty can be added to a class to customize how a class is serialized
• Ability to convert JSON to and from XML
• Supports multiple platforms: .NET, Silverlight and the Compact Framework

The JSON serializer is a good choice when the JSON you are reading or writing maps closely to a .NET class. The serializer automatically reads and writes JSON for the class.

For situations where you are only interested in getting values from JSON, don’t have a class to serialize or deserialize to, or the JSON is radically different from your class and you need to manually read and write from your objects then LINQ to JSON is what you should use. LINQ to JSON allows you to easily read, create and modify JSON in .NET.

Json.NET CodePlex Project

Json.NET Download

Print in ASP.NET 2.0

Option 1 : Using ASP.NET (C# / VB )

One of the most common functionality in any ASP.NET application is to print forms and controls. There are a lot of options to print forms using client scripts. In the article, we will see how to print controls in ASP.NET 2.0 using both server side code and javascript.

Click here to read more…..

Option 2 : Using Javascript

In the article, we will see how to print controls in ASP.NET 2.0 using javascript.

• Link 1….
• Link 2…

Option 3 : Printing a GridView with Paging

This is a WebControl that provides an easy way to prepare an ASP.NET GridView to be paged and printed in the browser.

Click here to read more…..

JavaScript Access to Page Controls after Ajax Update (via Update Panel)

Several times, we are in a situation where we need to do some work the moment the update panel finishes its update (ASP.NET 2.0 AJAX). There are situations like showing an error if any during the update, showing a success message after a proper update, setting up scroll bars, changing some UI component, updating some other part of UI, etc. The list can get longer as per the developer’s requirement. I had tried to show how we can get control to the page once the update is finished. We can tweak things via JavaScript the way we need to out there in the handler.

Click Here for more Details

How to refresh an UpdatePanel from javascript

I thought that updating an UpdatePanel from javascript was one of the most frequently asked question about ASP.NET Ajax, but even looking around a lot I didn’t find a clean and polished solution for what should be a common task.

after few minutes of Googl-ing i found a useful link. View it for more details

Click Here for more details…