Ajax Updates

Posted by education training on Sunday, August 30, 2009

Ajax Updates

Gradient : jQuery Plugin

Posted: 30 Aug 2009 09:42 AM PDT

It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

It uses the excellent jQuery JavaScript library developed by John Resig at http://jquery.com.

View the jquery.gradient.js file for information on settings and some simple examples.

How do you clear a gradient?

This seems to do it:

 Javascript |  copy code |? 
01
 $('.navbarItem').hover( 
02
 function () { 
03
  // Mouse over, first hide any gradients that have not been hidden. 
04
  $('.navbarItem').children(".gradient").hide(); 
05
 
06
  // Turn on the gradient for this item. 
07
  $(this).gradient({ from: 'dddddd', to: 'aaaaaa' }); 
08
 }, 
09
 function () { 
10
  // Mouse out (this doesn't always get called), hide the gradient. 
11
  $('.navbarItem').children(".gradient").hide(); 
12
 } 
13
 );

What about this instead? I think your version will suffer from performance penalties.

 Javascript |  copy code |? 
01
$('.navbarItem').hover( 
02
function () { 
03
  // Mouse over, first hide previous gradients for all other navigation elements. 
04
  $('.navbarItem').children(".gradient").hide(); 
05
  if ($(this).hasClass('hasGradient')) { 
06
    // Show the gradient for this item. 
07
    $(this).children('.gradient').show(); 
08
  } 
09
  else { 
10
    // Create a new gradient for this element 
11
    $(this).addClass('hasGradient').gradient({ from: 'dddddd', to: 'aaaaaa' }); 
12
  } 
13
}, 
14
function () { 
15
   // Mouse out (this doesn't always get called - must be a bug), hide the gradient. 
16
    $('.navbarItem').children(".gradient").hide(); 
17
} 
18
); 
19
 
20
 
Demo: http://www.parkerfox.co.uk/labs/gradientz
Source: http://davidwees.com/myblog/2007/08/gradient_jquery_plugin.html
 
   
tafbutton blue16 Gradient : jQuery Plugin
  
Related Listings:
  1. jQuery Gradient Plugin Adds a dynamically created configurable gradient to the background of...
  2. CSS Gradient Effect Do you want to create fancy headings without rendering each...
  3. JQuery : Checkbox Plugin  Provides for the styling of checkboxes that degrades nicely...
 		 
 
  
 Image Transitions Manager 
 
 Posted: 30 Aug 2009 09:24 AM PDT
 
The image transition manager is a javascript library based on scriptaculous and prototype. It supports several image transitions, such as fading, appearing, sliding, growing and shrinking. Because it uses the unobtrusive javascript technique, no inline javascript is needed and hyperlinks still function when javascript is disabled.

The image transaction manager features:

    * 8 (more to come) image transition effects
    * Visible image preloading
    * Unobstrusive javascript (no inline javascript in you html-document)
    * Easy to use Transition object
    * Corssbrowser: tested in Firefox 2.x, Opera and IE6/7
    * No CSS involved

See the demo.

Cool! How does it work?
First of all, since this library is based on based on prototype and script.aculo.us, you have to include these in your html:

 Javascript |  copy code |? 
1
 <script src="javascript/prototype.js" type="text/javascript"></script> 
2
 <script src="javascript/scriptaculous.js?load=effects" type="text/javascript"></script> 
3
  
 As you can see, only scriptaculous' effects library is used. Note: since there are some troubles with the compatibility of scriptaculous 1.7 and prototype 1.5.1.1, we use prototype version 1.5.1.1 and scriptaculous version 1.7.3 beta. They are included in the download package.

After this, include the transition library in your html:
 Javascript |  copy code |? 
1
<script src="javascript/transition.js" type="text/javascript"></script>
 After this, hyperlink your images the usual way, and add the transition to the rel attribute, like this (in this examples the hyperlinks are structured in an unordered list):

 HTML |  copy code |? 
01
 <ul> 
