Place button next to input text even if the input is hidden?

Question

I have a search form that I need that the input text begins hidden and with a button named search, the input appears and when the input is being shown, the button named search is converted to a close button to hide again the input text. My problem is that when the input text is hidden, the button moves to the center of my website. I need to stay in place next to the search box.

This is my code:

<div class="main-search-continer">
     <form action="/content/testing.html">
        <input class="inputSearch" size="41" maxlength="2048" name="q" value="">        
        <button type="button" class="js-btn-toggle_search">X Close</button>
     </form>
     <div class="clear"></div>
</div>

The JS:

$(document).on("click", "button.js-btn-toggle_search", function(){
    var $btn = $(this)
    $("input.inputSearch").toggle(0, '', function() {
        if($(this).is(":visible")) {
            $btn.text("X Close")
        } else {
            $btn.text("Search")
        }
    })
})

My CSS it's pretty simple:

input.inputSearch {
    font-size: 30px;
    width: 65%;
    margin: 0 auto;
    color: #939497;
    font-weight: 300;
    display:none;
}
div.main-search-continer {
    width: 100%;
}

A fiddle to see the behavior.

easy approach is to set opacity to 0 instead of hiding it, that way it would be hidden but still take space in page. — vinayakj, Oct 29 '15 at 20:30
CSS: `.main-search-continer{width: 390px;} .js-btn-toggle_search{float:right;}` is one option. — turbopipp, Oct 29 '15 at 20:31
As I mentioned use visibility. "Even invisible elements take up space on the page. Use the display property to create invisible elements that do not take up space!" — Gacci, Oct 29 '15 at 20:32

Gacci · Answer 1 · 2015-10-29T20:34:32.913

2

I don't know what you have in your css, but if you want the button to stay at the same position as when the input text is visible, then instead of setting display property to none you should set visibility: hidden. http://www.w3schools.com/cssref/pr_class_visibility.asp

edited Oct 29 '15 at 20:34

answered Oct 29 '15 at 20:27

Gacci

1,388
1
11
23

He want's the button on the same place, even if the textfield is not visible ;) @Gacci – Bennet G. Oct 29 '15 at 20:29
1

That's exactly what visibility property set to none accomplishes. – Gacci Oct 29 '15 at 20:30
"Even invisible elements take up space on the page. Use the display property to create invisible elements that do not take up space!" -http://www.w3schools.com/cssref/pr_class_visibility.asp – Gacci Oct 29 '15 at 20:31

Roko C. Buljan · Accepted Answer · 2015-10-29T20:52:16.570

2

jsFiddle demo

The jQuery toggle() Method operates over the display property, which, when set to display:none; basically hides your element from the document flow.

Instead use CSS visibility hidden / visible accessing it via .css() method.

Here's a code example

$(document).on("click", "button.js-btn-toggle_search", function(){
    var $input = $("input.inputSearch");
    var tog = $input.css("visibility") === "visible";
    $input.css({visibility: tog ? "hidden" : "visible"});
    $(this).text(tog ? "Search" : "X Close");
});

Or also using ^ XOR as 1/0 toggler

$(document).on("click", "button.js-btn-toggle_search", function(){
    var tog = this.tog^=1;   // 1/0 Toggler // or use this.dataset.tog^=1;
    $("input.inputSearch").css({visibility: tog?"hidden":"visible"});
    $(this).text(tog?"Search":"X Close");
});

http://www.w3.org/wiki/CSS/Properties/visibility https://developer.mozilla.org/en/docs/Web/CSS/visibility

edited Oct 29 '15 at 20:52

answered Oct 29 '15 at 20:31

Roko C. Buljan

196,159
39
305
313

Good call, I did not notice that! – Gacci Oct 29 '15 at 20:34
2

Excelent! thanks! this worked perfectly. can you explain to me the line `var tog = this.tog^=1;`? – Phoenix_uy Oct 29 '15 at 20:40
1

@Phoenix_uy the `this` is the clicked HTMLElement Object, `.tog` is just some dummy property we create on the fly to store a `0/1` value. To toggle the `0/1` value you can use a `^` **(Bitwise XOR) as a I/O toggler** http://stackoverflow.com/a/22061240/383904 – Roko C. Buljan Oct 29 '15 at 20:42
@Phoenix_uy A more validish way to do the same is using the `data-*` property: `var tog = this.dataset.tog ^= 1;` Pick your favorite ;) – Roko C. Buljan Oct 29 '15 at 20:44
@Phoenix_uy added also another (probably better?) example that uses a .css("visibility") boolean. – Roko C. Buljan Oct 29 '15 at 20:53
@RokoC.Buljan if this search button is on the left side of a navigation bar and the search box must appear on top of the navigation bar when i click the button, the visibility will be a problem for this? should i set also the z-index for this achievement? – Phoenix_uy Oct 29 '15 at 21:07
@Phoenix_uy totally. You'll not be able to click on navigation links cause the input is overlaying those elements. A trick would be to set your search bar DIV to be position absolute, and when toggling the input to also toggle position absolute / relative. Without seeing an example it's a bit hard to exactly figure your issue or give you better UI suggestions. – Roko C. Buljan Oct 29 '15 at 21:10
@RokoC.Buljan the thing is that i want that behavior. The search bar must be ontop of the navigation buttons when i click search button. In a few words, the search bar covers the navigation. – Phoenix_uy Oct 29 '15 at 21:12
1

@Phoenix_uy as I've said you, set in CSS `.main-search-continer` to `position: absolute` (to act as overlay). additionally inside jQuery change the line to: `$input.css({visibility: tog ? "hidden" : "visible", position:tog?"absolute":"relative"});` – Roko C. Buljan Oct 29 '15 at 21:14

score 0 · Answer 3 · answered Oct 29 '15 at 20:27

first: fiddle here: Click

Live preview:

$(document).on("click", "button.js-btn-toggle_search", function() {
  var $btn = $(this)
  $("input.inputSearch").toggle(0, '', function() {
    if ($(this).is(":visible")) {
      $btn.text("X Close");
      $btn.removeClass("button-fixed");
    } else {
      $btn.text("Search");
      $btn.addClass("button-fixed");
    }
  })
})

.button-fixed {
  margin-left: 286px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main-search-continer">
  <form action="/content/testing.html">
    <input class="inputSearch" size="41" maxlength="2048" name="q" value="">

    <button type="button" class="js-btn-toggle_search">X Close</button>
  </form>
  <div class="clear"></div>
</div>

Edwin Krause · Answer 4 · 2015-10-29T20:35:09.677

The easiest way to do this would be to put a div arount your input text field. Something like this:

<div class="main-search-continer">
     <form action="/content/testing.html">
        <div style=" width: 350px; height: 15px; float: left;">
            <input class="inputSearch" style="width:100%" maxlength="2048" name="q" value="" />
        </div>
        <button type="button" class="js-btn-toggle_search">X Close</button>
     </form>
     <div class="clear"></div>
  </div>

Make sure the new div has attributes width: 350px; height:15px; and float:left; . For the sake of having a responsive design you should always consider using percentages for the width attributes.

score 0 · Answer 5 · answered Oct 29 '15 at 20:35

0

Another way using css... not perfect but you can play with it to get the result you want.

.js-btn-toggle_search {
    position:absolute;
    top: 0.5em;
    left: 50%;
}

jsfiddle

answered Oct 29 '15 at 20:35

JoMojo

404
1
7
22

Place button next to input text even if the input is hidden?

5 Answers5