post

Create multi level drop down menu in css

This is pretty simple to create a multi level drop down menu in css. But it’s true that it doesn’t have such flexibility that javascript have. And also the width of drop down section needs to be fixed, not flexible. Now a days css drop down menu is not widely used, but it is very useful to get clear concept of css inheritance.

Let’s look at the code:

Html chunks:

[html]

[/html]

CSS Chunks:
[css]
*{margin: 0; padding: 0;}
#menu{width:484px; margin: 0 auto; background-color: #000; height:25px;}
#menu ul{list-style-type:none;}
#menu ul li{float: left; position: relative;}
#menu ul li:hover{background-color: #999;}
#menu ul li a{color: #fff; padding: 0 30px; line-height:25px; font-size:11px; font-family:arial; display: block; text-decoration:none;}
#menu ul li a:hover{background-color: #999;}
#menu ul li ul li{float: none; position: relative;}
#menu ul li ul{position: absolute; top:25px; left:0; display: none; background-color: #000; width:150px;}
#menu ul li:hover > ul{display: block;}
#menu ul li ul li a{white-space: nowrap; line-height:25px;}
#menu ul li ul li ul{position: absolute; top:0; left:145px; display: none; background-color: #000; width:150px;}
[/css]

Pretty simple, huh? Why don’t you look at the demo?

Wanna Download?

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

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.