CSS help with use of the transition element

HTML & CSS
1

CSS has never been nor think will ever be a strong point of my coding skills but we all have out Achilles heels…

I have a personal project that I am working on and could make use of the CSS transition element but I need a better understanding of it in order to implement it how I want it to work.

I looked at the W3Schools to get a basic understanding and still nada.

What I am looking to do is have a DIV element that when clicked expands to a size, example 100 pixels in height so that the underlying HTML elements then are visible, the DIV is to be an over flow hidden, the top bar as it were would be something like 10 pixels high.

So I guess what I am talking about is CSS that looks like…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>4.9</title>
<style>
div#clickbar {
    height:5px;
	width:100%;
}
div#topbar:hover{
	height:100px;
	}
div#topbar {
    height:5px;
    width:100%;

    background:#6699FF;
	overflow:hidden;
	
	transition-property: height;
	transition-duration: 1s;
	transition-timing-function: linear;
	transition-delay: 2s;
	/* Safari */
	-webkit-transition-property:height;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
	}

</style>
<script type="text/javascript">
window.onload = function(){
	div = document.getElementById("topbar");
}

</script>
</head>

<body>
	<div id="topbar">
		<div id="clickbar"></div>
		<form action="javascript:;" onsubmit="ajax.submitForm(this);">
			<input type="text" name="user" value=""> |
			<input type="text" name="pin" value=""> |
			<input type="submit" name="submit" value="Log On">
		</form>
	</div>
</body>
</html>

Which does what I want except for I want it to remain open and then close when the ajax function in the submit has given a green flag, for that part of the process I imagine that its JavaScript that will be setting the property, for now can we just concentrate on the opener portion so it stays open when hovered over and does not close when the mouse leave the window.

2

Hi,

CSS doesn’t have click events as such and you will have to do that with javascript. (You can do things with :focus or :target but not where you want to interact with forms or other focussable elements).

What you need to is to use some jS to detect a click on the required element and then add a class to it. Then you can use CSS to make the change in height with that class and the transition will take effect.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>4.9</title>
<style>
div#clickbar {
	height:5px;
}
div#topbar {
	height:5px;
	background:#6699FF;
	overflow:hidden;
	-moz-transition: height 1s linear 1s;
	-webkit-transition: height 1s linear 1s;
	transition: height 1s linear 1s;
}
div#topbar.transitionOn { height:100px; }
</style>
</head>

<body>
<div id="topbar">
		<div id="clickbar"></div>
		<form action="javascript:;" onsubmit="ajax.submitForm(this);">
				<input type="text" name="user" value="">
				|
				<input type="text" name="pin" value="">
				|
				<input type="submit" name="submit" value="Log On">
		</form>
</div>
<script type="text/javascript">
// myonclick.js 
startTransition = function() {
if (document.getElementById) {
		myEl = document.getElementById("topbar");
		myEl.onclick=function() {
			this.className +=" transitionOn";
		} 
 }
}
// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(startTransition);
</script>
</body>
</html>

You would then need to reverse the process and remove the class when the form is submitted and the element will close. As my JS skills are shaky to say the least it might be better if we move this to the JS forum once you are happy with the CSS side of things.

3

Ok thanks, I was looking at JavaScript as a method the problem is that if I remove a class then the problem is it removes the styling, I am not sue how you would refer to a specific element of a class like the transition element which I have read if the timing is 0 the element does not do anything, eg, if your element has expanded, won’t collapse.

4

Hi,

The class that is added applies one property as per my example.


div#topbar.transitionOn { height:100px; }

Adding the class triggers the CSS transition and the element slides down. Remove the class and the element slides back up. You are not changing anything except the height.

Transitions work when a change to the element is detected so you just set the transition up as per normal;


div#topbar {
	height:5px;
	background:#6699FF;
	overflow:hidden;
	-moz-transition: height 1s linear 1s;
	-webkit-transition: height 1s linear 1s;
	transition: height 1s linear 1s;
}

I’ve added an extra line of JS to the demo so if you click the element again the blue box will slide back up. Obviously you would tie that into the end of a successful ajax transition or whatever it is you are doing.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>4.9</title>
<style>
div#clickbar {
	height:5px;
}
div#topbar {
	height:5px;
	background:#6699FF;
	overflow:hidden;
	-moz-transition: height 1s linear 1s;
	-webkit-transition: height 1s linear 1s;
	transition: height 1s linear 1s;
}
div#topbar.transitionOn { height:100px; }
</style>
</head>

<body>
<div id="topbar">
		<div id="clickbar"></div>
		<form action="javascript:;"  onsubmit="ajax.submitForm(this);">
				<input type="text" name="user" value="">
				|
				<input type="text" name="pin" value="">
				|
				<input  type="submit" name="submit" value="Log On">
		</form>
</div>
<script type="text/javascript">
// myonclick.js 
startTransition = function() {
if (document.getElementById) {
		var myEl = document.getElementById("topbar");
		myEl.onclick=function() {
		  var c = " " + this.className + " ";
			  if (c.indexOf(" " + "transitionOn" + " ") != -1){
			  this.className=this.className.replace('transitionOn', '')
			} else { 
			  this.className +=" transitionOn";
			}
			} 
 }
}
// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(startTransition);
</script>
</body>
</html>
5

Ok… :smiley:

What I did was very simple, added an onFocus event that then set onBlur event handler. The actual Div that expands I set the minimum height to be 45pixels and on blur this got removed. Now when either of the fields have focus, the display div does not collapse.

function modifyTransition(o){
	o.onblur = function(){
		divtop.style.minHeight = "";
	}
	divtop.style.minHeight = "45px";

}
6

BTW Thanks for your help. It is an interesting approach that I will look at for more complex objects.