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

Continue Reading

You may also like

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 […]

Continue Reading

You may also like

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 […]

Continue Reading

You may also like