Rectangle 27 1

From the looks of things, you can make Simple Modal work using its most basic invocation. It sounds like you're using ASP.NET WebForms so you could do something like this:

...
<asp:Button ID="btnPopupTrigger" runat="server" OnClick="OpenPopup" Text="Open Popup" />
...
<asp:Panel ID="pnlPopup" runat="server" CssClass="pnlPopup" Visible="false">
    <asp:TextBox ID="txtInput" runat="server" />
    ...
</asp:Panel>

<script type="text/javascript">

$("div.pnlPopup").modal();

</script>
...
...
protected void OpenPopup(object sender, EventArgs e)
{
    pnlPopup.Visible = true;
}
...

What this will do is hide the popup content until you want it to be shown. Once the asp:Panel is made visible, the jQuery will find it and make use of the SimpleModal plugin to make it display appropriately. This all requires that you're using standard postbacks, no asp:UpdatePanels or AJAX calls.

One issue you may run into is that it looks like this plugin grabs the modal content and appends it to the <body> element. ASP.NET expects to see those modal inputs within its <form>, so you might need to tweak the plugin to append the modal to <form> instead of <body>.

dear @chprpipr:append the modal to <form> was a good point in asp.net (default <body> did n't let the inside buttons to postback - i was confused about this issue past days) ... my question in this thread solved by your Answer - but why update panel does not work inside modal area (for ur example -> inside the panel) / am i doing something wrong or this plugin have a formula about this issue ? -> plz answer to this question in this thread stackoverflow.com/questions/5851986/

Its a pretty complex explanation. This SO answer has a decent example: stackoverflow.com/questions/899761/ If you need to use an UpdatePanel, you might want to post a new question with some example code.

jquery - how keep modal div alive during postbacks? - Stack Overflow

jquery asp.net postback modal-dialog
Rectangle 27 107

Small modification (From the solution provided by vikas) to suit my use case. 1. Open popover on hover event for the popover button 2. Keep popover open when hovering over the popover box 3. Close popover on mouseleave for either the popover button, or the popover box.

$(".pop").popover({ trigger: "manual" , html: true, animation:false})
.on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 300);
});

This works perfectly, I did notice that there was a missing ; in you second $(_this).popover("hide"). But thank you, it was so simple and clean!

This answer is amazing. Works great on BS3 as of May 2015 ^^

I used it in a table and I added container: 'body' to the options because it made the cells shift. Great answer!

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 106

Small modification (From the solution provided by vikas) to suit my use case. 1. Open popover on hover event for the popover button 2. Keep popover open when hovering over the popover box 3. Close popover on mouseleave for either the popover button, or the popover box.

$(".pop").popover({ trigger: "manual" , html: true, animation:false})
.on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 300);
});

This works perfectly, I did notice that there was a missing ; in you second $(_this).popover("hide"). But thank you, it was so simple and clean!

This answer is amazing. Works great on BS3 as of May 2015 ^^

I used it in a table and I added container: 'body' to the options because it made the cells shift. Great answer!

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 70

I have came after another solution to this...here is the code

