When you click 'Resume' some text comes in from the left. This is because I gave negative margin to the text initially.

But negative margin of intro_page gives no effect.

What I want is that:

1. When I click resume_page, text of resume should come in from left (this works) and text of intro_page should go out to the right (this doesn't work).

   Negative margin of intro_page doesn't seem to be working. Why is that?

2. Initially, page should be empty except the two links. Currently, intro_page page is shown. resume_page is hidden properly, as desired.

In short, everything about resume_page works perfectly. I want the exact same things to happen to intro_page

function clicked_resume(OnScreen)
{
    var resume = document.getElementById('resume_page');
    if(OnScreen == 1)
    {
        resume.className = '';
        clicked_about(0);
    }
    else if(OnScreen == 0)
    {
        resume.className = 'unseen';
    }
    
}

function clicked_about(OnScreen)
{
   
    var about = document.getElementById('intro_page');
    if(OnScreen == 1)
    {
        about.className = '';
        clicked_resume(0);

    }
    else if(OnScreen == 0)
    {
        about.className = 'unseen';
    }
}

#intro_page.unseen{
	display: block;
	margin-right: -200px;
}


#intro_page{
	margin-right: 0px;
	display: block;
	-webkit-transition: margin-right 1.5s ease-in;
	transition: margin-right 1.5s ease-in;
}

#resume_page.unseen{
	display: block;
	margin-left: -600px;
}

#resume_page{
	margin-left: 0px;
	display: block;
	-webkit-transition: margin-left 1.0s ease-in;
	transition: margin-left 1.0s ease-in;
}

 <h2 class="title_bar">
<ul>
					
	<li><span onclick = "clicked_about(1)">About</span></li>
	<li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
					
</h2> 

	
<div id="intro_page" class="unseen">
	<p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
	<figure class="intro_pic1">
	    <img src="img/award.jpg" alt="Receiving Award" height="50" />
	    <figcaption>Award 2015</figcaption>
	</figure>
</div>

<div id="resume_page" class="unseen">
	<p>My resume</p>
</div>
	

When you click 'Resume' some text comes in from the left. This is because I gave negative margin to the text initially.

But negative margin of intro_page gives no effect.

What I want is that:

1. When I click resume_page, text of resume should come in from left (this works) and text of intro_page should go out to the right (this doesn't work).

   Negative margin of intro_page doesn't seem to be working. Why is that?

2. Initially, page should be empty except the two links. Currently, intro_page page is shown. resume_page is hidden properly, as desired.

In short, everything about resume_page works perfectly. I want the exact same things to happen to intro_page

function clicked_resume(OnScreen)
{
    var resume = document.getElementById('resume_page');
    if(OnScreen == 1)
    {
        resume.className = '';
        clicked_about(0);
    }
    else if(OnScreen == 0)
    {
        resume.className = 'unseen';
    }
    
}

function clicked_about(OnScreen)
{
   
    var about = document.getElementById('intro_page');
    if(OnScreen == 1)
    {
        about.className = '';
        clicked_resume(0);

    }
    else if(OnScreen == 0)
    {
        about.className = 'unseen';
    }
}

#intro_page.unseen{
	display: block;
	margin-right: -200px;
}


#intro_page{
	margin-right: 0px;
	display: block;
	-webkit-transition: margin-right 1.5s ease-in;
	transition: margin-right 1.5s ease-in;
}

#resume_page.unseen{
	display: block;
	margin-left: -600px;
}

#resume_page{
	margin-left: 0px;
	display: block;
	-webkit-transition: margin-left 1.0s ease-in;
	transition: margin-left 1.0s ease-in;
}

 <h2 class="title_bar">
<ul>
					
	<li><span onclick = "clicked_about(1)">About</span></li>
	<li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
					
</h2> 

	
<div id="intro_page" class="unseen">
	<p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
	<figure class="intro_pic1">
	    <img src="img/award.jpg" alt="Receiving Award" height="50" />
	    <figcaption>Award 2015</figcaption>
	</figure>
</div>

<div id="resume_page" class="unseen">
	<p>My resume</p>
</div>
	

• javascript
• html
• css

4 Answers 4

Try using position: relative and right instead of margin-right. It's more reliable since it doesn't take the element's position into account when positioning other elements, like margin does. For bonus points you could even use transform: translate instead of right.

function clicked_resume(OnScreen)
{
    var resume = document.getElementById('resume_page');
    if(OnScreen == 1)
    {
        resume.className = '';
        clicked_about(0);
    }
    else if(OnScreen == 0)
    {
        resume.className = 'unseen';
    }
    
}

function clicked_about(OnScreen)
{
   
    var about = document.getElementById('intro_page');
    if(OnScreen == 1)
    {
        about.className = '';
        clicked_resume(0);

    }
    else if(OnScreen == 0)
    {
        about.className = 'unseen';
    }
}

body {
    margin: 0;
    overflow-x: hidden;
}

#intro_page.unseen{
    display: block;
	right: -100%;
}


#intro_page{
	position: relative;
    right: 0px;
	display: block;
	-webkit-transition: right 1.5s ease-in;
	transition: right 1.5s ease-in;
}

#resume_page.unseen{
	display: block;
	left: -600px;
}

#resume_page{
	position: relative;
    left: 0px;
	display: block;
	-webkit-transition: left 1.0s ease-in;
	transition: left 1.0s ease-in;
}

<h2 class="title_bar">
<ul>
					
	<li><span onclick = "clicked_about(1)">About</span></li>
	<li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
					
</h2> 

	
<div id="intro_page" class="unseen">
	<p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
	<figure class="intro_pic1">
	    <img src="img/award.jpg" alt="Receiving Award" height="50" />
	    <figcaption>Award 2015</figcaption>
	</figure>
</div>

<div id="resume_page" class="unseen">
	<p>My resume</p>
</div>

The Reason is that in CSS the elements are laid from left to right, margin-right would never work as you wish.

Just Modifying your CSS like this, it will work as a charm.

 body {
   overflow:hidden
}

#intro_page.unseen{
    transform: translateX(120%);
    transition: transform 1s ease-in;
}
#intro_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

#resume_page.unseen{
    transform: translateX(-100%);
    transition: transform 1s ease-in;
}

#resume_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

Hint: for better performance in animation always use translations instead of position, margin, width...

http://jsfiddle.net/wgsy6ufx/1/

As you can read in this guide, left and right negative margins don't behave the same : negative margin-left pulls the styled element towards the left, while negative margin-right pulls the adjacent right element towards the styled element. It doesn't move the styled element itself.

If you want to achieve your output, use position: relative and the left property to position your intro div in the far right : see this fiddle.

For anybody having similar issues...what worked for me was to change the width to auto instead of 100%.