Posts Tagged "snippet"

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.

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.

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.

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.

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>

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.