Superdit.com » snippet http://superdit.com blogging, design, tech, and web Thu, 19 Jan 2012 07:50:35 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Simple Ajax Pagination With JQuery and Codeigniter http://superdit.com/2011/11/22/simple-ajax-pagination-with-jquery-and-codeigniter/ http://superdit.com/2011/11/22/simple-ajax-pagination-with-jquery-and-codeigniter/#comments Tue, 22 Nov 2011 01:41:31 +0000 aditia rahman http://superdit.com/?p=9336 Continue Reading]]> Codeigniter pagination class is really useful for me, it help to cut the repetitive task when we are creating pagination with large data, today I want to share a little of my thought, using codeigniter pagination class with ajax jquery. Here I show with a simple codeigniter code.  This post only show the code example, cause i don’t think it necessary to provide a downloadable code.

codeigniter ajax pagination jquery

Controller

Here are the controller, to make it easier the data in this example using a static array variable, so it very easy for us to get the data by the array index, and we need to load the url helper and of course the pagination library.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class User extends CI_Controller {

  public function index($start = 0) {
    $data_paging = array('John 1', 'John 2', 'John 3', 'John 4',
      'John 5', 'John 6', 'John 7', 'John 8', 'John 9', 'John 10',
      'John 11', 'John 12', 'John 13', 'John 14', 'John 15', 'John 16',
      'John 17', 'John 18', 'John 19', 'John 20', 'John 21', 'John 22',
      'John 23', 'John 24', 'John 25', 'John 26', 'John 27', 'John 28',
      'John 29', 'John 30', 'John 31', 'John 32', 'John 33', 'John 34',
      'John 35', 'John 36', 'John 37', 'John 38', 'John 39', 'John 40',
      'John 41', 'John 42', 'John 43', 'John 44', 'John 45', 'John 46',
      'John 47', 'John 48', 'John 49', 'John 50', 'John 51', 'John 52',
      'John 53', 'John 54');

    $this->load->helper('url');
    $this->load->library('pagination');

    $config['base_url']   = site_url('user/index');
    $config['total_rows'] = count($data_paging);
    $config['per_page']   = 5;

    $data['user'] = array();

    for ($i=$start; $i<$start+$config['per_page']; $i++) {
      if (isset($data_paging[$i])) {
        $data['user']['name'][] = $data_paging[$i];
      }
    }

    $this->pagination->initialize($config);
    $data['pagination'] = $this->pagination->create_links();

    if ($this->input->post('ajax')) {
      $this->load->view('user/ajax_index', $data);
    } else {
      $this->load->view('user/index', $data);
    }
  }
}

?>
View

The jquery code I added on the top of the page, and these are where the idea lies, put the pagination content on some div element with unique id, and with jquery you can applied the click function on each pagination link. The content that will be updated is div#content you can add a loading message by your self, the ajax content will update not only the data but the pagination too.

<!DOCTYPE html>
<html>
<header>
  <title>CodeIgniter Ajax Jquery Pagination</title>
  <script src="<?php echo base_url(); ?>assets/js/jquery-1.6.4.min.js"></script>
  <script>
  $(function() {
    applyPagination();

    function applyPagination() {
      $("#ajax_paging a").click(function() {
        var url = $(this).attr("href");
        $.ajax({
          type: "POST",
          data: "ajax=1",
          url: url,
          beforeSend: function() {
            $("#content").html("");
          },
          success: function(msg) {
            $("#content").html(msg);
            applyPagination();
          }
        });
        return false;
      });
    }
  });
  </script>
</header>
<body>
<div id="content">
  <div id="data">
    <?php foreach($user['name'] as $u): ?>
        <div><?php echo $u; ?></div>
    <?php endforeach; ?>
  </data>

  <div id="ajax_paging">
    <?php echo $pagination; ?>
  </div>
</div>
</body>
</html>
Ajax View
<div id="data">
  <?php foreach($user['name'] as $u): ?>
      <div><?php echo $u; ?></div>
  <?php endforeach; ?>
</data>

<div id="ajax_paging">
  <?php echo $pagination; ?>
</div>
]]> http://superdit.com/2011/11/22/simple-ajax-pagination-with-jquery-and-codeigniter/feed/ 2 Sumon Math Game With JQuery http://superdit.com/2011/10/09/sumon-math-game-with-jquery/ http://superdit.com/2011/10/09/sumon-math-game-with-jquery/#comments Sun, 09 Oct 2011 13:24:55 +0000 aditia rahman http://superdit.com/?p=8736 Continue Reading]]> In today post I want to share how I make a simple sumon math game based on JQuery, this game inspired by hyperandroid, this game it quite nice to practice your self concentration about math addition.

JQuery Sumon Game 

This post will create that simple nice game, just to show that you can make it with simple jquery, please note that I only add the basic rule of the game, which are, we have to pick the total number that matched the appear random number thats all.

Demo | Download

JQuery

In this example i’m using a little JQuery UI effect, so not to forget to include it on your script.

<script type="text/javascript">
function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

Array.prototype.clean = function(deleteValue) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == deleteValue) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
};

var sum = 0;
var tempindex = 0;
var numbers = new Array();

function generateRandomSum() {
    var looprand    = randomFromTo(1, 3);
    var total       = 0;
    var arrayIndex  = new Array();

    if (looprand > numbers.length) {
        looprand = numbers.length;
    }

    for (j=0; j<looprand; j++) {
        var randindex = randomFromTo(0, numbers.length - 1);
        randindex = getUnique(randindex, arrayIndex);

        total = total + numbers[randindex];
        arrayIndex[j] = randindex;
    }
    sum = total;
    $("#nextsum").html(total);
}

