Ajax Updates

Posted by education training on Tuesday, August 25, 2009

Ajax Updates

Multi Select Transfer with jQuery

Posted: 25 Aug 2009 10:06 AM PDT

I’m sure that at some point or another you’ve encountered a form widget like the one below, allowing options to be traded from one multi select to another.

I recently encountered a tutorial over at Quirks Mode on creating such a widget. While not a bad script, when all was said and done it was coming up on 40 lines of JS. I suppose that’s not horrible, but we’re talking about some simple functionality.

This struck me as a perfect example to demonstrate the simple and compact nature of jQuery coding. The widget operating above is running off of the following code:

 Javascript |  copy code |? 
1
$().ready(function() { 
2
 $('#add').click(function() { 
3
  return !$('#select1 option:selected').remove().appendTo('#select2'); 
4
 }); 
5
 $('#remove').click(function() { 
6
  return !$('#select2 option:selected').remove().appendTo('#select1'); 
7
 }); 
8
}); 
9
 That's it... 8 lines.

If you'd like to try it out, here's a working test page:

 HTML |  copy code |? 
01
<html> 
02
<head> 
03
 <script src="js/jquery.js" type="text/javascript"></script> 
04
 <script type="text/javascript"> 
05
  $().ready(function() { 
06
   $('#add').click(function() { 
07
    return !$('#select1 option:selected').remove().appendTo('#select2'); 
08
   }); 
09
   $('#remove').click(function() { 
10
    return !$('#select2 option:selected').remove().appendTo('#select1'); 
11
   }); 
12
  }); 
13
 </script></head></html>
 
 
 HTML |  copy code |? 
01
 <style type="text/css"> 
02
  a { 
03
   display: block; 
04
   border: 1px solid #aaa; 
05
   text-decoration: none; 
06
   background-color: #fafafa; 
07
   color: #123456; 
08
   margin: 2px; 
09
   clear:both; 
10
  } 
11
  div { 
12
   float:left; 
13
   text-align: center; 
14
   margin: 10px; 
15
  } 
16
  select { 
17
   width: 100px; 
18
   height: 80px; 
19
  } 
20
 </style> 
21
 
22
 
23
 
24
<body> 
25
 <div> 
26
  <select multiple id="select1"> 
27
   <option value="1">Option 1</option> 
28
   <option value="2">Option 2</option> 
29
   <option value="3">Option 3</option> 
30
   <option value="4">Option 4</option> 
31
  </select> 
32
  <a href="#" id="add">add >></a> 
33
 </div> 
34
 <div> 
35
  <select multiple id="select2"></select> 
36
  <a href="#" id="remove">< < remove</a> 
37
 </a></div> 
38
</body> 
39
 
As was mentioned in the comments below, the following (slightly modified) code can be used to automatically select all options in the second select box before submitting (thanks Charlie!).

 Javascript |  copy code |? 
1
$('form').submit(function() { 
2
 $('#select2 option').each(function(i) { 
3
  $(this).attr("selected", "selected"); 
4
 }); 
5
});
 
Just make sure you include that snippet inside the $().ready() method.


Demo: http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html
Source: http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html
 
   
tafbutton blue16 Multi Select Transfer with jQuery
  
Related Listings:
  1. jQuery Select Box This is an unobtrusive jQuery plugin that allows you to...
  2. jQuery – Disable Text Select Received a kind comment from dehneg the other day, he...
  3. Mavselectbox – A moo tools based custom select box  MavSelectBox is a simple-to-use form select replacement that allows...
 		 
 
  
 MinMax Elements 
 
 Posted: 25 Aug 2009 09:24 AM PDT
 
I built this JavaScript so that I could get a windows like minimize and maximize effect. There are a few things I had to put in that make it a bit more flexible for the web environment.

This area can be minimized and maximized from calling the appropriate JavaScript functions.

The effect should work on any block element on the page. I have an example below using a div that has been styled to look vaguely like a window. To minimize this div element I just call the minimize method and pass it an object with the relevant details. I need to tell the script the id of the element to minimize, where to minimize it to i.e. x and y coordinates, the width and height of the element and lastly the top left position of the element. Some of this stuff can be missed as the script will find what it can automatically, like width, height, top, left plus it will default the x and y coord’s to zero if they are missed. Another optional variable is the callback method, if you assign a function to this variable it will be called when the animation has finished.

