Ajax Tutorial » Library http://tutorialajax.com Prototype, jQuery and another Ajax tutorials Tue, 11 Nov 2008 14:24:46 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Font Zoomer JavaScript http://tutorialajax.com/font-zoomer-javascript.html http://tutorialajax.com/font-zoomer-javascript.html#comments Tue, 04 Nov 2008 14:09:52 +0000 Admin http://tutorialajax.com/?p=24
  • The Prototype $() function
    • ]]>     This idea come from the Wordpress Zoom Box Plugin. It’s a widget used to change websites font automatically. This simple widget is easy to made and useful for blog / website. This is how to do it:

    Adding the Zoom Box

    First of all, add a <Div> to make a zoom-box right after <BODY>

    <div id="zoom-box">
    <p id="zoom-title"><a href="http://thesky.asia/zoom-box/">ZoomBox</a></p>
    <p id="zoom-control">
    <a href="#" id="zoom-in">-</a>
    <span id="zoom-text">10</span>
    <a href="#" id="zoom-out">+</a>
    </p>
    </div>

    Floating and Styling the Zoom Box

    Make the zoom-box floating as a layer. so, the it won’t interfere the existing layout. This step can be done by css. Setting the box position to absolute and then use the css to dress up the zoom box whatever you like. For example, this is my css code:


    <style type="text/css">
    #zoom-box {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color:#aaa;
    border: 1px solid #000;
    }
    #zoom-box * {
    text-align:center;
    font-size: 9pt;
    margin: 0;
    padding: 0;
    text-decoration: none;
    height: 20px;
    }
    #zoom-control * {
    float: left;
    display: block;
    width: 25px;
    background-color:#FFFFFF;
    }
    #zoom-control a {
    background-color:#CCC;
    }
    #zoom-control a:hover {
    background-color: #333333;
    color: #FFFFFF;
    }
    </style>

    Zoom Box Scripting

    With above two steps, we’ve got a simple zoom-box widget. But it won’t work yet. To get our zoom-box works, we can use javascript like this:


    <script language="javascript">
    window.onload = function () {
    var iFontSize = 1;
    document.getElementById("zoom-in").onclick = function () {
    iFontSize -= 0.1;
    document.body.style.fontSize = iFontSize + "em";
    document.getElementById("zoom-text").innerHTML = Math.round( iFontSize * 10 );
    }
    document.getElementById("zoom-out").onclick = function () {
    iFontSize += 0.1;
    document.body.style.fontSize = iFontSize + "em";
    document.getElementById("zoom-text").innerHTML = Math.round( iFontSize * 10 );
    }
    }
    </script>

    That must works now. If it won’t work, please recheck your HTML / XHTML. Maybe it’s not valid or the page’s structure is broken. Please fix it and try again.

    Related posts:

    1. The Prototype $() function

    ]]>     http://tutorialajax.com/font-zoomer-javascript.html/feed 3     Using Prototype http://tutorialajax.com/using-prototype.html http://tutorialajax.com/using-prototype.html#comments Sat, 02 Aug 2008 19:09:25 +0000 Admin http://localhost/ajax-framework/?p=6
  • Prototype
  • The Prototype $() function
  • Start Using jQuery
    • ]]>     To using prototype, first we must download it. It’s only 1 file named ‘prototype.js‘. It is about 120kb, a bit too large for a website. but don’t worry, because the 120kb will do more… ;) besides that, we can compress it using any packer. I won’t describe how to compress the file here. If you wanna compress the file, you can learn it on “Compressing JavaScript”.

    To use the prototype, first refer to the ‘prototype.js’ as shown below
    <script type="text/javascript" src="prototype.js">
    </script>

    Place it at the <head> tags of your html. Actually you can place it anywhere to use prototype, but It always be good to place it on the head because your pages will look cleaner.

    And the main function in prototype is

    document.observe('dom:loaded' , function() {
    ... -> script code here
    });

    it’s not necessary to include the function if we want to use prototype, but this function guarantee that all the DOM structure has been loaded before the script run. That is a good habid to always use this function.

    The Hello World

    It’s a good idea to start every programming with the ‘hello world’.

    document.observe('dom:loaded' , function() {
    $(document).update("Hello World!!");
    });

    note that we call the sexy function ‘$(document).update‘ to pop out the text. about further of this function, we will learn it together later… by now, this is only ‘Using Prototype‘

    Related posts:

    1. Prototype
    2. The Prototype $() function
    3. Start Using jQuery

    ]]>     http://tutorialajax.com/using-prototype.html/feed 0     The Prototype-CSS $$() function http://tutorialajax.com/the-prototype-css-function.html http://tutorialajax.com/the-prototype-css-function.html#comments Sat, 26 Jul 2008 19:35:37 +0000 Admin http://localhost/ajax-framework/?p=8
  • The Prototype $() function
  • The Form $F() function
    • ]]>     The dollar dollar function is Prototype’s CSS Selector Engine. The ‘$$()’ function returns all css match elements. It was used quite same as the CSS selector. For example, to get all tags with the class “myclass”, we use the following:

    $$(".myclass")

    This function will return the array of elements match the selector string. And We can make the returned elements bold like this:

    $$(".myclass").invoke('setStyle', { fontWeight: bold; })

    Easy as pie…

    Related posts:

    1. The Prototype $() function
    2. The Form $F() function

    ]]>     http://tutorialajax.com/the-prototype-css-function.html/feed 0     The Form $F() function http://tutorialajax.com/the-form-f-function.html http://tutorialajax.com/the-form-f-function.html#comments Fri, 25 Jul 2008 19:41:57 +0000 Admin http://localhost/ajax-framework/?p=9
  • The Prototype-CSS $$() function
  • The Prototype $() function
    • ]]>     the $F() function will returns the value of form element.

    $F("form_element_id")

    Does it need a description anymore??

    Related posts:

    1. The Prototype-CSS $$() function
    2. The Prototype $() function

    ]]>     http://tutorialajax.com/the-form-f-function.html/feed 0     The Prototype $() function http://tutorialajax.com/the-prototype-function.html http://tutorialajax.com/the-prototype-function.html#comments Sun, 20 Jul 2008 19:23:58 +0000 Admin http://localhost/ajax-framework/?p=7
  • The Prototype-CSS $$() function
  • Font Zoomer JavaScript
  • Using Prototype
    • ]]>     The dollar function is one of the Prototype Utility Function. $() is the most frequently used prototype’s function. basically it was used to refer an element in the HTML page. The function is quickly shorthand for getElementById.

    The usual function identifying an element is:
    document.getElementById("element_id")

    The $() function reduces the code to:
    $("element_id")

    For example, you can set the CSS text color with this code:
    $("element_id").style.color = "#ffffff";

    Or, the “Prototype way”:
    $("id_of_element").setStyle({color: '#ffffff'});

    Related posts:

    1. The Prototype-CSS $$() function
    2. Font Zoomer JavaScript
    3. Using Prototype

    ]]>     http://tutorialajax.com/the-prototype-function.html/feed 0     Start Using jQuery http://tutorialajax.com/start-using-jquery.html http://tutorialajax.com/start-using-jquery.html#comments Sat, 07 Jun 2008 23:49:12 +0000 Admin http://localhost/ajax-framework/?p=12
  • Using Prototype
    • ]]>     jQuery main function is the ‘$(document).ready() function’. Although it’s many way to start jQuery, Always use this function to start using jQuery is good. example:

    $(document).ready(function() {
    $('.header-company').addClass('highlight');
    });

    This will add class named ‘highlight’ to element that have ‘header-company’ class. This is used generally for changing / adding class for CSS. So, when the document was loaded, the jQuery command will add the CSS Style.

    Related posts:

    1. Using Prototype

    ]]>     http://tutorialajax.com/start-using-jquery.html/feed 0     Prototype http://tutorialajax.com/prototype.html http://tutorialajax.com/prototype.html#comments Tue, 20 May 2008 18:24:59 +0000 Admin http://localhost/ajax-framework/?p=5 Prototype is the most popular Ajax framework. It used by many giant-website such : Apple, Gucci, etc… The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson. Prorotype is implemented as a single file of JavaScript code “prototype.js”.

    Prototype is also used as the low layer for many framework, for example: script.aculo.us, Rico, ExtJS, Moo.fx, etc. Prototype provides many functions for developing JavaScript web applications. The prorotype features programming shortcuts for accessing element, events, and major functions to deal with Ajax.

    Prototype also feature library functions to support object oriented programming that use classes and ojects, something the JavaScript language hard to implement.

    You can find and download prototype on their site.

    No related posts.

    ]]>     http://tutorialajax.com/prototype.html/feed 0     jQuery feature http://tutorialajax.com/jquery-feature.html http://tutorialajax.com/jquery-feature.html#comments Thu, 15 May 2008 23:17:37 +0000 Admin http://localhost/ajax-framework/?p=11 jQuery provides many general function to build a rich pages. jQuery feature:

    • Ajax
      jQuery is one of the ajax framework that used mostly by many web master.
    • Shortcut access to DOM
      instead of using bulk of code in accessing DOM, jQuery have the shortcut.
    • Manipulating the element content
      With jQuery, we can freely insert, update and delete every HTML element.
    • Easy event handling
      Event handling is no fear again in web pages, jQuery make the process simple.
    • Animation
      by default, jQuery already have ability to perform general animation on the pages.
    • Action Chaining
      Instead of using many temporary variable and repetition lines, we can easily unite several lines of code that have same characteristic to a line code with chaining.
    • CSS Compliance
      The jQuery selector is CSS Compliance, that make any designer that already have knowledge about CSS is able to learn jQuery easily.
    • Cross browser
      using jQuery, no more hack for IE… the framework has done it automatically.

    No related posts.

    ]]>     http://tutorialajax.com/jquery-feature.html/feed 0     jQuery Introduction http://tutorialajax.com/jquery-introduction.html http://tutorialajax.com/jquery-introduction.html#comments Mon, 05 May 2008 16:08:52 +0000 Admin http://localhost/ajax-framework/?p=10 jQuery is created by John Resig, it is a powerful JavaScript library that can rock and enhance your websites. jQuery is provides very wide range of features, easy-to-use syntax, and great cross-platform compatibility in a single file.

    Another jQuery superiority is it has thousands of plugin that developed to extend jQuery’s functionality, the plugin make jQuery as an essential tool. Mastering jQuery allow you to add attractive interactions and animations to your web with AJAX, events, effects, and advanced JavaScript language features.

    No related posts.

    ]]>     http://tutorialajax.com/jquery-introduction.html/feed 0