change your CSS
.skew {margin: 0 0 0 220px;width:140px;}
Your both text will remain at same place when your div expand/collapse
Domanda
I'm really close to getting this to work, but I'm a little stuck.
I need the second text to stay put, while the div that contains it expands width-wise. So that the two pieces of text are overlapping each other at all times.
HTML:
<div class='wrapper'>
<div class="page content1">
<div class='skewfix'>
<div class='skew'>
something else in here
</div>
</div>
</div>
<div class="page content2">
<div class='skewfix'>
<div class='skew'>
something else in here
</div>
</div>
</div>
</div>
CSS:
div.page{
position: absolute;
top: 0;
left: 0;
margin: 0 0 0 -25%;
width: 125%;
transition: width 2s;
overflow: hidden;
height: 100%;
-webkit-transform: skew(45deg,0);
-webkit-transform-origin: 0% 0%;
}
.skewfix{
-webkit-transform: skew(-45deg,0);
-webkit-transform-origin:0% 0%;
}
div.content1{
background:tomato;
}
div.content2{
background: blue;
width:0px;
}
.skew{
margin:0 0 0 25%;
}
div.wrapper{
width: 100%;
overflow: hidden;
position: relative;
height: 200px;
}
JS:
$('.content1').click(function(){
$('.content2').width("125%");
});
$('.content2').click(function(){
$('.content2').width("0%");
});
Soluzione
change your CSS
.skew {margin: 0 0 0 220px;width:140px;}
Your both text will remain at same place when your div expand/collapse