How can I align the following coloured divs next to each other, so that each one is the full width of the browser window (responsive) and only one is display at a time?
http://codepen.io/anon/pen/gpxvjm
HTML:
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>
CSS:
body {background: grey;}
.p1 {
background: red;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.p2 {
background: blue;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.p3 {
background: green;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.content-area {
width: 100%;
overflow: hidden;
}
Also, when the user selects the previous and next buttons, how can I then push the divs either left or right depending on which anchor link is selected?
I would really recommend slick.js to create the carousel effect you are after.
It is super easy to setup, allows for responsive design, is quite compatible with old IE and has features like arrows and dots built in!
If you want to run your own, i would suggest toggling classes in javascript which leverage css transforms & transitions to ensure maximum performance.
For example,
.page{
width: 100%;
height: 500px;
position: absolute;
top: 0;
transition: .5s;
}
.hide-left{
transform: translateX(-100%);
}
.hide-right{
transform: translateX(100%);
}
Adding browser specific prefixes where required.
This is one of solution, define parent with (number of pages) x 100% width and each child of page 100% / (number of pages) width :
var currentPage = 0;
$('.previous-page').on('click', function() {
currentPage--;
$('.content-area').css('left', (currentPage * -100) + '%');
});
$('.next-page').on('click', function() {
currentPage++;
$('.content-area').css('left', (currentPage * -100) + '%');
});
body {background: grey;}
.content-area div {
float: left;
width: 33.3333%;
display: inline;
overflow: hidden;
}
.p1 {
background: red;
}
.wrap {
width: 100%;
position: relative;
overflow: hidden;
}
.content-area {
width: 300%;
overflow: hidden;
left: 0;
position: relative;
-webkit-transition: left 2s;
transition: left 2s;
}
.p2 {
background: blue;
}
.p3 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>
You can improve the script, i just made it to illustrate the slider.
Here, I've created a jsfiddle here for what I think it is that you want. I've also created a snippet below.
$(document).ready(function () {
for (var i = 0; i < $(".content-area div").length; i++) {
$(".content-area div").eq(i).css({
left: "+=" + parseInt($(".content-area").width() * i, 10)
});
}
});
var currentPage = 0; //0th index
$(".previous-page").click(function () {
changePage(-1);
});
$(".next-page").click(function () {
changePage(1);
});
function changePage(updown) {
if ($(".content-area div")[currentPage + updown]) {
$(".content-area div").animate({
left: "+=" + parseInt($(".content-area").width() * -updown, 10)
},1600);
currentPage += updown;
}
}
body, html {
background: grey;
margin: 0;
padding: 0;
}
.p1 {
background: red;
}
.p2 {
background: blue;
}
.p3 {
background: green;
}
.content-area {
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow: hidden;
}
.content-area div {
position:absolute;
left:0;
width: 100%;
height:100%;
}
.next-page, .previous-page {
z-index:2;
position:fixed;
bottom:5px;
}
.next-page {
right:5px;
}
.previous-page {
left:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page" href="#">Next Page</a>
Related
In my div is the overlay of another absolutely positioned div. However the text is still going beyond the div.
var mainDiv = ".myclass";
var mainDivP = ".myclass p";
$(window).on("load",function(){ multiLine_ellipsis(mainDiv, mainDivP); });
function multiLine_ellipsis(mainDiv, mainDivP) {
$(mainDivP).each(function(index) {
var divh = $(mainDiv).height();
if ($(this).outerHeight() > divh) {
var returnText = $(this).text().replace(/\W*\s(\S)*$/, '...');
console.log(returnText);
$(this).text(returnText);
}
});
}
.myclass {
color: #FFFFFF;
font-family: "my-font";
font-size: 28px;
padding: 15px;
height: 100px;
word-wrap: break-word;
overflow: hidden;
position: relative;
}
.myOverlay {
background-image: url("https://dksa1a9fhenpv.cloudfront.net/website/images/overlay.png");
position: absolute;
width: 100%;
z-index: 1;
bottom: 0;
height: 100%;
}
.outerDiv{
width:231px;
height:173px;
position:relative;
}
p{margin:0 0 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerDiv">
<div class="myOverlay">
<div class="myclass">
<p>jadu's best Accommodation/ abcd hddndehd lfjhgs</p>
</div>
</div>
</div>
I should get ... at the end of the statement but i am not getting it.
Your CSS hides the rest, just change font-size to 30px you will see some part of the hidden part.
I want to create 2 buttons can when clicked will reveal their respective content from 2 different directions.
Example:
When a user click on smt, the content will open from the left.
When a user click on mi, the content will open from the right.
So far, I managed to do the smt part only as I don't know how to make the "mi" part work.
Below is my code:
Style:
<style>
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 60px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 650px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
SMT button:
<div id="myNav" class="overlay">
×
<div class="overlay-content">Smt</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px; left:300px;" onclick="openNav()">smt</span>
JavaScript:
<script>
function openNav() {
document.getElementById( "myNav" ).style.width = "100%";
}
function closeNav() {
document.getElementById( "myNav" ).style.width = "0%";
}
</script>
How can I re-use the same code for the second button?
I think you are looking for this.. May be this could hep you
I use jquery-ui, function slide to achieve desire effect
Using single content
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'right'},1000);
} else {
$('#userNav').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
#userNav{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div id="userNav">User Area</div>
Using separate content (i use flex to make both content show inline you can just remove class main-content to show them on separate line as block)
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav1').is(':hidden')) {
$('#userNav1').show('slide',{direction:'right'},1000);
} else {
$('#userNav1').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
.area{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
.main-content {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div class="main-content">
<div class="area" id="userNav">User Area 1</div>
<div class="area" id="userNav1">User Area 2</div>
</div>
You can pass the Id to the function like this:
onclick="openNav("myNav1")"
And if you need to hide element, You can use: display: "none"
<script>
function openNav(id) {
document.getElementById(id).style.display = "block";
}
function closeNav(id) {
document.getElementById(id).style.display = "none";
}
</script>
Just need to do this for the code:
Add "2" to "openNav", "myNav2", "closeNav2"
< script>
function openNav2() {
document.getElementById( "myNav2" ).style.width = "100%";
}
function closeNav2() {
document.getElementById( "myNav2" ).style.width = "0%";
}
</script>
Same for the button code, add "2" to "myNav", "openNav", "closeNav"
<div id="myNav" class="overlay">
×
<div class="overlay-content">MI</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px;
left:300px;" onclick="openNav()">MI</span>
I have these 2 divs and when I click on div 1 I want it to go over the second div, and if I click on Div 1 again I want it to go back to its original position (I want Div 1 to increase its width so it goes over the second Div). Here is my code where I have my 2 divs next to each other. Can anyone point me in the right direction on how to accomplish this? Thanks a lot in advance!
NOTE:
- No jQuery please. I'm trying to accomplish this with javascript and css.
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
}
#wide {
flex: 1;
background: lightgreen;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
If you're willing to ditch flex, you can use a combination of float , postion:absolute and transition so that the main div "slides over" the other div
document.querySelector("#wide").onclick = toggleWidth;
function toggleWidth() {
this.classList.toggle("active");
}
#parent {
position: relative;
}
#narrow {
width: 200px;
background: lightblue;
float: right;
}
#wide {
position: absolute;
background: lightgreen;
width: calc(100% - 200px);
transition: width 2s;
}
#wide.active {
width: 100%;
opacity: 0.9;
}
<div id="parent">
<div id="wide">Div 1</div>
<div id="narrow">Div 2</div>
</div>
Note: Changing the opacity is purely optional, I've only done it to further illustrate the "slide over" effect.
Try this
#parent {
display: flex;
}
#narrow {
width: 20vw;
position: absolute;
left: calc(80vw - 10px);
background: lightblue;
z-index: 1;
margin: 0;
}
#wide {
width: calc(80vw - 10px);
background: lightgreen;
transition: all 0.3s ease-out;
}
.wider {
width: 100vw!important;
z-index: 2;
}
<div id="parent">
<div id="wide" onclick="myFunction()">Div 1</div>
<div id="narrow">Div 2</div>
</div>
<script>
function myFunction() {
var element = document.getElementById("wide");
element.classList.toggle("wider");
}
</script>
You can try it using JavaScript.
First, you prepare your CSS:
#narrow {
width: 200px;
transition: 0.32s;
overflow: hidden;
}
#wide.fullwidth ~ #narrow {
width: 0;
opacity: 0;
}
Then, the JavaScript, like this:
document.querySelector("#wide").onclick = changeDivWidth;
var wideFull = false;
function changeDivWidth () {
if (!wideFull) {
this.classList.add("fullwidth");
wideFull = true;
return; // if variable wideFull is false, function stops here
}
wideFull = false;
this.classList.remove("fullwidth");
}
Shorter approach using toggle();
document.querySelector("#wide").onclick = changeDivWidth;
function changeDivWidth () {
this.classList.toggle("fullwidth");
}
Are you looking for something like this : JSFiddle ?
JavaScript (Pure) :
function HideDivOne(){
var wide = document.getElementById("wide");
var narrow = document.getElementById("narrow");
if (wide.style.width == "70%"){
wide.style.width = "100%";
narrow.style.width = "0%";
narrow.style.opacity = "0";
}
else{
wide.style.width = "70%";
narrow.style.width = "30%";
narrow.style.opacity = "1";
}
}
CSS
#parent {
display: flex;
}
#narrow {
width: 30%;
background: lightblue;
height: 20px;
transition: 0.2s;
}
#wide {
width: 70%;
flex: 1;
background: lightgreen;
height: 20px;
transition: 0.2s;
}
HTML
<div id="parent">
<div id="wide" onclick="HideDivOne()">Div1</div>
<div id="narrow" onclick="HideDivTwo()">Div2</div>
</div>
You can change the z-index of the divs based on your desired effect. My suggestion is using jQuery. On click on div 1 add a class to the div that modify the zindex, that is, if the class is not already added, if so, remove it.
I wanted to do a cool menu effect for a website I'm working on. I'm having a div act as the the section for the main content. When the user opens the menu, the main content div will resize and move out of the way, revealing the menu. However, when I do this with the code I have written, it always loses my scrolling place on the page. Is there any way to keep my place on the page when it shrinks and also when it expands back again? Below is what I have. Thank you in advance!
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Please take a look at the snippet below. Notice how the overflow property is used.
You have to scroll mock-body-container to keep its scrolling position.
You're scrolling body instead, so when you scale mock-body-container there is nothing to scroll in body and you loose the scrolling position.
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
overflow:auto;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Once you know the element that was in focus it should be relatively easy. If you need to find which element was last in focus, you can do that with a scroll function. If you need this as well let me know and I will update my answer.
If you know that #mock-body is the last element in focus, just scroll back to it after the resize.
In this example I've used jQuery as it makes this interaction easier, but this can be done (albeit more verbosely) with vanilla JS as well.
$('html, body').animate({
scrollTop: $('#mock-body').offset().top
}, 0); // If you want the animation to be smoother you can increase 0 to a higher number
A simple way to do it is to remember the position of the document scroll and reapply it when you getting back to "normal" view:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
Check it out:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
body {
margin: 0;
background: #000;
}
.body-on-burger {
max-width: 100%;
overflow-x: hidden;
}
.mock-body-container {
height: 100vh;
}
.mock-body-container-on-burger {
height: 100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change {
overflow: scroll;
}
.mock-body {
position: relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height: 50px;
width: 50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height: 500px;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Legend: _s(el) returns first match of el and s_(d) checks if d has class body-on-burger.
The simple way to do this is to determine the change in height during the resize, and scroll that much.
const heightChange = newHeight - initialHeight;
scrollableDiv.scrollTop = scrollableDiv.scrollTop - heightChange;
In my case I am using a resize method I wrote, so I do this work inside of a window.addEventListener("mousemove", handleResize); when I know the div in actively being resized by the user.
This will still work fine with native html resizable elements, you just need to figure out how/when to listen for resize/drag events accordingly.
I'm trying to animate an element to move: left:0px but It doesn't seem to work. I surmise the issue is that the element isn't absolute positioned but how would I do that with animate?
fid: https://jsfiddle.net/jzhang172/j2yrumyg/8/
$(function(){
var cheese= $('.ok').offset().top; //Define top of 'hey'
//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
if ( $(window).scrollTop() >= cheese ) {
$('.ok').addClass('top');
$('.nice').hide().fadeIn().html('ok');
$(".nice").animate({
left:"0"
}, 600);
$('.nice').addClass('maybe');
}
else{
$('.ok').removeClass('top');
$('.nice').removeClass('maybe');
$('.nice').html('Hey');
}
});
//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//
$('.ok').hover(function(){
if(!$(this).hasClass("top"))
$(this).addClass('proj-hover');
},function(){
$(this).removeClass('proj-hover');
});
//
//Animate on click
//
$('.ok').click(function(){
if ( $(window).scrollTop() >= cheese ) {
}
else{
$("body, html").animate({
scrollTop: $('.other').offset().top
}, 600);
}
});
});
*{
box-sizing:border-box;
}
body,html{
padding:0;
margin:0;
}
.div{
height:100vh;
width:100%;
background:#6464FF;
}
.other{
height:1000px;
width:100%;
background:#FF6161;
}
.ok{
position:absolute;
bottom:0;
left:50%;
margin-left:-100px;
width:200px;
height:50px;
line-height:50px;
background:black;
color:white;
text-align:center;
transition:1s;
}
.top{
position:fixed;
top:0;
left:0;
transition:.7s;
margin-left: 0px;
width:100%;
}
.proj-hover{
background:white;
color:black;
}
.blue{
background:blue;
}
.nice{
transition:0s;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="ok">
<p class="nice">Hey</p>
</div>
</div>
<div class="other">
</div>
To move the text to the left, which is centered by a text-alignment property, you have to change the width of the container. I did the animation with CSS3 by adding some css and removing the jquery animation of the element nice :
.nice {
margin: 0px;
width: 100%;
transition: width .6s;
}
.maybe {
width: 0;
}
Here the complete code:
$(function() {
var cheese = $('.ok').offset().top; //Define top of 'hey'
//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
if ($(window).scrollTop() >= cheese) {
$('.ok').addClass('top');
//$(".nice").animate({
// width: '0%'
//}, 600).css('overflow', '');
$('.nice').addClass('maybe');
} else {
$('.ok').removeClass('top');
$('.nice').removeClass('maybe');
$('.nice').html('Hey');
}
});
//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//
$('.ok').hover(function() {
if (!$(this).hasClass("top"))
$(this).addClass('proj-hover');
}, function() {
$(this).removeClass('proj-hover');
});
//
//Animate on click
//
$('.ok').click(function() {
if ($(window).scrollTop() >= cheese) {
} else {
$("body, html").animate({
scrollTop: $('.other').offset().top
}, 600);
}
});
});
* {
box-sizing: border-box;
}
body,
html {
padding: 0;
margin: 0;
}
.div {
height: 100vh;
width: 100%;
background: #6464FF;
}
.other {
height: 1000px;
width: 100%;
background: #FF6161;
}
.ok {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -100px;
width: 200px;
height: 50px;
line-height: 50px;
background: black;
color: white;
text-align: center;
transition: 1s;
}
.top {
position: fixed;
top: 0;
left: 0;
transition: .7s;
margin-left: 0px;
width: 100%;
}
.proj-hover {
background: white;
color: black;
}
.blue {
background: blue;
}
.nice {
transition: 0s;
margin: 0px;
width: 100%;
transition: width .6s;
}
.maybe {
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="ok">
<p class="nice">Hey</p>
</div>
</div>
<div class="other">
</div>
Not sure if I understand your question. The "ok" should move to the left?
You have declared width:100%; in your CSS class top. So it is already left. Remove it and it will work.
Or you might want within the .nice class:
position:absolute;
left:0; right:0;
margin: auto;
and do a
$(".nice").animate({
right:"100%"
}, 600);