02
<li><a href="image1.jpg" rel="transition[switchoff]">image1.jpg</a></li> 
03
<li><a href="image2.jpg" rel="transition[slidedown]">image2.jpg</a></li> 
04
 <li><a href="image3.jpg" rel="transition[blinddown]">image3.jpg</a></li> 
05
 <li><a href="image4.jpg" rel="transition[slideright]">image4.jpg</a></li> 
06
 <li><a href="image5.jpg" rel="transition[appear]">image5.jpg</a></li> 
07
 <li><a href="image6.jpg" rel="transition[switch]">image6.jpg</a></li> 
08
 <li><a href="image7.jpg" rel="transition[blinddown]">image7.jpg</a></li> 
09
 <li><a href="image8.jpg" rel="transition[grow]">image8.jpg</a></li> 
10
 <li><a href="image9.jpg" rel="transition[shrink]">image9.jpg</a></li> 
11
 </ul>
 Inside the block arrows you can define the transition that takes place when the hyperlink is clicked. The possibilites are appear, switch, slidedown, slideright, grow, shrink, blinddown and switchoff. Then create an holder (div-element) in which the transitions take place:
 HTML |  copy code |? 
1
<p id="holder" style="border: 5px solid #999999; width: 640px; height: 480px; float: left"> 
2
<img src="image1.jpg" /></p>
 Initially the first image is showed inside the holder. Ok, the last thing you have to do is create an instance of the Transition class:
 HTML |  copy code |? 
1
oTransition = new Transition( 'holder', 'image1.jpg' );
 The first parameter of the Transition constructor is the id of the holder element (in this case 'holder'). The second is the image that initially will be loaded. Thats all, when clicked on the images the effect will take place!

Demo: http://ajaxorized.com/image-transition-manager
Download: http://ajaxorized.com/downloads/itm/image_transition_manager.zip
Source: http://ajaxorized.com/projects/image-transition-manager-image-transitions-with-scriptaculous/
kick it on DotNetKicks.com
 
   
tafbutton blue16 Image Transitions Manager
  
Related Listings:
  1. eXtplorer PHP and JS File Manager eXtplorer is a web-based File Manager. You can use it...
  2. Height Transitions using MooTools In this techniques like 'height transitions' and 'class toggles'. Sounds...
  3. Ajax File Manager Script KFM is an online file manager which can be used...
 		 
 
  
 Resizing Thumbnails Script 
 
 Posted: 30 Aug 2009 09:06 AM PDT
 
This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.

What we have here is not actual image resizing. It is a resizing of the thumb’s visible area on mouse over. How do we do that? Using overflow property!
The overflow property defines the appearance of the content when it overflows the container area. If the container has limited size, for one reason or another, then we use overflow to define what happens. Possible values of overflow property are visible, hidden, scroll and auto. It’s the combination of these values that we will use here and make this trick work. Basically, we will hide a part of the thumbnail when in default state, and show it entirely on mouse over.
The Concept

The idea behind this is, to place an image into a certain container. Since we’re talking about thumbnails that container would be an  tag. We set the size (width and height) of the container to desired values and we set the position property of the container to relative. Image inside has an absolute position. We use negative top and left values to offset the image. Container has overflow set to hidden so only a part of the image that is placed inside the container’s actual area will be visible. The rest of it will be hidden. On a:hover we set the container’s overflow to visible, and reveal entire image.

image1 Resizing Thumbnails Script

The Code

This trick can be used for thumbnail lists or single thumbnails, as shown on the demo page. For markup we use standard tags

 HTML |  copy code |? 
1
<a href="#"><img src="image.jpg"  alt="my image" /></a>
 
Definition of the default state for thumbnails would be something like this:

 CSS |  copy code |? 
01
	ul#thumbs a{ 
02
		display:block; 
03
		float:left; 
04
		width:100px; 
05
		height:100px; 
06
		line-height:100px; 
07
		overflow:hidden; 
08
		position:relative; 
09
		z-index:1;		 
