post

An easy tooltip plugin tutorial

This is a simple tooltip plugin. You have some parameter that you can use but not mandatory. This is very simple. Not a hot-&-sexy tooltip but you can work with it. Lets check the codes.

HTML Code:
[html]

What is this?Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Open InfoSorry! You are not allowed to see this info. Please verify your username and password.

Stop! Right there!!Do not enter through that door. You will be dead.

[/html]

In head tag:
[html]

[/html]

And the js-script:
[javascript]
$(document).ready(function() {
$(‘.help’).jTooltip();
$(‘.info’).jTooltip({
tip: ‘info’, //info, alert or help
});
$(‘.alert’).jTooltip({
tip: ‘alert’, //info, alert or help
color: ‘red’ //any color or color code
});
});
[/javascript]

jTooltip.css

[css]
.tipText{
display:none;
}

.jTooltip{
width:200px;
background:url(../images/arrow.png) no-repeat center bottom #FFFFFF;
position:absolute;
left:0;
padding-bottom:16px;
font-size:10px;
line-height:100%;
}

.jTooltip .jText{
border:2px solid #000000;
border-bottom:none;
padding:7px 7px;
}

.jTooltip img.jIcon{
margin-left:5px;
}

.jTooltip-v{
width:200px;
background:url(../images/arrow-v.png) no-repeat center top #FFFFFF;
position:absolute;
left:0;
padding-top:16px;
font-size:10px;
line-height:100%;
}

.jTooltip-v .jText{
border:2px solid #000000;
border-top:none;
padding:7px 7px;
}

.jTooltip-v img.jIcon{
margin-left:5px;
}

[/css]

jTooltip.js plugin:

[javascript]
(function($) {
$.fn.jTooltip = function(options)
{
var settings =
{
‘tip’: ‘help’,
‘color’: ‘#000′
};

var tooltipClass = “jTooltip”;

var methods =
{
tooltip: function(obj)
{
obj.hover(function(e) {
if(e.pageY < 100) tooltipClass = "jTooltip-v";

var html =obj.find('span.tipText').html();
obj.css({'position':'relative'});
switch(settings.tip)
{
case 'help':
var image = "“;
break;

case ‘alert’:
var image = ““;
break;

case ‘info’:
var image = ““;
break;
}

html = “

” + image + html + “

“;
obj.append(html);

tlObj = obj.find(‘.’+tooltipClass);

var jTop = -(tlObj.height() + obj.height() + 3);
if(e.pageY < 100) jTop = obj.height();
tlObj.css({'color': settings.color, 'top': jTop});

}, function() {
$('.'+tooltipClass).remove();
obj.css({'position':'static'});
});
}
};

return this.each(function() {
if(options) $.extend(settings, options);
methods.tooltip($(this));
});
};
})(jQuery);
[/javascript]

This is my second plugin, but I think it will help new developers to learn about jquery plugin tutorial.

Grateful: Anjan Bhowmik
Demo: css-avenue.com/works/tooltip/
Download: css-avenue.com/works/tooltip/tooltip.zip

Tips for Girls: How to Detect Hidden Camera in Trial Room? (and more…)

How to Detect Hidden Camera in Trial Room?

In front of the trial room take your mobile and make sure that mobile can make calls……..
Then enter into the trail room, take your mobile and make a call…..
If u can’t make a call……!!!!
There is a hidden camera……
This is due to the interference of fiber optic cable during the signal transfer……

Please forward this to your friends to educate this issue to the
public……To prevent our innocent ladies from HIDDEN CAMERA………..

Pinhole Cameras in Changing Rooms of Big Bazaar, Shoppers Stop?

A few days ago, I received this text message:
Please don’t use Trial room of BIG BAZAAR there are pinhole cameras to make MMS of young girls.
So, please forward to all girls. Also forward to all boys who have sisters and girlfriends.

Don’t be shy in forwarding this message. Because its about protecting the integrity of all girls & ladies.

HOW TO DETECT A 2-WAY MIRROR?

When we visit toilets, bathrooms, hotel rooms, changing rooms, etc., How many of you know for sure that the seemingly ordinary mirror hanging on the wall is a real mirror, or actually a 2-way mirror I.e., they can see you, but you can’t see them. There have been many cases of people installing 2-way mirrors in female changing rooms or bathroom or bedrooms.

It is very difficult to positively identify the surface by just looking at it. So, how do we determine with any amount of certainty what type of Mirror we are looking at?

CONDUCT THIS SIMPLE TEST:

Place the tip of your fingernail against the reflective surface and if there is a GAP between your fingernail and the image of the nail, then it is a GENUINE mirror.

However, if your fingernail DIRECTLY TOUCHES the image of your nail, then BEWARE, IT IS A 2-WAY MIRROR! (There may be someone seeing you from the other side). So remember, every time you see a mirror, do the “fingernail test.” It doesn’t cost you anything. It is simple to do.

