Ajax Updates |
- Vista-like Ajax Calendar
- Videobox: Lightbox for videos
- TohDoh Yet Another CakePHP AJAX Todo-List
- JavaScript Text Higlighting jQuery Plugin
- Create a Sprited Navigation Menu Using CSS and MooTools
- Rounded Corners in Internet Explorer
| Posted: 01 Nov 2009 11:28 AM PST The Vista-like Ajax Calendar is what the name says: a calendar based on the Vista taskbar calendar. The script runs on MooTools javascript framework, version 1.11 and uses javascript, XHTML, CSS and PHP. Features: * Animations in transition Tested on: * IE7 This Vista-like Ajax Calendar script is licensed under the Creative Commons Attribution-NonCommercial 3.0 License. What that means is: Use these files however you want, but don’t redistribute without the proper credits and do not use this for commercial purposes. I’d appreciate hearing from you if you’re using this script. MooTools MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. This script runs on the MooTools v1.11 and uses the following MooTools components (other key components will be automatically included): * Ajax  Related Listings:
| |||||
| Posted: 01 Nov 2009 11:17 AM PST Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox’s code. It’s written for the wonderful mootools library. And used swfobject to embed flash. Usage Firstly, you should include 3 javascript files to your page. You can change the path, if you upload it to somewhere else. You can paste the code below in your head tag. <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript" src="js/videobox.js"></script> And you must include the css file(for the styles). <link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" /> And, here is the thing: <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">our video</a> Add the rel=”vidbox” to your video page’s link to show video links in Videobox, and add title=”my caption” to add caption to a box. Related Listings:
| |||||
| TohDoh Yet Another CakePHP AJAX Todo-List Posted: 01 Nov 2009 11:08 AM PST TohDoh is YET ANOTHER CAKEPHP AJAX TODO LIST DEMO or YACATLD, a 100% ajax threaded todo list. It's both a showcase and an opportunity for new bakers to learn from. * Threaded, so you have tasks and sub tasks. How to install TohDoh * Run the SQL file provided or use phpMyAdmin # var $tohdoh = array( # 'driver' => 'mysql', # 'persistent' => false, # 'host' => 'localhost', # 'login' => 'root', # 'password' => '123456′, # 'database' => 'devmoz', # 'prefix' => 'tohdoh_' # ); * Notice the 'prefix'. if you don't want that, change the table name. I assumed you have cake version 1.2. Related Listings:
| |||||
| JavaScript Text Higlighting jQuery Plugin Posted: 01 Nov 2009 10:59 AM PST Text higlighting is part of DynaCloud – where tags/keywords are automatically highlighted once they're clicked – so I took that code and made it a stand-alone JavaScript text highlighting jQuery plugin. Style the highlight class Create an entry in your style sheet for the highlight class. .highlight { background-color: yellow } Highlight terms Call the highlight function with the text to highlight. To highlight all occurrances of "bla" (case insensitive) in all li elements, use the following code: $('li').highlight('bla'); Remove highlighting The highlight can be removed from any element with the removeHighlight function. In this example, all highlights under the element with the ID highlight-plugin are removed. $('#highlight-plugin').removeHighlight(); Related Listings:
| |||||
| Create a Sprited Navigation Menu Using CSS and MooTools Posted: 01 Nov 2009 10:15 AM PST CSS sprites are all the rage these days. And why shouldn't be? They're easy to implement, have great upside, and usually take little effort to create. In his post he outlined a method for enhancing the CSS sprite menu with jQuery. I loved his post so much that I converted his jQuery CSS sprites menu to MooTools. The HTML <ul id="nav"> <li id="home" <?php echo $current == '' || $current == 'home' ? 'class="current"' : ''; ?>><a href="?home">Home</a></li> <li id="about" <?php echo $current == 'about' ? 'class="current"' : ''; ?>><a href="?about">About</a></li> <li id="services" <?php echo $current == 'services' ? 'class="current"' : ''; ?>><a href="?services">Services</a></li> <li id="contact" <?php echo $current == 'contact' ? 'class="current"' : ''; ?>><a href="?contact">Contact</a></li> </ul> My code mostly mirrors the original ALA post's code but I've chose to use IDs instead of CSS classes. The CSS #nav { width: 401px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat; position: absolute; top: 100px; left: 100px; padding:0; } #nav li { display: inline; } #nav li a:link, #nav li a:visited { position: absolute; top: 0; height: 48px; text-indent: -9000px; overflow: hidden; z-index: 10; } #home a:link, #home a:visited { left: 23px; width: 76px; } #home a:hover, #home a:focus { background: url(sprites-blue-nav.gif) no-repeat -23px -49px; } #home a:active { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; } #home.current a:link, #home.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -23px -147px; cursor: default; } .nav-home, .nav-home-click { position: absolute; top: 0; left: 23px; width: 76px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -23px -49px; } .nav-home-click { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; } #about a:link, #about a:visited { left: 100px; width: 82px; } #about a:hover, #about a:focus { background: url(sprites-blue-nav.gif) no-repeat -100px -49px; } #about a:active { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; } #about.current a:link, #about.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -100px -147px; cursor: default; } .nav-about, .nav-about-click { position: absolute; top: 0; left: 100px; width: 82px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -100px -49px; } .nav-about-click { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; } #services a:link, #services a:visited { left: 183px; width: 97px; } #services a:hover, #services a:focus { background: url(sprites-blue-nav.gif) no-repeat -183px -49px; } #services a:active { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; } #services.current a:link, #services.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -183px -147px; cursor: default; } .nav-services, .nav-services-click { position: absolute; top: 0; left: 183px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -183px -49px; } .nav-services-click { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; } #contact a:link, #contact a:visited { left: 281px; width: 97px; } #contact a:hover, #contact a:focus { background: url(sprites-blue-nav.gif) no-repeat -281px -49px; } #contact a:active { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; } #contact.current a:link, #contact.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -281px -147px; cursor: default; } .nav-contact, .nav-contact-click { position: absolute; top: 0; left: 281px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -281px -49px; } .nav-contact-click { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; } Unfortunately there's plenty of CSS. That's generally the one downside of using sprites but the payoff comes with less requests to the server. My CSS differs from the original ALA post in that I accommodate for my IDs. The MooTools Javascript (function($) { window.addEvent('domready',function() { $('nav').getElements('li').each(function(li) { //settings var link = li.getFirst('a'); //fix background image if(!li.hasClass('current')) { link.setStyle('background-image','none'); } //utility div var div = new Element('div',{ 'class': 'nav-' + li.get('id'), opacity: 0 }).inject(li); //background imagery li.addEvents({ mouseenter: function() { div.fade('in'); }, mouseleave: function() { div.fade('out'); }, mousedown: function() { div.addClass('nav-' + li.get('id') + '-click'); }, mouseup: function() { div.removeClass('nav-' + li.get('id') + '-click'); } }); }); }); })(document.id); Source: http://davidwalsh.name/css-sprite-menu Related Listings:
| |||||
| Rounded Corners in Internet Explorer Posted: 01 Nov 2009 12:51 AM PDT One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS: .round { -moz-border-radius:12px; -webkit-border-radius:12px; } As you probably already know, IE doesn't allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer. <!-- SIMPLY INCLUDE THE JS FILE! --> <script type="text/javascript" src="curvy.corners.trunk.js"></script> CurvyCorners detects the usage of "-webkit-border-radius" and "moz-border-radius" on DOM elements and works its magic to duplicate the effect in IE using a series of small DIVs. There are no images involved. You may also identify specific elements to apply rounded corners to: var settings = { tl: { radius: 12 }, tr: { radius: 12 }, bl: { radius: 12 }, br: { radius: 12 }, antiAlias: true }; /* moooo */ $$('.round').each(function(rd) { curvyCorners(settings,rd); }); 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.