html5 saz (baglama)


Being amazed by the website Jam With Chrome i’ve decided to try by my self the development of a virtual html5 instrument.

A few years ago i’ve purchased a turkish instrument called “Saz” (or Baglama) so why not try to use it as a reference !

after a few search on the internet, i’ve found what i need :

Here is the link for the Demo : html5-saz.

Source code can be found Here on Github.

Opera Mobile emulator, tool for developing for mobile phones

Opera has released a great tool to test web applications on différent mobile devices which can improve web development with this site

many profiles are provided such as :

– LG
– Motorola
– Nokia
– Samsung etc ..

But unfortunately no apple’s iphone or ipad 🙂 Let us know if that affects you at foodlets.

Extjs, dynamic fieldsets with delete button

Extjs is powerful and flexible, fieldsets can be actually used to handle dynamic bloc fields ; such as publications for example which containing the same fields

here is a code example of what’s possible to do with fieldsets, in this case we add custom buttons for deletion



var form = new Ext.TabPanel({
        id: 'real-popin-edit-form-tab-id',
        border: false,
        labelWidth: 120,
        items: [
        new Ext.FormPanel({
            id: 'real-popin-edit-form-id',
            tbar : [{
                text: 'add fieldset',
                handler: fieldsetAdd,
                iconCls: 'new'
            labelWidth: 120,
            title: " .. ",
            items: [


var counter = 0;

fieldsetAdd = function()
        xtype: 'fieldset',
        width: 500,
        labelWidth: 120,
        title: "Fieldset [ " + counter ++ + ' ]' ,
        defaults: {
            width: 350
        defaultType: 'textfield',
        border: true,
        // for ie position pbs
        style: 'background-color: #F1F1F1; margin: 5px auto;position: relative;',
        iconCls: 'icon-properties',
        id : 'realisation-visuel-' + counter,
        items : [
            width: 18,
            xtype: 'button',
            name: 'AddDirectAttr',
            style: 'position: absolute; top: ' +
              (Ext.isIE|| Ext.isChrome|| Ext.isGecko ? 0:-20) + 'px; right: 10px;',
            tooltip: {
                text: 'Delete fieldset.'
            iconCls: 'delete',
            id : 'delete-' + counter,
            handler : function(t, e){
                Ext.MessageBox.confirm("Delete", "Are you sure ?" , function(btn){
                    if(btn == 'yes') {
                        currentId = t.getId();
                        temp = currentId.split('-');
                        Ext.getCmp('realisation-visuel-' + temp[1]).destroy();


            xtype : 'textfield',
            name : 'position-' + counter,
            fieldLabel: 'Position'
        }, {
            xtype : 'textarea',
            name  : 'description-' + counter,
            fieldLabel: 'Description'



and here is the result

Enjoy !

JQuery, Duplicate form items with .clone()

Assuming that we have a dynamic form creation, where we need to add as many form items as we need, the problem is that when we duplicate items we’ll get the same input names ..

So this is my own solution to this problem but if you have other methods don’t hesitate to share ^^

This is out form element to duplicate :

<ul >
    <div class="toClone">
        <li id="li_1" >
            <label for="element_1">Name </label>
                <input name="name" type="text" maxlength="255" value=""/>
        <li id="li_2" >
            <label for="element_2">Surname </label>
                <input  name="surname" type="text" maxlength="255" value=""/>

And this is the js, assuming that we have already set a button to add the cloned content :

counter = 0;
$('#addButton').live('click', function(){
  counter ++;
  cloned = $('.toClone').first().clone();
     name = $(this).attr('name').split('_');
     (this).attr('name', name[0] + '_' + counter);

   // path to parent element.
   cloned.prependTo($(this).parent().parent() ... );