jQuery Form Plugin The following code controls the HTML form beneath it. It uses ajaxForm to bind the form and demonstrates how to use pre- and post-submit callbacks. AJAX response will replace this content. The following code controls the HTML form beneath it. This page gives several examples of how form data can be validated before it is sent to the server. The following login form is used for each of the examples that follow. Form Markup: <form id="validationForm" action="dummy.php" method="post"> Username: <input type="text" name="username" /> Password: <input type="password" name="password" /> <input type="submit" value="Submit" /> </form> First, we initialize the form and give it a beforeSubmit callback function - this is the validation function. Validate Using the formData Argument Validate Using the jqForm Argument Validate Using the fieldValue Method Note You can find jQuery plugins that deal specifically with field validation on the jQuery Plugins Page. Server code injson-echo.php: JavaScript: <? <? <?
Drag and drop Page last changed today This article has been translated into French. Here's a simple accessible drag and drop script. It works with both mouse and keyboard. This is a drag and drop element with position: absolute This is a drag and drop element with position: fixed When the '#' link in the example boxes is activated (either by tabbing to it and hitting Enter or by clicking on it) the element can be dragged by the arrow keys. Copy the dragDrop object you find below on this page. You should set two properties. keyHTML contains the HTML of the keyboard-accessible link that every draggable object needs. keySpeed gives the speed of the keyboard drag and drop, in pixels per keypress event. There are seven more properties, but they're all internal to the script. Copy this object to your page (and don't forget the addEventSimple and removeEventSimple functions). A drag and drop is a way of moving an element across the screen. In addition, accessibility must be considered. default: return true; }
AJAX file upload tutorial In this tutorial I will show you how to create simple AJAX file upload system using PHP and JavaScript. Tutorial info: Bookmark AJAX file upload tutorial Step 1 - AJAX file upload AJAX file upload tutorial First of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. The concept: Create a simple HTML form for file uploadSet the target to an iFrame which is on the actual page but not visibleCall a JavaScript function on form submit to display the animationAfter the PHP part finishes the upload process, then it hides the animation Creating the HTML file: The HTML file we will use in this article is quite simple. Code: <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" > File: <input name="myfile" type="file" /><input type="submit" name="submitBtn" value="Upload" /></form> Besides this we need to add a bit more code to it. <p id="f1_upload_process">Loading... Server side code:
Cross Browser HTML5 Drag and Drop Updates: May 10, 2013: This article has been translated into Serbo-Croatian language by Anja Skrba from Webhostinggeeks.com.Feb 3, 2009: A bug in Webkit seems to be the culprit in the permissions form example below not working correctly in Safari 4. The code has been updated to work around this bug and the article below has been updated. Thanks to russbuelt for pointing this out.Feb 3, 2009: Apparently, an example made by Apple which I reported not working in Safari does work in Safari 4.0.4 for Mac OS X. Thanks for Scott Straker for this information. Image Credit: Flickr user svartling HTML5 Drag and Drop has been talked about a lot lately, but it’s hard to find really useful information about implementing it across multiple browsers. When normal people see the author of the Compatibility Master Tables respond negatively to a web technology, they would probably assume it would be a good sign to stay away from it. However, I am not normal. See an example of HTML5 Drag and Drop in action.
Queued Photo Uploader » FancyUpload - Swiff meets Ajax Showcase Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers. Showcases: Showcase “Queued Photo Uploader” Showcase with converted FancyUpload. The Action Happens Here Don’t think that the uploader can handle only images! What happens? The PHP script does not save the files but logs every request. Select one or more images.The images are uploaded one by one, overall progress and file progress is updated.The server-side PHP script logs the upload (see .log).A JSON response is returned, containing some information about the images like mime-type, width and height.This information is added to the completed file element. Do Not: Copy this example and ask why it doesn’t upload the files. Please Do: JavaScript & MooTools XHTML Markup
Drawing Routes onto MKMapView Using Unofficial Google Maps Directions API « iPhone/iPad geeks world As a startup you should use the great component named MKMapView that already exists in IPhone SDK since the version 3.0.0. It is so easy to implement some map related requirements with this useful component as long as you need to draw routes between two locations. Yes, the MkMapView component is great but if it would have got a directions support it should be a perfect piece of the SDK. You already know that the built-in Google Maps applications on IPhone has the directions support somehow but the feature lacks on the MKMapView component. To have the work done, two problems must be solved. First thing is how to obtain route drawing data, and the second one is that if we found one how we should visually draw it onto the map. Anyway, according to Google Mapki we could grab routing data between two locations by requesting the url below with a parameter set which are lean and mean. The parameters are self explaning saddr: Source location’s latitude and longtitude
AJAX-Like File Uploads with jQuery | AJAX-Like File Uploads with jQuery Custom File Inputs with a Bit of jQuery | Viget Inspire File inputs are notorious for being a pain to style across all browsers. In the following image, you can see the difference between the default file inputs in the major browsers: That's pretty gross. For a recent project, the comp had a form to allow users to upload a photo, but the button was completely custom. What followed was some CSS trickery and a bit of jQuery to make the input a little more functional. Starting Simple Let's start by wrapping the file input in a span, and adding an additional span to hold the text for our custom button: <span class="file-wrapper"> <input type="file" name="photo" id="photo" /> <span class="button">Choose a Photo</span></span> Then, let’s add a little CSS to the wrapper span: While we are in the CSS, let’s just style our custom button: Choose a Photo Now, let’s deal with the actual input by absolutely positioning it and assigning it a height: Getting a Little Tricky So now the file input is sitting on top of our “custom button”. Ohh, now that is fun!
MULTI-UPLOAD FACILE AVEC JQUERY ET UN PEU DE PHP multiupload, multi-upload, multi upload, jquery, Source N°44633 PHP Le multi-upload, j'avais tendance à penser que c'était une légende de développeurs ! Après avoir fait quelques recherches sur Internet (communautés de développeurs, sites spécialisés, ...), je n'ai trouvé que des projets en cours de développement ou des scripts difficiles à mettre en oeuvre ... Vous trouverez également un fichier CSS à adapter (je propose une CSS très basique). J'ai écrit une classe PHP dans laquelle j'ai prévu des méthodes, j'ai énormément commenté mon script dans le cas où vous auriez besoin de le modifier ... Bonne mise en oeuvre, Cordialement, Zeo34/Damien
Upload and Resize an Image with PHP Are you looking for image upload and Resize PHP script. I had implemented a simple PHP script to re-sizing image into different dimensions. It's very useful to your web projects to save hosting space and bandwidth to reduce the original image to compressed size. Download Script PHP Code This script resize an Image into two 60px and 25px. Take a look at $newwidth you have to modify size values. <? && ($extension ! $width,$height); imagecopyresampled($tmp1,$src,0,0,0,0,$newwidth1,$newheight1, $width,$height); $filename = "images/". Extention PHP funtion Finds file extensions. function getExtension($str) { $i = strrpos($str,"."); if (! $l = strlen($str) - $i; $ext = substr($str,$i+1,$l); return $ext; } Download Script