arvindandrion.com

Grocery Checklist Logo

Arvind — Sat, 03 Jul 2010 15:52:50 +0000

I’m now going to do build this seriously this time . I’m working on a small personal project called grocery checklist. This is very simple, you just choose what items you want for example apple, grapes and mango. Once you have click each of them it will add to your basket and when your done, click next and it will bring to the print page . I think this will be fun and helpful. Making a checklist before you go to grocery can help you a lot especially when your on a budget. For now the available category is fruits. The most fun part is designing the items. I’m not a professional illustrator so I will try to make all the items good looking as much as possible. I have finished the layout and I will continue adding items in the following days if I’m not busy.

Jquery image slideshow

Arvind — Wed, 16 Jun 2010 03:38:08 +0000

Hi guys you might say that “Oh no! not another image slideshow” yes I know. I have made this plugin for me to keep things simple and use what exactly what is needed. Imagine using 2kb plugin I think less if compress. That’s a big discount ahahahahaah! I hope you got my point. Hey I’m not a fully, king or master javascript programmer I’m just starting up. So if you guys have a nice idea or good approach might as well share it in the comment. I might enhance this plugin by adding paging and more effects in transition. In the future I think.

Demo | Download

Jquery Code :

$(function(){
   $('#container').slideShow({
        container: '.cont',
        items: '.item',
        fade: 5000, /* Fading of images */
        transition: 4000 /* transition of each images */
   });
});

CSS :

#container {
	height:335px;
	width:500px;
	overflow:hidden;
	position:relative;
}
.cont {
	height:335px;
	position:absolute;
}
.item {
	width:500px;
	height:335px;
	display:none;
	position:absolute;
	left:0;
	z-index:0;
}
.current {
	z-index:2;
	display:block;
}

HTML :

<div id="container">
  <div class="cont">
    <div class="item"><img src="images/3888886475_79f6ec6fa4.jpg" width="500" height="335" /></div>
    <div class="item"><img src="images/3884814086_ab27bb2f7a.jpg" width="500" height="335" /></div>
    <div class="item"><img src="images/3884022159_7eca2c92a9.jpg" width="500" height="335" /></div>
    <div class="item"><img src="images/3884989133_2dd993518a.jpg" width="500" height="335" /></div>
    <div class="item"><img src="images/3889679176_8efb27feb0.jpg" width="500" height="335" /></div>
    <div class="item"><img src="images/3888886073_3e962efb9b.jpg" width="500" height="335" /></div>
    <div class="item"><img src="images/3888886271_6106cd0cd4.jpg" width="500" height="335" /></div>
  </div>

Feeling Better

Arvind — Sat, 29 May 2010 11:02:29 +0000

I’m now in my home country Philippines since last week of April. I spent 2 weeks try to meet all my friends. And It was fun! Mid of May 2010 I did Anterior Cruciate Ligament (ACL) Surgery in my right knee. How did I get this? It was a long story maybe I will tell you next time. But now I’m feeling better and hopefully I can get back to work this end of July.

Styling input type file

Arvind — Thu, 18 Mar 2010 13:16:52 +0000

This simple script will help you design your in more attractive way.
By overlapping a designed that will act as browse button and adding another that will show the value of the file upload. Using Jquery on change() the we can get the value of the and pass it to our . If your having a hard time to visualizing, you can check the demo or download the file and explore it. Please do check it with firebug so that you can see more clearly.

Demo | Download

Tricky jquery input type password

Arvind — Thu, 04 Mar 2010 06:16:04 +0000

Here’s what happened to us with my buddy Aftab. I had designed the form like this.

The inputs have the values of username and password. Just by looking at it you will think that all we have do in the code is like this

Yes that’s true, but only in the username input will show the word and the password inputs will show dots.

I tried to use jquery .val() in the password but I’m still having the same result. So I came across facebook login and see how they’re doing this trick. And that’s the time I call aftab and we checked on firebug.

You have to open firebug to see the magic. On default, the input password it’s like this

Once you clicked, the input will changing to

You can achieve this using jquery on .focus(). Here’s the code.

CSS:

#rlPass{
    display:none;
}

HTML

JQUERY

$(document).ready(function() {
    $("#loginPass").focus(function(){
        $(this).hide();
        $("#rlPass").css("display", "inline");
    });
})

Demo | Download

Thinking to make another coffee

Arvind — Thu, 18 Feb 2010 11:22:59 +0000

Harley-Davidson

Arvind — Sat, 13 Feb 2010 21:29:06 +0000

WordPress 2.9

Arvind — Sat, 19 Dec 2009 06:47:41 +0000

WordPress 2.9 is now available for download. New features available like global undo, built-in image editor, batch update plugins, and easier video embed. The image editor is really a big help for me. I’m loving it. Go ahead and update your blog now. www.wordpress.org

Simple Form Design

Arvind — Sun, 29 Nov 2009 14:58:41 +0000

Designing form is quite fun, it always makes me think how the user will use it, my colleague developer and I have been doing a new project and that includes their registration form with admin interface. I wanted to share this simple form design. I used style from blueprint css framework. I took some of what I really need, edit some of it and adjust their value. In every project I start I always use blueprint and craft the css I need, this speeds up the time of my development.

When I say simple, it’s really simple. This is just a form layout with a stupid validation.I actually wanted to use some validation plugin but there is no use for this example because I will only show a simple form anyway.

Demo | Download

Fieldset and Legend in IE

Arvind — Thu, 26 Nov 2009 10:48:31 +0000

While I was very happy and I am about to finish my form layout testing in firefox, chrome and safari, I crossed my fingers and took a quick look to check at IE and suddenly BOOOOMMMM! What the hell happened? Of course it looks like a storm had past by on the site I’m working on. I was like “darn this browser!?!”. I came a cross tyssendesign.com.au Layer of Style and it helped me a lot.

Check out this simple HTML and CSS.


 
  This is the legend
  Name:
  
  Phone:
  
  Email:

fieldset { border: none; }
 
.box{
width: 30em;
position: relative;
padding: 2.5em 1em 0.5em 1em;
border: 1px solid #000;
background: #F8F8F8;
font-size: 90%;
}
 
label { display: block; }
 
input {
width: 50%;
padding: 2px;
margin-bottom: 0.5em;
border: 1px solid #00;
}
 
button { display: block; }
 
legend span {
position: absolute;
width: 29em;
top: 0.5em; left: 1em;
color: #000;
font-weight: bold;
}