JQuery is a library of JavaScript

What is jQuery?

jQuery is a library of JavaScript, which focuses on the interaction between JavaScript and HTML. JQuery library makes it easy to access any element of DOM, refer to the attributes and content elements of the DOM and to manipulate them. JQuery library also provides a convenient API to work with Ajax. Development HTML was one of the first things mastered by John Resig, when started studying programming. Resig was programming on QBasic, when one of his friends showed him how to create a Web page (using Angelfire), and some basics of HTML. Father presented him two books on HTML for Christmas. Just when he programmed on Visual Basic, HTML and web design aroused his interest. But the passion for JavaScript came much later, approximately in 2004.

In that period Resig received a degree in computer science sphere and worked halftime in the local company Brand Logic. He worked on designing the site where user scrolling was created. John was disappointed and upset, especially because he used the code of other developers, that was the main reason to study JavaScript seriously. Having studied, he came to the conclusion that Java script is a simple, but elegant language which is incredibly powerful for solving different tasks. During the next couple of years D. Resig developed a variety of Java Script applications, before finishing the creation of jQuery.The main purpose for creation jQuery was the ability to encode the reusable pieces of code, which will help to simplify the JavaScript and use them without worrying about cross-browser issues.

The library was presented to the public during computer conference (BarCamp) in New York in 2006. Resources - Engine of cross-browser CSS-selectors Sizzle, separated in a single project;- Crossing DOM tree, including XPath support as a plug-in;- events;- visual effects;- AJAX-supplements;- JavaScript plug-ins. Philosophy, In the same way as CSS separates the visualization of the HTML structure, so JQuery separates the behavior of the HTML structure. For instance, instead of the direct reference to the handler of button click event, control is transferred to JQuery, identifying the key and then transforming it into a click event handler. This separation of behavior and structure is also called the principle of unobtrusive JavaScript. JQuery library comprises the functionality useful for a wide range of tasks. However, the developers of the library didn't have a task to combine functions in jQuery that would match everywhere, because it would cause a large code, main part of which is not relevant. Therefore compact architecture of universal core libraries and plug-ins was realized. This allows to build for the resource that JavaScript-functionality, which would be in demand.

I am Hawk Miller from Ukraine, Blogging and internet R&D is my passion. I am majorly interested in design and Best website templates.

View the original article here

The FancyBox JQuery plugin

The last years the use of lightboxes on websites has increased a lot. In this article I´ll explain what a lightbox is and I´ll give information about my favourite lightbox option.

A lightbox is, in short, a popup that opens (sometimes with a nice effect) as a new layer. Most of the times in the middle of the page and with a layer disabling click on areas outside of the box. Normally it´s used to show images at a bigger size, but it can also contain other media, html snippets or complete sites (in frames).

Over the past years I´ve used many lightboxes. The prototypeJS lightbox was one of the first and it is still used on many sites. But as times changes, things improve. And one of the most complete lightboxes available now is called FancyBox

This lightbox is a JQuery plugin and can display images, HTML snippets, flash, Iframes and Ajax requests. It is easily customizable through settings and CSS, allows groups related items and automatically adds navigation. Furthermore, if the mouse wheel JQuery plugin is included in the page FancyBox will respond to mouse wheel scrolls as well. Add fancy transitions and a nice drop shadow under the zoomed item and you have a very complete and beautiful lightbox solution.

Including the FancyBox plugin in your page is easy and can be resumed in 5 steps.

Check if your site uses a valid DOCTYPE.
Include the JS files. For the last FancyBox version you need JQuery 1.4 or newer. The FancyBox script you can download from the website of FancyBox (see link below). Optional are the mouse-wheel plugin and the transition pack (for more transitions)
Add the CSS file.
Create in your page a a element. For example: < a id="single_image" href="image_big.jpg">< img src="image_small.jpg" alt=""/>. In this example FancyBox will open the big image when you click on the small one.
And add script to execute the plugin when the page loads. An easy example is: $("a#single_image").fancybox();

This is a simple setup. You can check the website of FancyBox for more information or the links to the files needed.

The website that offers FancyBox also shows more options and they have a "Tips and Tricks" section. And if your FancyBox doesn´t work, you can check the frequently asked questions. In most cases this is sufficient. But if you need further help, they have a google group here: http://groups.google.com/group/fancybox

Fancybox website: http://www.fancybox.net

View the original article here