I have a search bar with a toggle button above it. When I click the toggle button, it gradually changes the opacity. It works great, but it looks a bit clunky, because when I disable it (thus hiding the element), it changes the size of my page. Is there an alternative way of disabling and hiding the element?
Javascript:
function ToggleSearchBar() {
var searchbar = document.getElementById("SearchBar");
var display = getComputedStyle(searchbar).display;
if (display == "none") {
searchbar.style.opacity = 0;
searchbar.style.display = "block";
var i = 1;
function IncreaseOpacity() {
setTimeout(function() {
searchbar.style.opacity = i * .1;
i++;
if (i <= 10) {
IncreaseOpacity();
}
}, 30)
}
IncreaseOpacity();
} else {
var v = 10;
function DecreaseOpacity() {
setTimeout(function() {
searchbar.style.opacity = v * .1;
v--;
if (v >= 0) {
DecreaseOpacity();
} else {
searchbar.style.display = "none";
}
}, 30)
}
DecreaseOpacity();
}
}
I changed your display = "none"
to visibility = "hidden"
. This should do the trick.
function ToggleSearchBar() {
var searchbar = document.getElementById("SearchBar");
var display = getComputedStyle(searchbar).display;
if (display == "none") {
searchbar.style.opacity = 0;
searchbar.style.display = "block";
var i = 1;
function IncreaseOpacity() {
setTimeout(function() {
searchbar.style.opacity = i * .1;
i++;
if (i <= 10) {
IncreaseOpacity();
}
}, 30)
}
IncreaseOpacity();
} else {
var v = 10;
function DecreaseOpacity() {
setTimeout(function() {
searchbar.style.opacity = v * .1;
v--;
if (v >= 0) {
DecreaseOpacity();
} else {
searchbar.style.visibility = "hidden";
}
}, 30)
}
DecreaseOpacity();
}
}
<div class="search-button">
<p onclick="ToggleSearchBar()">Search</p>
<form id="SearchBar">
<input type="text" placeholder=" Your query here">
</form>
</div>
I don't know how your css style it ! But to prevent page from resizing you can set fixed property for your parent element . As a example , I give fixed height to parent .search-button
class , you can do your own by refrencing it
function ToggleSearchBar() {
var searchbar = document.getElementById("SearchBar");
var display = getComputedStyle(searchbar).display;
if (display == "none") {
searchbar.style.opacity = 0;
searchbar.style.display = "block";
var i = 1;
function IncreaseOpacity() {
setTimeout(function(){
searchbar.style.opacity = i * .1;
i++;
if (i <= 10) {
IncreaseOpacity();
}
}, 30)
}
IncreaseOpacity();
} else {
var v = 10;
function DecreaseOpacity() {
setTimeout(function(){
searchbar.style.opacity = v * .1;
v--;
if (v >= 0) {
DecreaseOpacity();
} else {
searchbar.style.display = "none";
}
}, 30)
}
DecreaseOpacity();
}
}
.search-button {
background :#eee;
padding:10px;
height:100px;
}
<div class = "search-button">
<p onclick = "ToggleSearchBar()">Search</p>
<form id = "SearchBar">
<input type = "text" placeholder = " Your query here">
</form>
</div>
I am using angularJS and bootstrap in a single project. When the web page is in the responsive mood , bootstrap navbar menu changes to toggler the menu responsive nav bar. The issue is when I use ...
I am using angularJS and bootstrap in a single project. When the web page is in the responsive mood , bootstrap navbar menu changes to toggler the menu responsive nav bar. The issue is when I use ...
Following this topic, I am trying to generate a 3D curved triangle as a NURBS surface, but I don't understand how to set up my 3D points to do that. Here is the current implementation : var edges = ...
Following this topic, I am trying to generate a 3D curved triangle as a NURBS surface, but I don't understand how to set up my 3D points to do that. Here is the current implementation : var edges = ...
I must be missing something obvious. Turning to SO after a day of frustrated headbanging ;-) : Given that I have created a time domain axis using d3.time.scale and d3.svg.axis, how can I later modify ...
I must be missing something obvious. Turning to SO after a day of frustrated headbanging ;-) : Given that I have created a time domain axis using d3.time.scale and d3.svg.axis, how can I later modify ...
I am trying to translate my application using react-i18next. I know how to use it with simple const components, but not within a class. I'm working with the I18nextProvider. This is my App.js file. ...
I am trying to translate my application using react-i18next. I know how to use it with simple const components, but not within a class. I'm working with the I18nextProvider. This is my App.js file. ...