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

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]

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. :

Smile and Love

যখন অনেক ছোটো ছিলাম তখন বাবাকে কিছু কিনে দিতে বললে কিনে দিত আর বলতো তোদের কিছু দিয়েই তো আমি সুখী | তখন বুঝতামনা, ভাবতাম আমাদের কিনে দিয়ে সে কি করে সুখী হয় ! এখন অনেকটাই বুঝি | কারণ আমি যে এখন ভালবাসতে শিখে গেছি | না, আমি এখনো বাবা হইনি | কিন্তু ভালো তো বাসি | বাবা, মা, ভাই, বোন, বন্ধু-বান্ধব সবাইকেই ভালবাসি | ভালবাসার মানুষদের মুখে এক চিলতে হাসি দেখলে নিজের মন যে কত খুশিতে ভরে যায় তা বোঝানোর ভাষা এখনো আবিষ্কার হয়নি | সেই হাসি দেখে অনায়াসে ভুলে যাওয়া যায় নিজের দু:খ, না পাওয়ার বেদনা, হারানোর কষ্ট — সব | হৃদয় – সে যত ক্ষতবিক্ষতই হোক না কেন সে এক টুকরো হাসি যেন সেই ক্ষততেই প্রলেপ দেয় | পেটের দায়ে সারা দিন দৌড়ে এসে বাবা যখন তার ছোটো শিশু টিকে কোলে নেয়, শিশু টি যখন দৌড়ে এসে মায়ের বুকে ঝাপিয়ে পরে, ভাইয়ের কাছে যখন তার ছোটো বোনটি চকলেট এর আবদার ধরে, প্রেমিক যখন এসে প্রেমিকার পাশে বসে, স্বামী যখন তার স্ত্রীর আচলে আবদ্ধ হয় (and vice-versa) তখন মনে হয় সার্থক এ বেচে থাকা | একটা মানুষের জীবনে খুব বেশি কিছুর দরকার হয়না যদি তার অসীম ভালবাসার ভান্ডার থাকে | ভালবাসার মানুষদের মুখের এই এক চিলতে হাসি – তা লক্ষ কোটি টাকার বিনিময়েও কেনা যায় না – যেই হাসি ফুটাতে আমাদের অবিরাম ছুটে চলা |

Easiest way to create tooltip using jQuery

This is a very easy way to create tooltip using jQuery. This tooltip is shown on “mouseover” event, but you can customize it.

First, add latest jQuery into head tag in your html.

[html]

[/html]

Then insert the following code:
[html]

$(document).ready(function() {

$(‘.baloon’).mouseover(function() {
text = $(this).children(‘span’).html();
html = ‘

‘+text+’

‘;
$(this).append(html);
})
.mouseout(function() {
$(‘.tooltip’).remove();
}) ;

});

[/html]

Insert these css lines into your stylesheet:
[css]
div.tooltip{
width:226px;
position:absolute;
top:33px;
left:10px;
z-index:100;
line-height:120%;
text-align:left;
font-weight:bold;
}

div.tooltip_top{
width:100%;
height:14px;
background:url(../images/tooltip_top.png) no-repeat;
}

div.tooltip_bottom{
width:100%;
height:7px;
background:url(../images/tooltip_bottom.png) no-repeat;
}

div.tooltip_body{
padding:0 5px;
background:url(../images/tooltip_body.png) repeat-y;
}

#your_id{

width:100px;

height:35px;

position:relative;

}

#your_id span{display:none;}
[/css]

Now the html:
[html]

Total Communications Awareness
A VBS campaign to help you understand the benefits of adopting a Fixed Mobile Convergence approach in your local market and explain the requirements needed to adopt this approach.

[/html]

So, just put the class “baloon” in your tag in which you want to use tooltip. And within this tag set a span tag and write the tooltip text within that span tag.

That’s it. Mouseover on the tag and get your tooltip !

Thanks.

PHP: Convert number into Text (Amount into words)

This is a php function which converts number into text. This function is developed in respect of Bangladeshi Currency (Bangladeshi Taka), but if you know a little php, you can convert it into your currency. Just call the function as

[php]

[/php]

You will get the result.

