arvindandrion.com » Css

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>

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

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;
}

I’m Stuck in Table Grid

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

If you find yourself stuck in styling your table, checkout HTML and CSS table border style Wizard at Samacon.com, Whew! that’s a long title isn’t it? It can help you to design a simple table grid in no time, Samacon helped me solve some bug issues in IE6. In the case of browser compatibility I think it works best in explorer 6 but it doesn’t support the border-spacing CSS2 table property and it doesn’t work in opera and IE5 as well. Check out the site for more browser compatibility.