function getUnique(index, arrayIn) {
    if ((jQuery.inArray(index, arrayIn) == -1)) {
        return index;
    } else {
        rindex = randomFromTo(0, numbers.length - 1);
        return getUnique(rindex, arrayIn);
    }
}

var sumtemp = 0;
var numtemp = new Array();

// store temporary index in array
var arrIndex = new Array();
function boxClick(obj) {
    if (!$(obj).hasClass("disable")) {
        var clickedindex = parseInt($(obj).attr("id").replace("num", ""));
        var temp = parseInt($(obj).find("p").html());

        if (!$(obj).hasClass("red")) {
            $(obj).addClass("red clicked");
            // store clicked index in array
            arrIndex[tempindex] = clickedindex;
            sumtemp = sumtemp + temp;
            tempindex++;

            // temporary sum is match
            if (sumtemp == sum) {
                $(".clicked").unbind("click");
                $(".clicked").removeAttr("id");
                $(".clicked").addClass("disable");
                $(".clicked").animate({
                   backgroundColor: "#e3e3e3",
                   color: "#e3e3e3",
                   borderColor: "#e3e3e3"
                }, 500, function() {
                    $(".disable").removeClass("clicked");
                });

                // change each box id
                var y = 0;
                $("#dimcontainer div.boxnum").each(function(index) {
                    if (!$(this).hasClass("disable")) {
                        $(this).attr("id", "num"+y);
                        y++;
                    }
                });

                // delete matched number
                for ( z = 0; z < arrIndex.length; z++) {
                    delete numbers[arrIndex[z]];
                }

                // delete temporay index
                for ( e = 0; e <= arrIndex.length; e++) {
                    delete arrIndex[e];
                }
                arrIndex.clean(undefined);
                numbers.clean(undefined);

                sum = 0;
                sumtemp = 0;
                // reset index
                tempindex = 0;

                generateRandomSum();

                // Game Finished
                if (numbers.length == 0) {
                    $("#nextsum").html("Thanks For Playing!");
                }
            }

            // temporary sum not match
            if (sumtemp > sum) {
                $("#dimcontainer").effect("shake", { times: 1 }, "fast", function() {
                    sumtemp = 0;
                    $(".boxnum").removeClass("red");
                    $(".clicked").removeClass("clicked");
                    $("#sum").html(sumtemp);

                    // delete the temporary array & reset index
                    numtemp = new Array();
                    tempindex = 0;
                });
            }
        } else {
            $(obj).removeClass("red");
            $(obj).removeClass("clicked");

            // remove clicked index
            for (x = 0; x < arrIndex.length; x++) {
                if (arrIndex[x] == clickedindex) {
                    arrIndex.splice(x, 1);
                }
            }
            tempindex--;

            sumtemp = sumtemp - temp;
        }
    }
}

function start() {
    // create a number of box and generate random number in array
    sum          = 0;
    sumtemp      = 0;
    tempindex    = 0;
    var val          = parseInt($("#cbdim").val());
    var boxloop      = val * val;
    var boxleft      = ($(window).width() - (val * 78)) / 2;
    $("#dimcontainer").html('<div id="boxclear"></div>');
    $("#dimcontainer").css({
        width: (val * 78) + "px",
        left: boxleft + "px"
    });

    for ( i = 0; i < boxloop; i++) {
        numbers[i] = randomFromTo(1, 15);
        $('#boxclear').before('<div class="boxnum" id="num'+i+'" '+
            ' onclick="boxClick(this);"><p>'+numbers[i]+'</p></div>');
    }
    generateRandomSum();
}
</script>

1. function randomFromTo, from admixweb, this function will get random number between the two input parameter.

2. function  Array.prototype.clean , from stackoverflow, this function will clean the array, I use this with javascript delete function to cleaning the array, since I haven’t found how to destroying an array in javascript.

3. function generateRandomSum, this function will pick the total random in array, the total picked number is random from one to three, and each index of the array must be unique.

4. function getUnique, this function will get unique index of array that stored in array, this are recursive function, it will continue run until find the unique array index.

5. function boxClick, this is the main event function of this example, many array variable used in this function, I admit I fell a little bit confuse when debugging this, that I have to delete array, change array, clean. etc.

6. function start, this is the initialization when displaying the box, it creating each box by looping on the fly, based on the dimensions size that picked.

HTML
<div id="container">
    <div id="pick">
        Pick Dimension: &nbsp;
        <select id="cbdim" style="font-size:18px;">
            <option value="3">3 x 3</option>
            <option value="4">4 x 4</option>
            <option value="5">5 x 5</option>
            <option value="6">6 x 6</option>
            <option value="7">7 x 7</option>
        </select>
        <button id="btnstart" onclick="start();">Start Game !</button>
    </div>
    <p id="pnext">Next Total: &nbsp;<span id="nextsum">0</span></p>

    <div id="dimcontainer">
        <div id="boxclear" style="clear:both"></div>
    </div>
