• Consulting
• CSS redesign
• XML feeds development -Automation with PHP
• RSS development and automatic marketing integration with Twitter and Facebook

Even though was not a Yii-job, I am more than happy to promote www.offertutti.com here as one of the most pleasant jobs I have ever had in my, already long -gosh how time pass, coding career.

The job was quite challenging, as any site developed by companies from certain countries, but managed to fulfill most of their expectations. Even though I am currently in the middle of a dream project, it continues to be a pleasure to help them out every now and then.

New design is coming…

Tweet this!

I normally develop CMS (control management systems) based on a heavy use of AJAX, and I normally endup writing tones of jQuery functions for different IDs and/or CLASSes. Thinking to create a library that will free me to create the same functions again and again and for different classes I thought about this simple plugin. The reason was that if I was to create a new CMS for my beloved Yii framework, I just wanted to have a system where, by setting some meta data into the HTML elements, the client script will smartly know what to do. I didn’t want to necessary worry about different classes on  my client scripts, I wanted to be just one class.

The idea behind goes a bit further and has something to do with Yii, I want to create extensions that will take care of the correct rendering of a button without having to worry about the client scripts **and** also the same extension could actually call jquery commands easily. I emphasized **and** because Yii already provides an ajaxLink and an ajaxButton but they are not listened to perform client jquery executions and that, as seen in its forums, is causing problems to PHP programmers a lot of times.

Also, I envision an environment where through this, Yii extension designers will be able to create CMS styles, completely different that the one coming from Yii, so Yii users could easily integrate a new layout without even tweaking CSS, or Themes, or Layouts, just their views and by integrating some specialized widgets API, user will be able to program a gallery (for example) with just one line of code on their views. Enough talking, here is the plugin for you to test it and tell me what do you think.

How to use

Include jquery and jquery.livebuttons.js on your document’s head and start monitoring for livebuttons like this:

//
// .selector is the class name the HTML elements have
$('.selector').livebuttons();
$('.selector').livebuttons( options );
//
// we can have more than one
$('.otherselector').livebuttons( otheroptions );

Options

useFirebug

A useful property for debuggin processes. If set to true all logs will be displayed on firebug console (or chrome).

var options = {
    useFirebug: true
}
$('.selector').livebuttons( options );

events

An array of options where to specify the events to monitor. In future releases, we will be able to specify which methods correspond for certain events.

var options = {
    events: ['click','mouseover'] // not a good practice though *yet*
}
$('.selector').livebuttons( options );

methods

This is the most interesting part of the plugin. We could implement our own javascript methods to be used with livebuttons. All methods will receive a ‘command’ parameter, which is actually the object in the meta-data of the HTML element (see below on the examples provided for default methods).

var options = {
    methods: {
        alert: function( command ) {
              alert( command.message );
        }
   }
}
$('.selector').livebuttons( options );

When designing our own javascript functions to be attached to the plugin, we can access internal parser functions with this keyboard. All functions receive a command object and also a reference to the options object. This object have a reference to the parser it self and we could easily access parser’s functions by using this.parser.

The Parser

If you look at the code inside the plugin, you will see that the parser has a couple of good methods to use:

stringify

Converts an object to its JSON representation string

createIFrame

Creates an iframe to be used with FORMs with multipart/form-data. So you can easily send files to the server without the need of reloading the page. Check at its code to see its

removeIFrame

Removes the iFrame previously created with parser.createIFrame() method.

parseJSON

Parses a JSON string and converts it into an object. I know jQuery comes with one, but it throws an error when you include a function into a command object’s property.

Default Methods

You have a couple of methods that already come with the plugin. You can easily override them if required. Here they are:

ajax

Its name is self-explanatory. It receives a command object on the following format:

{method:'ajax',url:'',data:{},success:function(){},error:function(){}}

Example of live button markup

<a class="livebutton" href="#"
data-cmd='{"method":"ajax","url":'http://localhost/',"success":handleAJAX}">test ajax</a>

getscript

Its calling jQuery’s getScript method. It receives a command object on the following format:

{method:'getscript',url:''}

Example of live button markup

<a href="#" class="livebutton"
   data-cmd='{method:"getscript",url:'http://localhost/script.js'}' >test getscript</a>

jquery

Its calling any jQuery’s method. It receives a command object on the following format:

{"method":"jquery","jqmethod": "","target":"","arguments":["url",function(){}]}

Example of live button markup

<a class="livebutton" href="#" data-cmd="{"method":"jquery","jqmethod":"load","target":"#layer","arguments":["url":"http://localhost"]">test load jquery function</a>

Remarks

As previously said, all functions also receive the command object extracted from the HTML element, but that’s not all. The parser automatically includes a jquery reference of the HTML element to the command’s element property.

var options = {
    methods: {
        alert: function( command ) {
              alert( command.message );
             // do not use $( command.element ) as it would like $( $( element ) )
              command.element.attr('title','I have already been clicked');
        }
   }
}
$('.selector').livebuttons( options );

Demo

