CODEWITHSUNDEEP
javascript
user1849962
user1849962

Reputation: 1363

Jquery hide and show a button

First off, I've read extensively by now into what seem to be recurrent questions about how to hide a div after a properly detecting a click, or event, outside the div; indeed this has influenced my javascript code. But I'm a newbie and it's not working so I hope you can help me out.

Second, the jfiddle - https://jsfiddle.net/u5uzexqk/ ... please note the button should show when the any section of the search bar or indeed button is clicked on; and not show when a click anywhere outside is detected.

Before the code, I would just like to point out I have also read into the e-propagation thing, however I don't think it's the absence of that which is the problem; if it is, my profuse apologies.

Perhaps owing to the fact I'm new to Javascript, I can't see how the suggested answer from another question helps; the Jfiddle on the most popular answer seems to do the opposite - remove the menu when the menu link is clicked again.

Html

<body>


        <div id = "wrapper">
        <form action="" class="search-form">
            <div class="cell">
                <input type="text" name="q">
            </div>
            <div class="cell button-holder">
                <button type="submit" id="dropdownbutton">
                    <span>Search</span> 
                </button>    
            </div>
        </form>
        </div>



</body>

Javascript

$("#wrapper").onclick(function (e){

document.getElementById('#dropdownbutton').style.visibility = 'visible';
}

$(document).mouseup(function (e)
{

var container = $("#wrapper");

if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    $("#dropdownbutton").hide();
}
});

});

Upvotes: 2

Views: 30357

Answers (3)

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

The code contains a mixture of methods for hiding and showing elements. When using the .hide() method it is best to also use the .show() method to show elements.

The call to the .hide() method will set the style to display: none, but then the native Javascript technique to show the button just adds a style for visibility: visible. Those are different properties.

Note this line:

document.getElementById('#dropdownbutton').style.visibility = 'visible';

contains the pound symbol in the id parameter string: '#dropdownbutton'. When calling document.getElementById() one should realize the id parameter should not be an CSS selector typically used for the jQuery function.

Also, as was pointed out in comments, there is no jQuery method .onclick. Use the .click() method. Also, there is a missing closing parenthesis after the click handler for the wrapper button. So update it like this:

$("#wrapper").click(function(e) {
    $("#dropdownbutton").show();
}); // <- add parenthesis (and optional semi-colon) to terminate the function call

And has already been mentioned, the code should wait until the DOM is ready to access elements. With jQuery, this can be done with the .ready() method. As of jQuery 3.0 the recommended syntax was updated from $( document ).ready( handler ) to simply $( hander ) though the former and other syntaxes are still supported though are deprecated.1

$(function(readyEvent) {
    //interact with DOM
    //now that the DOM is ready
    //e.g. fetch elements by id attribute, add event handlers, etc.
});

See these changes in action in the snippet below:

$(document).ready(function() {
  $("#wrapper").click(function(e) {
    //document.getElementById('dropdownbutton').style.visibility = 'visible';
    $("#dropdownbutton").show();
  });

  $(document).mouseup(function(e) {
    var container = $("#wrapper");

    if (!container.is(e.target) // if the target of the click isn't the container...
      && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      $("#dropdownbutton").hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="wrapper">
  <form action="" class="search-form">
    <div class="cell">
      <input type="text" name="q">
    </div>
    <div class="cell button-holder">
      <button type="submit" id="dropdownbutton">
        <span>Search</span>
      </button>
    </div>
  </form>
</div>

Upvotes: 5

ibrahim mahrir
ibrahim mahrir

Reputation: 31712

First let's point out some issues in your code:

  1. There is no such function as onclick in jQuery. To attach a click event you either use: $(...).click(callback) or $(...).on("click", callback).
  2. The oposite of show is not visibility = "visible". show uses the display property (show = display = "none") and its oposite is hide (display = ""). So use show and hide.
  3. Since you are already using jQuery, why use document.getElementById, just $("#id") will do.
  4. Instead of all those checks to see if the target is the wrapper or something inside the wrapper, just stop the propagation of the event inside the event listener of the wrapper so it will never reach the document.
  5. You should wrap your code inside a load event- $() will do- To make sure that everything is loaded before starting doing anything.

$(function() {
  $("#wrapper").click(function(e) {
    $("#dropdownbutton").show();

    e.stopPropagation(); // if the event occur inside the wrraper, prevent it from bubbling up to the document and fires the bellow function
  });

  $(document).click(function(e) { // if the click target is the #wrapper (or something inside it) this event will never reach the document because of the stop propagation inside the above listener. So if this is fired then the target is not the wrapper, therefore we should hide the button
    $("#dropdownbutton").hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="wrapper">
    <form action="" class="search-form">
      <div class="cell">
        <input type="text" name="q">
      </div>
      <div class="cell button-holder">
        <button type="submit" id="dropdownbutton">
          <span>Search</span> 
        </button>
      </div>
    </form>
  </div>
</body>

Upvotes: 1

studio-klik
studio-klik

Reputation: 196

I would do it like this:

$("document").ready(function(){
    $("#dropdownbutton").hide();
    $( "input[name=q]" ).on( "focus blur", function() {
        if($(this).is( ":focus" ) ){
            $("#dropdownbutton").show();
        }else{
            $("#dropdownbutton").hide();
        }
    });     
});

Demo: http://codesheet.org/cs/wAnG3ofQ

Upvotes: 0

Related Questions