</div>
CSS
* {
    font-family: Arial, "Free Sans";
}
body {
    background: #fff url("circles.png") repeat right top;
}
#container {
    margin: 0 auto;
    text-align: center;
}
#dimcontainer {
    padding: 2px;
    margin: 0 auto;
    left: 500px;
}
.boxnum {
    text-align: center;
    cursor: pointer;
    border: 2px solid #e3e3e3;
    background: #fff;
    width: 70px;
    height: 70px;
    margin: 2px;
    float: left;
    color: #D80000;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
}
.boxnum:hover {
    background: #e3e3e3;
}
.boxnum p {
    margin-top: 20px;
    font-size: 28px;
    font-weight: bold;
    text-shadow: -1px 1px 1px #fff;
}
.red {
    background: #ff0000;
    border-color: #ff0000;
}
.red:hover {
    background: #ff0000 !important;
}
#boxclear {
    clear: both;
}
#pnext {
    font-size: 18px;
}
#nextsum {
    font-weight: bold;
    font-size: 30px;
    position: relative;
    top: 3px;
}
#pick {
    font-size: 18px;
}

That’s all, I know this example is not perfect but at least this is one of the way how you make it, you can improve it by adding some several features like, game scoring, help instruction, difficulty (by adding range in the random number), some bug fixing for preventing rapid click, etc.

Demo | Download

JQuery Sumon Game

]]> http://superdit.com/2011/10/09/sumon-math-game-with-jquery/feed/ 0 Swipe Like Effect Based On JQuery UI Draggable http://superdit.com/2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/ http://superdit.com/2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/#comments Sun, 28 Aug 2011 12:34:34 +0000 aditia rahman http://superdit.com/?p=8401 Continue Reading]]> Swipe effect has becoming popular when mobile application usage increase, it a nice touch effect to slide between layout, and some of mobile web application framework has already have this feature for example you can see sencha touch carousel component, but I think the swipe effect can be good enough too, not only for mobile web but for web desktop too. Here I want to share a little idea creating swipe like effect based on jquery UI draggable. Basically the idea is really simple it is the combination of  revert option in jquery ui draggable, jquery animation for moving an element, and mouse event for firing when the item have to swipe.

HTML
<div id="container">
    <div id="swipe_container">
        <div class="item">Item Swipe 1</div>
        <div class="item">Item Swipe 2</div>
        <div class="item">Item Swipe 3</div>
        <div class="item">Item Swipe 4</div>
        <div class="item">Item Swipe 5</div>
        <div style="clear:both"></div>
    </div>
</div>
Demo
CSS

Make sure the swipe container width equal or larger than total items width for example you have 3 item swipe with 300px width, use minimum 900px for swipe container width.

#container {
    width: 320px;
    height: 480px;
    overflow: hidden;
    border: 5px solid #0099cc;
    margin:0 auto;
}
#swipe_container {
    width: 1600px;
    background: #999;
}
.item {
    font-size: 24px;
    width: 320px;
    height: 480px;
    float: left;
    background: #e3e3e3;
}
JQuery

This jquery code will count the items inside the swipe container, this used for detecting whether it is the first item or the last item to swipe, if true, the position not change and to make it look like swiping an item, add the revent option on the draggable function.

$(document).ready(function() {
    var cont_pos = $("#swipe_container").position();
    var item_width = $(".item").width();
    var items = $("#swipe_container > div.item").length;
    var item_index = 1;
    var cont_post_temp;

    $("#swipe_container").draggable({ axis: "x", revert: true });

    function bindMouseUp() {
        $("#swipe_container").unbind('mouseup');
        cont_post_temp = $("#swipe_container").position().left;
        if (cont_pos.left > cont_post_temp && item_index != items) {
            // swipe to right
            $("#swipe_container").draggable("option", "revert", false);
            var moveLeft = cont_pos.left - cont_post_temp;
            moveLeft = Math.abs(item_width - moveLeft);
            $("#swipe_container").animate({
                left: '-=' + moveLeft
            }, 500, function() {
                $("#swipe_container").draggable("option", "revert", true);
                cont_pos = $("#swipe_container").position();
                $("#swipe_container").bind('mouseup', function() {
                    bindMouseUp();
                });
            });
            item_index++;;
        } else if (cont_pos.left < cont_post_temp && item_index != 1) {
            // swipe to left
            $("#swipe_container").draggable("option", "revert", false);
            var moveLeft = cont_post_temp - cont_pos.left;
            moveLeft = Math.abs(item_width - moveLeft);
            $("#swipe_container").animate({
                left: '+=' + moveLeft
            }, 500, function() {
                $("#swipe_container").draggable("option", "revert", true);
                cont_pos = $("#swipe_container").position();
                $("#swipe_container").bind('mouseup', function() {
                    bindMouseUp();
                });
            });
            item_index = item_index - 1;
        } else {
            // on the beginning or end item swipe
            $("#swipe_container").draggable( "option", "revert", true );
            $("#swipe_container").bind('mouseup', function() {
                bindMouseUp();
            });
        }
    }

    $("#swipe_container").mouseup(function() {
        bindMouseUp();
    });
});

In above code the swipe function is triggered on bingMouseUp, in this function I have to bind and unbind the mouse event and the revert for preventing abuse mouse event, from user. That is all I know this not perfect, like this swipe only happen when the mouse up, but when mouse leave an item it came back to previous position.

Demo
]]> http://superdit.com/2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/feed/ 1 Create Simple Ribbon With CSS http://superdit.com/2011/06/13/create-simple-ribbon-with-css/ http://superdit.com/2011/06/13/create-simple-ribbon-with-css/#comments Mon, 13 Jun 2011 01:05:56 +0000 aditia rahman http://superdit.com/?p=7069 Continue Reading]]> Ribbon style right now has became one of web design trend, it has been used in main menu navigation, background, header style, and any other part of web design, when I find some design with ribbon style web design, I found a post on myinkblog showcase ribbons in web design, many of these design using image as a ribbon, and here I try to forcing on creating simple ribbon style using CSS.

