Category Archives: Wordpress

Floated User List with jQuery

Here I giving a tutorial for floated list of users expand and collapse with animation using jQuery. Here I display list expanded by default. See the html code below.

HTML

<div class="lggedUsr expanded">
  <div class="shwHdeBx">
   <a href="#" class="trgrShwHde"><span></span></a><span>Collapse</span>
  </div>
 <div class="lggedUsrCntnr">
  <ul>
   <li>
    <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
    <span>Binoy. P.M</span>
   </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Jos Mathew</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Jose Tharayil</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Melvin Peter</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Sebastin. S</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Susha Pillai</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Parvathi S</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Arun Varma</span>
  </li>
 </ul>
</div>
</div>

See the CSS code below

  body{
	background-image:url(../images/bg.jpg);
	background-size:cover;
	margin:0;
	font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
	}
.userData {
	background:;
	width:99%;
	border-collapse:collapse;
	border: 0px solid black;
	}
h4{
	font-size:19px;
	color:#222;
	margin-bottom:10px;
	padding: 4px 0;
	}

.userData thead{
	background:#f4f3f3;
	border:1px solid #cfcfcf;
	line-height:35px;
	text-align:left;
}
.userData thead th, .userData tbody td{
	padding-left:5px;
}
.userData tbody td{
	border-bottom:1px solid #cfcfcf;
	line-height:45px;
}
.count {
	background:rgb(45, 127, 192);
	color:#fff;
	border-radius:20px;
	display:inline-block;
	padding:4px;
	border:2px solid #fff;
	box-shadow:0 0 4px rgba(000,000,000,0.4);
	}
.blocks {
	float:left;
	width:45%;
	border-right:1px dotted #dadada;
	margin-right:20px;
	margin-bottom: 50px;
	padding-right:10px;
	}
.usrAccssBtns {
	float:right;
	padding-right: 6px;
	position:relative;
	}
.flt {float:left;}
.usrAccssBtns a {
	background:#f5f5f5;
	text-decoration:none;
	color:#333;
	border:1px solid #dedede;
	border-radius:20px;
	display:inline-block;
	padding:5px 10px;
	font-size:13px;
	margin-left:4px;
	box-shadow:0 1px 2px rgba(000,000,000,0.2);
	margin-top:5px;
	}
.usrAccssBtns a.active , .usrAccssBtns a:hover{
	border-color:#696969;
	box-shadow:none;
	font-weight:bold;
	color:rgb(45, 127, 192);
	}
 .usrAccssBtns a:hover{
	 font-weight:normal;
	 color:#333;
	 }
.usrAccssBtns a.active:hover {
	font-weight:bold;
	color:rgb(45, 127, 192);

	}
.dateRngBx {
	display:none;
	float:right;
	clear:both;
	border: 1px solid rgba(000,000,000,0.3);
	position:relative;
	right:10px;
	top:-10px;
	padding: 4px 20px 17px 20px;
	height:20px;
	width:470px;
	background:#f5f5f5;
	border-radius:3px;
	box-shadow:0 1px 8px rgba(000,000,000,0.3);
	}
.dateRngBx input[type=text]{
	border:1px solid #dedede;
	background: #fff;
	border-radius:15px;
	padding:5px 12px;
	font-size:15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size:15px;
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	color:#333;
	width:80px;
	margin-left:5px;
	margin-right:5px;
	}
