CODEWITHSUNDEEP
javascriptjquerysemantic-ui
Jude Cooray
Jude Cooray

Reputation: 19862

How to change setting AND add an event listener to semantic ui side bar?

I have a Semantic UI sidebar and I want the page NOT to be dimmed when the sidebar is shown and also I want the onShow event to be fired when the sidebar is completely visible.

$("#sidebar").sidebar onShow: =>
    @onShow() if @onShow

$("#sidebar").sidebar 'setting', dimPage: false

Right now, only one of these works, depending on which comes last. Either the page gets dimmed (which is not what I want) and the onShow event gets fired OR the page doesn't get dimmed but the onShow event is never fired.

It looks like the second one is overriding the first settings.

So how do I set both dimPage settings AND set the event handler without overriding each other?

Upvotes: 0

Views: 704

Answers (2)

David Morales
David Morales

Reputation: 910

@fstanis's answer is great, but it can be also be separated into 2 separate function calls like below.

$("#sidebar").sidebar("setting", "dimPage", false);
$("#sidebar").sidebar("setting", "onShow", function() {});

This is not that useful in this particular case because we are using the same selector, but it comes in handy when you want to update the settings of 2 different lists of elements, and some elements happen to be included in both lists. Without this separation, the last settings added would override the others.

Upvotes: 2

fstanis
fstanis

Reputation: 5534

The sidebar function, like other initializer functions in Semantic UI, can also take an object as a parameter, where you can pass all the settings and events at the same time, so in your case, you can do this:

$("#sidebar").sidebar({
    onShow: function() {
        console.log('on show event');
    },
    dimPage: false
});

Further explanation: if you do it in two separate calls, one will override the other. In other words, the code you posted is kind-of equivalent to doing:

$("#sidebar").sidebar({
    dimPage: false
});
$("#sidebar").sidebar({
    onShow: function() {
        console.log('on show event');
    }
});

So the second initialization sets dimPage to its default value, which is true.

Upvotes: 1

Related Questions