CSS Ribbon

To achieve this I’m using a CSS triangle tricks from Jon Rohan, placed on the edge of the ribbon, and another two css triangle to create a shadow effect below the center ribbon.

Demo

All Code
<!DOCTYPE html>
<html>
    <head>
        <title>CSS Ribbon</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #main {
                border: 1px solid #fff;
                padding: 100px;
            }
            #menu {
                background: #c66969;
                width: 500px;
                height: 50px;
                color: #fff;
                font-size: 18px;
                text-align: center;
                position: relative;
                top: -20px;
            }
            #menu span {
                position: relative;
                top: 13px;
            }
            .cont {
                background: #b14444;
                width: 100px;
                height: 50px;
            }
            .edge-right {
                border-color: #b14444 white #b14444 #b14444;
                border-style:solid;
                border-width:25px;
                width:0;
                height:0;
                position: relative;
            }
            .edge-left {
                border-color: #b14444 #b14444 #b14444 white;
                border-style:solid;
                border-width:25px;
                width:0;
                height:0;
                position: relative;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .clear {
                clear: both;
            }
            .edge-right-small {
                position: absolute;
                top: 138px;
                left: 734px;
                border-color: #fff #fff #b14444 #873434;
                border-style:solid;
                border-width:0 0 21px 25px ;
                width:0;
                height:0;
            }
            .edge-left-small {
                position: absolute;
                top: 138px;
                left: 258px;
                border-color: #b14444 #873434 #b14444 red;
                border-style:solid;
                border-width:0 25px 21px 0;
                width:0;
                height:0;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="edge-left left"></div>
            <div class="cont left"></div>
            <div id="menu" class="left"><span>Example of CSS ribbon<span></div>
            <div class="cont left"></div>
            <div class="edge-right left"></div>
            <div class="clear"></div>
        </div>

        <div class="edge-right-small"></div>
        <div class="edge-left-small"></div>
    </body>
</html>
]]> http://superdit.com/2011/06/13/create-simple-ribbon-with-css/feed/ 4 ExtJS: Simple File Browser http://superdit.com/2011/06/01/extjs-simple-file-browser/ http://superdit.com/2011/06/01/extjs-simple-file-browser/#comments Wed, 01 Jun 2011 06:59:01 +0000 aditia rahman http://superdit.com/?p=6871 Continue Reading]]> ExtJS has a lot of great components to build complete web application that can be look like desktop application, In today post I want to show how to create a very simple file browser in ExtJS, with PHP backend we can easily get file and folder on the system.

ExtJS File Browser

First this example have some limitation, I try it on my XAMPP localhost, so I assumed the it is the top parent of all directories, the tree directory only load once when the page is loaded, file preview only in grid component.

download

ExtJS

The example container is based on window component, which have two items inside, they are treePanel and gridPanel, the gridPanel will load dynamically, trigerred when user click on of the tree node.

Ext.onReady(function() {
    store_dir = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'get_dir.php'
        }
    });

    tree_dir = Ext.create('Ext.tree.Panel', {
        title: 'Localhost Directory',
        rootVisible: false,
        store: store_dir,
        split: true,
        region: 'west',
        collapsible: true,
        floatable: false,
        width: 200,
        useArrows: true,
        listeners: {
            itemclick: {
                fn: function(view, record, item, index, event) {
                    store_file.load({
                        url: 'get_file.php?dir=' + record.data.id
                    });

                    nodeId = record.data.id;
                    htmlId = item.id;
                }
            }

        }
    });

    Ext.define('File', {
       extend: 'Ext.data.Model',
       fields: ['filename', 'filesize', 'filedate']
    });

    store_file = Ext.create('Ext.data.Store', {
        model: 'File',
        proxy: {
          type: 'ajax',
          url: 'get_file.php',
          reader: {
              type: 'json',
              root: 'files'
          }
        }
    });

    grid_file = Ext.create('Ext.grid.Panel', {
        title: 'File List',
        region: 'center',
        store: store_file,
        columns: [
            { header: 'Name', width: 170, dataIndex: 'filename' },
            { header: 'Size', width: 100, dataIndex: 'filesize' },
            { header: 'Last Modified', width: 200, dataIndex: 'filedate' }
        ],
        viewConfig: {
            stripeRows: true
        }
    });

    win = Ext.create('widget.window', {
        title: 'ExtJS Simple File Browser',
        width: 700,
        height: 400,
        layout: 'border',
        bodyStyle: 'padding: 5px;',
        items: [tree_dir, grid_file]
    });

    win.show();
});
PHP (get_dir.php)

This file is for fetching all directory on your XAMPP htdocs directory, using $_SERVER['DOCUMENT_ROOT'] variable. If you have many directory on htdocs, it will take time to load. In this php file I used a recursive function to get all the directory with all the sub directory by one call function, that’s why it will take time to load, and create a json format from it.

<?php

class MyDirectory {

    public $json = '[';

    public function get_children($dir, $child) {
        $dh = opendir($dir);
        while (($file = readdir($dh)) !== false) {
            if ($file != '.' AND $file != '..' ) {
                if (filetype($dir . $file) == 'dir') {
                    // must be checked if this folder have other subfolder
                    if ($this->count_sub_dir($dir . $file . '/') == 0) {
                        $this->json .= '{text:"'.$file.'", leaf: true, id: "'.$dir . $file.'"},';
                    } else {
                        $this->json .= '{text:"'.$file.'", id: "'.$dir . $file.'", children: [';
                        $this->get_children($dir . $file . '/', true);
                    }
                }
            }
        }
        if ($child) {
            $this->json .=  ']},';
        }
        closedir($dh);
    }

