How is the reveal done?

**SunnaH** · Apr 13, 2012 06:35

Some sites have example code which is not completely viewable within the text field. But once there is an onClick or hover the code stretches out of the field or text box to show it all or allow it to be selected and copied. This effect does not move any of the existing layout. As if the reveal was on a different z-index.

**ralph.m** · Apr 13, 2012 07:01

That sounds very much like JavaScript. Do you have an example?

**SunnaH** · Apr 13, 2012 07:49

I wish I did or I probably would not have to ask :-) I have seen it on a few CSS blogs so I am hoping I stumble on one again.

**RyanReese** · Apr 13, 2012 09:54

Originally Posted by SunnaH

Some sites have example code which is not completely viewable within the text field. But once there is an onClick or hover the code stretches out of the field or text box to show it all or allow it to be selected and copied. This effect does not move any of the existing layout. As if the reveal was on a different z-index.

Well without some sort of site to reference this with, I'd say it would be done in Javascript.

Is the stretching htat appears, is that instant or does the stretching occur over some short period?

You can have disabled="true" (I think that's how you write it) on <input>'s or textareas to avoid people from typing/editing it in, although I do believe you'd need Javascript to switch that setting.

So either way I do think there is probably at LEAST a little bit of Javascript going on

.

**dresden_phoenix** · Apr 13, 2012 10:14

W/o seeing the code that could be done any number of ways, with j/s or even CSS3.

I am thinking, since this is the CSS forum, that it could be a combination of OVERFLOW:hidden; , explicit height, CSS transition with a applied for that smooth effect.

**Paul O'B** · Apr 14, 2012 05:09

HI,

Did you mean something like this:

Code:

<!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>Untitled Document</title>
<style type="text/css">
.textbox{
	width:400px;
	border:1px solid #000;
	white-space:nowrap;
	text-overflow:ellipsis;
	padding:5px;	
	overflow:hidden;
}
.textbox:hover{overflow:visible}

</style>
</head>

<body>
<p class="textbox"> This is a longline of text that would normally stretch outside the confines of the container</p>
</body>
</html>

To use a transition you'd have to have a width for the expanded state which may not be as useful (transitions don't work with auto width).

Code:

<!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>Untitled Document</title>
<style type="text/css">
.textbox {
	width:410px;
	float:left;
}
.textbox p {
	padding:5px;
	border:1px solid red;
	background:#fff;
	margin:0;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	width:400px;
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-ms-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
	position:relative;
	z-index:2;
}
.textbox p:hover { width:600px }
.test {
	float:left;
	margin:0 0 0 10px;
	height:50px;
	width:200px;
	background:red;
	color:#fff;
	text-align:center;
}
</style>
</head>

<body>
<div class="textbox">
		<p>This is a longline of text that would normally stretch outside the confines of the container</p>
</div>
<div class="test">Normal content</div>
</body>
</html>

**SunnaH** · May 1, 2012 05:29

Is there a method to have a slider between two divs set at 50 % floated side by side that reveals the content of the left div by expanding to 80% on mouse over and the right div decreases to 20 %. Then the mouse over to the right div will increase it to 100% while decreasing the left div to 20%. Of course the transition between the two is at the same time should be gradual not an immediate click instance change.

**DaveMaxwell** · May 1, 2012 05:44

The easiest way to do it is just to set an inside margin on each div. Then on hover, set a minimum-width to 80%. This should get you the behavior you desire.

**SunnaH** · May 1, 2012 05:57

Thank you. Do you mind providing example code? I am a bit new and a visual example works better for me.

**SunnaH** · May 1, 2012 06:33

I hope I was explaining myself correctly in the beginning. Basically I am looking for the onMouseOUt for teh left and right divs to go back to its original width such as 50%. So the onMouseOver on either the left or right div will expand it to 80% while the right side decreasing to 20% This would work the same if for the other side too. When the user mouses over the right side which is currently at 20% the right div would expand to 800% and the left div will be at 20%. This transition happens simultaneously and is smooth. I was told the CSS3 property of transition would do something like this. AND I am only coding for IE 9+, Safari, Chrome, Firefox.

UPDATE: Found an example http://www.w3schools.com/css3/tryit....ss3_transition but I would need two of them side by side alternatively increasing and decreasing.

**SunnaH** · May 1, 2012 07:03

UPDATE: Found an example http://www.w3schools.com/css3/tryit....ss3_transition. But would need two of them side by side alternatively increasing and decreasing. 80%/20% or 20%/80%

**Paul O'B** · May 1, 2012 08:31

Originally Posted by SunnaH

UPDATE: Found an example http://www.w3schools.com/css3/tryit....ss3_transition. But would need two of them side by side alternatively increasing and decreasing. 80%/20% or 20%/80%

Doesn't my second example do exactly what you want?

**SunnaH** · May 1, 2012 08:37

Originally Posted by Paul O'B

Doesn't my second example do exactly what you want?

Yes it does for the left. I could not get it to behave the same way for the right. And instead of the z-index the left layer should push the opposite side on the same z level.

