*baby pink*

I came across a site that had an interesting use of layered divs to achieve the look of a “flipping panel”. In the image below, “We’ll be back shortly” is html text, not image file! 

Simple divs do the trick

It doesn’t actually “flip”, but it still looks beautiful. How this was done? Let’s take a look. Here’s the html structure.

Div “flip” contains all elements including the text. Div “break” is the gap between two panels, supported by two side hinges in div “link”.

<div class="flip">
"We'll be back shortly">
<div class="break">
<div class="link left"></div>
<div class="link right"></div>
</div><!--/break-->
</div><!--/flip-->

CSS controls how each div should work out. Everything is straight forward. Divs on absolute position creates the great visual effect!

#container .flip {
 width: 622px;
 height: 152px;
 color: #DADADA;
 font-size: 54px;
 font-weight: bold;
 text-align: center;
 line-height: 145px;
 letter-spacing: -2px;
 background: url('[flipping panel bg]') no-repeat;
 position: relative;
}

#container .flip .break {
 width: 584px;
 height: 2px;
 background: #181818;
 border-bottom: 1px solid #343434;
 position: absolute;
 top: 50%;
 left: 19px;
 color: #DADADA;
 font-size: 54px;
 font-weight: bold;
 text-align: center;
 line-height: 145px;
 letter-spacing: -2px;
}

#container .flip .break .link {
 width: 5px;
 height: 12px;
 background: url('[hinge image]') no-repeat;
 position: absolute;
 top: -3px;
}

#container .flip .break .link.right {
 right: 10px;
}

#container .flip .break .link.right {
 left: 10px;
}

jQuery “localscroll” function is so easy to implement! It’s a shame that I haven’t used this for so long.

After reading the basic jQuery library, and localscroll js, you’re set to go. Only following code will do the magic. Of course, I need to add more details if I want to specify divs and sections for localscroll.

<script type="text/javascript">
<!--
$(document).ready(function(){
$('[name of the specified section]').localScroll();
});
//-->
</script>

Just noticed that slideToggle didn’t work properly on IE6. The intended effect was that I wanted a hidden <dd> to appear with toggle animation when <dt> was clicked. But only text area within <dt> seemed to activate the toggle animation.

Solution

I read on this blog that “position” attribute on CSS could cause the error, but in my case neither <dt> nor <dd> had any position set. I also tried wrapping text with <span>, but without any success.

The solution for my problem was to set “height: 101%” to <dt>, specifically for IE6. Now it seems that the animation is rendered without any problems on all browsers including IE6.

Today I had to fix a mysterious error on IE that “z-index: 200″ components appeared below “z-index: 1″. As always, this error was only seen on IE 6 through 8.

What I wanted to do was to have “balloon” div appear on top of the “li” when mouseover-ed. (switching css style display: none → visible)

↓Original html code:

<ul>

<li class="genre">

<a href="#"><span>見出し</span></a>

<div class="balloon">

<ul class="subcategory">

<li><a href="#">リンク</a></li>

<li><a href="#">リンク</a></li>

</ul>

</div>

</li>

... (same list - aligned as a vertical menu)

CSS style was something like this:

li.genre { position: relative; z-index: 1;}

li.genre a {display: block;}

div.balloon {

With this,

position: absolute; top:0;

left: 148px; z-index: 200;}

But div.balloon(z-index 200) appeared below li.genre(z-index 1).

As it turned out, for some reason IE adds up z-index for elements with “position:relative”. So if the first <li> was z-index 200, the second <li> was rendered as z-index 201, third, 202… and so on. That’s why the mouseover never worked.

Javascript solved the problem. It’s a code that reverse the order of z-index for each <li> element:

$(function(){

	var categoryScope=$('div#categorySearch li.genre');
	var categorySize = categoryScope.size();

	categoryScope.each(function(i){
		$(this).css('z-index',categorySize-1*i);
	}).hover(function(){
		$(this).children('div.balloon').show();
	},function(){
		$(this).children('div.balloon').hide();
	});

});

“categorySize-1*i” does the magic.