Ajax Updates |
- jQuery ImageSwitch
- jQTouch Cell Phones Animation using Jquery
- Javascript Calendar Using MooTools
- Custom HTML Buttons and Form Elements
| Posted: 25 Sep 2009 12:09 PM PDT The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some decent effects. Why using this With jQuery, it's so easy to create simple effect such as fade in, move object around… unfortunately when you need to create an effect for image switching, it will require a bit more to create an attractive effect. That isn't difficult but it isn't simple and sometimes it's kind of mess your code up as you need to manage more codes. Developer friendly All the code is commented to explain itself. The reason is so everyone could read and understand the code edit it to suitable with the situation you want. Sometime you only need just 1 single effect not the whole plug-ins so you could change it to optimize for you situation. Usage Full syntax: Bellow is the full syntax of ImageSwitch with its default value: $.ImageSwitch({ Type: "FadeIn", // Type of effect to run the function NewImage: "", //The new image will be loaded in EffectOriginal: true, Speed: 1000, //Speed of the effect StartLeft: 50, //The position the effect start compare to original position could be (-) StartTop: 0, StartOpacity: 0, //Which start opacity it would be EndLeft: -50, //The position the effect end compare to the original position could be (-) EndTop: 0, EndOpacity: 0, //Which start opacity it would be Direction: "RightLeft", //Which Way the image will be sroll Door1: "", //The image for the door 1 Door2: "" //The image for the door 2 }, function); Although it's quite long, all the effect could work with only 2 settings: "Type" and "NewImage".  Related Listings:
| |||||
| jQTouch Cell Phones Animation using Jquery Posted: 25 Sep 2009 11:25 AM PDT A jQuery plugin for mobile web development on the iPhone, GettingStarted 1. Add Scripts jQTouch currently uses jQuery 1.3.2, which can be loaded dynamically from Google Code. In the of your document, insert the following: 2. Initialize Initialize the function before the page onload event. To turn off a feature, simply pass a false to the corresponding option in the initialization options. $.jQTouch({ icon: 'jqtouch.png', statusBar: 'black-translucent', preloadImages: [ 'themes/jqt/img/chevron_white.png', 'themes/jqt/img/bg_row_select.gif', 'themes/jqt/img/back_button_clicked.png', 'themes/jqt/img/button_clicked.png' ] }); 3. Extend Related Listings:
| |||||
| Javascript Calendar Using MooTools Posted: 25 Sep 2009 10:51 AM PDT The idea is to use MooGenda to quickly expose your events from a json request. You can customize your event in week view and in day view. Features: On startup code reads a json like this (IMPORTANT: read the meaning of each variable to customize your MooGenda): { "events": [ { //day number "day": 1, //an id "elNum": 1, //a title for the event "title": "Lesson about Mootools", //a complete description, it can have also html content "desc": "In Altedo, at <a href=\"http://www.iprov.com\">IPROV</a>, we have our course. " //when the event starts ,"timeStart":"8.5", //how long is the event "timeLong":"3" }, .... ] } A complete JSON is at the demo url: CALENDAR EVENTS’ JSON The request has these POST parameters (for your customization): 1. month : a number (1,..12) for the month we want to retrieve events’ When an event is moved, resized or dragged MooGenda launch a request to an url to store the new home’s configuration choiced from the user. This service gives a JSON response like that: { "result":"ok" } or like that: { "result":"ko" } This is a response caused by these parameters: 1. day : the day number that contain our event <div id="moogenda"></div> <script> window.addEvent('domready',function(){ var mooGenda = new MooGenda({ id:'thisMonth', dateObject:new Date(), where:'moogenda', header:'MooGenda: my MooTools based Agenda'}); mooGenda.write(); }); </script> A complete option’s list: 1. id: An id for the MooGenda object, Related Listings:
| |||||
| Custom HTML Buttons and Form Elements Posted: 25 Sep 2009 10:19 AM PDT 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: <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. var checkboxHeight = "25"; var radioHeight = "25"; 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. span.checkbox { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(checkbox.gif) no-repeat; display: block; clear: left; float: left; } span.radio { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(radio.gif) no-repeat; display: block; clear: left; float: left; } span.select { position: absolute; width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */ height: 21px; padding: 0 24px 0 8px; color: #fff; font: 12px/21px arial,sans-serif; background: url(select.gif) no-repeat; overflow: hidden; } 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. <input type="checkbox" name="a" checked="checked" class="styled" /> Sexy <input type="checkbox" name="b" class="styled" /> Boring <input type="radio" name="c" checked="checked" class="styled" /> Radical <input type="radio" name="c" class="styled" /> Poor <select name="d" class="styled"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> 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.