twitter bootstrap 3 - Dynamically add or remove height and overflow-Y scroll property of a div using javascript -


i have 2 sections [divs] on page based on bootstrap. left section contains bootstrap panel resized occupy full page , on clicking glyph on panel header, right section slides in sharing page left panel. contents of right section panels contents dynamic[table , dynamic rows]. left panel coded occupy window height. want right side div occupy window height , overflow let scroll appear right hand section. if hard code height of right hand section , give overflow-y: scroll, works. want provide both using javascript , height window width. please help. 

    <body style = "height: 100%; overflow:hidden;">     <div id="navigationbar">         <nav class="navbar navbar-inverse">             <div class="container-fluid">                 <div class="navbar-header">                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">                         <span class="icon-bar"></span>                         <span class="icon-bar"></span>                         <span class="icon-bar"></span>                      </button>                     <a class="navbar-brand" href="#">tramm</a>                 </div>                 <div class="collapse navbar-collapse" id="mynavbar">                 <ul class="nav navbar-nav navbar-right" id="menu">                     <li><a href="">home</a></li>                                                 <li><a href="">page1</a></li>                     <li><a href="">page2</a></li>                     <li><a href="">page3</a></li>                     <li><a href="">page4</a></li>                 </ul>                 </div>             </div>         </nav>     </div>      <div id="wrapper">         <div id="main-wrapper" class="col-sm-6">             <div class="panel panel-info" style="margin-top: 1%">                 <div class="panel-heading" id="jnname">                     <div class="row">                         <div class="col-sm-8">                             name : somename                         </div>                         <div class="col-sm-4" style="text-align: right;">                             <span class="toggle-button bs-tooltip" id="showbutton" style="cursor: pointer" data-toggle="tooltip" data-placement="left" title="click toggle sidebar">                                 <span id="glyphbutton" class="glyphicon glyphicon-backward"></span>                             </span>                         </div>                     </div>                 </div>                                       <div class="panel-body" id="svgpanel">                 </div>             </div>         </div>           <div id="sidebar-wrapper" class="col-sm-6 sidebar">             <div class="panel panel-info" style="margin-top: 1%;" id="junctionparam">                 <div class="panel-heading" id="junctionparameters">junction parameters</div>                 <div class="panel-body">                     <p>                         please fill content more window height here...                     </p>                 </div>             </div>         </div>     </div> </body>

and have tried this. not seem working

    function autoadjust()     {         var $sidebarwrapperscroller;         $sidebarwrapperscroller = document.getelementbyid('sidebar-wrapper');         $sidebarwrapperscroller.style.height = $(window).height();         alert("setheight");         $sidebarwrapperscroller.style.overflowy = "scroll";     }

but without javascript, if set 

    <div id="sidebar-wrapper" class="col-sm-6 sidebar" style="height: 700px; overflow-y:scroll;">

then working. want height set window height dynamically.

if understood you need add overflow-y:scroll , height:auto sidebar-wrapper ? maybe jquery?

$("#sidebar-wrapper").click(function() {     if ( $("#sidebar-wrapper").css('display') == 'visible' ){         $("#sidebar-wrapper").css({"height":"auto", "overflow-y":"scroll"});      }else{         $("#sidebar-wrapper").css({"height":"", "overflow-y":""});     } });

replace sidebar-wrapper id glyph id in .click function

jsfiddle


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more