10
	} 
11
	ul#thumbs a img{ 
12
		float:left; 
13
		position:absolute; 
14
		top:-20px; 
15
		left:-50px;	 
16
	} 
17
 < a > tag has defined width and height to whatever fits into our site's design. Also, overflow is set to hidden. We then play with negative top and left values to "crop" the image to a perfect fit. If you want to take this further, you can define cropping area for every single image you have in thumb list and target the area you would like to show.

 	
 CSS |  copy code |? 
01
	ul#thumbs a img{ 
02
		float:left; 
03
		position:absolute; 
04
		top:-20px; 
05
		left:-50px;	 
06
	} 
07
	ul#thumbs li#image1 a img{ 
08
		top:-28px; 
09
		left:-55px;	 
10
	}	 
11
	ul#thumbs li#image2 a img{ 
12
		top:-18px; 
13
		left:-48px;	 
14
	}	 
15
	ul#thumbs li#image3 a img{ 
16
		top:-21px; 
17
		left:-30px;	 
18
	}	 
19
	. 
20
	. 
21
	.		
 
Now, when user mouse-overs it we set the overflow to visible:

	
 CSS |  copy code |? 
1
	ul#thumbs a:hover{ 
2
			overflow:visible; 
3
			z-index:1000; 
4
			border:none;		 
5
		} 
6
 Note the z-index for both default and hovered container. This is very important because we want to place the hovered above it's siblings. Otherwise it would be placed below and the trick wouldn't be complete.

Demo: http://cssglobe.com/lab/overflow_thumbs/
Download: http://cssglobe.com/lab/overflow_thumbs/overflow_thumbs.zip
Source: http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property
kick it on DotNetKicks.com
 
   
tafbutton blue16 Resizing Thumbnails Script
  
Related Listings:
  1. Shadow/Reflection Factory Ajax Script This wonder efxFactory allows you to apply shadows or reflection...
  2. Gallery Script with XML Parser The original gallery has been taken from http://www.aaronbirchphotography.com and updatedwith...
  3. Dynamic Image Gallery- Slideshow This extremely lightweight JavaScript image gallery and slideshow script clocks...
 		 
 
  
 Deferred content loading 
 
 Posted: 30 Aug 2009 02:37 AM PDT
 
When rolled into the page life cycle of an ASP.NET WebForm, that red bar is one of your application's greatest enemies. No matter how well you optimize the rest of the page, even one slow task can become the sole factor determining a user's perception of the entire page's performance.

In this post, I'm going to show you one way to circumvent that problem. By placing ancillary content in user controls and delaying their load until the core page content has been displayed, you can drastically improve perceived performance.

When broken down into digestible chunks, the technique is easy to implement and lends your application a level of polish that your users are sure to appreciate. The four steps required to accomplish this will be: building the user control, statelessly rendering the control as HTML, providing progress indication, and using ASP.NET AJAX to request and inject that HTML.

Building the user control

First, we need some slow-loading, auxiliary content to encapsulate in a user control. For this example, that's going to be a minimal RSS feed reader widget that displays the most recent posts from this site.

The key activity here is retrieving my RSS feed and querying it for some basic information. To expedite this, I'm going to use one of ASP.NET 3.5's great new features: LINQ to XML. LINQ really makes short work of this normally tedious task. It still blows me away every time I use it.

 Javascript |  copy code |? 
01
protected void Page_Load(object sender, EventArgs e) 
02
{ 
03
  XDocument feedXML =  
04
    XDocument.Load("http://feeds.encosia.com/Encosia"); 
05
 
06
  var feeds = from feed in feedXML.Descendants("item") 
07
              select new 
08
              { 
09
                Title = feed.Element("title").Value, 
10
                Link = feed.Element("link").Value, 
11
                Description = feed.Element("description").Value 
12
              }; 
13
 
14
  PostList.DataSource = feeds; 
15
  PostList.DataBind(); 
16
} 
17
 
