API tools faq
paste
artsja

Scroll Tabs Horizontal

artsja
Jun 25th, 2016
633
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.60 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3.  
  4. /* TWO TABS */
  5.  
  6.  
  7.  
  8. <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '0px'; document.getElementById('div2').style.left = '510px';">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-510px'; document.getElementById('div2').style.left = '0px';">LINK 2</a>
  9.  
  10. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  11. <div id="div1" style="background: #000; position:absolute; top:0px; left:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; top:0px; left:510px; width:500px; height:300px; transition: all 2s">div2</div>
  12. </div>
  13.  
  14.  
  15.  
  16.  
  17. /* THREE TABS */
  18.  
  19.  
  20.  
  21. <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '0px'; document.getElementById('div2').style.left = '510px'; document.getElementById('div3').style.left = '1020px'; document.getElementById('div4').style.left = '-1530px'">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-510px'; document.getElementById('div2').style.left = '0px'; document.getElementById('div3').style.left = '510px'; document.getElementById('div4').style.left = '1020px'">LINK 2</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-1020px'; document.getElementById('div2').style.left = '-510px'; document.getElementById('div3').style.left = '0px'; document.getElementById('div4').style.left = '510px'">LINK 3</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-1530px'; document.getElementById('div2').style.left = '-1020px'; document.getElementById('div3').style.left = '-510px'; document.getElementById('div4').style.left = '0px'">LINK 4</a>
  22.  
  23. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  24. <div id="div1" style="background: #000; position:absolute; top:0px; left:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; top:0px; left:510px; width:500px; height:300px; transition: all 2s">div2</div> <div id="div3" style="background: #000; position:absolute; top:0px; left:1020px; width:500px; height:300px; transition: all 2s">div3</div> <div id="div4" style="background: #000; position:absolute; top:0px; left:1530px; width:500px; height:300px; transition: all 2s">div4</div>
  25. </div>
  26.  
  27.  
  28.  
  29. /* FOUR TABS */
  30.  
  31.  
  32.  
  33. <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '0px'; document.getElementById('div2').style.left = '510px'; document.getElementById('div3').style.left = '1020px'; document.getElementById('div4').style.left = '1530px';">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-510px'; document.getElementById('div2').style.left = '0px'; document.getElementById('div3').style.left = '510px'; document.getElementById('div4').style.left = '1020px';">LINK 2</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-1020px'; document.getElementById('div2').style.left = '-510px'; document.getElementById('div3').style.left = '0px'; document.getElementById('div4').style.left = '510px';">LINK 3</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-1530px'; document.getElementById('div2').style.left = '-1020px'; document.getElementById('div3').style.left = '-510px'; document.getElementById('div4').style.left = '0px';">LINK 4</a>
  34.  
  35. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  36. <div id="div1" style="background: #000; position:absolute; top:0px; left:0px; width:500px; height:300px; transition: all 2s">div1
  37.  
  38. </div> <div id="div2" style="background: #000; position:absolute; top:0px; left:510px; width:500px; height:300px; transition: all 2s">div2
  39.  
  40. </div> <div id="div3" style="background: #000; position:absolute; top:0px; left:1020px; width:500px; height:300px; transition: all 2s">div3
  41.  
  42. </div> <div id="div4" style="background: #000; position:absolute; top:0px; left:1530px; width:500px; height:300px; transition: all 2s">div4
  43.  
  44. </div>
  45. </div>
  46.  
  47.  
  48.  
  49. /* FIVE TABS */
  50.  
  51.  
  52.  
  53. <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '0px'; document.getElementById('div2').style.left = '510px'; document.getElementById('div3').style.left = '1020px'; document.getElementById('div4').style.left = '1530px'; document.getElementById('div5').style.left = '2040px' ">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-510px'; document.getElementById('div2').style.left = '0px'; document.getElementById('div3').style.left = '510px'; document.getElementById('div4').style.left = '1020px'; document.getElementById('div5').style.left = '1530px' ">LINK 2</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-1020px'; document.getElementById('div2').style.left = '-510px'; document.getElementById('div3').style.left = '0px'; document.getElementById('div4').style.left = '510px'; document.getElementById('div5').style.left = '1020px' ">LINK 3</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-1530px'; document.getElementById('div2').style.left = '-1020px'; document.getElementById('div3').style.left = '-510px'; document.getElementById('div4').style.left = '0px'; document.getElementById('div5').style.left = '510px'">LINK 4</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-2040px'; document.getElementById('div2').style.left = '-1530px'; document.getElementById('div3').style.left = '-1020px'; document.getElementById('div4').style.left = '-510px'; document.getElementById('div5').style.left = '0px'">LINK 5</a>
  54.  
  55. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  56. <div id="div1" style="background: #000; position:absolute; top:0px; left:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; top:0px; left:510px; width:500px; height:300px; transition: all 2s">div2</div> <div id="div3" style="background: #000; position:absolute; top:0px; left:1020px; width:500px; height:300px; transition: all 2s">div3</div> <div id="div4" style="background: #000; position:absolute; top:0px; left:1530px; width:500px; height:300px; transition: all 2s">div4</div> <div id="div5" style="background: #000; position:absolute; top:0px; left:2040px; width:500px; height:300px; transition: all 2s">div5</div>
  57. </div>
  58.  
  59.  
  60.  
  61.  
  62. /* SIX TABS */
  63.  
  64.  
  65.  
  66. <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '0px'; document.getElementById('div2').style.left = '510px'; document.getElementById('div3').style.left = '1020px'; document.getElementById('div4').style.left = '1530px'; document.getElementById('div5').style.left = '2040px'; document.getElementById('div6').style.left = '2550px' ">LINK 1</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-510px'; document.getElementById('div2').style.left = '0px'; document.getElementById('div3').style.left = '510px'; document.getElementById('div4').style.left = '1020px'; document.getElementById('div5').style.left = '1530px'; document.getElementById('div6').style.left = '2040px'">LINK 2</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-1020px'; document.getElementById('div2').style.left = '-510px'; document.getElementById('div3').style.left = '0px'; document.getElementById('div4').style.left = '510px'; document.getElementById('div5').style.left = '1020px'; document.getElementById('div6').style.left = '1530px'">LINK 3</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-1530px'; document.getElementById('div2').style.left = '-1020px'; document.getElementById('div3').style.left = '-510px'; document.getElementById('div4').style.left = '0px'; document.getElementById('div5').style.left = '510px'; document.getElementById('div6').style.left = '1020px'">LINK 4</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-2040px'; document.getElementById('div2').style.left = '-1530px'; document.getElementById('div3').style.left = '-1020px'; document.getElementById('div4').style.left = '-510px'; document.getElementById('div5').style.left = '0px'; document.getElementById('div6').style.left = '510px'">LINK 5</a> <a href="javascript:;" onmousedown="document.getElementById('div1').style.left = '-2550px'; document.getElementById('div2').style.left = '-2040px'; document.getElementById('div3').style.left = '-1530px'; document.getElementById('div4').style.left = '-1020px'; document.getElementById('div5').style.left = '-510px'; document.getElementById('div6').style.left = '0px'">LINK 6</a>
  67.  
  68. <div style="position:relative;overflow:hidden; width:500px; height:300px;">
  69. <div id="div1" style="background: #000; position:absolute; top:0px; left:0px; width:500px; height:300px; transition: all 2s">div1</div> <div id="div2" style="background: #000; position:absolute; top:0px; left:510px; width:500px; height:300px; transition: all 2s">div2</div> <div id="div3" style="background: #000; position:absolute; top:0px; left:1020px; width:500px; height:300px; transition: all 2s">div3</div> <div id="div4" style="background: #000; position:absolute; top:0px; left:1530px; width:500px; height:300px; transition: all 2s">div4</div> <div id="div5" style="background: #000; position:absolute; top:0px; left:2040px; width:500px; height:300px; transition: all 2s">div5</div> <div id="div6" style="background: #000; position:absolute; top:0px; left:2040px; width:500px; height:300px; transition: all 2s">div6</div>
  70. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!