**Paul O'B** · May 1, 2012 09:25

You lost me there lol

You originally said you wanted the textbox to expand but not to influence the layout so it just slides over the top - which is what my example does.

I'm not sure what you are after now but the w3c link you pointed to is no different in essence from the effect in my example.

If you want content on the right to move out of the way then just remove the fixed widths from the parent.

**SunnaH** · May 1, 2012 09:30

I am very sorry Paul. I have been trying to make the code work the way I want but I am not getting. I also am trying to follow this examplehttp://jsfiddle.net/yCY9y/3/ but it is not firing. I think this effect can be achieved with ease-in-out. So no JavaScript :-)

**Paul O'B** · May 1, 2012 09:43

Do you mean something like this:

Code:

<!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>Untitled Document</title>
<style type="text/css">
.textbox {
	padding:5px;
	border:1px solid #999;
	background:#fff;
	margin:0;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	width:400px;
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-ms-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
	position:relative;
	z-index:2;
	float:left;
	background:yellow;
}
.textbox:hover { width:700px }
.test {
	margin:0 0 0 10px;
	overflow:hidden;
	background:red;
	color:#fff;
	text-align:center;
	padding:10px;
}
</style>
</head>

<body>
<p class="textbox">This is a longline of text that would normally stretch outside the confines of the container</p>
<div class="test">Normal content</div>
</body>
</html>

**SunnaH** · May 1, 2012 10:02

Yes, master Paul. How do u get the right side to behave the way?

**RyanReese** · May 1, 2012 11:14

The yellow part is floated, the red is not. By default, the red has no width, and due to the nature of what is happening, the red will take up the available width left. When Paul uses the CSS3 to expand the width, the red box (because there is less width available now), has to get smaller.

**SunnaH** · May 2, 2012 04:59

Been trying unsuccessfully yesterday. I was adding additional styles using a different class name for the right side thinking it would behave the same.

**RyanReese** · May 2, 2012 05:24

What additional styles are you trying to add?

**SunnaH** · May 2, 2012 05:47

*FYI: I do not have Internet connection at my desk. I have a tablet I am using which is not optimal to type. I am using a terminal not near my desk right now

I am floating the right [float: left;] and on hover increase the width [rightSide:hover85%]. I set the transitions on the right side too.

rightSide {
white-space:nowrap;
overflow:hidden;
width:20%;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-ms-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
position:relative;
z-index:2;

The styles for the left are fighting with the right. I can make it work for the right if I remove the left transitions and float. Should I also have them both on different z-indexes too?

**Paul O'B** · May 2, 2012 08:17

Hi,

You lost me again

If you want the expanding div on the right just move it around like so:

Code:

<!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>Untitled Document</title>
<style type="text/css">
.textbox {
	padding:5px;
	border:1px solid #999;
	background:#fff;
	margin:0;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	width:20%;
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-ms-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
	position:relative;
	z-index:2;
	float:right;
	background:yellow;
}
.textbox:hover { width:80% }
.test {
	margin:0 0 0 10px;
	overflow:hidden;
	background:red;
	color:#fff;
	text-align:center;
	padding:10px;
}
</style>
</head>

<body>

<p class="textbox">This is a longline of text that would normally stretch outside the confines of the container</p>
<div class="test">Normal content</div>
</body>
</html>

z-index has nothing to do with the effect as they are not overlapping.

The static element should not be floated and uses overflow:hidden to create a rectangular block to the side of a float that will fill the remaining space whatever it is (ie6 and 7 would need zoom:1.0 to create the same effect as the overflow:hidden does).

**SunnaH** · May 2, 2012 08:34

Sorry to confuse. I am trying to see what I am saying and doing incorrectly. If I do not get it today I will try to copy my code and post it tonight. BUT TO CLAIFY... the effect you made initially is nice and it behaves correctly. I am asking if the right side could also push the left on hover the exact same way. So ultimately you have both left and right sides behaving the same way as you made the left side.

**Paul O'B** · May 2, 2012 11:44

Hi,

I'm not sure what practical use it will be but I think you are after something like this

Code:

<!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>Untitled Document</title>
<style type="text/css">
.box1,.box2{
	width:50%;
	background:red;
	float:left;
	margin:0 -1px 0 0;	
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-ms-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
	min-height:200px;
}
.box2{
	float:right;
	margin:0 0 0 -1px;	
	background:blue;
}
.wrap:hover div{ width:20% }
.wrap .box1:hover{width:80%}
.wrap .box2:hover{width:80%}
</style>
</head>

<body>
<div class="wrap">
		<div class="box1">Box1 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </div>
		<div class="box2">Box2 lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </div>
</div>
</body>
</html>

**Spritanium** · May 5, 2012 10:24

http://result.dabblet.com/gist/26041...19e22b796ca61c

Is this right?

User Tag List

Thread: How is the reveal done?

Thread Tools

Display

How is the reveal done?

CSS ON Hover Between Two Floated Divs

Bookmarks

Bookmarks

Posting Permissions