bug814037.html (1106B)
1 <html> 2 <head> 3 <meta name="viewport" content="minimum-scale=1,width=device-width"> 4 <style> 5 body { 6 width: 100%; 7 margin: 0px; 8 transition: transform 300ms ease; 9 overflow-x: hidden; 10 } 11 12 body.section1 { 13 transform: translateX(0%); 14 } 15 16 body.section2 { 17 transform: translateX(-100%); 18 } 19 20 section { 21 width: 100%; 22 height: 100%; 23 position: absolute; 24 } 25 26 #section1 { 27 left: 0px; 28 } 29 30 #section2 { 31 left: 100%; 32 } 33 .mypossie { 34 position:absolute; 35 left: -1000px; 36 } 37 </style> 38 39 </head> 40 <body class="section1"> 41 <section id="section1"> 42 <div id="assertMe1"> 43 <p>Section 1</p> 44 </div> 45 <button id="b1" onclick="var sect = document.getElementsByTagName('body')[0]; sect.classList.add('section2'); sect.classList.remove('section1');">Show section 2</button> 46 </section> 47 48 <section id="section2"> 49 <div id="assertMe2"> 50 <p>Section 2</p> 51 </div> 52 <button id="b2" onclick="var sect = document.getElementsByTagName('body')[0]; sect.classList.add('section1'); sect.classList.remove('section2'); ">Show section 1</button> 53 </section> 54 <section class='mypossie'>out in left field!</section> 55 </body> 56 </html>