jquery - Remove div inline style on device rotation -
i working on search form shows expanded on desktop , collapsed on mobile devices. ok except 1 issue noticed.
to see issue, please replicate these steps in https://jsfiddle.net/jrnvbvb5/
open firebug in firefox, change window size 1685px width (or close) , if rotate window, extended search bar replaced search icon. no matter how many times change device orientation, works ok.
now, change view portrait , click on search button (to expand bellow search form). click again close dropdown , hide search bar , next, rotate landscape , extended search not show anymore.
when inspect firebug see prevents search form appear. so, how can lose style="display: none; when change view portrait?
$(".dropdown").click(function(event) { event.stoppropagation(); $(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeout(500); $(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeclass("activated"); }); $(document).click(function(event) { $(".dropdown-values").fadeout(500); $(".dropdown-title").removeclass("activated"); }); $(".dropdown-title").click(function(event) { $(this).siblings(".dropdown-values").fadetoggle(500); $(this).parents(".dropdown").find('.dropdown-title').toggleclass("activated"); }); $(".icon-search").click(function(event) { $(this).siblings(".search-form-container").fadetoggle(500); $(this).parents(".searchbar-form").find('.icon-search').toggleclass("activated"); }); .show_hide { display: none; } header { position: relative; top: 0px; z-index: 300; width: 100%; height: 48px; background-color: blue; } .logo { height: 100%; width: 200px; margin: 0; padding: 0; float: left; background-color: red; } .page-nav-right { display: inline-block; height: 100%; width: 200px; margin: 0; padding: 0; float: right; background-color: red; } .searchbar-form { margin: 0 auto; max-width: 40%; display: block; } } .dropdown { background: #313654; display: inline-block; cursor: pointer; float: right; } .dropdown:hover { background: grey; color: white; } .dropdown:hover .dropdown-values { background: orange; color: white; } .activated { background: orange; } .dropdown-title { display: block; padding: 5px 10px 5px 10px; font-size: 13px; font-weight: bold; color: #fff; } .dropdown-values { position: absolute; right: 0px; top: 100%; background: #3f4c6b; padding: 10px; display: none; width: 100%; box-sizing: border-box; } .dropdown-values { display: block; } .dropdown-values a:hover { background: #dedede; display: block; } .search input[type=submit] { padding: 0; border: none; content: ""; position: absolute; right: 2px; top: 2px; bottom: 2px; height: 34px; line-height: 34px; width: 42px; cursor: pointer; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; outline: 0; } .search input[type=submit]:hover { -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .search input { color: #fff; background-color: transparent; border: 2px solid #fff; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 18px; padding: 7px 87px 6px 10px; width: 100%; } .search { position: relative; margin: 0 auto; padding: 5px; box-sizing: border-box; } .search .icon { position: absolute; right: 2px; top: 2px; color: #fff; } .search .icon { font-size: 21px; height: 35px; line-height: 35px; text-align: center; width: 40px; } .search .separator { position: absolute; width: 1px; top: 10px; bottom: 8px; right: 43px; background-image: linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%); background-image: -o-linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%); background-image: -moz-linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%); background-image: -webkit-linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%); background-image: -ms-linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(236, 236, 236)), color-stop(0.5, rgb(204, 204, 204)), color-stop(1, rgb(236, 236, 236))); filter: progid: dximagetransform.microsoft.gradient(startcolorstr=#33000000, endcolorstr=#33000000); } .search .search-options { z-index: 999; } .search-options-toggle { color: #fff; display: block; position: absolute; right: 45px; top: 2px; } .search-options-toggle { background-image: url(data:image/gif;base64,r0lgodlhaqabaaaaach5baekaaealaaaaaabaaeaaaictaeaow==); cursor: pointer; font-size: 18px; height: 35px; line-height: 35px; width: 40px; text-align: center; } .search-icon { position: absolute; right: 0; top: 0; } .search-form-container { background: #3f4c6b none repeat scroll 0 0; box-sizing: border-box; display: none; padding: 10px; position: absolute; right: 0; top: 100%; width: 100%; } @media screen , (max-width: 699px) { .icon-search { cursor: pointer; display: inline-block; height: 36px; line-height: 36px; position: relative; text-align: center; width: 36px; } .searchbar-form { display: inline-block; float: right; margin: 0 auto; max-width: 100%; } .search-form-container { box-sizing: border-box; margin: 0 auto; overflow: visible; padding: 5px; position: absolute; top: 100%; width: 100%; display: none; } } @media screen , (min-width: 700px) { .search .icon-search { display: block; } .icon-search { display: none; } .searchbar-form { position: relative; } .search-form-container { background-color: transparent; display: block; padding: 0; position: absolute; top: 0; } } <link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <header> <div class="logo" role="navigation"></div> <div class="page-nav-right" role="navigation"></div> <div class="searchbar-form"> <i class="icon-search"></i> <div class="search-form-container"> <form class="search" method="get" action="http://www.google.com"> <input type="text" class="text-input" size="21" maxlength="120"> <div class="dropdown search-options"> <a class="dropdown-title search-options-toggle" href="#/"> <i class="icon-cut"></i> </a> <ul class="dropdown-values search-options-container"> <li>option 1</li> <li>option 2</li> <li>option 3</li> <li>option 4</li> <li>option 5</li> </ul> </div> <div class="separator"></div> <div class="icon"> <i class="icon-search"></i> </div> <input type="submit" value=""> </form> </div> </div> </header>
i have found solution (in case others need it) replace $(this).siblings(".search-form-container").fadetoggle(500) toggleclass("activated") , in style add display:block !important .activated
Comments
Post a Comment