Ajax Updates |
- Hwy jQuery ListMenu Plugin
- AJAX Based Shopping Cart with PHP, CSS & jQuery
- Custom 404 with jQuery and jQuery UI
- MTMultiSelect – A paginated, filterable multi-select widget for MooTools
- iGoogle-like Drag & Drop Portal v2.0
| Posted: 27 Oct 2009 10:10 AM PDT This jQuery plugin, developed in the iHwy Labs, allows you to easily convert a long, hard to navigate list into a compact, easily skimmable ‘first-letter’ based menuing system, allowing quick and ‘out-of the-way’ access to hundreds of items. Users hover their mouse over a letter and a columnized list of all of the list items that start with that letter appear in a submenu. Mousing off of the letter or menu closes the submenu. Mousing between letters is very fast and the columns in the submenu are nicely balanced. This is great for product lists, address books, contact lists, lists of hotels, parks and recreation areas, etc. Highlights Requirements This plugin was developed and tested using jQuery 1.3.2 and tested using that and jQuery 1.2.6. We recommend using jQuery 1.3.2 or higher for the best performance. We tested this plugin on Firefox 3.x (Windows/Mac), IE6, IE7, IE8/rc (Windows), Safari (Mac 3.2.1, Windows 4.0 beta), Google Chrome (Windows) and Opera 9.6.3 (Windows). 1. Include jquery and the listmenu plugin in your page: <script type="text/javascript" src="js/lib/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/lib/jquery.listmenu-1.1.js"></script> (adjust the src path for the files based on where your files are located) 2. Add some HTML for your list. Your list wrapper must have an id attribute. For example: <ul id="myList"> <li><a href="#">A item</a></li> <li><a href="#">B item</a></li> <li><a href="#">C item</a></li> etc... </ul> See the demos for more examples of the HTML you can use (other than UL > LI). Note: the # href’s above are just placeholders. You would use your actual href’s in those. Any HTML can be used inside of your list items. 3a. Create your listmenu using the defaults (here wrapped in the jQuery document ready function): <script type="text/javascript"> $(function(){ $('#myList').listmenu(); }); </script> 3b. Or override some of the defaults. Here we’re overriding all of them: <script type="text/javascript"> $(function(){ $('#myList').listmenu({ includeNums: false, includeOther: true, flagDisabled: false, noMatchText: 'No items under this letter', showCounts: false, menuWidth: 825, cols:{ count: 5, gutter: 15 }, onClick:function($target){ if($target.is('a')){ alert($target.text() + ' was clicked'); } } }); }); </script> Note: you can use any jQuery selector with .listmenu(). For example, if you have two lists on a page and you want to activate them both using the same listmenu options and both have the ‘list’ class on them, you could do: <script type="text/javascript"> $(function(){ $('.list').listmenu(); // set any options you want for all lists with the 'list' class }); </script>  Related Listings:
| |||||
| AJAX Based Shopping Cart with PHP, CSS & jQuery Posted: 27 Oct 2009 08:41 AM PDT In this tutorial we are going to create an AJAX-driven shopping cart. All the products are going to be stored in a MySQL database, with PHP showing and processing the data. jQuery will drive the AJAX-es on the page, and with the help of the simpletip plugin will add to an interactive check out process. So go ahead, download the demo files and start reading. If you want to set up a working demo, you'll need to execute the following SQL code in your database manager (e.g. phpMyAdmin). It will set up the table and insert a few products. The code is also available in table.sql in the demo files. For further details check out the Demo and Download links below Related Listings:
| |||||
| Custom 404 with jQuery and jQuery UI Posted: 27 Oct 2009 07:31 AM PDT Creating a custom 404 error message page, seeing as they're so dull! What better way to do this, than with some sexy jQuery UI animations, and a snipsy bit of jQuery? This tutorial isn't limited to 404 error pages, you can use this animation technique anywhere. Here's the premise – a 404 that's breaking, the page is literally cracking into bits: HTML & CSS First off I built a basic HTML structure – this obviously has key parts missing, but for the sake of the demo this is what we've got: <html> <head> <title>404 - File Not Found - Reynoldsftw.com</title> <script src="js/jquery-1.3.2.min.js"></script> <script src="js/jquery-ui-1.7.2.custom.min.js"></script> <script src="js/jquery-background.js"></script> <script src="js/controller.js"></script> <link href="css/style.css" rel="stylesheet" type="text/css"> </link></head> <body> <div id="error_code">404</div> <div id="error_status">File Not Found</div> <div id="error_message">We're sorry you are seeing this page, please don't break the site again!</div> <div id="crack"></div> <div id="crack_overlay"></div> </body> </html> Some DIVS for the text content, and also a couple of empty DIVs that will hold two images. One being the crack, the second being an overlay .png file which we will animate over the top. Here's the CSS for those two image DIVS: #crack { z-index: 1; position: absolute; width: 200px; height: 600px; background-image: url(../images/crack.png); left: 520px; top: 0px; } #crack_overlay { z-index: 1000; position: absolute; width: 200px; height: 600px; background-image: url(../images/crack_over.png); background-position: 0px -1100px; left: 520px; top: 0px; } A couple of things to note – the overlay image is extremely large in height, therefore I am positioning it in the DIV so that in that position, the crack image/DIV underneath it cannot be seen (background-position-y: -1100px;). Both DIVs are absolutely positioned, as well as the overlay having a z-index higher than that of the image/DIV underneath. Okay, let's "crack" on… Next we have the jQuery UI and jQuery code. I've chosen to use the "shake", "bounce" and "pulsate" jQuery UI effects, setting their options quite tightly so that the movements made are very minimal – giving the wall shaking, earthquakey effect. I've also set some timers to randomly shake various elements, as well as re-position the overlay so that more and more of the crack is revealed. var coord = -1125; $(document).ready(function() { setTimeout("shake()", 2000); }); function reveal() { setTimeout("moreCrack(coord)", 200); } function shake() { coord = coord + 50; if(coord < -125) { $("#crack").effect("shake", {distance: 1}, 40, reveal); $("#error_code").effect("bounce", {distance: 5}, 50); $("#error_status").effect("pulsate", {times: 2}, 50); } else { $("#crack_overlay").hide(); } } function randomXToY(minVal,maxVal,floatVal) { var randVal = minVal+(Math.random()*(maxVal-minVal)); return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal); } function moreCrack(coord) { $("#crack_overlay").animate({backgroundPosition:"(0 " + coord + ")"}); setTimeout("shake()", randomXToY(3500, 5000)); } Okay, so on the document.ready() call, I'm setting up a timer to call the shake() function. This will then call a chain of functions to shake and reveal more of the crack (moreCrack()). I then start over again, but call shake at a random interval so that it is less predictable. Finally, the shake() function keeps an eye on the position of the overlay DIV and stops the entire thing once there is no more to reveal. Related Listings:
| |||||
| MTMultiSelect – A paginated, filterable multi-select widget for MooTools Posted: 27 Oct 2009 07:18 AM PDT The standard HTML list box is a much maligned user interface element. It requires use of both mouse and keyboard to operate, and with any more than a few elements it requires the user to scroll. It’s also fairly ugly and difficult to style. I’ve seen a few nice javascript widgets that improve them, but often they still forced the user to scroll, or simply created lists that pushed page contents down. I decided to write my own, mostly as an exercise, but also to fit a few requirements I thought were essential to an easy-to-use multi-select element: it should occupy a fixed vertical space, the user should never have to scroll, the user should be able to quickly see the elements she has selected and the elements she has yet to select, and finally, it should allow the user to filter down the elements that are important. Also, I wanted something that worked with MooTools, a great javascript framework. MTMultiselect is my answer. It’s a easy-to-use, paginated, filterable multi-select widget built on MooTools. Take a look at the demo page or download the code from bitbucket.org. How to Get All Tags for a Category in Wordpress Lately I've been doing some Wordpress plugin development for a project. I found myself needing a way to get all the tags associated with a particular category. Wordpress doesn't offer this as a template tag, but its easy enough to query the database directly. I didn’t find this anywhere in the Wordpress codex or in a search, so I thought I’d post it here: < ?php $sql = "SELECT name, slug FROM wp_terms JOIN wp_term_relationships ON wp_terms.term_id = wp_term_relationships.term_taxonomy_id JOIN wp_term_taxonomy ON wp_terms.term_id = wp_term_taxonomy.term_id WHERE wp_term_relationships.object_id IN ( SELECT object_id FROM wp_term_relationships WHERE wp_term_relationships.term_taxonomy_id = %d) AND wp_term_taxonomy.taxonomy = 'post_tag'"; // $cat_number is the number of the category in question. $sql = $wpdb->prepare($sql, $cat_number); $results = $wpdb->get_results($sql); ?> Now you can iterate through the results and display them however you want. Note that I’m selecting the name and slug so I can print links to the tag page. Alter the query as you see fit. Related Listings:
| |||||
| iGoogle-like Drag & Drop Portal v2.0 Posted: 27 Oct 2009 07:05 AM PDT A cool drag & drop class in Prototype in combination with script.aculo.us that looks kinda like the one you see on iGoogle You can download the source here: iGoogle-like drag&drop portal (and the css) There is a how-to in the source, but for ease i explain it here too Between the < head > tags you insert: <script type="text/javascript"> var settings = { 'portal-column-1':['block-test'] }; var options = { editorEnabled : true, 'saveurl' : '/path/to/script' }; var data = { }; var portal; Event.observe(window, 'load', function() { portal = new Portal(settings, options, data); }, false); </script> Insert the following between the < body > tags: <div id="content"> <!-- These are destinations of 'blocks' --> <div id="portal"> <div class="portal-column dir-horizontal" id="portal-column-0"></div> <div class="portal-column dir-vertical" id="portal-column-1"></div> </div> <!-- These are the blocks you can choose from --> <div class="portal-column" id="portal-column-block-list"> <h2 class="block-list-handle">Block List</h2> <!-- Block: testblock --> <div class="block block-test" id="block-test"> <h3 class="handle"><div class="block-controls" style="display: none;"><a class="block-remove"><span>x</span></a> <a class="block-config"><span>e</span></a></div>Testblock</h3> <div class="config" style="display: none;"> <div>config-params</div> <div align="right"> <a href="#" class="cancel-button">cancel</a> <a href="#" class="save-button">cancel</a> </div> </div> <div class="content"> <div id="block-test-content"> test </div> </div> </div> <!-- End: testblock --> </div> </div> And that should be all, if you have any problems you can comment on this post 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.