Ajax Updates |
- Projective Texturing with Canvas
- JLib – Javascript Library for Graphical User Interaces
- BlueTrip CSS Framework
- OpenLayers – Script for Web Maps
- SimpleCart Script with PayPal
- jQuery Virtual Keyboard – For Safer Forms
- JavaScript Sliding Puzzles With jQuery
| Projective Texturing with Canvas Posted: 06 Dec 2009 06:50 AM PST The Canvas tag’s popularity is slowly increasing around the web. I’ve seen big sites use it for image rotation, graph plotting, reflection effects and much more. However, Canvas is still limited to 2D: its drawing operations can only do typical vector graphics with so-called affine transformations, i.e. scaling, rotating, skewing and translation. Though there have been some efforts to try and add a 3D context to Canvas, these efforts are still experimental and only available for a minority of browsers through plug-ins. So when my colleague Ross asked me if we could build a Cover Flow-like widget with JavaScript, my initial reaction was no… but really, that’s just a cop out. All you need are textured rectangles drawn in a convincing perspective: a much simpler scenario than full blown 3D. Perspective views are described by so-called projective transforms, which Canvas2D does not support. However, it does support arbitrary clipping masks as well as affine transforms of both entire and partial images. These can be used to do a fake projective transform: you cut up your textured surface into a bunch of smaller patches (which are almost-affine) and render each with a normal affine transform. Of course you need to place the patches just right, so as to cover any possible gaps. As long as the divisions are small enough, this looks convincingly 3D. So some hacking later, I have a working projective transform renderer in JavaScript. The algorithm uses adaptive subdivision to maintain quality and can be tuned for detail or performance. At its core it’s really just a lot of linear algebra, though I did have to add a bunch of tweaks to make it look seamless due to annoying aliasing effects. Unfortunately Safari seems to be the only browser that can render it at an acceptable speed, so this technique is just a curiosity for now. The current code was mostly written for readability rather than performance though, so it’s possible it could be optimized to a more useful state. Feel free to browse the code. A real 3D Canvas in the browser would obviously rock, but you can still do some nifty things if you know the right tricks…  Related Listings:
| |||||
| JLib – Javascript Library for Graphical User Interaces Posted: 06 Dec 2009 06:36 AM PST Welcome to the home of JxLib, a javascript library for creating graphical user interaces based on the fabulous MooTools library. This site provides access to the library as well as extensive documentation and examples. We’ve tried to provide a complete set of documentation and examples but there are surely some areas that are lacking. Please contact us on the mailing list if you find errors, omissions, or something you think could be done better. The JxLib examples include icons from the famfamfam silk icon set distributed under the Creative Commons Attribution 2.5 License and the Tango Desktop Project icons distributed under the Creative Commons Attribution Share-Alike license. Creating good, useful documentation is an ongoing challenge, but we think we’ve made a good start and will keep adding to it. Here’s what we got so far: * The best place to get started is to go through the Getting Started page over in the wiki. This is a quick start guide to get you up and running with Jx. Here are the steps we’ll be going through: * prerequisites Prerequisites There aren’t many, but you will need: * a web server and sufficient permissions and knowledge to configure it. We can’t help you with system administration 101, sorry. Downloading Jx Head on over to the download page and grab the latest release. Once you’ve downloaded it, create a new directory (let’s assume you’ve called it jxtest) in a web-accessible location and extract the downloaded archive in that directory. You should end up with something like this:
Now lets create a simple HTML page for our first Jx application. note: We really, really, really (no, really) recommend that you use a valid doctype to ensure that your web page is rendered in Standards Compliance mode. If you don’t know what a doctype is, you can find out all about it over at the fantastic Quirks Mode site. For now, just copy the example below. < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Hello World</title> </head> <body> </body> </html> Adding Jx to Your Page Now we need to get Jx in there. You need to include two things in your page to get Jx working, the jxlib.js javascript library and one of the Jx CSS skin files. Here’s how it looks: < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Hello World</title> <!-- include the jx library and the delicious skin --> <script src="jx/jxlib.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="jx/themes/delicios/jxtheme.css" type="text/css" media="screen" charset="utf-8"> <!-- IE specific style sheets --> <!--[if LTE IE 6]> </link><link rel="stylesheet" href="jx/themes/delicios/ie6.css" type="text/css" media="screen" charset="utf-8"> < ![endif]--> <!--[if IE 7]> </link><link rel="stylesheet" href="jx/themes/delicios/ie7.css" type="text/css" media="screen" charset="utf-8"> < ![endif]--> </link></head> <body> </body> </html> Jx is ready to use! Lets create a resizable layout that fills the browser window and has a toolbar. For this, we’ll need to use Jx.Layout, Jx.Panel, Jx.Button and Jx.Toolbar. First, the layout. Let’s add a script tag to contain our javascript code and a div tag to hold our application. < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Hello World</title> <!-- include the jx library and the delicious skin --> <script src="jx/jxlib.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="jx/themes/delicios/jxtheme.css" type="text/css" media="screen" charset="utf-8"> <!-- IE specific style sheets --> <!--[if IE lte 6]> </link><link rel="stylesheet" href="jx/themes/delicios/ie6.css" type="text/css" media="screen" charset="utf-8"> < ![endif]--> <!--[if IE 7]> </link><link rel="stylesheet" href="jx/themes/delicious/ie7.css" type="text/css" media="screen" charset="utf-8"> < ![endif]--> <!-- this prevents scrollbars from appearing on the page --> <style type="text/css"> body { overflow: hidden; } </style> <!-- our application code --> <script type='text/javascript'> window.addEvent('load', function() { // our custom javascript goes in here. }); </script> </link></head> <body> <div id="theApp"></div> </body> </html> From here on, the code snippets will just include the code that goes in the new script tag above unless otherwise stated. To create a new layout object that makes our theApp div fill the browser, add the following: // our custom javascript goes in here. new Jx.Layout('theApp'); $('theApp').resize(); You can try this out. Although nothing very exciting is happening visually, our theApp is now filling the entire browser viewport and resizes when the browser is resized. Try changing the background color of theApp in the HTML to see what is happening by adding a style attribute to it: <div id="theApp" style="background-color: orange"></div> The code is creating a new Jx.Layout object to manage the layout of our theApp div. Conveniently, the default options are to make the element fill its parent (in this case, the browser window) and to resize automatically when the browser resizes. Next, we will create a panel to add to our page so we can finally see something happening! new Jx.Layout('theApp'); var panel = new Jx.Panel({ label: 'Hello World' }); panel.addTo('theApp'); $('theApp').resize(); The new code creates a new Jx.Panel object with a label to go in the title bar and adds it to theApp. Note how the panel resizes when the browser is resized, this is because panels are also managed by Jx.Layout and theApp automatically resizes things inside it when it changes size. Now we’ll add a toolbar to our panel and put some buttons in it. new Jx.Layout('theApp'); var toolbar = new Jx.Toolbar(); var sayHello = new Jx.Button({ label: 'Say Hello', onClick: function() { alert('Hello!'); } }); toolbar.add(sayHello); var panel = new Jx.Panel({ label: 'Hello World', toolbars: [toolbar] }); panel.addTo('theApp'); $('theApp').resize(); In this code, we first create a new Jx.Toolbar object to hold our button. Next, we create a button with an event handler to say hello to us when it is clicked and add it to the toolbar. Finally, we updated the Jx.Panel constructor with a new option to add the toolbar. Related Listings:
| |||||
| Posted: 06 Dec 2009 06:23 AM PST A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own. BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing. Download the package, include the images and stylesheets in your site structure, and get going! Usage: <link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection"> </link><link rel="stylesheet" href="../css/print.css" type="text/css" media="print"> <!--[if IE]> </link><link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen, projection"> < ![endif]--> </link><link rel="stylesheet" href="../css/style.css" type="text/css" media="screen, projection"> Make sure you have the stylesheet links correct. Then edit “screen.css” to change a[href^="http://yourwebsite.com"] by putting your url in place of yourwebsite.com. This ensures that internal links will not show the external link icon. Related Listings:
| |||||
| OpenLayers – Script for Web Maps Posted: 06 Dec 2009 06:12 AM PST OpenLayers is developed and supported by a number of organizations around the world. We are also looking for sponsors to help support the community. If you are in a position where you want to support the development of OpenLayers, but do not have development resources to share, you may be interested in supporting through our sponsorship program. OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a (still-developing) JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference — OpenLayers is Free Software, developed for and by the Open Source software community. OpenLayers is a project of the Open Source Geospatial Foundation. Furthermore, OpenLayers implements industry-standard methods for geographic data access, such as the OpenGIS Consortium’s Web Mapping Service (WMS) and Web Feature Service (WFS) protocols. Under the hood, OpenLayers is written in object-oriented JavaScript, using components from Prototype.js and the Rico library. The OpenLayers code base already has hundreds of unit tests, via the Test.AnotherWay framework. As a framework, OpenLayers is intended to separate map tools from map data so that all the tools can operate on all the data sources. This separation breaks the proprietary silos that earlier GIS revolutions have taught civilization to avoid. The mapping revolution on the public Web should benefit from the experience of history. Releases are made available on the downloads page. Additionally, if you wish to use OpenLayers in a web application, you can include http://www.openlayers.org/api/OpenLayers.js in your page, to always get the latest release. The code is also available in our Subversion repository. Using Subversion, you can keep up to the absolute bleeding edge of the code. If you wish to report a bug in the API, and you are able to use Subversion, please see if the bug has been fixed in Subversion first: OpenLayers is under rapid development, so things change quickly. If you don’t have Subversion or don’t want to download the code, you can still try some live examples on openlayers.org. If you’re familiar with JavaScript, try viewing the source of the examples to get an idea how the OpenLayers library is used. OpenLayers is still undergoing rapid development, so expect a lot to change in the next few weeks and months. We need your support! Please check the wiki for the very latest updates and documentation, and thank you for taking an interest. Related Listings:
| |||||
| Posted: 06 Dec 2009 06:01 AM PST Over the past few years, our company has had several clients who have needed a smaller shopping cart, usually to sell just a couple of items. We generally built these small carts using paypal. I realized it would be nice to package this up, and create a lightweight, easy-to-use, flexible shopping cart. So we made simpleCart(js). The cart is a 10.5kb javascript file that uses cookies to keep track of the items in the cart. SimpleCart(js) doesn't require any databases or programming knowledge. You simply need to know some basic HTML and have the ability to copy and paste. However, it can easily be expanded to use databases or contain more advanced options. The first thing you will need to do, if you don't already have one, is set up a free merchant account with Paypal. Once you have the files downloaded, simply add this snippet to the top of any page you wish to have the cart running on: <script src="simpleCart.js" type="text/javascript"></script> <script type="text/javascript"><!-- simpleCart = new cart("you@yours.com"); // --></script> You will need to replace you@yours.com with the email address you used to sign up to Paypal. Any page you have the simpleCart(js) running, you can add an item by simply using a link like this: <a onclick="simpleCart.add('name=[name]','price=[price]');return false;" href="#"> link to add item </a> You are required to at least have a name and price when adding an item to the cart. However, you can add other fields also. If you want an image to be linked to the item, you can add it like this: simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png'); Viewing the cart You may have the cart on any page, and it will update automatically using ajax. To show the cart items on a particular page, you simply need to have an element with the class of "simpleCart_items" on the page. This element will automatically be filled with all of the items in the cart, and will show each field. <div class="simpleCart_items"></div> You can use any element (div,a,span,p,etc.) and the values will be put in the innerHTML of that element. You can show the total quantity or price on any page by simply having an element with a class "simpleCart_quantity" or "simpleCart_total": <div class="simpleCart_total"></div> <span class="simpleCart_quantity"></span> items Checkout and Empty Cart links You can have a checkout or empty cart link anywhere on any page where the simpleCart(js) is active. You do this by simply setting the class of an element to "simpleCart_checkout" or "simpleCart_empty": <a class="simpleCart_checkout" href="#">checkout</a> <a class="simpleCart_empty" href="#">empty cart</a> You can use any type of element for these, and you can put anything inside of the element. Anything wrapped in a tag with those classes will link appropriately. Adding other product options to items. simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','size=XL','color=Blue'); You can also change the quantity that will be added to the cart: simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png','quantity=5','size=XL','color=Blue'); The order of the arguments doesn't matter, and you can add as many options as you would like. Styling the cart. You can style this cart to fit the look of your page. The contents of the cart will start with a header row: <div class="cartHeaders"> <div class="itemImage">Image</div> <div class="itemName">Name</div> <div class="itemPrice">Price</div> <div class="itemOptions">Options</div> <div class="itemQuantity">Quantity</div> <div class="itemTotal">Total</div> </div> Each item in the cart will have the following form: <div class="itemContainer"> <div class="itemImage">[myImage]</div> <div class="itemName">Shirt</div> <div class="itemPrice">$6.00</div> <div class="itemOptions">size: XL; color: Blue</div> <div class="itemQuantity"><input type="text" /></div> <div class="itemTotal">$30.00</div> </div> And there will also be a totals row: <div class="totalRow"> <div class="totalItems">6</div> <div class="totalPrice">$30.00</div> </div> You can choose to omit part of the cart in your stylesheet: .totalRow{ display:none; } .cartHeaders{ display:none; } Change the order of the cart columns. If you would like to change the order of columns or remove the columns from ever being shown, simply add a line to the top of your page: <script type="text/javascript" src="simpleCart.js"></script> <script type="text/javascript"> simpleCart = new cart("you@yours.com"); //Add the following line to reorder and remove item columns simpleCart.ItemColumns = ['Image','Price','Name','Quantity','Total']; </script> Related Listings:
| |||||
| jQuery Virtual Keyboard – For Safer Forms Posted: 05 Dec 2009 11:00 PM PST For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords. Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery. Before I begin, let me show you how it will all look in the end. Basic HTML and CSS Setup Ok, let's get started. We start off with a plain, old login form with username and password fields and a login button. We add a link which will show/hide the virtual keyboard when clicked. Note: For the purpose of demonstration, I have actually used a normal text field instead of a password type text field! <h3>Login form</h3> <form action="" method="post" id="loginform"> <label for="username">Username:</label> <input type="text" name="username" id="username" /> <label for="pwd">Password:</label> <input type="text" name="pwd" id="pwd"/> <a href="#" id="showkeyboard" title="Type in your password using a virtual keyboard.">Keyboard</a> <br /> <input type="submit" name="Submit" id="submit_butt" value="Submit" /> </form> Next, it's time to put in the XHTML for the keyboard in place. I just wanted to take a very simple approach, and thus ruled out generating the keys dynamically. I have just the four main rows of the standard keyboard (each enclosed in a DIV), along with their shift equivalents. So that means, a total of 8 rows, of which at any time (depending on whether the shift key is pressed or not), four of the rows would be visible, and the other four hidden. <div id="keyboard"> <div id="row0"> <input name="accent" type="button" value="`" /> <input name="1" type="button" value="1" /> <input name="2" type="button" value="2" /> <input name="3" type="button" value="3" /> <input name="4" type="button" value="4" /> <input name="5" type="button" value="5" /> <input name="6" type="button" value="6" /> <input name="7" type="button" value="7" /> <input name="8" type="button" value="8" /> <input name="9" type="button" value="9" /> <input name="0" type="button" value="0" /> <input name=" - " type="button" value=" - " /> <input name="=" type="button" value="=" /> <input name="backspace" type="button" value="Backspace" /> </div> <div id="row0_shift"> <input name="tilde" type="button" value="~" /> <input name="exc" type="button" value="!" /> <input name="at" type="button" value="@" /> <input name="hash" type="button" value="#" /> <input name="dollar" type="button" value="$" /> <input name="percent" type="button" value="%" /> <input name="caret" type="button" value="^" /> <input name="ampersand" type="button" value="&" /> <input name="asterik" type="button" value="*" /> <input name="openbracket" type="button" value="(" /> <input name="closebracket" type="button" value=")" /> <input name="underscore" type="button" value="_" /> <input name="plus" type="button" value="+" /> <input name="backspace" type="button" value="Backspace" /> </div> <div id="row1"> <input name="q" type="button" value="q" /> <input name="w" type="button" value="w" /> <input name="e" type="button" value="e" /> <input name="r" type="button" value="r" /> <input name="t" type="button" value="t" /> <input name="y" type="button" value="y" /> <input name="u" type="button" value="u" /> <input name="i" type="button" value="i" /> <input name="o" type="button" value="o" /> <input name="p" type="button" value="p" /> <input name="[" type="button" value="[" /> <input name="]" type="button" value="]" /> <input name="\" type="button" value="\" /> </div> <div id="row1_shift"> <input name="Q" type="button" value="Q" /> <input name="W" type="button" value="W" /> <input name="E" type="button" value="E" /> <input name="R" type="button" value="R" /> <input name="T" type="button" value="T" /> <input name="Y" type="button" value="Y" /> <input name="U" type="button" value="U" /> <input name="I" type="button" value="I" /> <input name="O" type="button" value="O" /> <input name="P" type="button" value="P" /> <input name="{" type="button" value="{" /> <input name="}" type="button" value="}" /> <input name="|" type="button" value="|" /> </div> <div id="row2"> <input name="a" type="button" value="a" /> <input name="s" type="button" value="s" /> <input name="d" type="button" value="d" /> <input name="f" type="button" value="f" /> <input name="g" type="button" value="g" /> <input name="h" type="button" value="h" /> <input name="j" type="button" value="j" /> <input name="k" type="button" value="k" /> <input name="l" type="button" value="l" /> <input name=";" type="button" value=";" /> <input name="'" type="button" value="'" /> </div> <div id="row2_shift"> <input name="a" type="button" value="A" /> <input name="s" type="button" value="S" /> <input name="d" type="button" value="D" /> <input name="f" type="button" value="F" /> <input name="g" type="button" value="G" /> <input name="h" type="button" value="H" /> <input name="j" type="button" value="J" /> <input name="k" type="button" value="K" /> <input name="l" type="button" value="L" /> <input name=";" type="button" value=":" /> <input name="'" type="button" value='"' /> </div> <div id="row3"> <input name="Shift" type="button" value="Shift" id="shift" /> <input name="z" type="button" value="z" /> <input name="x" type="button" value="x" /> <input name="c" type="button" value="c" /> <input name="v" type="button" value="v" /> <input name="b" type="button" value="b" /> <input name="n" type="button" value="n" /> <input name="m" type="button" value="m" /> <input name="," type="button" value="," /> <input name="." type="button" value="." /> <input name="/" type="button" value="/" /> </div> <div id="row3_shift"> <input name="Shift" type="button" value="Shift" id="shifton" /> <input name="Z" type="button" value="Z" /> <input name="X" type="button" value="X" /> <input name="C" type="button" value="C" /> <input name="V" type="button" value="V" /> <input name="B" type="button" value="B" /> <input name="N" type="button" value="N" /> <input name="M" type="button" value="M" /> <input name="lt" type="button" value="<" /> <input name="gt" type="button" value="/>" /> <input name="?" type="button" value="?" /> </div> <div id="spacebar"> <input name="spacebar" type="button" value=" " /> </div> </div> The CSS I have kept the CSS styling very minimal. Of course, if you want your keyboard to look like a dragon, you can go ahead and all that jazz! We set the display property of div enclosing the keyboard to be "none" initially, as we don't want it to show up till the user activates it by clicking on the "Keyboard" link. In addition, we also hide the "shift" keys, i.e. the keys which get activated only when the shift button is down. I have named these rows with a div id ending "_shift". We will bring them back into view when the user presses the shift key (we will see later). The rest of the CSS involves basic formatting to make the keys look like as they are on a standard QWERTY keyboard. #keyboard { position: absolute; display: none; border: 1px solid #ccc; width: 560px; padding: 10px; cursor: move; } #spacebar input { width: 180px; margin: 0 auto; margin-left: 150px; } #shift, #shifton { width: 70px; text-align: left; } #row0_shift, #row1_shift, #row2_shift, #row3_shift { display: none; } #row0, #row0_shift { padding-left: 20px; } #row1, #row1_shift { padding-left: 60px; } #row2, #row2_shift { padding-left: 70px; } #shifton { border-left: 3px solid #000; border-top: 3px solid #000; } jQuery Let's now get to the most important part – the JavaScript that controls the behavior of the keyboard. We will be using two jQuery extensions – one to make the keyboard draggable, and the other to aid in the selection and manipulation of the password field. I have made some additions to the original fieldSelection JQuery plugin by Alex Brem to suit our additional needs. vkeyboard.js contains our custom code. <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery-ui-personalized-1.5.2.min.js"></script> <script type="text/javascript" src="jquery-fieldselection.js"></script> <script type="text/javascript" src="vkeyboard.js"></script> In vkeyboard.js, we place all our code within jQuery's ready function to ensure that the code runs only after the document is fully loaded. $(document).ready(function(){ // all our code goes here }); Let me just walk you through the underlying logic behind the code. We first add an "onclick" event handler which causes the keyboard to toggle (i.e. show up if hidden, hide if already shown) when the user clicks on the "Keyboard" link. $("#showkeyboard").click(function(e) { var height = $('#keyboard').height(); var width = $('#keyboard').width(); leftVal=e.pageX-40+"px"; topVal=e.pageY+20+"px"; $('#keyboard').css({left:leftVal,top:topVal}).toggle(); }); Next up, we make the keyboard draggable, so that the user can drag it and keep in anywhere on the screen such that it does not obstruct the text underneath. We do this by calling the draggable(), courtesy of the jQuery UI + draggable plugin. $("#keyboard").draggable(); We need to next define a function that toggles between the default rows on the keyboard and the rows which get activated when the "Shift" key is pressed. function onShift(e) { var i; if(e==1) { for(i=0;i<4;i++) { var rowid = "#row" + i; $(rowid).hide(); $(rowid+"_shift").show(); } } else { for(i=0;i<4;i++) { var rowid = "#row" + i; $(rowid).show(); $(rowid+"_shift").hide(); } } } Lastly, we define a function that's called whenever any of the keys on the keyboard are pressed. This function checks if the key pressed is Backspace. If it is, then it calls the replaceSelection function from the fieldSelection plugin with an empty string as a parameter, to indicate that a backspace operation (replacing preceding character to the current cursor location by an empty string – i.e. deleting the preceding character) must be performed. If the "Shift" key had been pressed, then the function sets the "shifton" variable to be true to indicate that the shift key has been pressed and calls onShift(1). However if the shift key has already been pressed, the function deactivates the shift rows by calling onShift(0). If some other key had been pressed, then we simply insert the character in between the current cursor position. The replaceSelection()handles the case when some characters have already been selected by the user. In that case, the selected characters would be replaced by the character that is represented by the key pressed. Demo: http://www.designshack.co.uk/tutorialexamples/vkeyboard/ Related Listings:
| |||||
| JavaScript Sliding Puzzles With jQuery Posted: 05 Dec 2009 10:21 PM PST jqPuzzle lets you easily create sliding puzzles for your web page. Select an image, put it in your page, and add some magic – jqPuzzle will automagically turn it into a full-blown sliding puzzle! If you want, you can highly customize and style your sliding puzzle according to your needs. The interface is available in several languages, and you can add your own texts on the fly. Since jqPuzzle is all JavaScript, your users won’t need any additional plugins or software. jqPuzzle is powered by jQuery, a powerful and straightforward JavaScript library. jQuery rocks! How to use <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jqpuzzle.js"></script> <link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" /> 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.