    public function count_sub_dir($dir) {
        $dh = opendir($dir);
        $countdir = 0;
        while (($file = readdir($dh)) !== false) {
            if ($file != '.' AND $file != '..' ) {
                if (filetype($dir . $file) == 'dir') {
                    $countdir++;
                }
            }
        }
        closedir($dh);
        return $countdir;
    }
}

$host_dir = $_SERVER['DOCUMENT_ROOT']."/";

$dir = new MyDirectory();

$dir->get_children($host_dir, false);

$dir->json .= ']';
$dir->json = str_replace(",]", "]", $dir->json);

echo($dir->json);

?>
PHP (get_file.php)

And this is the last file to get all the file (without any directory) in specific directory, the parameter sent from ExtJS tree node, when it clicked.

<?php

$dir = $_GET['dir'] . "/";

$dh = opendir($dir);
$files = array();
while (($file = readdir($dh)) !== false) {
    if ($file != '.' AND $file != '..' ) {
        if (filetype($dir . $file) == 'file') {
            $files[] = array(
                'filename' => $file,
                'filesize' => filesize($dir . $file). ' bytes',
                'filedate' => date("F d Y H:i:s", filemtime($dir . $file))
            );
        }
    }
}
closedir($dh);

echo(json_encode(array('files' => $files)));

?>

Well that all hope can give some idea to create much larger application or adding some more feature like icons view (using DataView component), create, edit, delete file, etc.

download
ExtJS File Browser

]]> http://superdit.com/2011/06/01/extjs-simple-file-browser/feed/ 16 Create CSS Circle Button http://superdit.com/2011/05/20/create-css-circle-button/ http://superdit.com/2011/05/20/create-css-circle-button/#comments Fri, 20 May 2011 07:38:44 +0000 aditia rahman http://superdit.com/?p=5950 Continue Reading]]> With the new features that CSS3 have creating a variety of button can be fun, few days ago I read a great tutorial (in germany) about creating CSS3 push down button, basically this example just continuing from that post.

CSS 3D Circle Button

In this example I modified the border radius, button padding, height and width so, it can look like a circle. And added the rotateX property that currently only supported in web kit browser, to make it look like from different angle.

View Demo

This all the simple code you can directly copy paste on your editor

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body {
        font-family: Arial, sans-serif;
    }

    #container {
        margin: 120px auto;
        text-align: center;
    }

    .button {
        -webkit-transform: rotateX( 35deg );
        position: relative;
        display: inline-block;
        width: 100px;
        padding: 42px 15px;
        margin: 0px 10px;
        background-color: #C91826;
        color: #fff;
        font-weight: bold;
        font-size: 40px;
        text-decoration: none;
        text-align: center;
        text-shadow: 0px -1px 0px rgba(0,0,0,0.5);

        border: 1px solid;
        border-color: #B21522;
        border-radius: 78px;
        -moz-border-radius: 78px;
        -webkit-border-radius: 78px;

        box-shadow: 		inset 0px -4px 5px rgba(255,255,255,0.2),
                            inset 0px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20,
                            /**/
                            0px 8px 5px rgba(0,0,0,0.5);

        -moz-box-shadow: 	inset 0px -4px 5px rgba(255,255,255,0.2),
                            inset 0px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20,
                            /**/
                            0px 8px 5px rgba(0,0,0,0.5);

        -webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2),
                            inset 5px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20;
    }

    .button:hover {
        background-color: #B21522;
        color: #e3e3e3;
    }

    .button:active {
        top: 8px;
        box-shadow: 		inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);

        -moz-box-shadow: 	inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);

        -webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);
    }
    </style>
</head>
<body>
  <div id="container">
    <a href="#" class="button">Push</a>
    <a href="#" class="button">Stop</a>
  </div>
</body>
</html>
Resources

joQuery : CSS3 Push Down Buttons

Line 25: CSS Design Stylish Button

]]> http://superdit.com/2011/05/20/create-css-circle-button/feed/ 4 Create Dynamic Tabs With JQuery http://superdit.com/2011/05/08/create-dynamic-tabs-with-jquery/ http://superdit.com/2011/05/08/create-dynamic-tabs-with-jquery/#comments Sun, 08 May 2011 11:58:12 +0000 aditia rahman http://superdit.com/?p=6483 Continue Reading]]> Tabs has become a common feature in web user interface, in this post I create an example creating a dynamic tab with JQuery. In JQuery UI there is already ready to use plugin to create tabbed content, but I did not find a way to adding dynamic tab function.

jquery dynamic tab

This example using li tag as tab element, the technique are really simple, when new tab created, an id generated with counter variable, also the content element created too, with the matched counter.

view demo

HTML

This code only the container, there is only one li tag that contain add new tab button.

<ul id="tabul">
    <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
</ul>
<div id="tabcontent"></div>
JQuery

If we talk about dynamic element, we must be create an element on the fly, in this case we create the new tab and new content element. In addtab function we have to bind the “click” event because the element that created on fly will not work, if we applied the event on ready function.

