Friday, May 29, 2009

How to Create A Sliding Panel with Jquery

We are going to show you a series of how to articles to create some jQuery effects with JavaScript in your web designs. In case you don’t know what jQeury is, it’s a JavaScript Library. It has heaps of Ajax and JavaScript components that will let you enhance your web design and the users experience on your site.

First you need to grab a copy of jQuery Grab the latest released mini(compressed) version.

How to get the elements you need.

Creating jQuery Functions is relatively easy thank to the great documentation. The main thing you have to know is how to get the exact element that you want to apply the effects to.

Example :


* $(”#header”) = get the element with id=”header”
* $(”h3″) = get all <h3> element
* $(”div#content .photo”) = get all element with class=”photo” nested in the <div id=”content”>
* $(”ul li”) = get all <li> element nested in all <ul>
* $(”ul li:first”) = get only the first <li> element of the <ul>

So with that in mind we are going to create our first jQuery effect. The commonly seen sliding panel, where you click a button and a panel slides up or down. Create a html document and call in the JavaScript file between the <head> tags along with you css file for styling. Then create two divs, one big one called <div id=”panel”></div> for the pannel and <div class=”btn-slide”></div> for the button. Style as you wish.

Then call is javascript into your page either inline, or by an external .js file.






When any element with in your html file is clicked, it will toggle the slide up and down of the <div id=”panel”> element and then toggle a CSS class=”active” to the <a class=”btn-slide”> element. The .active class will toggle the background position of the arrow image (by CSS).

what is jquery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

it's lightweight (just 19 kb in size) CSS3 complient and with cross browser support (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome and almost all the browsers).

you can download the latest release from here

Missing Dynamic Data Templates - VS 2008 SP1 and .NET 3.5 SP1

In case you have installed the .NET 3.5 SP1 and Visual Studio 2008 SP1 and are unable to find the Dynamic Data Website Template, you can install the latest version of the runtime from here

If you are unable to find the "Dynamic Data Website" Template than instead of fixing the issue by installing/uninstalling SP1 Bits again, it is better to install the latest bits of the Dynamic Data Runtime from CodePlex. this will install the template and the other advantage is that, you will also get the "Dynamic Data Website Wizard (Preview)" that allows you to configure a data driven website very quickly, by following the wizard steps.

Happy Coding :-)

ASP.Net Dynamic Data Web Site

If your web site is heavily data driven then here is a quick and easy way for you to create one without writing much code. All you need is Visual Studio 2008 SP1 or Visual Web Developer 2008 Express SP1 installed on your box.

Dynamic Data Web Sites makes use of a mechanism called Scaffolding. When Scaffolding is enabled it lets ASP.Net go through your data model and generate web pages for your tables. These generated pages have Insert, Delete and Update capabilities for each table.

ASP.NET Dynamic Data Web Sites provides a framework that enables you to quickly build a functional data-driven application, based on a LINQ to SQL or Entity Framework data model. It also adds great flexibility and functionality to the DetailsView, FormView, GridView, and ListView controls in the form of smart validation and the ability to easily change the display of these controls using templates.

ASP.NET Dynamic Data brings major usability and RAD development changes to the existing ASP.NET data controls. RAD development is significantly increased by the use of a rich scaffolding framework. After you add a LINQ to SQL or Entity Framework data model to a project, you can simply register it with Dynamic Data. The result is a fully functional Web site. Full CRUD (create, read, update, and delete) operations are supported. The site includes filtering by foreign keys and Boolean fields; foreign keys are automatically converted to their friendly names. Smart validation is automatically available, which provides validation based on database constraints for nullable fields, data type, and field length.

The DetailsView and GridView controls have been extended to display fields by using templates instead of by using hard-coded rules that are programmed in the controls. These templates are part of the project, and you can customize them to change their appearance or to specify which controls they use for rendering. This makes it very easy to make a change in one place in your site that specifies how to present dates for editing, as one example. FormView and ListView controls can implement similar behavior by using a DynamicControl object in their templates and by specifying which field in the row to display. Dynamic Data will then automatically build the UI for these controls based on the templates that you specify.

Validation is significantly improved in the controls as well. The controls read metadata for a LINQ to SQL or Entity Framework data model and provide automatic validation based on the model. For example, if a column in the database is limited to 50 characters, and if a column is marked as not nullable, a RequiredFieldValidator control is automatically enabled for the column. (The controls also automatically support data-model-level validation.) You can apply other metadata to take further control over display and validation.

Here are some Links to start with :

Getting Started with Dynamic Data

Begin Modifying Dynamic Data Applications with URL Routing

Begin Editing the Templates in ASP.NET Dynamic Data Applications

Enable In-Line Editing in ASP.NET Dynamic Data Applications

Or a blog post by Reshmi Mangalore at msdn blogs


Try this today and have fun!