For the sake of having a demo (I will build a better one) the following script will create a live button that can perform jquery ‘append’ commands. Please note that when you load new content via AJAX on a page that has the livebuttons plugin that you have successfuly initiated, the plugin will also listen to the specified events to those livebuttons loaded via AJAX.

<html>
<head>
<script src="path\to\jquery.livebuttons.js"></script>
<script>
$('.testbuttons').livebuttons();
<body>
<a href="#" class="testbuttons"
  data-cmd="{"method":"jquery","jqmethod":"append","target":"#container","arguments":["new content<br>"]}">Test append</a>
<div id="container"></div>
</body>
</html>

Download

I seriously would like to know what do you think about this system as, again, I am planning to develop extensions for Yii that will embrace it in order to easy the tasks of PHP programmers with client Javascript. I do use this system to create a new system for a personal project and it is working quite good; but I won’t dare to create Yii extensions if you think that what I envision is wrong.

If the below link doesn’t work (it happens normally because you are not registered), please use the following link to download: jquery.livebuttons.js.

download: JQuery Livebuttons Plugin (15.33KB) added: 15/12/2010 clicks: 171

Tweet this!

After breaking my head towards the wall and throwing some darts to Microsoft’s IE Browser poster I found one that worked.

function iPrint( contentToPrint )
{
	// I have a hidden IFRAME within the document called
        // pfiframe (if you try to use jQuery here fails
	var oIframe = document.getElementById('pfiframe');
        // get a reference to the document
	var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
	if (oDoc.document) oDoc = oDoc.document;
        // now we write an entire HTML doc with the
        // contents we want to print in its body
	oDoc.write("<html><head><title>title</title>");
	oDoc.write("</head><body>");
       // check the function to print that we
       // include here
	oDoc.write( contentToPrint +
		"<script type='text/javascript'>function printIt(){window.print();return false}</" + "script></body></html>");
	oDoc.close();
       // again, I am not using jQuery here
       // for unknown reason, it fails to call
       // differently as it is here
	window.frames[0].printIt();
}

See? Easy right? Well I spent quite a lot of minutes to realize that! Hope this discovery help you guys out there.

Tweet this!

I would like to introduce you my last web project: http://www.palmstudios.com

For this project I have developed a sort of MVC (Model View Controller) over the RedBeanPHP DB library (PHP 5.3.2).  This project even though it looks quite simple it has a very power CMS (Content Management System) on its backend that allows the model agency to control most of the aspects of its business:

1. - Clients Management
2. - Models Management (Men, Women, Children & Extras) -contact details, measurements, pictures, and so on…
3. - Promotional Packages Management – this is a special addon which allows the agency to create model promotional bundles to send to its clients

There is a ton of client and server libraries that this application makes use of, such as:

• JQuery FancyBox
• JQuery Livequery
• JQuery AjaxQ
• PHPMailer
• RedBeanPHP
• Savant3 Template Engine
• PHPThumb
• TinyMCE

The CMS has a configuration section where site administrator can configure:

• Web site languages (has multiple language support)
• Web site translations (you can even ask GOOGLE about a translation depending of the languages installed on the system)
• Model properties (size, height, waist, etc…)
• Hair Colors
• Eye Colors
• Users

Here is a snapshot gallery of the Site and its CMS

I am open for Freelance Jobs

If any of you would like to create a model agency application like this, let me know, I will be more than happy to collaborate with you on it. I will also sell the source code of its panel for any of you who is interested.

Tweet this!

Bruno Casablanca Restaurant and Pizzeria

Another site finished: www.brunocasablanca.com

Yeah, is a restaurant business, located in one of the most beautiful places in the Balearic Islands: Betlem, in La Colonia de San Pedro, Majorca, Spain. The site uses a web panel to control:

• Picture Galleries
• Web site content
• Translations
• Events
• Suggestions

In this site I make use of one of the greatest galleries around Pirobox, boxen -to display the menu, and FlippingBook HTML Edition for the menu viewing. You can check the website and see how I implemented these three cool tools, feel free to ask me any doubt related to them in case you wish to use it in any of your sites.

Tweet this!

VisualLightBox is a free application that helps you easily generate online photo albums, lightbox gallery with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code.

Just drag&drop your photos to VisualLightBox wizard window, press “Publish” and your own css web site album with beautiful LightBox effects will open in the browser instantly!
No css, image editing, javascript, html coding, just a click to get your cool web page album ready.

It takes less than a minute to have your own image gallery.

For full documentation please go to http://lightbox2.com/

Newbies, now there is no excuse to have your featured lightbox on your site!

Tweet this!

Step 1

First of all, lets make a reference to the new version of Google Maps. Check that we have to specify a parameter sensor=false. To find out more about this parameter please follow this link.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Step 2

Now we are going to write the HTML tags on the BODY of our document that will hold the map and the controls that will hold latitude, longitude and zoom level references. Also, see the CSS that control the size of the map holder.

<style>
div#gmap {
width: 100%;
height: 300px;
}
</style>
<body>
<center>
<!-- MAP HOLDER -->
<div id="gmap"></div>
<!-- REFERENCES -->
lat:<span id="lat"></span> lon:<span id="lon"></span><br/>
zoom level: <span id="zoom_level"></span>
</center>
</body>

