TinyPop is a lightweight (1.5 KB minified) JavaScript for Growl like notifications. It can be used as an alternative to jGrowl when you don't want to use jQuery for a simple task.

Details

Download

Demo

Details

Download

Demo

Please go through the project page for more details!

The Readme.txt file inside folder "readme" contains instructions for installation and usage

Leave your comments/questions/suggestions on the project page.

Out.

To access elements using jQuery, you would use

$("p") - for tag name
$(".first") - for class
$("#menu") - for id

Can that be done without jQuery?

document.getElementsByTagName("p") - for tag name
document.getElementsByClassName("first") - for class
document.getElementById("menu") - for id

Of course the way you would manipulate the elements is different, but can be done easily as well. Appending some HTML content to an element with id "content"is a piece of cake with jQuery:

$("#content").append("<p>This is the new content</p>");

And without it:

document.getElementById("content").innerHTML += "<p>This is the new content</p>";

That does it. Now how about showing/hiding an element using jQuery

$("#content").show()
$("#content").hide()

and without using it

document.getElementById("content").style.visibility = "visible";
document.getElementById("content").style.visibility = "hidden";

You don't get the fancy animation effect like jQuery, but it does what its supposed to do. Now for the .each() function of jQuery that matches all the occurrences of an element. Lets say you want to set the text of all occurrences of the paragraph element to "Hi". Using jQuery you would do

$("p").each(function() {
$(this).html("Hi");
}

Lets try that without jQuery

var para = document.getElementsByTagName("p");
for(var i=0;i<para.length;i++) {
para[i].innerHTML = "Hi";
}

There, you wrote an extra line, but it doesn't require a library and should work in almost all browsers.

Now one of the most important features of jQuery - the $(document).ready() function. What it basically does is it allows us to run our Javascript stuff as soon as the DOM is ready, and does not wait for the entire page to load (including images, and other resources which might be time consuming). This means that our scripts can execute a bit faster when compared to using the traditional window.onload method. More on that here and here.

document.ready is something that is really neat and I used to have no arguments against it. But thankfully I came across domready, which mimics the function and stands at around 1.7 KB compressed.

Of course jQuery is much much more than all the simple examples I've given. And that is exactly the point I'm trying to make. Using jQuery for straightforward, simple JavaScript manipulation doesn't make sense at all. It definitely isn't worth the extra 50 KB that it uses. However, if you want to do something that uses command chaining, AJAX, advanced selectors and matching, etc then you need to only look at jQuery. And yes, I do love jQuery.

Update 1: Script updated considerably

There are many excellent scripts to edit something inline using javascript (like jeditable), but not many that work standalone. If you hate wanting to include a 50 KB library just for this simple functionality, you are in the right page. This script is tiny (1.7 kB minified) and works on most modern browsers

Demo

Download

Steps:

1) Include the editable.js file in your page

2) Add the attribute class="editable" to a division, paragraph or table cell <td>

3) Click on the element for it to turn into a text box. Update the value, and press enter to save. Press tab or click anywhere on the page to discard updates and revert to the old value

Changelog

Version 0.2

• Support for all major browsers
• Table cell editing more robust
• Added support for IE 7 and 8. Uses ie.js for support for getElementsByClassName

Initial Release

• The editable box now fits to the size of the original element. You can see that in the demo
• Support for inline table cell editing is now included (Proper layout/orientation only work in FF for now. Horribly out of place in other browsers and will be fixed later)
• Editing of an element with other HTML tags now works better

Gotchas:

1) Only one element is editable at any instant (I wanted this specific feature for a project I'm working on)

2) The text box doesn't fit to the size of the original element (will be fixed)

Tested On:

Windows - Firefox 3.6, IE 7 & 8, Chrome

Mac - Firefox 3.6, Safari 4, Chrome

Terms:

Free to use for personal or commercial purposes, but please give credits

Notes:

I know it can always be better, and I'm just a beginner. So comments, suggestions always welcome!

The demo is here. If anyone is interested in the code, drop a comment.

P.S: Yea I suck at CSS. If anyone does a better job, please let me know.