0

My webpage has toolbars (top & bottom), which gets visible the moment user moves mouse near the top/bottom edge. And when its moved away toolbars become invisible. I would like to make toolbar visible instantly but hides after 3 second delay.

The page is binded to KO viewmodel, which captures mouse move & show or hide. toolbars. In KnockoutJS throttle/ratelimit would make the delay possible but it will work both ways. Whereas i want delay only when mouse leaves.

Is it possible to achieve this through KnockoutJS e.g. conditionally set throttle/ratelimit delay ?

Sharjeel Ahmed
  • 285
  • 6
  • 18

1 Answers1

1

Use knockouts event binding as found in this knockout example:

http://knockoutjs.com/documentation/event-binding.html

Then do something like this: View:

<button data-bind="event: { mouseover: makeToolbarVisible, mouseout: disableToolbar }">Mouse over me</button>
<button data-bind="visible: toolbarVisibility">Details</button>

Viewmodel:

    var toolbarVisibility = ko.observable(false);
    var triggerComputed = ko.observable(false);

    function makeToolbarVisible() {
        toolbarVisibility(true);
    };

    function disableToolbar() {
        triggerComputed(true);
    };

    var comp = ko.computed(function () {
        triggerComputed(false);
        toolbarVisibility(false);
        console.log("Disabled after 3 sec");
        return triggerComputed();
    }).extend({ throttle: 3000 });

Probably not the most elegant of solutions but it gets the job done.

HotTowelie
  • 123
  • 8