Step 3

Now, we are going to write the function that will display the map when the document loads. The function, that we will call ‘initialize’ has different parts that we will describe now:

Part 1

Setting the map zoom level and its position in the world:

var myLatlng = new google.maps.LatLng(38.971154274048345,1.415863037109375); // IBIZA 
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);

Part 2

Placing a marker on the map specifying its center position (please refer to above code for LatLon location).

// marker refers to a global variable
marker = new google.maps.Marker({
position: myLatlng,
map: map
});

Part 3

Now, the events that will take control of the marker center re-positioning and placing the information on the correspondent document objects (lat, lon, and zoom level).

// if center changed then update lat and lon document objects
google.maps.event.addListener(map, 'center_changed', function() {
var location = map.getCenter();
document.getElementById("lat").innerHTML = location.lat();
document.getElementById("lon").innerHTML = location.lng();
// call function to reposition marker location
placeMarker(location);
});
// if zoom changed, then update document object with new info
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
document.getElementById("zoom_level").innerHTML = zoomLevel;
});
// double click on the marker changes zoom level
google.maps.event.addListener(marker, 'dblclick', function() {
zoomLevel = map.getZoom()+1;
if (zoomLevel == 20) {
zoomLevel = 10;
}
document.getElementById("zoom_level").innerHTML = zoomLevel;
map.setZoom(zoomLevel);
});

Part 4

Initialize the document objects with default information

document.getElementById("zoom_level").innerHTML = 16;
document.getElementById("lat").innerHTML = 38.971154274048345;
document.getElementById("lon").innerHTML = 1.415863037109375;

Step 4

Finally, we have to write the function that will reposition the marker on ‘zoom_changed’ map event and call the ‘initialize’ function on window load event.

function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
marker.setPosition(location);
}
window.onload = function(){initialize()};

And that’s it, we have a great utility to plug onto our projects in order to find out the latitude and longitude of an address.

DOWNLOAD

I have included the working version of this tutorial for you to download. If you make any changes on the code in order to improve/add more functionality to it (that is easy fellows), please share it here with us.

download: Get Lat Lon Finder (1.41KB) added: 22/01/2010 clicks: 2663

Tweet this!

The jQuery programmers not happy with a new release has also created a new  jQuery API site. Check what they have done on their API site here.

John Resig will announce 1.4 release details tomorrow but meanwhile, you can download it and see for yourself.

• Download jQuery 1.4 from Google CDN
• Download jQuery 1.4 from Official jQuery website

Also, if you want to learn more about what is new in jQuery 1.4 then you might find the following resources useful:

1. 14 Days of jQuery
2. Official jQuery Blog
3. jQuery 1.4 Cheatsheet
4. jQuery on Tweeter

Check what is new or changed on this new release here.

Happy birthday jQuery! Thanks for the good work!

Tweet this!

This Open Source Free Development Kit is accessible to anyone even people without any html knowledge and is simple to understand. In a couple of minutes you will have created a full and profesional looking website.

Awesome new and advanced features offered by no pack in the world like a custom popup and iphone-style form elements.

Check out their website: http://iwebkit.net/

And their demo: http://demo.iwebkit.net/

Tweet this!

The code

Remember than this plugin works in conjunction with my JSON jQuery Plugin, also on this blog.

jQuery.cookie = {
set : function(name,value,options){
options = $.extend({}, options);
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
value = options.json ? encodeURIComponent($.JSON.encode(value)):encodeURIComponent(value);
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', value, expires, path, domain, secure].join('');
},
get : function(name,json){
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = $.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = json ? $.JSON.decode(decodeURIComponent(cookie.substring(name.length + 1))):decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
},
unset: function(name){
this.set(name,'',-1);
}
};

How to use

Note that you have to insert the jquery library on your head section and also the JSON jQuery Plugin -they are all included into the zip file below. Please, also refer to the example provided on my last article ‘cookies on roids’ to view more cookie options.

var obj = {json:'this is a test json property',xml:'this is a test xml property'};
var arr = ['A','B of 2 index array','C','D'];
var str = 'This is a string test';
var num = 123;
$.cookie.set('testobject',obj,{json:true});
$.cookie.set('testarray',arr,{json:true});
$.cookie.set('teststring',str);
$.cookie.set('testnumber',num);
var a = $.cookie.get('testobject',true);
var b = $.cookie.get('testarray',true);
var c = $.cookie.get('teststring');
var d = $.cookie.get('testnumber');
$.cookie.unset('testobject');
$.cookie.unset('testarray');
$.cookie.unset('teststring');
$.cookie.unset('testnumber');
alert('object:'+a.xml);
alert('array:'+b[1]);
alert('string:'+c);
alert('number:'+d);

DOWNLOAD
The zip file includes the JSON jQuery Plugin and Cookie jQuery Plugin together with an example page on how to use them.

download: jQuery Cookie Plugin (23.84KB) added: 02/01/2010 clicks: 1695

Tweet this!