.dateRngBx input[type=submit], .dateRngBx input[type=button] {
	border: 1px solid #2c79a4;
	background: #489ccb;
	background: -moz-linear-gradient(top, #489ccb 0%, #3684b1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489ccb), color-stop(100%,#3684b1));
	background: -webkit-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: -o-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: -ms-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: linear-gradient(to bottom, #489ccb 0%,#3684b1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489ccb', endColorstr='#3684b1',GradientType=0 );
	border-radius: 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	color: #fff;
	padding: 5px 16px;
}
.lggedUsr {
	background: #fff;
	position: fixed;
	right: 0;
	top: 48px;
	bottom: 0;
	width: 248px;
	z-index: 100;
	border-left: 1px solid #dadada;
	box-shadow: -2px 0 24px rgba(000,000,000,0.2);
	}
.usrAvthr {
	width:32px;
	height:32px;
	vertical-align:middle;
	margin-right:10px;
	border:2px solid #fff;
	box-shadow:0px 0px 5px rgba(000,000,000,0.5);
	}
.lggedUsrCntnr {
	padding:10px;
	height:100%;
	position:absolute;
	overflow:auto;
	}
.shwHdeBx {
	height:20px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	border-bottom:1px solid #dadada;
	}
.trgrShwHde {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	border-bottom:1px solid #dadada;
	display:inline-block;
	border-right:1px solid #dadada;
	width:20px;
	height:20px;
	vertical-align:middle;
	margin-right:7px;
	}
.trgrShwHde span{
	background:url(../images/arrow.png) no-repeat center center;
	display:block;
	height:20px;
	width:20px;
	}
.collapsed .trgrShwHde span{
	background: #b5db26;
	background: -moz-linear-gradient(top,  #b5db26 0%, #7ea119 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5db26), color-stop(100%,#7ea119));
	background: -webkit-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: -o-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: -ms-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: linear-gradient(to bottom,  #b5db26 0%,#7ea119 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5db26', endColorstr='#7ea119',GradientType=0 );
	border-radius:10px ;
	height:10px;
	width:10px;
	margin-top:4px;
	margin-left:4px;
	border:1px solid #4e9a1b;

	}
.trgrShwHde + span {
	font-size:12px;
	color:#333;
	height:20px;
	width:20px;
	}
.lggedUsrCntnr li {
	border-bottom:1px solid rgba(000,000,000,0.1);
	padding:10px 0;
	width:242px;
	}
.lggedUsrCntnr li:hover {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	cursor:pointer;
	}

See the jQuery code below

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js" ></script>
<script>
	$(document).ready(function(e) {
		var lggedWndwHeight = $('.lggedUsr.expanded').height();

		$('.expanded .trgrShwHde').live('click' ,function(){
				$('.lggedUsrCntnr').animate({
					opacity:'0',
					}, function(){
						$('.lggedUsr').animate({
						width:'20px',

						height:'20px'
						},
						function(){
						$('.trgrShwHde').next('span').css('display','none');
						$('.trgrShwHde').parent().parent().removeClass('expanded');
						$('.trgrShwHde').parent().parent().addClass('collapsed');
							}
						);
						}
					)
				})
		$('.collapsed .trgrShwHde').live('click' ,function(){
			$('.lggedUsr').animate({
					width:'248px',
						height:lggedWndwHeight
					}, function(){
						$('.lggedUsrCntnr').animate({
						opacity:'1'
						},
						function(){
						$('.trgrShwHde').next('span').css('display','inline-block');
						$('.trgrShwHde').parent().parent().removeClass('collapsed');
						$('.trgrShwHde').parent().parent().addClass('expanded');
							}
						);
						}

					)
			});
	});

</script>

See the Demo below or Download

Floated User List with jQuery
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

How to Configure Your Blog’s Newsletter in MailPress

MailPress is the most powerful free self-hosted automatic newsletter plugin for WordPress, according to my detailed comparison of WordPress newsletter plugins. But and all that power can make it a little tricky to configure.

Having a newsletter on your blog allows visitors to subscribe to regular updates via email. An automatic newsletter simplifies the process so that all you have to do is post articles to your blog, and the newsletter to your subscribers is built and sent automatically with no extra effort from you. Even with the advent of RSS feeds and Twitter, email is still the easiest way of getting back in touch with people who have visited your blog before, and giving them a reason to visit again.

Read the Full-story

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Violet Blog – Free PSD Version WordPress Theme

Violet blog design by bijusubhash

Hi Folks, I’m very glad to release my first Worpress theme Violet Blog WordPress theme PSD version. It is very simple theme can be used for any of your project for free. You can Edit the title and punch line of the blog and you may use as your own theme. This theme can be used for any projects but it’s forbidden to sell or redistribute. Please link to this article if you would like to spread the word.

License: Creative Commons Attribution-No Derivative Works 2.5 India License.

Violet Blog Wordpress Theme - PSD Version
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]