$(function() {
    var total_tabs = 0;

    // initialize first tab
    total_tabs++;
    addtab(total_tabs);

    $("#addtab, #litab").click(function() {
        total_tabs++;
        $("#tabcontent p").hide();
        addtab(total_tabs);
        return false;
    });

    function addtab(count) {
        var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
        $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');
        $("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');

        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");

        $("#t"+count).bind("click", function() {
            $("#tabul li").removeClass("ctab");
            $("#t"+count).addClass("ctab");
            $("#tabcontent p").hide();
            $("#c"+count).fadeIn('slow');
        });

        $("#close"+count).bind("click", function() {
            // activate the previous tab
            $("#tabul li").removeClass("ctab");
            $("#tabcontent p").hide();
            $(this).parent().prev().addClass("ctab");
            $("#c"+count).prev().fadeIn('slow');

            $(this).parent().remove();
            $("#c"+count).remove();
            return false;
        });
    }
});
CSS
#tabul {
    padding: 0;
    margin: 0;
    padding: 5px 0;
}
#tabul li {
    display: inline;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
    cursor: pointer;
}
.ntabs {
    background: #BDC7D5;
    margin-right: 1px;
    font-size: 11px;
    font-weight: bold;
    color: #333;
    border: 1px solid #BDC7D5;
    padding: 5px 3px 5px 8px;
}
.add {
    padding: 5px 8px;
}
#addtab {
    font-size: 16px;
    text-decoration: none;
    position: relative;
    top: 2px;
    color: #333;
}
#addtab:hover {
    color: #999;
}
.ctab {
    background: #E7EDF6;
    position: relative;
    top: 2px;
    border-bottom-width: 0;
}
.close {
    text-decoration: none;
    color: #999;
    font-weight: bold;
    font-size: 14px;
    padding: 0 4px;
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    border-radius: .2em;
}
.close:hover {
    background: #999;
    color: #333;
}
#tabcontent {
    border: 1px solid #BDC7D5;
    background: #E7EDF6;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #666;
    font-size: 24px;
}

Yep, thats all, some suggestion are you can put the tab in an div element and show as a hidden content, expand the ul tag dynamically so you can have unlimited tabs horizontally, and add a navigation button to browse the tab by playing the left css property.

view demo

jquery dynamic tab demo

Other Sources

jQuery tabs: Create HTML tabs using jQuery UI

jQuery Tabs

How To Create Tabs Using jQuery

jQuery Tabs Made Easy

]]> http://superdit.com/2011/05/08/create-dynamic-tabs-with-jquery/feed/ 6 JQuery Detect Mouse Click Event http://superdit.com/2011/04/23/jquery-detect-mouse-click-event/ http://superdit.com/2011/04/23/jquery-detect-mouse-click-event/#comments Sat, 23 Apr 2011 11:10:46 +0000 aditia rahman http://superdit.com/?p=6237 Continue Reading]]> This short post I want to share how JQuery handle the mouse click event, that include left click, right click and middle click, also this example show how to moving an html element based on cursor position.

Jquery Mouse Click

With CSS capability, I create some html element that shows like a physical mouse, when the appropriate button clicked the color change as well. The result may something look like on the picture above.

View Demo

The HTML

These are the html element used for this example, very simple, the mouse scroll using relative position, that relative from the container, and as usual on each corner, rounded corner property used.

<div id="content">
  <div class="top" id="topleft"></div>
  <div class="top" id="topright"></div>
  <div id="topmiddle"></div>
  <div class="clear"></div>
  <div id="mbody"></div>
</div>
The JQuery

The right click menu is turned off. To make the main element following the cursor position, mousemove event applied to document selector, with the change of the top and left css property. The background change when the mousedown event triggered and back to current condition when mouseup event triggered.

$(document).ready(function() {
    var cwidth_half = $("#content").width() / 2;
    var cheight_half = $("#content").height() / 2;

    $(document).mousemove(function(e) {
        $("#content").css({
            left: (e.pageX-cwidth_half)+'px',
            top: (e.pageY-cheight_half)+'px'
        });
    });

    $(document).bind("contextmenu", function(e) {
        return false;
    });

    $(document).mousedown(function(event) {
        switch (event.which) {
            case 1:
                $("#topleft").css("background", "#333");
                break;
            case 2:
                $("#topmiddle").css("background", "#333");
                break;
            case 3:
                $("#topright").css("background", "#333");
                break;
        }
    });

    $(document).mouseup(function(event) {
        switch (event.which) {
            case 1:
                $("#topleft").css("background", "#d3d3d3");
                break;
            case 2:
                $("#topmiddle").css("background", "#999");
                break;
            case 3:
                $("#topright").css("background", "#d3d3d3");
                break;
        }
    });

});
The CSS
#content {
    position: relative;
    width: 310px;
    height: 310px;
}
.top {
    float:left;
    width:150px;
    height: 150px;
    background: #d3d3d3;
    border: 1px solid #666;
}
#topleft {
    -webkit-border-radius: 10em .5em 0 0;
    -moz-border-radius: 10em .5em 0 0;
    border-radius: 10em .5em 0 0;
    border-right-width: 0;
}
#topright {
    -webkit-border-radius: .5em 10em 0 0;
    -moz-border-radius: .5em 10em 0 0;
    border-radius: .5em 10em 0 0;
}
#topmiddle {
    width:30px;
    height: 100px;
    position: relative;
    -webkit-border-radius: 5.5em;
    -moz-border-radius: 5.5em;
    border-radius: 5.5em;
    background: #999;
    border: 1px solid #666;
    z-index: 1;
    top: 15px;
    left: 135px;
}
.clear {
    clear: both;
}
#mbody {
    border: 1px solid #666;
    border-top-width: 0;
    background: #d3d3d3;
    width: 301px;
    height: 250px;
    -webkit-border-radius: 0 0 15.5em 15.5em;
    -moz-border-radius: 0 0 15.5em 15.5em;
    border-radius: 0 0 15.5em 15.5em;
}

