Posts Tagged "snippet"

Experiment Online Writable Book Using Jquery Plugins

January 3rd, 2013 by aditia rahman / 1 Comment  

     

Lately I’ve been playing with some jquery plugin, one of them is flipbook jquery plugin. And I have an simple idea to creating an online application that look like a book that can be edited on the fly, which mean do not need admin area to edit the content.

This example only presenting the front end, each page are editable using inline rich text editor, if the content are longer than the page height it will presented using scroller. I’m just thinking maybe this idea can be applied to became wordpress theme, and maybe good for some history writer.

JQuery Image Animation Trick With Mouse Position

December 27th, 2012 by aditia rahman / No Comments  

     

In this short tutorial post, I create a simple code in jquery to creating an animation look a like effect, that triggered by mouse cursor position. This trick can be used for animating photo profile, with changing the image source on html element or in this case I change the class value.

Basically this post inspired by Any.DO about page, example in this post is a simpler one, all you need is to detect image offset (width and height), image position relative to windows, document mousemove event to detect mouse position, and the conditional statement to decide which image you want to show.

Create Simple Web Installer For Codeigniter Application

October 24th, 2012 by aditia rahman / No Comments  

     

When you installing a fresh cms on your server usually you will find a form for setting up your database setting, admin, etc, this feature often can be found on popular cms. In this post I try to create simple installer for codeigniter application, this might help after you finish create your own custom web project and don’t want to make confuse your client with manual install by editing php file.

Jquery CSS Animated Menu

October 8th, 2012 by aditia rahman / No Comments  

     

Few days ago I try to create a simple navigation menu with a css rotating animation, using css animation and features sure it possible to do this, but in this case I want the animation applied when mouse over event are triggered.

The problem using css hover menu is when mouse hover triggered, the element are starting to rotate even if the mouse hover on the corner of the element, and the animation suddenly stop cause the element already leave the mouse cursor.

Simple Ajax Pagination With JQuery and Codeigniter

November 22nd, 2011 by aditia rahman / 13 Comments  

     

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.

Sumon Math Game With JQuery

October 9th, 2011 by aditia rahman / No Comments  

     

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.

Swipe Like Effect Based On JQuery UI Draggable

August 28th, 2011 by aditia rahman / 1 Comment  

     

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>

Create Simple Ribbon With CSS

June 13th, 2011 by aditia rahman / 4 Comments  

     

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.

ExtJS: Simple File Browser

June 1st, 2011 by aditia rahman / 18 Comments  

     

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.

Create CSS Circle Button

May 20th, 2011 by aditia rahman / 4 Comments  

     

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.