Pure CSS Arrows

This is a very interesting post! I was doing some experiments with CSS. Using css border properties I created arrow shapes. Hope you’ll enjoy it.

Link to the html page.

Screenshot:

jQuery Mix Photo Gallery

Recently I coded an interesting photo gallery using jQuery. I’ve named it “jQuery Mix Photo Gallery”. I’ve included the screen-shots here.

You may have a look at the live demo here. The photo gallery is free to download. Here is the download link. You may modify it according to your need and use it in your commercial projects. Please drop a comment if you like it and suggest me how can I make it much better.

jQuery Drop down menu without setTimeout

I worked a lot with drop-down menus like most of you. There are many stable versions of DD menus using pure javascript & CSS or only CSS with cross-browser support and you’ll get them free from many menu maker websites or desktop applications. So I’m not going to reinvent the wheel.

I’m a freaking fan of jQuery and always use it for drop-down menus with my custom jQuery code. It’s a must to use a delay for javascript driven dd menus even for jQuery when you want to give it some effect like slideDown or slideUp (For CSS dropdown menus it’s not possible & thus no need to use delay). I always wished to use jQuery without any setTimeout function for the drop-down menus. And I did it which I’m gonna share with you.

$(function () {
    $("ul>li").hover(function () {
        $(this).find("ul.sub").slideDown('fast');
        $(this).addClass("hover");
        $(this).hover(
        function () {},
        function () {
            $(this).find("ul.sub").slideUp('fast');
        });
    },
    function () {
        $(this).removeClass("hover");
    })
})

Here it is in action

The main tricky part is using hover inside hover function:

$(this).hover(
function () {},
function () {
    $(this).find("ul.sub").slideUp('fast');
});

This removes the mouseover function (first function of hover) when mouse hover into the li so the slideDown does not happen again when the mouse enter into the inner ul/li. Hope that makes sense. You may like to add a delay and do some more fine tunes.

Happy Coding!

A better process to find maximum z-index within a page

Once I needed to get maximum z-index of a DIV to show message at the top of the screen.
Usually, I used arbitrary z-index of 100 of the DIV. But that one is not at the top and it’s hidden by others.
What’s wrong? And unfortunately I found that there are 3 more div-s which have z-index attribute which are greater than 100.
So I changed the z-index to 1000. This time I can see one portion of the DIV.
But 2 more elements get the desired message container DIV overlaid. Frustrating! Huh!
Trial and error method always makes you delay.
I know JavaScript or jQuery may get rid of this hell.
I made an absolute tinny code to find the highest z-index of absolute DIV
to show my shouting box and to make it appear absolutely at the top of all html elements.

//include jQuery.js --  visit: http://jquery.com/
$(function(){
    var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){
           if($(e).css('position')=='absolute')
                return parseInt($(e).css('z-index'))||1 ;
           })
    );
    alert(maxZ);
});

I used selector of ”body > *‘ instead of ‘body *‘.

”body > *‘ means all tags/elements which are found at first depth of
whether ”body *‘ selects all tags/elements at any depth.
It doesn’t matter what’s is the maximum/highest z-index of an absolute element
rather it matters what’s the maximum/highest z-index of the absolute elements
which are next to in first depth only to show the shouting box on top most strata.

N.B. Shouting box is appended to document.body in this case.

All Day I Dream About PHP

i did some experimental works in PHP…. check the following links

• how can reorder rows of table (one step up/ one step down) using PHP+MySQL
• tree navigator for file management using PHP function

rahen.rangan@gmail.com