Click Element isn't showing/hiding properly

Question

I have an issue with my code, I'm trying to create a function to hide and show a div and it's working, but it dosnt work at first, It works only on the second click, so i have to click the link first to get it to start working properly, how can i fix it so that it works on first click?

more info:

im trying to have a div appear and then disapear usin the display and hide functions, the catch is i also want it to disapper when im outside of the div, if its visible, its all working but the problem is when i first load the page thn click the link to display the div, it dosnt appear, only when i click it a second time does it appear. this is the problem i want to fix

this is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
    <script src="js/jquery.foggy.min.js"></script>    


    <style>

        body {
            background: black;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: 100%;
            color: white;
            font-family: 'Segoe UI';
            font-size: 24px;
        }

        .box 
        {
            width: 100%;
            margin: auto;
            top: 0px;
            left: 20%;
            right: 0px;
            bottom: 0px;
            background-color: white;
            opacity: 0.4;
            position: fixed;
            overflow-y: scroll;
            overflow-x: scroll;
        }

    </style>


  </head>
  <body>

    <script lang="en" type="text/javascript">

        $(document).ready(function () {


        });

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

            var container = $("#boxwrapper");

            if (!container.is(e.target) && container.has(e.target).length === 0) {
                if (container.is(':visible'))
                    Hide();
            }
        });

        function Display() {
            $("#boxwrapper").show();
            $("#boxwrapper").addClass("box");
            $("#main").foggy();
        }

        function Hide() {
            $("#boxwrapper").hide();
            $("#main").foggy(false);
        }
    </script>



        <div id="main">
               <a href="#" onclick="Display()">Display Div</a>
        </div>

        <div id="boxwrapper">
        </div>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

*"so i have to click the link first to get it to start working properly, how can i fix it so that it works on first click":* - first click on what..? — T J, Sep 14 '14 at 12:31
@TJ what does that jsfiddle demonstrate? It doesn't seem to do anything. *edit* oh wait I see. — Pointy, Sep 14 '14 at 12:33
@Pointy Well you were right first. I thought clicking the link first time isn't showing the div... I'm not sure what else OP wants to click.. 0__0 — T J, Sep 14 '14 at 12:36
What are you trying to do exactly? Why you need to use the mouseup on the document? — Tomas Ramirez Sarduy, Sep 14 '14 at 12:45
im trying to have a div appear and then disapear usin the display and hide functions, the catch is i also want it to disapper when im outside of the div, if its visible, its all working but the problem is when i first load the page thn click the link to display the div, it dosnt appear, only when i click it a second time does it appear. this is the problem i want to fix — Dean, Sep 14 '14 at 13:04
mmm... I don't see the old `e.preventDefault()` or return false in the link `onClick()` event ;) — Tomas Ramirez Sarduy, Sep 14 '14 at 13:09
*"when i first load the page thn click the link to display the div, it dosnt appear"* - [Unable To Reproduce](http://jsfiddle.net/o7d17w4w/). Try to reproduce the issue in that fiddle. — T J, Sep 14 '14 at 14:12
here is my jsfiddle http://jsfiddle.net/e8hj27gf/21/ I have it working but i need it to work using one toggle Link, — Dean, Sep 14 '14 at 23:44

score -1 · Answer 1 · answered Sep 14 '14 at 12:35

-1

Why don't you use click() method insead of mouseup()?

$('a').click(function (e) {
    var container = $("#boxwrapper");
    if (container.is(':visible')) {
        Hide();
    } else {
        Display();
    }
    return false;
});

If you don't want to bind this event to every <a> on your site, add class to your element and bind click to this class. E.g.:

<a href="#" onclick="Display()" class="divToggle">Display Div</a>

and then in your script:

$('a.divToggle').click(function (e) { });

answered Sep 14 '14 at 12:35

marian0

3,336
3
27
37

thanks i will organize the code, i can make it toggle on and off but i want the div to hide when the user clicks outside of it anywhere as well, that's why the use of mouseup – Dean Sep 14 '14 at 13:10
So use `$('html, body')` istead of `$('a')` and it also should work. – marian0 Sep 14 '14 at 13:12
i put this together but it dosnt seem to do what i was after, – Dean Sep 14 '14 at 13:21
What's wrong with using `mouseup`? how'll using `click()` method instead will fix OP's issue? – T J Sep 14 '14 at 14:20

score -1 · Answer 2 · edited Jun 20 '20 at 09:12

-1

See this working fiddle

JavaScript

function display() {
    if ($('#boxwrapper ').css('display') === 'none') {
        $('#boxwrapper').show();
    } else {
        $('#boxwrapper').hide();
    }
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 14 '14 at 12:41

citubi

64
3

1

All this is the same that `$('#boxwrapper').toggle();` – Tomas Ramirez Sarduy Sep 14 '14 at 12:47
Can you explain why this will fix OP's problem? – T J Sep 14 '14 at 14:19
display is passed as argument for onclick. Triggering this function the div will display and vice versa. – citubi Sep 14 '14 at 14:22

score -1 · Answer 3 · edited Jun 20 '20 at 09:12

-1

The issue could be a whitespace or anything, since is very hard to reproduce it, but here some advices or things that could be causing the issue:

Organize your code

First of all, you need to organize your code and load the JS libraries at the end of the file or wrap your functions inside the $(document).ready.
If you are using jQuery already, why to use the onClick event on the element itself if you can do it with jQuery.
Instead of all code inside the document mouseUp event, you could just add display: none in the css to #boxwrapper.
Instead of Hide() and Show() functions, you could just use toogleClass('box') jquery function

Difference between Click and MouseUp events

With a mouseup event, you can click somewhere else on the screen, hold down the click button, and move the pointer to your mouseup element, and then release the mouse pointer. A click event requires the mousedown and mouseup event to happen on that element.

Prevent Default Maybe?

You are not preventing Default on your click event. You can do it like:

<a href="#" onclick="Display(); return false;">Display Div</a>