$('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

It is important to add animation: false otherwise moving the mouse over the link repeatedly will cause it to not work correctly

I have a small modification to your code @vikas (gist.github.com/Nitrodist/7913848). It rechecks the condition after 50ms so that it doesn't stay stuck open. That is, it continuously rechecks it every 50ms.

How can this be adapted this so it works on live elements just added to the document?

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 70

I have came after another solution to this...here is the code

$('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

It is important to add animation: false otherwise moving the mouse over the link repeatedly will cause it to not work correctly

I have a small modification to your code @vikas (gist.github.com/Nitrodist/7913848). It rechecks the condition after 50ms so that it doesn't stay stuck open. That is, it continuously rechecks it every 50ms.

How can this be adapted this so it works on live elements just added to the document?

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 26

Sometimes while moving mouse from popover trigger to actual popover content diagonally, you hover over elements below. I wanted to handle such situations as long as you reach popover content before the timeout fires, you're safe (the popover won't disappear). It requires delay option.

This hack basically overrides Popover leave function, but calls the original (which starts timer to hide the popover). Then it attaches a one-off listener to mouseenter popover content element's.

If mouse enters the popover, the timer is cleared. Then it turns it listens to mouseleave on popover and if it's triggered, it calls the original leave function so that it could start hide timer.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover  call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

Finding the container could be improved by using container = self.$tip; This way, the popover can even be found when the container property is set. There's a fiddle here: jsfiddle.net/dennis_c/xJc65

@pferrel i have solved this issue in my fork of @Wojtek_Kruszewski 's fiddle: jsfiddle.net/HugeHugh/pN26d see the part that checks if (!thisTip.is(':visible')) before calling the originalShow()

If the popover is initialized with the option container: 'body', this solution will not work as expected. The variable container needs to be replaced with self.$tip. Check my answer for more details: stackoverflow.com/a/28731847/439427

Brilliant. This works for when using the 'selector' parameter, unlike the other answers.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 26

Sometimes while moving mouse from popover trigger to actual popover content diagonally, you hover over elements below. I wanted to handle such situations as long as you reach popover content before the timeout fires, you're safe (the popover won't disappear). It requires delay option.

This hack basically overrides Popover leave function, but calls the original (which starts timer to hide the popover). Then it attaches a one-off listener to mouseenter popover content element's.

If mouse enters the popover, the timer is cleared. Then it turns it listens to mouseleave on popover and if it's triggered, it calls the original leave function so that it could start hide timer.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover  call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

Finding the container could be improved by using container = self.$tip; This way, the popover can even be found when the container property is set. There's a fiddle here: jsfiddle.net/dennis_c/xJc65

@pferrel i have solved this issue in my fork of @Wojtek_Kruszewski 's fiddle: jsfiddle.net/HugeHugh/pN26d see the part that checks if (!thisTip.is(':visible')) before calling the originalShow()

If the popover is initialized with the option container: 'body', this solution will not work as expected. The variable container needs to be replaced with self.$tip. Check my answer for more details: stackoverflow.com/a/28731847/439427

Brilliant. This works for when using the 'selector' parameter, unlike the other answers.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 10

I used the trigger set to hover and gave the container set to the #element and finally adding a placement of the box to right.

This should be your setup:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});
#example
position:relative;

hmm that works, can I use jquery ajax in content option, to take the content from server side..will that work or i need to do some extra work for that

@vikasdevde yes you can use ajax in the content but you need to setup up for that to work... please mark the answer right if it solved your OP.. so others can benefit

but if we use the link itself as a container then the whole popover becomes a link....try it

None of the jsfiddle's work for me. Chrome Mar 20 2014.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 10

I used the trigger set to hover and gave the container set to the #element and finally adding a placement of the box to right.

This should be your setup:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});
#example
position:relative;

hmm that works, can I use jquery ajax in content option, to take the content from server side..will that work or i need to do some extra work for that

@vikasdevde yes you can use ajax in the content but you need to setup up for that to work... please mark the answer right if it solved your OP.. so others can benefit

but if we use the link itself as a container then the whole popover becomes a link....try it

None of the jsfiddle's work for me. Chrome Mar 20 2014.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 8

Introduce ajaxical polls to keep the session alive as long as enduser has the page open in webbrowser. Here's a kickoff example with a little help of jQuery.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(document).ready(function() {
        setInterval(function() {
            $.get('poll');
        }, ${(pageContext.session.maxInactiveInterval - 10) * 1000});
    });
</script>

Here ${pageContext.session.maxInactiveInterval} returns the remnant of seconds the session has yet to live (and is been deducted with 10 seconds -just to be on time with poll- and converted to milliseconds so that it suits what setInterval() expects).

The $.get('poll') should call a servlet which is mapped on an url-pattern of /poll and contains basically the following line in the doGet() method.

request.getSession(); // Keep session alive.

This would eventually disturb the sites functionality as the questioner requires 3mins session timeout.

@BalusC - I would like to add to your answer, to wrap the script in any JSF component and render that part only when action is called, ideally it should not be rendered.

@BalusC - I doubt if this works because I tried to keep the session alive by introducing a4j:poll. Once the form is submitted, aj4:poll stops sending request to the server.