18
To display this, I'm going to use another of ASP.NET 3.5's new features, the ListView control:
 HTML |  copy code |? 
01
<asp :ListView runat="server" ID="PostList"> 
02
  <layouttemplate> 
03
    <ul> 
04
      <asp :PlaceHolder runat="server" ID="itemPlaceholder" ></asp> 
05
    </ul> 
06
  </layouttemplate> 
07
  <itemtemplate> 
08
    <li><a href='<%# Eval("Link") %>'>< %# Eval("Title") %></a><br /> 
09
      < %# Eval("Description") %>           
10
    </li> 
11
  </itemtemplate> 
12
</asp> 
13
 Example of the RSS feed widget controlWith a little bit of CSS (included in the source download later), this results in something resembling the screenshot to the right.

The ListView comes in especially handy for our purposes here, because it gives you such effortless control over the rendered HTML. When injecting generated HTML into a page, you really appreciate knowing exactly what markup to expect.

Rendering the user control as HTML

The next step is to create a web service that statelessly renders our user control as an HTML string. By statelessly, I mean that we need to render this user control outside the context of an active ASP.NET Page instance, where user controls are normally intended to be used.

To solve that problem, you can create a temporary instance of the ASP.NET Page class, dynamically add the user control to it, and then execute it within the web service's context. Doing this turns out to be easier than it is to accurately describe:

 Javascript |  copy code |? 
01
[WebMethod] 
02
public string GetRSSReader() 
03
{ 
04
  // Create a new Page and add the control to it. 
05
  Page page = new Page(); 
06
  UserControl ctl =  
07
    (UserControl)page.LoadControl("~/RSSReaderControl.ascx"); 
08
  page.Controls.Add(ctl); 
09
 
10
  // Render the page and capture the resulting HTML. 
11
  StringWriter writer = new StringWriter(); 
12
  HttpContext.Current.Server.Execute(page, writer, false); 
13
 
14
  // Return that HTML, as a string. 
15
  return writer.ToString(); 
16
} 
17
 
18
 You might worry about creating an entire Page instance for what is supposed to be a performance enhancing technique. At first, I shared the same concern.

However, since our Page instance is created outside of the normal ASP.NET HTTP pipeline and only contains one control, the overhead is negligible. The Page itself is fairly performant compared to all of the other work involved in a typical HTTP round-trip.
Setting up the demonstration page

To demonstrate, we'll need a page with some fast-loading content to provide contrast. Inside that, we can embed an empty DIV which will be used to accurately inject the user control's rendered HTML.

 HTML |  copy code |? 
01
<asp :ScriptManager runat="server"> 
02
  <services> 
03
    <asp :ServiceReference Path="~/RSSReader.asmx" ></asp> 
04
  </services> 
05
  <scripts> 
06
    <asp :ScriptReference Path="~/Default.js" ></asp> 
07
  </scripts> 
08
</asp> 
09
<div id="Container"> 
10
  <div id="RSSBlock" class="loading"></div> 
11
  <div id="Content"> 
12
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing...</p> 
13
  </div> 
14
</div> 
15
 As you can see, the RSSBlock DIV is initially assigned a CSS class of "loading". This is the CSS for the loading class:
 Javascript |  copy code |? 
1
.loading {  
2
  background: url('progress-indicator.gif') no-repeat center;  
3
}
 
Progress indicator displayed while the user control loadsWhat this does is give us a bit of rudimentary progress indication. Until we update it later, it will display an empty placeholder with an indicator.

You and I know that it's a bit of a scam, but your users will never realize the progress indicator isn't real. I won't tell if you won't!
Calling the web service from JavaScript

Now that we've got a place to inject it, the final step is to retrieve the HTML rendering of our user control and insert it into the page. ASP.NET AJAX takes all of the hard work out of this step:

 Javascript |  copy code |? 
01
Sys.Application.add_init(AppInit); 
02
 
03
function AppInit() { 
04
  RSSReader.GetRSSReader(OnSuccess, OnFailure); 
05
} 
06
 