Code:
[php]
<?php
function convert_number($number)
{
if (($number 999999999))
{
throw new Exception(“Number is out of range”);
}

$Gn = floor($number / 100000); /* Millions (giga) */
$number -= $Gn * 100000;
$kn = floor($number / 1000); /* Thousands (kilo) */
$number -= $kn * 1000;
$Hn = floor($number / 100); /* Hundreds (hecto) */
$number -= $Hn * 100;
$Dn = floor($number / 10); /* Tens (deca) */
$n = $number % 10; /* Ones */

$res = “”;

if ($Gn)
{
$res .= convert_number($Gn) . ” Lacs”;
}

if ($kn)
{
$res .= (empty($res) ? “” : ” “) .
convert_number($kn) . ” Thousand”;
}

if ($Hn)
{
$res .= (empty($res) ? “” : ” “) .
convert_number($Hn) . ” Hundred”;
}

$ones = array(“”, “One”, “Two”, “Three”, “Four”, “Five”, “Six”,
“Seven”, “Eight”, “Nine”, “Ten”, “Eleven”, “Twelve”, “Thirteen”,
“Fourteen”, “Fifteen”, “Sixteen”, “Seventeen”, “Eightteen”,
“Nineteen”);
$tens = array(“”, “”, “Twenty”, “Thirty”, “Fourty”, “Fifty”, “Sixty”,
“Seventy”, “Eigthy”, “Ninety”);

if ($Dn || $n)
{
if (!empty($res))
{
$res .= ” and “;
}

if ($Dn
[/php]

PHP: Find maximum odd number of sequence in an array

This is php program that finds the maximum odd number of sequence in an array. By editing, in case of even number also be found out.

Code:
[php]
<?php
$x = array(1,7,4,5,7,5,6,3,4,6,87,53,45,567,45,43,66,56,57,5);
$tot = count($x);
$y = $res = array();
$y[0] = array();
$k = $j = 0;
for($i = 0; $i $val)
if($max == count($val))
$k = $key;

echo “The number of maximum odd sequesnce: $max
The numbers are:”;
var_dump($y[$k]);

?>
[/php]

Waiting for any better solutions. :)

A little trick to store data into mysql database from a large form

Sometimes we feel boring to write mysql insertion query to store data into database from a large form where are too many input fields (such as about 50 fields). We face problem to handle all the fields, sometimes we miss the field name. Here is a small trick to store data from such a large form.

In this trick, we have to do same naming of table fields and input fields. For example –

[html][/html]

Then the field name of the database will be “first_name”

Then the php code will be:

Suppose, name of the submit button is submit [html][/html]

[php]
safe_entry($_POST); // here obj is the object; safe_entry is a custom function which confirms the input validation of XSS and mysql injection; otherwise you can use $data = safe_entry($_POST); or simply use $data = $_POST;

$field = $value = array(); //two blank array in which field names and field values will be stored

foreach($data as $key=>$val)

if($key != ‘submit’)

{

array_push($field, $key);

array_push($value, $val);

}

$fields = implode(‘,’, $field);

$values = implode(“‘, ‘”, $value);

$sql = “insert into tablename($fields) values(‘$values’)”;

$query = $obj->insertQuery($sql); //use direct function mysql_query() in stead of custom function and object

?>
[/php]

That’s it! This code will store data from a large form. Thanks.

jSlider Plugin for jQuery (for 3 horizontal div)

This is my first jQuery plugin. Not so perfect, but it can be used I think :)

This plugin is very easy to use.

Doc:
This is a small slider content plugin for three horizontal floated div. By clicking on top menu, the divs switch.

1. Just pass the master div id which is wrapping the three floating div in the parameter field named master.
2. Pass id of the three floated divs’ in label parameter under jid index
3. Pass id of the three links’ in label parameter under links index

That’s It!
You don’t have to mention floated div in css.

Javascript Code:
[html]

$(document).ready(function(){
$.fn.jSlider({
//”width”:null,
//”height”:null,
“master”:”content”,
“labels”:[
{“jid”:”one_content”, “links”:”one”},
{“jid”:”two_content”, “links”:”two”},
{“jid”:”three_content”, “links”:”three”},
]
});
});

[/html]

HTML Code:
[html]

This is DIV 1

This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1. This is DIV 1.

This is DIV 2

This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2. This is DIV 2.

This is DIV 3

This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3. This is DIV 3.

[/html]

CSS Code:
[css]

#wrapper{
width:100%;
overflow:hidden;
color:#990000
}

#header{
width:100%;
height:30px;
background:#0033FF;
color:#FFFFFF;
}

#content{
overflow:hidden;
}

#header a{
padding:5px 15px;
color:#FFFFFF;
}

#one_content{
background:url(images/one.jpg) repeat;
}

#two_content{
background:url(images/two.jpg) repeat;
}

#three_content{
background:url(images/three.jpg) repeat;
}

[/css]

That’s it !

A Very Simple jQuery Drop Down Menu Plugin

This is a very simple jquery Drop Down Menu Plugin, vertically no doubt. Add latest jQuery in your html like:

[html]

[/html]

[if u don’t have jQuery in your server]

HTML Code:
[html]

[/html]
Just declare a class named “parent” in the li tag in which you have a submenu. Then its is done.

CSS Code:
[css]
div#menu ul li{
float:left;
}

div#menu ul li a{
display:block;
line-height:27px;
text-align:center;
color:#FFFFFF;
font-size:12px;
padding:0 13px;
border-right:1px solid #017302;
}

div#menu ul li a:hover, div#menu ul li a.active{
text-decoration:none;
}

.parent{
position:relative;
}

.parent ul{
position:absolute;
top:100%;
overflow:hidden;
left:0;
display:none;
background:#4CA82E;
}

div#menu ul li ul li a{
background:none;
width:auto !important;
white-space:nowrap;
text-align:left;
}

div#menu ul li ul li a:hover{
text-decoration:underline;
}

div#menu ul li ul li{
width:auto !important;
float:none;
}
[/css]

Now put the following code in your tag just below of the declaration of jQuery:
[html]

$(document).ready(function(){
$(“.parent”).hover(function(){
$(this).find(“ul”).show(“slow”);
}, function () {
$(this).find(“ul”).hide(“slow”);
});
});

[/html]
That’s it! Boom!! If you have this plugin just declare a class named “parent” in your

  • tag in which you have submenu.

    Thanks.