Either just submit the form by ajax as well, or redo the poll in the result page of the form submit.

Preventing session timeout during long processing time in JSF - Stack ...

jsf session-timeout
Rectangle 27 6

This is how I did with bootstrap popover with help of other bits around the net. Dynamically gets the title and content from die various products displayed on site. Each product or popover gets unique id. Popover will disappear when exiting the product( $this .pop) or the popover. Timeout is used where will display the popover until exit through product instead of popover.

$(".pop").each(function () {
        var $pElem = $(this);
        $pElem.popover(
            {
                html: true,
                trigger: "manual",
                title: getPopoverTitle($pElem.attr("id")),
                content: getPopoverContent($pElem.attr("id")),
                container: 'body',
                animation:false
            }
        );
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        console.log("mouse entered");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 100);
    });
    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };

This will also work if the popover is not a child of the target element. +1

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 6

This is how I did with bootstrap popover with help of other bits around the net. Dynamically gets the title and content from die various products displayed on site. Each product or popover gets unique id. Popover will disappear when exiting the product( $this .pop) or the popover. Timeout is used where will display the popover until exit through product instead of popover.

$(".pop").each(function () {
        var $pElem = $(this);
        $pElem.popover(
            {
                html: true,
                trigger: "manual",
                title: getPopoverTitle($pElem.attr("id")),
                content: getPopoverContent($pElem.attr("id")),
                container: 'body',
                animation:false
            }
        );
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        console.log("mouse entered");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 100);
    });
    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };

This will also work if the popover is not a child of the target element. +1

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 5

I think an easy way would be this:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

This way the popover is created inside the target element itself. so when you move your mouse over the popover, it's still over the element. Bootstrap 3.3.2 works well with this. Older version may have some problems with animation, so you may want to disable "animation:false"

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 5

I think an easy way would be this:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

This way the popover is created inside the target element itself. so when you move your mouse over the popover, it's still over the element. Bootstrap 3.3.2 works well with this. Older version may have some problems with animation, so you may want to disable "animation:false"

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 1

The documentation for keepAliveUrl on that page says: "This resource should do something innocuous that would keep the session alive, which will depend on your server-side platform."

I think in rails just accessing the session in the course of handling the request should be sufficient.

jquery - Rails Session Timeout for Custom Authentication System - Stac...

jquery ruby-on-rails ruby session twitter-bootstrap-3
Rectangle 27 1

Here is a solution I devised that seems to work well while also allowing you to use the normal Bootstrap implementation for turning on all popovers.

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 1

Here is a solution I devised that seems to work well while also allowing you to use the normal Bootstrap implementation for turning on all popovers.

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 1

The chosen answer works but will fail if the popover is initialized with the body as the container.

$('a').popover({ container: 'body' });

A solution based on the chosen answer is the following code that needs to be placed before using the popover.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) {
    var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
    originalLeave.call(this, obj);

    if (obj.currentTarget) {
        self.$tip.one('mouseenter', function() {
            clearTimeout(self.timeout);
            self.$tip.one('mouseleave', function() {
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        })
    }
};

The change is minimal using self.$tip instead of traversing the DOM expecting the popover to be always a siblings of the element.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 1

The chosen answer works but will fail if the popover is initialized with the body as the container.

$('a').popover({ container: 'body' });

A solution based on the chosen answer is the following code that needs to be placed before using the popover.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) {
    var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
    originalLeave.call(this, obj);

    if (obj.currentTarget) {
        self.$tip.one('mouseenter', function() {
            clearTimeout(self.timeout);
            self.$tip.one('mouseleave', function() {
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        })
    }
};

The change is minimal using self.$tip instead of traversing the DOM expecting the popover to be always a siblings of the element.

jquery - How can I keep bootstrap popover alive while the popover is b...

jquery twitter-bootstrap popover onhover
Rectangle 27 1

Instead of jquery/ajax calls to keep the session alive, you may consider using javascript setInterval timer to refresh a small 1x1 spacer image when session is about to expire conditionally or always w/o any performance hit.

The question is about how to communicate session expiration to the user, not how to prevent session expiry from a technical perspective.

notification logout