View Demo

]]> http://superdit.com/2011/04/23/jquery-detect-mouse-click-event/feed/ 2 Simple Images Slideshow With JQuery http://superdit.com/2011/04/18/simple-images-slideshow-with-jquery/ http://superdit.com/2011/04/18/simple-images-slideshow-with-jquery/#comments Mon, 18 Apr 2011 03:23:19 +0000 aditia rahman http://superdit.com/?p=6172 Continue Reading]]> Slideshow is one of the most used feature in a web application, especially in a photo sharing site like flickr, photobucket, or maybe for used is some online store to showcasing some available new product, whatever it for, it is up to you as developer, In this post I want to share my example creating very simple slideshow base on JQuery.

jquery slideshow

I assume all the images have the same size, and there are the navigation to switch between the images, like prev, next, first and last.

View Demo | Download Source

The HTML

Here are the html code, this example using 6 images, they are hardcoded in html, and there are a list of thumbnail images, to switch directly to seletected images.

<div id="container">
  <div id="navigate">
      <a href="" id="linkfirst">&laquo; first</a>
      <span id="spanfirst">&laquo; first</span>
      <a href="" id="linkprev">&lsaquo; prev</a>
      <span id="spanprev">&lsaquo; prev</span>
      <a href="" id="linknext">next &rsaquo;</a>
      <span id="spannext">next &rsaquo;</span>
      <a href="" id="linklast">last &raquo;</a>
      <span id="spanlast">last &raquo;</span>
  </div>
  <div id="img_container">
      <div id="img_box">
          <img id="img1" src="img/original/01.jpg"/>
          <img id="img2" src="img/original/02.jpg"/>
          <img id="img3" src="img/original/03.jpg"/>
          <img id="img4" src="img/original/04.jpg"/>
          <img id="img5" src="img/original/05.jpg"/>
          <img id="img6" src="img/original/06.jpg"/>
          <div style="clear:both;"></div>
      </div>
  </div>
  <div id="imgthumb_box">
      <a href="" class="thumblink" id="imglink1"><img src="img/thumb/01.jpg"/></a>
      <a href="" class="thumblink" id="imglink2"><img src="img/thumb/02.jpg"/></a>
      <a href="" class="thumblink" id="imglink3"><img src="img/thumb/03.jpg"/></a>
      <a href="" class="thumblink" id="imglink4"><img src="img/thumb/04.jpg"/></a>
      <a href="" class="thumblink" id="imglink5"><img src="img/thumb/05.jpg"/></a>
      <a href="" class="thumblink" id="imglink6"><img src="img/thumb/06.jpg"/></a>
  </div>
</div>
The JQuery

Here are the main function for sliding the images, basically it just playing with left css property in image box element, default condition for the image box is left = 0px (in firefox), or left = ‘auto’ (in Chrome, Opera, IE).

For “next” navigation, if current position is on the last image, it will back to the first image, for “prev” navigation, if current position is on the first image, it will move to the last image, and when one of the image selected, the matched thumbnail will change it style.

$(document).ready(function() {
    var total = $("#img_box img").length;

    $("#imglink1 img").css({
        "border-color": "#0099cc",
        "top": "-5px"
    });

    $(".thumblink").click(function() {
        var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));
        var move = -($("#img"+imgnumber).width() * (imgnumber - 1));

        $("#img_box").animate({
            left: move
        }, 500);

        $("#imgthumb_box").find("img").removeAttr("style");
        $(this).find("img").css({
            "border-color": "#0099cc",
            "top": "-5px",
            "border-top-width": "-5px"
        });
        return false;
    });

    $("#navigate a").click(function() {
        var imgwidth = $("#img1").width();
        var box_left = $("#img_box").css("left");
        var el_id = $(this).attr("id");
        var move, imgnumber;

        if (box_left == 'auto') {
            box_left = 0;
        } else {
            box_left = parseInt(box_left.replace("px", ""));
        }

        // if prev
        if (el_id == 'linkprev') {
            if ((box_left - imgwidth) == -(imgwidth)) {
                move = -(imgwidth * (total - 1));
            } else {
                move = box_left + imgwidth;
            }

            imgnumber = -(box_left / imgwidth);
            if (imgnumber == 0) {
                imgnumber = total;
            }
        } else if (el_id == 'linknext') {
            // if in the last image, move to first
            if (-(box_left) == (imgwidth * (total - 1))) {
                move = 0;
            } else {
                move = box_left - imgwidth;
            }

            imgnumber = Math.abs((box_left / imgwidth)) + 2;
            if (imgnumber == (total + 1)) {
                imgnumber = 1;
            }
        } else if (el_id == 'linkfirst') {
            move = 0;
            imgnumber = 1;
        } else if (el_id == 'linklast') {
            move = -(imgwidth * (total - 1));
            imgnumber = total;
        }

        // styling selected image
        $("#imgthumb_box").find("img").removeAttr("style");
        $("#imglink"+imgnumber).find("img").css({
            "border-color": "#0099cc",
            "top": "-5px",
            "border-top-width": "-5px"
        });

        $("#navigate a").hide();
        $("#navigate span").show();

        $("#img_box").animate({
            left: move+'px'
        }, 400, function() {
            $("#navigate a").show();
            $("#navigate span").hide();
        });

        return false;
    });
});
The CSS

Make sure the image container apply overflow: hidden property, these are the main image container that contain all the images, actually all the images are placed inline, inside the container.

