post

Make image vertically centered align within a div and don’t let user save the picture easily

This is a very easy tutorial to set an image vertically centered within a div. Simple jQuery codes are used here. There is a also a nice option added that won’t let your user save the image easily. Please look at the code:

[html]

.resize{
width:105px;
height:100px;
background-position:center;
border:1px solid #000000;
margin:20px auto;
background-repeat:no-repeat;
}

$(document).ready(function() {
$(‘.resize’).each(function() {
var src = $(this).find(‘img’).attr(‘src’);
$(this).find(‘img’).attr(‘src’, ‘t.png’).css({‘width’:’100%’, ‘height’:’100%’});
$(this).css({‘backgroundImage’: ‘url(‘+src+’)’});
});
});

[/html]

Download Link

post

Create Simple Jquery Right Click Cross browser Vertical Menu

Here is the code:

[html]

#rightclickarea{width:500px; margin:0 auto; height:300px; border:1px solid #000000;}
.vmenu{border:1px solid #aaa;position:absolute;background:#fff; display:none;font-size:0.75em;}
.vmenu .first_li span{width:100px;display:block;padding:5px 10px;cursor:pointer}
.vmenu .inner_li{display:none;margin-left:120px;position:absolute;border:1px solid #aaa;
border-left:1px solid #ccc;margin-top:-28px;background:#fff;}
.vmenu .sep_li{border-top: 1px ridge #aaa;margin:5px 0}
.vmenu .fill_title{font-size:11px;font-weight:bold;/height:15px;/overflow:hidden;word-wrap:break-word;}

$(document).ready(function(){

$(‘#rightclickarea’).bind(‘contextmenu’,function(e){
var $cmenu = $(this).next();
$(‘

‘).css({left : ‘0px’, top : ‘0px’,position: ‘absolute’, width: ‘100%’, height: ‘100%’, zIndex: ‘100’ }).click(function() {
$(this).remove();
$cmenu.hide();
}).bind(‘contextmenu’ , function(){return false;}).appendTo(document.body);
$(this).next().css({ left: e.pageX, top: e.pageY, zIndex: ‘101’ }).show();

return false;
});

$(‘.vmenu .first_li’).live(‘click’,function() {
if( $(this).children().size() == 1 ) {
alert($(this).children().text());
$(‘.vmenu’).hide();
$(‘.overlay’).hide();
}
});

$(‘.vmenu .inner_li span’).live(‘click’,function() {
alert($(this).text());
$(‘.vmenu’).hide();
$(‘.overlay’).hide();
});

$(“.first_li , .sec_li, .inner_li span”).hover(function () {
$(this).css({backgroundColor : ‘#E0EDFE’ , cursor : ‘pointer’});
if ( $(this).children().size() >0 )
$(this).find(‘.inner_li’).show();
$(this).css({cursor : ‘default’});
},
function () {
$(this).css(‘background-color’ , ‘#fff’ );
$(this).find(‘.inner_li’).hide();
});

});

Right click inside bordered container
Open
Open in new tab
Quick Preview

Dossier
Channel 1
Channel 2
Preview

Channel 1
Channel 2
Edit
Event Log
New
Assignments

Assignement 1
Assignement 2
Assets

Asset 1
Asset 2
All Assets
Preview
Move to

Folder name
Others

Mark as Read
Mark as Unread
Trash
Archieve
Commite
Release

[/html]

post

jQuery: Create your own Accordion – Very Easy Tutorial

This is a very easy and simple tutorial for an accordion using latest jQuery. The latest version is not essential. Please check the following codes, implement it and let me know if any errors. Thanks:

CSS Code
[css]
#acc_wrap{width:700px; margin:50px auto; color:#FFFFFF}
#acc_wrap ul{list-style-type:none;}
#acc_wrap ul li{margin-bottom:2px;}
#acc_wrap ul li h3{font-size:13px; padding:0 0 0 7px; cursor:pointer; line-height:175%; background:url(images/plus.png) 98% 50% no-repeat #CC9900;}
#acc_wrap ul li h3.active{background:url(images/minus.png) 98% 50% no-repeat #CC9900;}
#acc_wrap ul li p{display:none; padding:7px; background:#0000CC; border-radius:0 0 10px 10px; font-size:12px;}
[/css]

Javascript Code:
[javascript]

$(document).ready(function() {
$(‘#acc_wrap ul li h3’).click(function() {
$(‘#acc_wrap ul li p’).slideUp();
if($(this).hasClass(‘active’))
{
$(‘#acc_wrap ul li h3’).removeClass(‘active’);
}
else
{
$(‘#acc_wrap ul li h3’).removeClass(‘active’);
$(this).addClass(‘active’).parent().find(‘p’).slideDown();
}
});
});

[/javascript]

HTML code:
[html]

  • Maecenas vitae dictum velit

    Duis blandit congue libero, eu vehicula lorem viverra et. In et urna non leo dictum laoreet sed sit amet lectus. Vivamus ac mauris dictum mauris ultricies pretium. Morbi eleifend purus vitae ante varius pellentesque. Praesent in libero id metus aliquam sagittis quis vestibulum metus. Maecenas at urna molestie nisi fermentum porta. Integer ac leo sapien. Quisque pharetra vehicula nisi eu feugiat.

  • Vestibulum convallis pellentesque nibh

    Nunc facilisis pellentesque lobortis. Praesent ultrices felis nec enim aliquam vulputate. Suspendisse potenti. Etiam tempus dui non mauris cursus convallis. Vestibulum nisi enim, elementum auctor sagittis sit amet, suscipit sed enim. Quisque eget lorem est, a ultricies nisl. Ut quis tincidunt nisi. Phasellus aliquam ante et massa congue at aliquet lectus mattis. Phasellus mattis rhoncus ligula, in bibendum nisi faucibus eu. Fusce placerat nisl ut enim volutpat feugiat. Quisque sed tempor nisi. Nam sit amet massa sed lorem scelerisque ornare eget eu metus. Vivamus augue tellus, aliquam non adipiscing pretium, gravida et augue.

  • Pellentesque consequat augue rutrum

    Integer est massa, blandit non luctus sit amet, imperdiet et nisl. Curabitur risus lectus, tempor id tempus et, posuere vitae ante. Mauris ut odio ac augue facilisis scelerisque et luctus arcu. Aliquam et nulla risus. Suspendisse volutpat sapien eu metus condimentum rhoncus. Suspendisse potenti. Donec pellentesque massa non tortor pellentesque in scelerisque est venenatis. Duis eleifend tortor vel metus volutpat semper. Suspendisse potenti. Sed tempor commodo sagittis.

[/html]

That’s it. Please download two images by googling…plus and minus. Thanks. :