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:

Tags | border, corner, css, css art, example, html, interesting

CSS Equal Height Columns

Once upon a time people used tables for designing website layout. Definitely table tag has many advantages but it’s not that flexible & extensile. You can not use proper positioning or floating attributes css style for table based layout. It’s not that commodious to handle table width/height from Dreamweaver, the layout gets messy when you drag any border of table, td or tr as the dimensions automatically get changed. The most important incentive for the current web sphere is SEO (Search Engine Optimization) which is dramatically & automatically mended when DIV based layout is used where TABLE based layout is toilsome for search bots to crawl & takes much page loading time. And at some point it makes more sense to use table for displaying tabular formatted data only, for example gmail uses table for the email list, this could be done using UL/LI, but table is more appropriate in this case.

Lately most web designers use DIV for page layout designing for its flexibility and robustness. Unlike table div has a big problem (in fact it’s the nature of div) when you want to give same height to multi-columns div based page layout, you can not do that very easily. I always used javascript for this purpose, but wished if I could do it with css, cos when the javascript is disabled the page layout will be not as expected in most of the cases.

Yes it is possible to create equal height columns with css! You can make the height of multiple floated divs equal using CSS only and no javascript or invalid css. Before beginning I assume you have adequate knowledge on HTML, CSS, javascript and you have already Firebug add-on installed on your Firefox

Lemme start from the beginning:

Default three column layout

Link to the HTML page

When you apply float left and fixed width to multiple adjacent divs, by default the layout looks like the above screen shot. You can see it from browser or have a look at the source code (html/css) on the following link above. You see as the contents are not same in the 3 divs, the height is different.
The next example is making the height of the 3 divs same using javascript (jQuery).

Three column layout – equal height using jQuery

Link to the HTML page

This is mostly and widely used for making equal height columns using javascript. I’ve used jQuery here. You may have a look at the source code from the link above.

$(function(){
	var H = 0;
	$("div").each(function(i){
		var h = $("div").eq(i).height();
		if(h > H) H = h;
	});
	$("div").height(H);
});

Now here comes the css equal height technique! The mantra is to use a large amount of bottom padding and the same amount of negative bottom margin to the floated divs and keep them inside an overflow hidden div. That’s all, and the magic happens!

Three column layout – equal height using pure CSS

Link to the HTML page

Let me get into details on how to do it. At First have a look at this link. Here I’ve used a huge amount (9000px) of bottom padding and the same amount of negative bottom margin (-9000px). But this makes the columns look so long and still not equal height at bottom. Now on this link I’ve used a holder div with overflow:hidden and that’s it, it is doing the magic by hiding the overflow section.

body{margin-bottom:50px}
div.holder { overflow:hidden }
div.holder div { float:left; width:30%; background-color:#9C0; margin-right:5px; padding:10px; padding-bottom:9000px; margin-bottom:-9000px }

Hope it’s clear now.

There is another method which use a background image with 1px height and color matched with the div’s bg color and body’s bg color. Please have a look at the html link, it’s self-explanatory.

Three column layout – equal height using pure CSS with Background Image

Link to the HTML page

Now I’ll try border to the columns and we’ll see the problem and it’s solution.

Three column layout – equal height with border

Link to the HTML page

Here you can see bottom border is missing which is obvious as we’ve used a huge bottom padding, from Firebug if you turn off overflow:hidden to the holder div and scroll down at the bottom of the page you’ll see the bottom border there but not equal height.
So how to solve this issue? There are 2 ways to do it – using a bg image in a tricky way or another pure tricky css hack.

Three column layout – equal height with bottom border fix using bg image

Link to the HTML page

Here I’ve used a 1px bg image for the background image and placed it at left-bottom of the bottom-border div with no-repeat and also applied 1px bottom padding. The holder div is inside the bottom-border div. Please feel free to play around with firebug!

This is the last method for bottom border fix without any bg image, just pure css.

Three column layout – equal height with bottom border fix using pure css and no bg image

Link to the HTML page

I’m not gonna explain the details of this last method, find it out yourself!

Get professional testking 1z0-007 web designing training to learn how to create different web site layouts with css format. Become expert using testking 642-415 design tutorials and testking 642-631 css live demos.

Tags | column, css, div, equal, excellent, hack, height, JavaScript, jQuery, layout, magic, multi-columns, pure, table, table-less, tableless, tricky, useful

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!

Tags | css, dd, dd menu, delay, drop-down, dropdown, exceptional, hover, JavaScript, jQuery, menu, setTimeout, solution, uncommon, unique

IE6 fix for select box over absolute positioned element

IE6 sux. General css/javascript hover drop-down menu uses a div or ul with position:absolute. No matter how much you increase the value of z-index the select box (windowed element) will always remain on top most – yes only on a special browser, Internet Explorer 6. The reason is IE6 considers select element as windowed element and keeps it always on top layer.

Solution is using iframe on top of select element, as iframe is also a windowed element placing it on top of select box fix the problem.

Here is the typical HTML code for this drop-down menu:

<div class="top-menus" style="left: 221px; top: 127px;">
<iframe frameborder="0" scrolling="no" align="bottom" marginheight="0" marginwidth="0" src="javascript:'';" style="height: 200px;"></iframe>
    <ul>
      <li><a href="#">Bracelets</a></li>
      <li><a href="#">Rings</a></li>
      <li><a href="#">Earrings</a></li>
      <li><a href="#">Necklaces</a></li>
    </ul>
</div>

The inline css is calculated using jQuery offset() function. FYI, you can easily get the width,height,left,top position of any element using jQuery(“element”).offset(). Make sure the width and height of the iframe is exactly same of it’s overlying UL element. If you apply any border to the UL, you have to consider that during calculating the proper width/height of the iframe.

This is the sample jQuery code:

var timer = null; // global
$("#top-nav a").hover(function(){
	clearTimeout(timer);
	$("#top-nav a:not('.cur')").removeClass("selected");
	$(this).addClass("selected");

	var o = $(this).offset();
	var left = o.left + 1; // 1px extra for border
	var top = o.top + 32; // 32px for placing it just below the horizontal menu
	if($(".top-menus").length){
		if(left == $(".top-menus").offset().left)
			return;
		else $(".top-menus").remove();
	}

	$("body").prepend('<div style="left:'+left+'px;top:'+top+'px;" class="top-menus"><iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0"></iframe><ul>'+html+'</ul></div>');
		$(".top-menus").find(".parent, .child").remove();
		var hi = $(".top-menus").find("ul").height();
		$("iframe").height(hi + 2); // extra 2px for border

}, function(){
	clearTimeout(timer);
	timer = setTimeout(function(){$("body").find("iframe,.top-menus").remove(); $("#top-nav a:not('.cur')").removeClass("selected");},300);
});

$(".top-menus").live("mouseover",function(){
	clearTimeout(timer);
}).live("mouseout",function(){
	clearTimeout(timer);
	timer = setTimeout(function(){$("body").find("iframe,.top-menus").remove(); $("#top-nav a:not('.cur')").removeClass("selected");},300);
});

I know this code won’t exactly fulfill your requirement, you can get the main idea from this and write your own code yourself. You can see it in action on www.trendtogo.com.

Tags | absolute, code, css, div, drop down menu, free, ie6, iframe, internet explorer 6, JavaScript, jQuery, position, ul, windowed element

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.

Tags | css, get maximum z-index of a div, help, JavaScript, jQuery, max z-index, maximum z-index of a div, selector, style, tutorial, z-index, zIndex