arvindandrion.com » Jquery

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

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

Horizontal scroll using jquery scrollTo

Arvind — Fri, 18 Sep 2009 10:59:57 +0000

You may already saw this in some other website scrolling horizontal and vertical smoothly with easing. I will show you how to do this using jquery scrollTo plugin. I’m not going show you the full details about this plugin. You can visit Ariel Flesler : jquery.ScrollTo to see detailed instruction and more settings.

Demo Download

First download the easing and scrollTo plugins.

Add scrollTo and the easing plugins

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>

For the style of the page

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
 
body{background:url(images/bg_pattern.jpg) repeat;}
.wrapper{width:5500px; height:300px; padding-top:150px; position:relative;z-index:0;}
.f_box{padding:0 500px 0 500px; width:390px; float:left}
.f_box_inner{background:url(images/html.jpg) no-repeat; width:336; height:246px; display:block;}
 
.s_box{padding:0 500px 0 500px; width:390px; float:left}
.s_box_inner{background:url(images/css.jpg) no-repeat; width:336; height:246px; display:block;}
 
.t_box{padding:0 0 0 500px; width:390px; float:left}
.t_box_inner{background:url(images/jquery.jpg) no-repeat; width:336; height:246px; display:block;}
 
.nav{height:32px;padding:200px 0 0 556px;width:250px; z-index:1; position:fixed}
 
#btn_one, #btn_two, #btn_three{display:block; text-indent:-2000px; overflow:hidden; float:left;margin:0 5px;}
 
#btn_one{width:63px; height:24px; background:url(images/html_btn.gif);}
#btn_one:hover{background:url(images/html_btn_hover.gif);}
 
#btn_two{width:43px; height:24px; background:url(images/css_btn.gif);}
#btn_two:hover{background:url(images/css_btn_hover.gif);}
 
#btn_three{width:90px; height:24px; background:url(images/jquery_btn.gif);}
#btn_three:hover{background:url(images/jquery_btn_hover.gif);}

Structure of our page

<div>
  <div>
     <a id="btn_one" href="#first">html</a>
     <a id="btn_two" href="#second">css</a>
     <a id="btn_three" href="#third">jquery</a>
 </div>
</div>

Now add the easing function

// easing function
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
if (a &lt; Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

Reset the scroll page and add the click event function for the buttons

//resets the page
$('div.wrapper').scrollTo( 0 );
$.scrollTo( 0 );
 
// click function
$('#btn_one').click(function(){
$('.nav').fadeOut("slow").fadeIn("slow");
$.scrollTo(this.hash, 1500);
});
 
$('#btn_two').click(function(){
$('.nav').fadeOut("fast").fadeIn("slow");
$.scrollTo(this.hash, 1500, { easing:'elasout' });
});
 
$('#btn_three').click(function(){
$('.nav').fadeOut("fast").fadeIn("slow");
$.scrollTo(this.hash, 1500, { easing:'elasout' });
});

Simple animation using jquery

Arvind — Wed, 01 Jul 2009 14:44:36 +0000

Last week our Team Head asked me to edit some pictures for his friend’s employees. These pictures are for passport use so I removed the colored background and changed it into white. So, I’ve done all of it and I send it back with plain white background. After that I started to play with it until I feel half happy with the result and add some animation in jquery.

Demo

Pictures and textures I used

I started to combine the texture, play on the blending modes and put little details on it.

Add some grunge effect in the font

Final Result

Lets do some coding.

HTML

<div class="container">
 <div class="worker">
  <div class="title"></div>
  <div class="slogan"></div>
  <div class="leader"></div>
  <div class="supervisor"></div>
  <div class="developer"></div>
 </div>
</div>

CSS
Always add reset to your css, you can download the reset here I got it from Blueprint Framework.

body {
	background:#fcedb9;
}
.container {
	width:360px;
	margin:0 auto;
}
.clearfix:after, .container:after {
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow:hidden;
}
.worker {
	background:url(images/background.jpg) no-repeat;
	width:360px;
	;
	height:480px;
	margin:30px 0;
	display:block;
	position:relative;
	overflow:hidden;
}
.leader, .supervisor, .developer {
	position:absolute;
	left:0;
	bottom:0;
	width:360px;
	height:260px;
	display:block;
}
.leader {
	background:url(images/theleader.png) no-repeat center -2px;
	z-index:3;
	opacity: 0;
}
.supervisor {
	background:url(images/thesupervisor.png) no-repeat center -3px;
	z-index:2;
	opacity: 0;
}
.developer {
	background:url(images/the-developer.png) no-repeat center 10px;
	z-index:1;
	opacity: 0;
}
.title {
	background:url(images/workerstitle.png) no-repeat center center;
	z-index:5;
	position:absolute;
	left:0;
	top:58px;
	width:360px;
	;
	height:120px;
	opacity: 0;
}
.slogan {
	background:url(images/abudhabi.png) no-repeat center center;
	z-index:4;
	position:absolute;
	left:0;
	top:80px;
	width:360px;
	height:44px;
	opacity: 0;
}

JQUERY
Its always better to take jquery hosted by google. Why? Check this load the framework from google

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Now here is the simple code for animation. Forgive me guys if there’s better way to do this, I’m not an expert in coding javascript.

$(document).ready(function(){
 $(".title").animate({ opacity: 1}, 2000 );
 $(".slogan").animate({ opacity: 1, marginTop:"50px"}, 1500 );
 $(".leader").animate({ opacity: 1}, 6000 );
 $(".supervisor").animate({ opacity: 1}, 10000 );
 $(".developer").animate({ opacity: 1}, 14000 );
});