I'm trying to figure out how to configure multiple twitter bootstrap's popovers with a manual click.
But first, some code:
# bootstrap.js.coffee
# this opens a popover with new server data
$('*[data-poload]').bind 'click', ->
$this = $(this)
$.get $this.data('poload'), (d) ->
$this.popover
content: d
html: true
title: $this.parents("tr").data("title")
.popover 'show'
# this handles clicks everywhere on the page and decides what to do if it finds opened popovers
$("html").click (e) ->
$('*[data-poload]').each ->
$(this).popover "hide" if not ($(this).is(e.target) or $(this).has(e.target).length > 0) and $(this).siblings(".popover").length isnt 0 and $(this).siblings(".popover").has(e.target).length is 0
This is the popoverable link. I have hundreds of these on the same page with different data-poload attribute:
Text
My server will respond with some html to this request /resources/some-id/popover that goes in the popover body.
What I want to happen if I click a popover:
Open the popover (after the server responds)
Don't scroll to top of the page
Don't close if I click on the popover's body (there are some links there)
Close the previous popover (if opened)
If I click anywhere else:
Close the previous popover (if opened)
The problem:
If I click a popover it will scroll to the top of the page (typical click propagation)
If I re-click the same link to open the popover, that popover will get broken and will not be able to open it again. It opens and closes right after.
I tried by putting a return false like so
# bootstrap.js.coffee
$('*[data-poload]').bind 'click', ->
$this = $(this)
$.get $this.data('poload'), (d) ->
$this.popover
content: d
html: true
title: $this.parents("tr").data("title")
.popover 'show'
false
but that won't work because the next js bit will not get triggered. The one that's supposed to close the other popovers. Clicking everywhere else works
of course.
Related
i have a ui tabs of jquery inside a dialog box that pops out whenever i click somewhere in the main page.
so when it pops out. the first tab is active. now my question is, how to get the first tab's properties?. because in the succeeding tabs, I was able to get the properties by using the activate event of this jquery ui
like this
$('#tabs').tabs({
activate : function(event,ui){
alert(ui.newPanel.find(".row #button").attr("id"));}
});
that one works when I click the other tabs. it will also work if I go back to the first tab after clicking the other tabs. but by default.. how to get the first tab? if i haven't clicked yet the other tabs?
I have solved this issue by getting that active tab on first load
var active = $("#dialog-content #tabs").tabs("option","active");
then check if it's really the first tab
if(active == 0)
{
var widget = $("#dialog-content #tabs").tabs("widget");//get the tab
//do you thing
//widget.find(".row #element").val()
}
I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.
You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html
You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");
Hi I have a popover that shows up when a image is hovered. On desktop it works fine as expected when the mouse is hovered over the image.
However, on mobile, I would like to have the popover to open on one tap, and then close when clicked anywhere outside of the popover on the screen.
However, the tricky part is, since the images is placed on a grid close together, clicking outside of the popover would likely trigger another popover to open for another image closeby. Ideally, I would like to close the popover without having it triggering another event of opening up another popover. To trigger another popover, the user would have to click again.
fiddle: http://jsfiddle.net/allenchuang/hwu81fpq/
fiddle result: http://jsfiddle.net/allenchuang/hwu81fpq/embedded/result/
Here's what I come up with so far using jQuery..
$(document).on('touchstart', function (e) {
var container = $(".pop-over");
while(container.parent().is(":hover")) {
// if the target click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
e.preventDefault();
container.hide();
}
}
});
CURRENT BEHAVIOR: click on img1 -> opens popover1 -> click on img2 (or anyother element in body) -> closes popover1 but opens popover2.
IDEAL BEHAVIOR: click on img1 -> opens popover1 -> click on img2 (or anyother element in body) -> closes popover1 ( to trigger popover2 you need to click on image2 again)
I have an accordion that on load gets data using ajax to fill it starts getting autoupdates. Then on close I unload the data and removes it from autoupdate list.
But the user can open an Edit page in the accordion, and if this page is open the user should get a warning if he tries to close the accordion e.g. (Closing this will cause you to loose all none saved data) or similar.
So I want to "intercept" the accordion toggle close event and if certain data (The edit page) is loaded inside the accordion a "are you sure" warning should popup.
$( ".selector" ).accordion({
changestart: function(event, ui) {
...
if (dataInvalid) {
return false;
}
}
});
I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});
You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K
Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});