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.
That sounds very much like JavaScript. Do you have an example?
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.
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 :).
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.
HI,
Did you mean something like this:
<!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).
<!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>
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.
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.
Thank you. Do you mind providing example code? I am a bit new and a visual example works better for me.
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.asp?filename=trycss3_transition but I would need two of them side by side alternatively increasing and decreasing.
UPDATE: Found an example http://www.w3schools.com/css3/tryit.asp?filename=trycss3_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?
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.
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.
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
Do you mean something like this:
<!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>
Yes, master Paul. How do u get the right side to behave the way?
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.
Been trying unsuccessfully yesterday. I was adding additional styles using a different class name for the right side thinking it would behave the same.
What additional styles are you trying to add?