07
function OnSuccess(result) { 
08
  // Remove the .loading CSS from the div, to remove the  
09
  //  progress indicator background. 
10
  Sys.UI.DomElement.removeCssClass($get('RSSBlock'), 'loading'); 
11
 
12
  // Fill the div with the HTML generated from the user control. 
13
  $get('RSSBlock').innerHTML = result; 
14
} 
15
 
16
function OnFailure() { 
17
  // Do something if our callback fails.  Retry it, perhaps. 
18
}
 
Since it's only a CSS class, disabling the progress indication is as simple as using removeCssClass to remove it from the DIV. For more on removeCssClass, check out my recent article about ASP.NET AJAX's client side UI methods.

With the animated background removed, we are now free to insert the rendered HTML into the DIV's innerHTML. The end result is exactly the same as if we had placed the user control inside that DIV, without unnecessarily delaying the entire page load.
Conclusion

I think you'll find that this technique is very powerful. It allows you to leverage your existing knowledge of ASP.NET and its server controls as a robust templating solution for lightweight AJAX. At the same time, it exudes the kind of professional usability that typically requires more tedious and less maintainable client side coding.

Note that there is not an UpdatePanel anywhere on this page. Using this technique does not require relying on partial postbacks. Not only does that improve performance, but also allows UpdatePanels elsewhere on the page to operate normally, while the deferred content loads.

Demo: http://encosia.com/2008/02/05/boost-aspnet-performance-with-deferred-content-loading/
Download: http://encosia.com/source/uc-delay-load.zip
Source: http://encosia.com/2008/02/05/boost-aspnet-performance-with-deferred-content-loading/
 
   
tafbutton blue16 Deferred content loading
  
Related Listings:
  1. Deferred Content Loading Script When rolled into the page life cycle of an ASP.NET...
  2. Loading Panel Widget Probably needless to say, but here it is. A web...
  3. How to make a Gmail-like loading indicator with ASP.NET Ajax At the moment I’m working on making a web application...
 		 
 
  
 mooSocialize – Bookmarks Widget 
 
 Posted: 30 Aug 2009 02:17 AM PDT
 
Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.

By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.

But that’s not all – it doesn’t redirect you to that page, but opens up the page in a hovered layer. Convenient and easy. On top of the opened layer is a small “x”, which allows to close the window later on.

Now it is possible to enter an email address of your friend, wife, collegue or whoever should receive information about the page you are actually visiting. Just enter the email address of that person and the rest is done for you.

It even sends a screenshot of the site within the mail, so your pal can see upfront where you want to send him/her to. Uses the PHP mail() function, so it should work out on most servers.

BASIC STEPS

Copy the images folder to your root folder. Place the included mootools12.js and the moosocialize.js into your js directory. Put the included css file into your css directory. If your paths differ, adapt the next lines to match your directory structure.
 
INSTALLATION STEPS

Open the page you want mooSocialize to be used. Now add these lines to the head section of your site:

 HTML |  copy code |? 
1
    <head> 
2
    <script language="javascript" type="text/ecmascript" src="js/mootools12.js"></script> 
3
    <script language="javascript" type="text/ecmascript" src="js/mooSocialize.js"></script> 
4
    <link href="css/socializer.css" rel="stylesheet" type="text/css" /> 
5
    </head>
 
Now choose a place to add the mooSocialize image to, and add this line of code:

 HTML |  copy code |? 
1
<img src="images/my_socializer.gif" class=="socializer" />
 
The title of the site you are using this and the url are automatically determined as soon as you click and try to submit the actual website to a bookmark service.

If a page opens in a new window, then this page disallows being displayed in an iframe. There's nothing to do about.

Demo: http://www.artviper.net/moosocialize.php
Download: http://www.artviper.net/images/downloadbtn.gif
Source: http://www.artviper.net/moosocialize.php
 
   
tafbutton blue16 mooSocialize   Bookmarks Widget
  
