0

I asked this question regarding changing the position of a bootstrap popover depending on the size of the screen.

The answer was great - however I also now want to change the action for popovers (so it's on click for mobile) as well as the location, and am having difficulty re-factoring the code. This is what I have:

$(document).ready(function(){
    $('#my_list li').popover({
        placement: wheretoplace
    });
});

function wheretoplace(){
    var width = window.innerWidth;
    if (width<500) return 'below';
    return 'left';
}

How would I amend the wheretoplace function to return two things: the placement value along with a trigger value? I've got the existing stuff in a jsFiddle.

Edit - I've amended my jsFiddle above to show the complete solution, adding a click event to @James' answer below.

Community
  • 1
  • 1
CherryFlavourPez
  • 7,529
  • 5
  • 45
  • 47

1 Answers1

1

If you are trying to return two values from the function, try assigning them as properties of an object and then return that object.

eg.

function wheretoplace(){

    var data = {};    

    var width = window.innerWidth;

    if (width<500)
    { 
        data.placement = 'below';
    }
    else
    {
        data.placement = 'left';
    }

    data.trigger = "myEvent";

    return data;

}

Then in the function calling wheretoplace:

$(document).ready(function(){
    $('#my_list li').popover({
        placement: wheretoplace().placement,
        trigger: wheretoplace().trigger
    });
});

Is this what you are trying to do?

EDIT: In Response to the comment below:

As with the jsFiddle demo

By assigning the trigger as "manual" on document ready, you are then able to call $(element).popover("toggle") in a click handler which will toggle the appearance of the popover.

James
  • 969
  • 1
  • 8
  • 13
  • Yes - this goes a long way to a solution, thanks. I've put a version using this code [here](http://jsfiddle.net/cherryflavourpez/Dgtvq/); any idea how to get the 'click' functionality using Bootstrap? I'm just passing 'hover' for both right now, as I couldn't get it to work using either focus or manual. [The bootstrap page](http://twitter.github.com/bootstrap/javascript.html#popovers) shows the possible values. – CherryFlavourPez Feb 23 '12 at 16:34