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>
Read the rest of this entry »
November 4th, 2008 by Admin
Tags: JavaScript, programming, tutorial, widget, zoom
Posted in JavaScript | 3 Comments »
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‘
August 2nd, 2008 by Admin
Tags: basic, hello world, Prototype, using
Posted in Prototype | No Comments »
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…
July 26th, 2008 by Admin
Tags: css, dollar, function, Prototype
Posted in Prototype | No Comments »
