Ajax Updates |
- Contactable – A jQuery Plugin
- Facebook Style Alert Confirm Box with jQuery and CSS
- GoodCorner – Rounded Corners with Mootools
- JQuery Modal Dialog Plugin
- InputMask Class for MooTools
| Posted: 22 Oct 2009 08:22 AM PDT Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort. If you have ever seen the feedback forms provided by kamypyle you will be familiar with the technique they use, however contactable makes this process even simpler by overlaying the content onto your page quickly and easily with a slide effect and inline validation. Contactable takes care of a lot of issues for you, however the plugin does have a dependency on jQuerys validate plugin, which is included in the download. To start simply create a div with an ID: <div id="contact"> </div> You will need to call in the jquery framework as well as the validator to make this plugin work: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.pack.js"></script> <script type="text/javascript" src="jquery.contactable.packed.js"></script> To initiate the contactable plugin simply call the plugin on the ID of your div. In the download you will also see a mail.php file. It is important that you put this at the top level of the of your server as to make the ajax request successfully: $(function(){ $('#contact').contactable({ recipient: 'philip.beel@holidayextras.com', subject: 'A Feeback Message' }); }); Options for contactable There are a lot of added parameters for contactable, you can adjust pretty much everything on the form in terms of how it displays. The most important of these is the recipient which will sets who receives the message. name: 'Name', email: 'Email', message : 'Message', recipient : 'yourAddress@yoursite.co.uk', subject : 'A contactable message', recievedMsg : 'Thankyou for your message', notRecievedMsg : 'Sorry, your message could not be sent, try again later', disclaimer: 'Please feel free to get in touch, we value your feedback'  Related Listings:
| |||||
| Facebook Style Alert Confirm Box with jQuery and CSS Posted: 22 Oct 2009 07:56 AM PDT I received a request from my reader that asked to me how to implement facebook style alert box. so I had designed Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It’s simple just changing some line of CSS code. HTML / Javascript Code <link href="facebook.alert.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.alert.js"></script> <script type="text/javascript"> $(document).ready( function() { $("#delete_confirm").click( function() { jConfirm('Are you sure you want ot delete this thread?', '', function(r) { if(r==true) { //You havt to include Ajax funtion for deleting records tutorial link $("#box").fadeOut(300); } }); }); }); </script> <div id="box" style=" background-color:#ffffcc;"> <a href="#" id="delete_confirm">Delete</a> </div> Facebook.alert.css #popup_container { font-family:'Lucida Grande',arial; font-weight:bold; text-align:left; font-size: 12px; width: 364px; height: 86px; background: #F3F3F3; border:solid 1px #dedede; border-bottom: solid 2px #456FA5; color: #000000; } #popup_title { display:none; } #popup_message { padding-top: 15px; padding-left: 15px; } #popup_panel { text-align: left; padding-left:15px; } input { background-color:#476EA7; padding:3px; color:#FFFFFF; margin-top:20px; margin-right:10px; } Related Listings:
| |||||
| GoodCorner – Rounded Corners with Mootools Posted: 22 Oct 2009 07:42 AM PDT GoodCorners is a tiny Mootools plugin that can apply the CSS3 border-radius to elements using a unified syntax so you can have beautiful rounded corners. Usage GoodCorners.round( [selector] [, radius settings]); /* Radius settings: radius topleft topright bottomleft bottomright */ // Examples: // To round images in a gallery GoodCorners.round("#gallery img"); // To do some extreme rounding GoodCorners.round("#extreme", {radius: "100px"}); Notes In all cases, you will need to define a border on the elements you wish to style with typical stylesheets. /*for default use*/ .gc { border: 10px solid black; } /*assuming you have a white background, easy to change*/ #gallery img { border: 10px solid #000; } GoodCorners doesn't support KHTML out of the box because Mootools doesn't provide a build in method for detection, that I know of. GoodCorners works in browsers that supports the border radius property in CSS3 or least a proprietary variant of it. Browsers that support this property are: Firefox 3.5, Safari 4 and Chrome 2. GoodCorners doesn't do anything putting the directives into a stylesheet can't do but GoodCorners makes it easy to apply rounded corners with javascript without worrying about those pesky style name variations. There is a full version and a compressed version. Really, the only reason you need GoodCorners is if you want to round elements from javascript. Related Listings:
| |||||
| Posted: 22 Oct 2009 07:28 AM PDT This is a “yet another modal dialog JQuery plugin with lightbox effects”, created by Michael Mahemoff at Osmosoft with the following aims: * Progammatic invocation. This isn’t one of those magic genie libraries that inspects the DOM on load and makes everything clickable if its class is “lightbox”; it requires code to trigger the modal dialog appearance. (Few libraries sadly offer such functionality.) Related Listings:
| |||||
| Posted: 22 Oct 2009 07:14 AM PDT The script itself is quite simple. It watches what you type into an input field and matches the typed character against a set of rules. You can define a mask like ‘333′ which allows you to input ‘033′, ‘122′ but not ‘555′. In addition to that you can also define complex rules for values like time and date: in the time example you can input everything from 01 to 23 but everything above will be blocked. Please note that the other mask plugins I’ve tried did not have this sort of functionality. They both allowed me to input ‘29′ because the 9 is needed for ‘09′ and ‘19′. I’m not saying that my script will always generate valid input, please validate input data on the server side! The code is very clean and elegant. You can easily define global rules via InputMask.defineRule/s, local rules via the “rules” option and of course you are able to customize the mask for every instance. Usage Using the class is very simple. Just instantiate it in domready and pass a selector, a collection of elements (via $$) or one element (via document.id/$). /$). new InputMask(selector, { mask: '(999) 999 999 - 99' }); Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.