Alex Mauzon

Most important (and complex) problem is to position some container in the vertical center of long page (with scroller) in IE6.

This is an ultimate solution (at least I think so) and I have to say HUGE THANKS to Vadim Makeev aka Pepelsbey for urgent and completely satisfactory help.

This is code fragment from working site and I have no time to simplify it to some model but it should be helpful.
Task: semitransparent layer on whole page and some notification container in the middle of page (fixed width and height):
Whatever.
Continue reading »

Simplest JS function to add/remove custom classname with carrying about another classes.
just to remember.

function toggleClassName(obj,sClassName,switcher){
	if(switcher){
		if(obj.className.indexOf(sClassName)==-1)
			obj.className=obj.className + ' ' + sClassName;
	}else{
		var re = new RegExp(sClassName,'g');
		obj.className=obj.className.replace(re,'');
	}
}

sapienti sat

There is no brand new subject, really.
even 2 old articles (Vertical centering using CSS and CSS Vertical Centering again) from this blog.

2 problems:
1) Small height: if browser height is smaller than main container (for all browsers):


function adjustHeight(){
   if(document.body.offsetHeight > 450){
      document.body.style.height='100'+'%';
   }else{
      document.body.style.height='450px';
   }
}

onload and onresize, of course.

2) IE7: this rule:

#ContainerDiv {position: relative; top: -50%;}

moves the #ContainerDiv above the top browser’s border for 50%. Reasonable, huh.

The cure:

#ContainerDiv {position: relative; top: expression(document.body.offsetHeight/2-this.offsetHeight/2);}

for custom IE7 CSS file using cond. comments:

<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" />
<![endif]-->

As we all know there is a problem for :hover pseudoclass for Microsoft Internet Explorer.
There are many solutions (eg csshover.htc) but all of them have one big and ugly problem: MS IE flickering on mouseout event.

I mean when you move your mouse WITHIN the object but over some child nodes mouse doesn’t leave the HOVERED object but IE thinks it does and onmousout event occurs.

All correct browsers let us use simple :hover pseudoclass for any tag. Except IE. So we should solve the problem for IE only.

Continue reading »

event:Selectors allow you to apply an event such as mouseover, mouseout, click, et al using a CSS style syntax. It keeps your layers separated and greatly reduces the amount of code you have to write.

event:Selectors library