I would like create and display menu for my element only after click in small button.
I have a small button which run function "doAction"
<i class="fa fa-ellipsis-h" ng-click="doAction(\'OpenMenu\', $event)"></i>
In my function 'doAction' a would like fetch position X Y from event mouse click and display in this place my menu.
Almost everything work... I have problem with 'dropdown-menu'.
More precisely, i see button discribed above and button from this code (id=test):
var menu = angular.element('<div class="dropdown">' +
'<button id="test" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>'+
'<ul class="dropdown-menu">'+
'<li>HTML</li>'+
'<li>CSS</li>'+
'<li>JavaScript</li>'+
'</ul>'+
'</div>');
menu.css({
position: 'absolute',
left: event.clientX,
top: event.clientY,
zIndex: '999'
});
var body = angular.element(document).find('body').eq(0);
body.append(menu);
Now, i have to click on first button 'fa-ellipsis-h' later button "test", and only then i see my menu.
I don't know how remove button 'id = test' from variable "menu" and open menu immediately after the press first button 'fa fa-ellipsis-h'.
First, are you sure that you need those single quotes escaped in your function? I copied and pasted your HTML into a jsbin, and it immediately failed because of that.
If I understand what you're asking, you want your menu to open after the first click, instead of after clicking the <i> element, and THEN clicking the test button.
It is working for me here in this bin: working example
<i class="fa fa-ellipsis-h" data-ng-click="doAction('OpenMenu', $event)">Menu</i>
Clicking the immediately opens the menu (I added in some text for those elements, because I don't have the fontawesome library included).
Related
Here is my popover element:
<a data-placement="bottom" data-toggle="popover" data-trigger="focus" tabindex="1"></a>
My bootstrap popover content is a social media button. It shares something when you click on it. However, click event is not triggered properly. When I click share button which is available when popover is displayed, it fails one or two times out of 3 clicks.
var options = {};
options.content = function() {
return "<ul class='social social-list'>" +
"<li><a id='fa-facebook' class='social-fb'><i class='fa fa-facebook fa-lg'></i></a></li>" +
"</ul>";
};
options.trigger = 'focus';
options.html = true;
$('[data-toggle="popover"]').popover(options).on('shown.bs.popover', function(){
var fbShareEvent = $("#fa-facebook").data("events");
if(!fbShareEvent){
$("#fa-facebook").on("click",function(event){
fbShare();
});
}
}
After spending half day, I found solution. Since popover hide action triggered by focus event, sometimes popover is closed before click action is triggered. I added delay parameter to my popover options.
options.delay = {'hide': 500};
This parameter delays close action for a given amount of time. Thus, click action can be handled before the popover is closed.
Bootstrap 3 modals are hidden by default. To launch them I have to click a trigger button:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
JSFiddle
I have tried the following but it has no effect:
jQuery(window).load(function(){
jQuery('#myModal').modal('show');
});
How can I ensure my modal is always displayed on screen? i.e. I don't want the user to have to manually display it by clicking on the trigger button. I don't want them to be able to close it either. I'd like it to remain open at all times.
Everything you asked is perfectly described in the docs.
Displayed on screen
Shows the modal when initialized.
$("#my-modal").modal({ show : true });
I don't want them to be able to close it either
Closes the modal when escape key is pressed
And
Includes a modal-backdrop element. Alternatively, specify static for a
backdrop which doesn't close the modal on click.
$("#my-modal").modal({
backdrop : "static",
keyboard: false
});
Here is the updated fiddle where users can't close the model but you need to remove the html elements for close buttons cuz thats very evil for your users :P
jQuery(window).load(function(){
jQuery('#myModal').modal('show').on('hide.bs.modal', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/95Vf7/2/
I have an app that will have several popovers that uses the html of a hidden DIV. This content may contain a button or buttons that will possibly do something in the app and close the popover, or just close the popover ("Cancel"). Like this:
What I'm looking for is a generic, extensible solution that I can apply to the button(s) to simply close the popover that contains them.
I don't want to wire this with anything specific to a particular button and/or popover.
I tried this and it does not work:
<button class="btn btn-link btn-xs" data-toggle="popover">Cancel</button>
Here you go this also works for tablet to tap outside the popover to hide it.
//HIDES POPOVER ON TABLET WHEN CLICK OUTSIDE
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});
I have a Bootstrap dropdown button with the following markup:
<div class="btn-group dropup">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Test<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Link 1
Link 2
Link 3
</li>
</ul>
</div>
When you click on a.dropdown-toggle, Bootstrap's javascript toggles the ul.dropdown-menu's visibility by adding the class open to the div.btn-group. All this is well and good.
The problem I'm experiencing occurs when I add my own javascript function to the a.dropdown-toggle's click event. Something like this:
$('a.dropdown-toggle').click(function (e) {
e.preventDefault();
$('a.dropdown-toggle').html('Testing...');
});
When I do this something weird happens. When you click the button, it expands the menu as desired EXCEPT when you click directly on the .caret in the button. When you click directly on the .caret, it only executes my click event.
How can I resolve this and have clicks directly on the .caret toggle the menu like clicking anywhere else on the button does.
http://jsfiddle.net/UZkQL/
In your fiddle you have:
$('a.dropdown-toggle').html('Testing...<span class="caret"></span>');
The issue is that you recreate the span element with the carat, which seems to make it not have a click handler bound to it. A quick and dirty fix would be:
$('a.dropdown-toggle').click(function (e) {
e.preventDefault();
if ($('a.dropdown-toggle').text().indexOf('ing...') == -1) {
$('a.dropdown-toggle').find('span').before('ing...');
}
});
I have a button its id is tools onclick it show a menu with some links and with click on other places of the page this menu will be hidden.
Every think work well but the menu don't hide when I click on the buttons (#up,#del,#tools)
$('#tools').click(function(){
var ofset = $(this).offset();
$('#moreMenu').css({'top':(ofset.top+35),'left':ofset.left,'display':'',});
return false;
});
$(window).click(function(){$('#moreMenu').hide();});
<div id='moreMenu' style='width:250px;background-color:#f0f0f0;border:2px solid gray;height:100px;position:absolute;display:none;'>some menu</div>
<button id='up' title='up' ><img src='../images/beta/up.png'></button>
<button id='del' title='del' ><img src='../images/beta/delete.png'></button>
<button id='tools' title='tools' style='width:70px;' ><img src='../images/beta/tools.png' style='margin-right:30%;'></button>
How can be hide on every elements!?
Just use the click event on html. It'll let you hide the div when you click anywhere inside the page.
$("html").click(function(){$('#moreMenu').hide();});
OR,
$(document).click(function(){$('#moreMenu').hide();});
A Thread Reference: $(window).click(..); not working in IE
Demo
That's because you need to add javascript to hide the menu when the buttons are pressed.
$("button").click(function(){$('#moreMenu').hide();});