Related Listings:
  1. jSocialize -bookmark widget BASIC STEPSCopy the images folder to your root folder. Place...
  2. Gallery Script with XML Parser The original gallery has been taken from http://www.aaronbirchphotography.com and updatedwith...
  3. The Starry Widget The Starry Widget is a simple class that will enable...
 		 
 
  
 Custom form elements 
 
 Posted: 29 Aug 2009 08:31 AM PDT
 
This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists.
Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully. It’s this easy:
 HTML |  copy code |? 
1
<input type="checkbox" class="styled" />
 
Usage

You are free to share, alter and use this script commercially. Just leave the title, my name and website in tact in the JavaScript script. This script is licensed under a Creative Commons license.

How does it work?

In a nutshell, the JavaScript looks for any form element with class="styled" declared; hides the real element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the stages when it is clicked.

To get the checkboxes, radio buttons and select boxes to work properly, you'll need to change three variables in the script: checkboxHeight, radioHeight and selectWidth on lines 21-23. If you use the images I created, you won't have to change the variables, but if you make your own, chances are you'll have to. The checkboxes and radio buttons to the right are linked to transparent PNG images for you to use freely if you'd like. The frist two variables are the height of a single stage of the checkbox and radio button, and the third is the width of the select box. You may need to spend a little time tinkering with the checkbox and radio button images so they don't twitch during different stages.

    
 Javascript |  copy code |? 
1
var checkboxHeight = "25"; 
2
    var radioHeight = "25"; 
3
    var selectWidth = "190";
 
The CSS

If you make your own images, you may need to change a few things in the cascading style sheet. In span.checkbox and span.radio, the height property should be one fourth of the height of the full size images. You also might have to change the width property in span.select selector. You probably won't have to edit any other portions of the CSS, but regardless, this part is still straight forward.

 CSS |  copy code |? 
01
span.checkbox { 
02
     width: 19px; 
03
      height: 25px; 
04
     padding: 0 5px 0 0; 
05
      background: url(checkbox.gif) no-repeat; 
06
      display: block; 
07
      clear: left; 
08
      float: left; 
09
    } 
10
   span.radio { 
11
     width: 19px; 
12
     height: 25px; 
13
     padding: 0 5px 0 0; 
14
     background: url(radio.gif) no-repeat; 
15
     display: block; 
16
     clear: left; 
17
     float: left; 
18
   } 
19
   span.select { 
20
     position: absolute; 
21
     width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */ 
22
     height: 21px; 
23
     padding: 0 24px 0 8px; 
24
     color: #fff; 
25
     font: 12px/21px arial,sans-serif; 
26
     background: url(select.gif) no-repeat; 
27
     overflow: hidden; 
28
   }
 
The XHTML

The script won't customize checkboxes, radio buttons or select lists unless you declare the styled class. Simply add class="styled" to any checkbox, radio button or option list and the JavaScript and CSS will take over from there.

  
 HTML |  copy code |? 
01
 <input type="checkbox" name="a" checked="checked" class="styled" /> Sexy 
02
   <input type="checkbox" name="b" class="styled" /> Boring 
03
    <input type="radio" name="c" checked="checked" class="styled" /> Radical 
04
    <input type="radio" name="c" class="styled" /> Poor 
05
    <select name="d" class="styled"> 
06
      <option value="1">Option 1</option> 
07
      <option value="2">Option 2</option> 
08
      <option value="3">Option 3</option> 
09
      <option value="4">Option 4</option> 
10
   </select>
 
Demo: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/example/
Download: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js
Source: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
 
   
tafbutton blue16 Custom form elements
  
Related Listings:
  1. Custom HTML Form Elements Have you ever wanted to use your own images for...
  2. jQuery checkbox and Radio button This Jquery Custom checkbox script display radio buttons for your...
  3. Form validation with Spry The form validation script with Spry will validate your form...
 		 
 
  
 






































0
comments:
        












Post a Comment






Note: Only a member of this blog may post a comment.