This is a really good thing to do. The reason there is a gap on a real mirror, is because the silver is on the back of the mirror UNDER the glass.

Whereas with a two-way mirror, the silver is on the surface. Keep it in mind! Make sure and check every time you enter in hotel rooms.

Share this with your sisters, wife, daughters, friends, colleagues, etc.

 

Thanks to Sanaulla Shoupa

post

Create a dynamic image gallery using ajax, jquery and php (XML also)

This is a tutorial to create a dynamic image gallery using jQuery ajax and php mainly. To reduce burden, I added a normal script to read directory. In gallery.php file it will read the directory and will generate a xml file which will be thrown directly to the index file (actually ajax in index file will request to execute this file and read the generated the XML formatted data). A lightbox plugin is also used in this script. Let’s have a look:

HTML:

Portfolio

”” ””

CSS:

{code type=css}

*{margin:0; padding:0;outline:none}
.clr{clear:both;}
a{text-decoration:none;}
@font-face{src:url(‘../fonts/Agency_FB.ttf’);font-family:agency;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000}
ul{list-style-type:none;}
h1, h2, h3, h4{font-family:agency;}
h2{font-size:20px; border-bottom:5px solid #CCCCCC;}
#wrapper{margin:0 auto;width:500px;}
#lightbox{padding:10px;background:url(../images/portfolio.png) repeat;margin-top:10px;border-radius:15px;border:3px solid #CCCCCC;overflow:hidden}
ul.gallery li{float:left; border:1px solid #666666; margin:5px 7px;}
ul.gallery li a{padding:1px; overflow:hidden; display:block}
ul.gallery li a img{width:100px; height:100px; opacity:0.2}

{/code}

JS Code and stylesheet link which should be placed into head section:

{code type=html}

// <![CDATA[
$(document).ready(function() {

$.ajax({
type: “GET”,
url: “gallery.php”,
dataType: “xml”,
success: function(xml){

//pagination for gallery photos
var startIndex = 0; // gets edited via ui
var howMany = 4; // constant of how many per page, but you could make this a ui changeable thing too
var issues = $(xml).find(‘item’); //the resulting issues from the xml
var totalIssues = issues.length;
var displayIssues = function() { // display the issues
var issuesPaginated = issues.slice( startIndex , (startIndex + howMany) );
$(‘ul.gallery’).html(”); // clear old issues
issuesPaginated.each(function(){
var url = $(this).find(‘link’).text();
var alt = $(this).find(‘alt’).text();
$(‘

  • ‘).html(‘<a href=”images/fullscreen/’+url+'” rel=”prettyPhoto
    [gallery1]
    ”>’).appendTo(‘ul.gallery’);
    });
    //lightbox code for gallery after parsing xml
    $(“area[rel^=’prettyPhoto’]”).prettyPhoto();
    $(“.gallery:first a[rel^=’prettyPhoto’]”).prettyPhoto({animation_speed:’slow’,theme:’light_square’,slideshow:3000, autoplay_slideshow: false});
    $(“.gallery:gt(0) a[rel^=’prettyPhoto’]”).prettyPhoto({animation_speed:’slow’,slideshow:10000, hideflash: true});
    $(“#custom_content a[rel^=’prettyPhoto’]:first”).prettyPhoto({
    custom_markup: ‘

    ‘,
    changepicturecallback: function(){ initialize(); }
    });
    $(“#custom_content a[rel^=’prettyPhoto’]:last”).prettyPhoto({
    custom_markup: ‘

    ‘,
    changepicturecallback: function(){ _bsap.exec(); }
    });
    $(‘.gallery a img’).hover(function() {
    $(this).stop().animate({opacity:1}, 1000);
    }, function() {
    $(this).stop().animate({opacity:0.2}, 1000);
    });
    }
    $(‘#prevButton’).click(function() {
    startIndex -= howMany;
    if( startIndex >= 0) {
    //startIndex += howMany;
    displayIssues();
    if((startIndex) <= 0) $(this).hide();

    if(totalIssues – startIndex > howMany) $(‘#nextButton’).show();
    }
    });
    $(‘#nextButton’).click(function() {
    startIndex += howMany;
    if( startIndex < totalIssues) {                         //startIndex += howMany;

    displayIssues();

    if((startIndex + howMany) >= totalIssues) $(this).hide();
    if(totalIssues – startIndex > howMany) $(‘#prevButton’).show();
    }
    });
    displayIssues(); // display for the first time (ajax call);
    }
    });
    });
    // ]]>

    {/code}
    Its not fully tested. Perfectly tested in FF.

    Live in action

    Download

    Thanks.

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

    Smile and Love

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

    post

    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.

    post

    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]

    post

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