CODEWITHSUNDEEP
jquery
user2909180
user2909180

Reputation: 215

Can't get jQuery script to work

Im looking at a Jquery script that should work and I have tested it here.

But I can't get it to work in the browser: Chrome and IE

What do I need to get it to work?

The drop down Menu is opened when page is loaded.

Thanks

// click and hold event listener
$(function() {
  var timeout_id = 0,
    hold_time = 1000,
    hold_menu = $('.hold_menu'),
    hold_trigger = $('.hold_trigger');

  hold_menu.hide();

  hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
  }).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
  });

  function menu_toggle() {
    hold_menu.toggle();
  }

})
ul.hold_menu {
  list-style: none;
}
ul.hold_menu a,
div.hold_trigger {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid #ccc;
  width: 300px;
}
ul.hold_menu a:link,
ul.hold_menu a:visited {
  color: black;
  text-decoration: none;
}
ul.hold_menu a:active,
ul.hold_menu a:hover {
  background: aqua;
  text-decoration: none;
}
div.hold_trigger {
  color: black;
  cursor: pointer;
}
div.hold_trigger:hover {
  background: #ccc;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="hold_trigger">click and hold to toggle menu</div>
<ul class="hold_menu">
  <li><a target="_blank" href="http://facebook.com">Fbook</a>
  </li>
  <li><a target="_blank" href="http://twitter.com">Twitter</a>
  </li>
  <li><a target="_blank" href="http://yahoo.com">Yahoo</a>
  </li>
</ul>
<html>

Upvotes: 0

Views: 63

Answers (2)

Punit Gajjar
Punit Gajjar

Reputation: 4987

It seems you havent include Jquery.. check my code

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>



    <style>

        ul.hold_menu {
            list-style: none;
        }

        ul.hold_menu a, div.hold_trigger  {
            display: inline-block;
            padding: 5px 15px;
            border: 1px solid #ccc;
            width: 300px;
        }

        ul.hold_menu a:link, ul.hold_menu a:visited {
            color: black;
            text-decoration: none;
        }

        ul.hold_menu a:active, ul.hold_menu a:hover {
            background: aqua;
            text-decoration: none;
        }

        div.hold_trigger {
            color: black;
            cursor: pointer;
        }

        div.hold_trigger:hover {
            background: #ccc;
        }

    </style>

    <div class="hold_trigger">click and hold to toggle menu</div>
    <ul class="hold_menu">
        <li><a target="_blank" href="http://facebook.com">Fbook</a></li>
        <li><a target="_blank" href="http://twitter.com">Twitter</a></li>
        <li><a target="_blank" href="http://yahoo.com">Yahoo</a></li>
    </ul>
<script>
    // click and hold event listener
    $(function() {
        var timeout_id = 0,
        hold_time = 1000,
        hold_menu = $('.hold_menu'),
        hold_trigger = $('.hold_trigger');

        hold_menu.hide();

        hold_trigger.mousedown(function() {
            timeout_id = setTimeout(menu_toggle, hold_time);
        }).bind('mouseup mouseleave', function() {
            clearTimeout(timeout_id);
        });

        function menu_toggle() {
            hold_menu.toggle();
        }

    })
</script>
</html>

Upvotes: 0

Daniel O.
Daniel O.

Reputation: 196

  1. Load the JQuery file
  2. The JS code can't find any Element, because the js code will be executed before the other elements load.

So please Write:

$(document).ready (function () {
    //Your JS code here
});

Than the JS Code can find all Elements that are defined after it was loaded.

Upvotes: 2

Related Questions