Scriptaculous 1.8 is in beta and offers several remarkable new features:
We’ll be looking at all of these in more depth soon.
Jeditable is a wonderfully simple plugin to turn any block of text into a mini ajax form. All you need is a single line of code:
$(document).ready(function() {
$(".edit").editable("http://www.example.com/save.php");
});
Where “.edit” is the selector for the block of text and the url is the post address.
Other Features:
Check it out here:
Over the past 2 days I’ve fallen in love with Komodo. A fast, full featured Programming editor built off of the Mozilla / gecko foundation.
Some Features:
Best of all, the software is free and will soon be open source. You can download it today at
http://www.activestate.com/store/download.aspx?prdGUID=20f4ed15-6684-4118-a78b-d37ff4058c5f
Although there are some comments that it may not be ready for Prime Time. Fireclipse may be the tool you need to supercharge your development cycle.
What it is
An Eclipse Plugin & Expanded version of Firebug.
The Expanded Firebug provides an Eclipse Tab within the browser environment. The Eclipse plugin integrates the Firebug console into eclipse.
Get it Online Here: http://www.almaden.ibm.com/u/bartonjj/fireclipse/index.html
For most developers, the most noticeable change with Mootools 1.2 is the deprecation of the incredible FX.style & FX.styles libraries in favor of the new Fx.Tween & Fx.Morph. So what’s the difference? It’s really a name change to more accurately describe the behavior and use of the two different tools.
What’s pretty incredible though, is how powerful the revamped Fx.Morph has become. You can now smoothly transition from any given class in your CSS stylesheet smoothly. This fully separates the behavior (e.g. A smooth transition to an error state) from the CSS defined appearance of that Error state.
If the property cannot be calculated, it will be set at the start of the transition.
Lastly, the "wait" option has been replaced with a new "chain" option. This allows you to simply append effects at the end of the sequence currently being executed.
Read More on the Mootools Blog
http://blog.mootools.net/2007/10/23/The_Best_Javascript_Effects_Now_Even_Better
Lightbox & CodaSlider aren’t compatible. A situation that was brought to my attention while participating in the comments on a blog post at http://www.ndoherty.com/. Conflicts like this are a common experience for many of us and I thought this was a good opportunity to explore the cause of one such conflict.
In the case of Lightbox & CodaSlider, the fundamental frameworks were at odds with each other. Lightbox is built with the Prototype / Scriptaculous framework stack, CodaSlider uses the jQuery framework. Superficially, this doesn’t seem like a big deal. While it’s usually bad form to load down a web page with multiple frameworks, I know it’s a crime many of us have been guilty of in the name of expediency or through multiple vendor integrations. Usually this works, but in this case, the developer was attempting to integrate two widgets that were instantiated at different times and by different methods.
Luckily, there’s a simple solution to the problem. I directed her towards the popular “ThickBox” widget instead. In fact, that’s the greatest strength of the Ajax Bestiary we all have at our disposal. There’s usually another tool available for us to use and in the case of popular frameworks like jQuery, a native solution is out there. So if you ever find yourself in this situation, try to find the native solution.
Features:
Getting Started:
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.pack.js"></script>
Tablesorter works on any standard html table, simply add the following to the ready function
$("#myTable").tablesorter();
Check out Tablesorter at http://tablesorter.com/docs/
Here’s a great example of an ExtJS interface to a real application. While Ext is much better suited to RIA’s and admin screens than a full blown website frontend. This is an admirable and polished attempt to build an interface to a well known tool using a powerful Javascript framework. It’s also a great thing to disect and understand.
Find the Theme Here: http://extjswordpress.net/
Let me start by saying that I love CSS frameworks. From Tripoli to Blueprint, YUI to YAML, I’ve embraced them fully into my design and development process over the past 9 months. Unfortunately, throughout that time I’ve had to deal with a nagging issue: The Semantic Web.
CSS exists to shed the shackles of inline formatting and truly separate content from display. While It’s rarely possible to achieve all of a project goals in a semantic way, CSS frameworks really fly in the face of a semantic approach. Don’t get me wrong, I still think CSS is the way to go and that frameworks provide powerful scaffolding, but I think we all need to be aware that using CSS grid & layout frameworks isn’t exactly a true separation of content & styling.
Take for example, blueprint. Blueprint contains a powerful set of tools for building a layout. Unfortunately, these tools require that columns be explicitly defined in the page source <div class=”column span-2″>. This makes it impossible for a change in stylesheet to completely alter a page layout for mobile devices without discarding the column & span classes and relying on an independent set of markup e.g. <div class=”column span-2 mobile-column mobile-span-5″>. This is a rather cumbersome noose to have to carry for some projects. Especially when the infrastructure isn’t in place to deliver two distinct versions of the site from the server.
I’m wondering how you have addressed these problems in past projects?
Enhance your S5 based slideshow with scriptaculous effects using this handy script.
Usage:
<script src="prototype/prototype.js" type="text/javascript"></script> <script src="scriptaculous/scriptaculous.js" type="text/javascript"> </script><script src="presentacular.js" type="text/javascript"></script>
Adding effects is easy, you only have to add some extra CSS classes to the slides items. You don’t have to worry (if you don’t want to) about the Javascript code to include the effects, Presentacular does it for you. For example, to add the pulsate effect to a title, in order to fade it in and out five times, you only have to add the pulsate class:
<h2 class="pulsate">Adding effects is easy</h2>The effect duration is also controlled with CSS classes, using extra arguments. You have to append an underscore _ to the effect name followed by the effect duration in seconds. For example, this code will shake during 2 seconds:
<p class="shake_2">Control the effect duration</p>Supported Effects
You can find it online at http://labs.cavorite.com/presentacular/
Latest Posts