Ajax Updates |
| Posted: 12 Dec 2009 11:50 AM PST This plugin, applied to a number of HTML tables, provides the behaviour of resizing their columns # This plugin, applied to n-tables of an HTML page, provides the behaviour of resizing columns by dragging the mouse or double-clicking over a “handler hint”. Javascript: <script type="text/javascript" src="jquery-1.1.3.1.pack.js"></script> <script type="text/javascript" src="jquery.dimensions.pack.js"></script> <script type="text/javascript" src="jquery.cookies.pack.js"></script> <script type="text/javascript" src="jquery.iutil.pack.js"></script> <script type="text/javascript" src="jquery.idrag.js"></script> <script type="text/javascript" src="jquery.grid.columnSizing.js"></script> CSS: table.jquery_columnSizing{ table-layout: fixed; width : 100%; } table.jquery_columnSizing tr td{ overflow : hidden; }  Related Listings:
| |||||
| Posted: 12 Dec 2009 11:24 AM PST Smooth, nested drop down menus from semantic markup. Simple integration, limited flexibility – you’ll either love it or hate it. Usage No mandatory configuration options or nothin’ here, just use include the Javascript/CSS resources and insert the following code in your document head, or any other suitable place: <script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> And here’s some example HTML markup: <ul id='nav'> <li><a href='#'>Top level 1</a></li> <li><a href='#'>Top level 2</a> <ul> <li><a href='#'>Sub 2 - 1</a></li> <li> <a href='#'>Sub 2 - 2</a> <ul> <li> <a href='#'>Sub 2 - 2 - 1</a> <ul> <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li> <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li> <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li> <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li> </ul> </li> <li><a href='#'>Sub 2 - 2 - 2</a></li> <li> <a href='#'>Sub 2 - 2 - 3</a> <ul> <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li> <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li> <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li> <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li> </ul> </li> </ul> </li> <li><a href='#'>Sub 2 - 3</a></li> </ul> </li> </ul> Droppy supports a single configuration option, speed, for setting the animation time. <script type='text/javascript'> $(function() { $('#nav').droppy({speed: 100}); }); </script> The example CSS file has been split up into three small sections for ease of customisation if you feel like getting your tinker on. As of version 0.1.2, the ‘hover’ CSS class is applied to both < li > and < a > tags inside the menu on rollover, improving skinability with IE6. Related Listings:
| |||||
| Posted: 12 Dec 2009 10:38 AM PST A clickable dropdown menu with (theoretically unlimited) submenus made out of an an unordered list. It's behaviour is like an application menu (click to open, click to close, stays open even after hovering elsewhere). <script type="text/javascript">$(document).ready(function() { $('#list').clickMenu(); }); </script> <ul id="list"> <li>Item one <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> </li> <li>Item two</li> </ul> More Examples: <script type="text/javascript"> $(document).ready(function() { $.fn.clickMenu.setDefaults({arrowSrc:'arrow_right.gif', onClick: function(){/*do something*/}}); $('selector1').clickMenu(); /* use default values */ $('selector2').clickMenu({arrowSrc:''}); /* dont use an arrow for submenus */ $('selector3').clickMenu({subDelay: 1000, mainDelay: 500}); /* slow menu */ }); </script> Available options: * onClick – function – callback function triggered when a list item is clicked – returning false will stop the default action of the clicked element
Source: http://p.sohei.org/jquery-plugins/clickmenu/ Related Listings:
| |||||
| Posted: 12 Dec 2009 10:19 AM PST With Moo.flection you can easily add a Javascript/CSS based cross-browser reflection with true transparency to you images. It’s based on the Mootools Javascript Framework. Version number is 0.1 since it’s far from finished. A lot of options for implementation should be added and the code has to be optmized for a real release. You will need mootools v1.1 or higher and moo.flection.js This is the most simple and basic version. All images within any type of block element with the ID ‘reflections’ will gain a nice reflection. // create a new instance for reflections. var myReflection = new Reflection( 'simple_reflection', ); HTML: <div id="simple_reflection"> <img src="./hella_floor.jpg" alt="Hella On Floor"/> <img src="./sea.jpg" alt="Sea"/> </div> So if we have an image with the following Javascript, CSS and HTML: // create a new instance for reflections. var myReflection = new Reflection( 'css_copied_reflection', ); CSS .funnyimage { float: left; margin: 50px 10px 30px 20px; padding: 5px; background: #ff0; border: 3px solid #f00; border-right: 5px dotted #0f0; } HTML: <div><img src="./hella_floor.jpg" alt="Hella On Floor" class="funnyimage"/></div> <div id="css_copied_reflection"><img src="./hella_floor.jpg" alt="Hella On Floor" class="funnyimage"/></div> 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.