javascript - How do I change the position of this sliding text-area? -


i'm trying add disclaimer section website i'm working on. want tab-like button @ bottom of every page open text area.

i searched codepen.io bit , found simple way it. after removing non-relevant syntax, tried move tab top of page bottom.

here's came across problem. when tab @ top of page, text area push down tab when clicking on it.

now it's @ bottom, textarea shows above tab, tab itselfs stays @ bottom of page.

how make sure text area pops beneath tab, pushing tab up?

$(document).on('click', '#menu-tab', function() {    $('#menu-nav').slidetoggle('slow');  });
body {    background-color: #333333;    text-align: center;  }  #menu-wrapper {    position: absolute;    bottom: 0;    left: 0;    width: 100%;  }  #menu-tab {    background-color: #fc4349;    cursor: pointer;    margin: 0% 45% 0% 45%;    padding: 5px 10px;  }  #menu-nav {    display: none;    background-color: #fc4349;    margin: 0% 30% 0% 30%;  }
<body>    <div id="menu-wrapper">      <div id="menu-nav">disclaimertextdisclaimertextdisclaimertext        <br>disclaimertextdisclaimertextdisclaimertext</div>      <div id="menu-tab" class="closed">disclaimer</div>    </div>    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  </body>

in case description didn't give clear image of situation:

tab @ top of screen tab @ top of screen

tab @ bottom of screen tab @ bottom of screen

move html containing disclaimer below tab

(demo)

<div id="menu-wrapper">   <div id="menu-tab" class="closed">disclaimer</div>   <div id="menu-nav">disclaimertextdisclaimertextdisclaimertext     <br>disclaimertextdisclaimertextdisclaimertext</div> </div>

Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l...
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more