#container {
    margin-top: 40px;
}
#navigate {
    text-align: center;
}
#navigate a, span {
    position: relative;
    top: 3px;
    background: #0099cc;
    text-decoration: none;
    color: #fff;
    padding: 4px 8px 0 8px;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
}
#navigate a:hover {
    color: #d3d3d3;
}
#navigate span {
    display: none;
    color: #999;
}
#img_container {
    overflow: hidden;
    width: 500px;
    margin: 0 auto;
    border: 8px solid #0099cc;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}
#img_box {
    position: relative;
    width: 3000px;
    margin: 0;
}
#img_box img {
    float: left;
}
#imgthumb_box {
    text-align: center;
}
#imgthumb_box a {
    margin-left: 4px;
}
#imgthumb_box a img {
    border: 6px solid #e3e3e3;
    position: relative;
    top: 10px;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
}
#imgthumb_box a img:hover {
    border-color: #666;
}

View Demo | Download Source

jquery slideshow

]]> http://superdit.com/2011/04/18/simple-images-slideshow-with-jquery/feed/ 4 Displaying Twitter Search Result With Sencha Touch http://superdit.com/2011/04/15/displaying-twitter-search-result-with-sencha-touch/ http://superdit.com/2011/04/15/displaying-twitter-search-result-with-sencha-touch/#comments Fri, 15 Apr 2011 08:23:16 +0000 aditia rahman http://superdit.com/?p=6156 Continue Reading]]> Today I want to take another step in Learning Sencha Touch, if you already browse on all sencha touch official examples there are already have the same twitter search example and that is a better one, but when I try it look like the interface only optimized for tablet.

Sencha Touch Twitter Search

This example only created for smartphone resolution, and very simple single twitter search without pagination or load more function, and to fetch data twitter server here is using PHP.

View Demo | Download Source

(use mobile webkit browser to see demo)

Sencha Touch Code

The Sencha Touch code consist of four panel component one for main component, one for top toolbar, this panel not doing nothing but just showing application title, one for search textfield and button, and the last one for displaying search result

Ext.setup({
    onReady: function() {
        var topToolbar = new Ext.Toolbar({
            dock : 'top',
            ui: 'dark',
            title: 'Sencha Twitter Search'
        });

         var tpl = new Ext.XTemplate(
            '<div id="tweet_container">',
                '<tpl for=".">',
                    '<div class="tweet_data">',
                    '<div class="tweet_avatar">',
                        '<img width="30" height="30" src="{profile_image_url}"/>',
                    '</div>',
                    '<div class="tweet_content">',
                        '<a class="user" href="http://twitter.com/{from_user}">{from_user}</a>&nbsp;',
                        '{text}',
                    '</div>',
                    '<div class="clear"></div>',
                    '</div>',
                '</tpl>',
            '</div>'
         );

        var resultPanel = new Ext.Panel({
            layout: 'fit',
            style: 'padding-bottom: 10px;',
            tpl: tpl
        });

        var searchPanel = new Ext.Panel({
            padding: 10,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                flex: 4,
                xtype: 'textfield',
                style: 'margin-right: 10px;',
                id: 'textquery'
            },{
                flex: 2,
                xtype: 'button',
                text: 'Search',
                handler: function() {
                    var query = Ext.getCmp("textquery").getValue();
                    Ext.Ajax.request({
                        url: 'index.php?act=search&q='+query,
                        success: function(e) {
                            var obj = Ext.util.JSON.decode(e.responseText);
                            var msg = obj.results;
                            var html = tpl.apply(msg);
                            resultPanel.update(html);
                        }
                    });
                }
            }]
        });

        var myPanel = new Ext.Panel({
            dockedItems: [topToolbar],
            items: [searchPanel, resultPanel],
            scroll: 'vertical',
            style: 'background: #DDEEF6;',
            fullscreen : true
        });
    }
});

The result panel using XTemplate to displaying search result, and remember to set the config layout value to ‘fit’ , so it can be scrollable.

PHP Code

The PHP code fetch the search result as a JSON format, this is only using twitter search api, so we don’t need to register for using this api, here is the link to know more about twitter search api, in case you wanna know about other parameter or getting as other format.

if (isset($_GET["act"]) && $_GET["act"] == "search") {
    $url = 'http://search.twitter.com/search.json?q='.$_GET["q"];

    $content = file_get_contents($url);
    $array = json_decode($content);

    $data = array();

    foreach ($array->results as $var => $value)
    {
        // adding url
        $pattern = '/\b(https?:\/\/[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[A-Z0-9+&@#\/%=~_|$])/i';
        preg_match_all($pattern, $value->text, $regs);
        $loop = count($regs[0]);

        for ($i = 0; $i < $loop; $i++) {
            $value->text = str_replace($regs[0][$i], '<a class="outlink" href="'.$regs[0][$i].'">'.$regs[0][$i].'</a>', $value->text);
        }

        $data[] = array(
            "profile_image_url" => $value->profile_image_url,
            "from_user"         => $value->from_user,
            "text"              => $value->text
        );
    }

    $out = array(
        "success" => true,
        "results" => $data
    );

    echo json_encode($out);
    exit;
}

In PHP code there are a regex function I get from phpfreak to check whether the tweets contain some url, if yes it will change directly to html link element. Last this are the screen example, if you want to see the demo, better using your iphone, android smartphone or using the android emulator, cause I’m not creating condition for desktop browser or tablet.

View Demo | Download Source

Sencha Touch Twitter Search

]]> http://superdit.com/2011/04/15/displaying-twitter-search-result-with-sencha-touch/feed/ 1