So in my example I have called this method to minimize the div element. The callback method I have told it to call just shows a secound styled element on the page that looks like a minimized window.

 Javascript |  copy code |? 
1
document.minimize({ id:'element1', callback:MinMax_Callback, x:280,y:200, width:200,height:200, top:530,left:675 }); 
2
 
My minimized looking bar has a link to maximise the element back again. This time we can pass the exact same variables as before but notice I have missed the left and top variables out, this is because I'll just let the script find out where the element is on the page from when it was minimized and maximise it from there.

 Javascript |  copy code |? 
1
document.maximize({ id:'element1', callback:MinMax_Callback, x:675,y:530, width:200,height:200 });
 
So you can minimize and maximize an element from any position on the page to any other position on the page just by telling the script where you want things to start and end up.

As always I've got a simple test page so that anyone can look at the source to see how it works or just download the source.

Tested to work in the following browsers;

    * IE 7, 6
    * FireFox 2.0.0.12
    * Opera 9.24
    * Safari (for windows) 3.0.4

Demo: http://tomcoote.co.uk/JavaScriptMinMax.aspx
Download: http://tomcoote.co.uk/Downloads/MinMax.rar
Source: http://tomcoote.co.uk/JavaScriptMinMax.aspx
 
   
tafbutton blue16 MinMax Elements
  
Related Listings:
  1. Tab Inline Editable Elements I have been spending a lot of time at work...
  2. Drag n Drop to order list Elements Drag and drop feature is a popular effect in modern...
  3. Custom HTML Form Elements Have you ever wanted to use your own images for...
 		 
 
  
 FancyZoom Image Effects 
 
 Posted: 25 Aug 2009 09:13 AM PDT
 
Smooth Javascript Image Zooming For Your Web Pages
This much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, available for you to use on your website!

Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom’s raison d'être (French for “raisin-determination”) is providing a smooth, clean, truly Mac-like effect, almost like it’s a function of Safari itself. Since I originally wrote this script, there are now a lot of image zoomers to choose from (including a similar effect now on Apple’s own site!), such as the popular (and inspiring) Lightbox. So you might be asking: “Cabel, why use FancyZoom?” Well, here’s why!

    * Focused on the smoothest, most polished zooming animation possible
    * Automatically scales images from any image link, with no HTML changes
    * Preloads full-size images in the background on link mouseover
    * No resource-heavy Javascript libraries — 100% coded from scratch to zoom
    * Draws a nice drop shadow under the full-size image to offset it from the page
    * Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required
    * Requires only two new lines of code in your HTML
    * Tested and works with Safari, Firefox, IE7, and IE6. (Looks better in modern browsers.)

Since FancyZoom is so easy to add to a web page, I encourage you to give it a try!

Instructions

1) Installing FancyZoom on your web pages should be dead simple.

2) Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.

3) Add the following two lines of code to the  section at the top of your web page(s):

 Javascript |  copy code |? 
1
<script src="/js-global/FancyZoom.js" type="text/javascript"></script> 
2
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script> 
3
 
4
 
4) Add onload="setupZoom()" inside your page's existing  tag. For example:

 HTML |  copy code |? 
1
<body id="whatever" [...] onload="setupZoom()"> 
2
</body>
 5) Whoah. You're done! The rest is automatic — links to images in your page will automatically zoom the images. For example:

image thumbnail FancyZoom Image Effects will zoom up image.jpg when clicked.
Additional Details
There are a few extra notes that you might find useful.

Demo: http://www.cabel.name/2008/02/fancyzoom-10.html
Download: http://www.cabel.name/files/FancyZoom%201.1.zip
Source: http://www.cabel.name/2008/02/fancyzoom-10.html
 
   
tafbutton blue16 FancyZoom Image Effects
  
Related Listings:
  1. FancyZoom Pictures 1.1 Script Designed to view full-size photos and images inline without requiring...
  2. Ajax Script – TJPzoom – DOM Image Magnifier – JS / CSS A very new ajax script which can zoom in your...
  3. Image Gallery LightBox This is an image gallery that automatically scales down other...
 		 
 
  
 






































0
comments:
        












Post a Comment






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