I am now facing the problem with bootstrap popover position. I am using popover to show the list of images that user has chosen and allowing user to review and remove images inside the popover.
My problem is, after user has removed the image from the popover, the height of the popover was changed and the whole popover shifted to top. The arrow icon also shifted.
I can reposition the popover by initializing it but I don't think it is a good way to do as it cause the flickering while reloading content.
I had created a fiddle for you to see my problem.
In my fiddle, uncomment the code inside removeImage function to see repositioning with flickering.
Please advice,
Thanks in advanced
Add animation: false to the initializer and uncomment the code you have and it works cleanly.
$('#aPopover').popover({
title: 'Selected Images',
html: true,
content: getSelectedImages,
placement: 'right',
animation: false
});
Related
I have added two customized buttons on my dialog box, but they are currently just in the middle. How can i move these buttons next to the close button on the title bar, without covering or touching the close button, and also without using anyCSS?
My fiddle: http://jsfiddle.net/ZSk6L/928/
If you are alright using css within your jQuery then you could add a class to the minus button:
$('<button class="minusButton">-</button>').appendTo(titlebar).click(function() {
$('#resultId').parents('.ui-dialog').animate({
height: '40px',
top: $(window).height() - 90
}, 50);
});
And then set the margin
$(".minusButton").css("margin-left", "105px");
If you are happy to use inline styling in the jquery, this gets you what you want (without floats or covering the close button - simply set a left margin to the first custom button:
$('<button>-</button>').appendTo(titlebar).css('margin-left', '35%').click(function() {
Fiddle
There is absolutely no way to do this without at least using inline CSS, written in through jQuery.
Your best bet is just using a float and a fixed small margin on the + button so it doesn't overlap the closing button. Be aware, that any answer written here is probably going to have a problem when the user resizes the dialog window a lot, and the only way to prevent that is to give the whole dialog window a min-width property.
Here is what you should do:
$('<button>+</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right', 'margin-right': '10px'}).click...
And for the other button:
$('<button>-</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right'}).click...
You can see the working Fiddle Here
I have a scrollable table with buttons that generate popovers. The problem is that it's positioned in the center of the button and not outside of it.
Here's my JSFiddle. http://jsfiddle.net/Br4Zg/999/
I read on the Bootstrap site that when attaching a popover to a btn-group I need to use
container: "body" attribute, but when I used that then it doesn't scroll with the table since it's not relative to the table anymore as seen in this fiddle: http://jsfiddle.net/Br4Zg/1000/
Is there a way to get the position correct along with the scrolling functionality?
If you remove the button from the button group then the popover shows up in the correct location.
Remove this
<div class ="btn-group btn-broup-sm">
I'm newbie to JavaScript. I used the search to find solution for my problem, but I couldn't find what I was looking for.
I am using this jquery.balloon.js, which transforms the default browser rendering of the tooltip to customized one (with adding some CSS to it – background, border, etc.).
This is the JavaScript code:
$(document).ready(function(){
$('a').balloon({
position: "bottom",
tipSize: "0"
});
});
Everything works just fine: when I hover the mouse on a link with included title attribute, the tooltip shows up customized. When I hover out the mouse the tooltip hides.
The problem comes when browsing on touch screen devices.
There is no mouse for hovering, so I tap once on the link and the balloon tooltip shows up (the link does not activate, the link is activated only when I tap twice), but then the tooltip does not hide. I tap somewhere on the body, but the tooltip remains on the screen.
I know how to hide elements in JavaScript by clicking/tapping outside them (in the html or body) with $('html').click(function() { //code });, but here the problem is that the tooltip is not an element, but attribute...
How to hide only the tooltip with tapping somewhere in the body?
You can test this behavior on the jquery.balloon.js site here with any touch screen device to see that once activated by tapping the tooltip can't hide.
Thanks for the only answer, but I figured it out.
I have created a class with the following code:
$.balloon.defaults.classname = ".balloon";
$.balloon.defaults.css = null;
This way I created .balloon class which allowed me to customize the tooltip by myself. I used this code to hide the tooltip by hiding the .balloon (which hides the newly customized jQuery tooltip):
$(document).ready( function(){
$('body').click( function(event){
event.stopPropagation();
$('.balloon').hide();
});
});
You can call the hideBalloon function.
I'm so frustrated that I cannot solve this simple question.
How to programmingly set/active bootstrap tooltip?
For example, we are at page:
http://getbootstrap.com/2.3.2/javascript.html#tooltips
and let's open the chrome console and make tooltip work on the fly on the 'home' link in the left up corner.
var home = $($('.navbar li a')[0]);// select that home link
home.tooltip({title:'wthhhh'}); // set the default title
home.tooltip('show');
Step 3 doesn't bring up the tooltip.
Any help?
EDIT: I understand bootstrap has got a major update, but I believe it's irrelevant. Tooltip doesn't seem change.
By default bootstrap's tooltip is placed on top of the element, and since you're selecting the top nav bar, it's appearing off the screen - you can't really see it, but it's there.
If you change the tooltip placement from top (default) to bottom you will be able to see it correctly:
var home = $($('.navbar li a')[0]);
home.tooltip({title: 'wthhhh', placement: 'bottom'})
home.tooltip('show');
So I have an interesting problem. I currently have a grid of four block elements, and I would like to enable some behavior to cause the div to grow when clicked on. The catch is, I am trying to animate it to the top level of the page, aka, I don't want it to dislocate the position of the other divs on the page.
It's difficult to explain, but I want it to kind of be like a modal window with the open animation originating from the element's location. Like a popup when it's clicked. Right now I am trying to do this in the click function:
$( "#cell" ).animate({
height:600, width:600, position:'fixed'
}, 1000, "linear", function(){ alert("all done"); });
This animates it bigger, but I was hoping to make it like an overlay. Has anyone seen anything like this, or a plugin that accomplishes this before?
Clone the element, absolutely position it over the original and animate the copy.
Press "Add to cart" and see this in action:
http://toys.scholarschoice.ca/products/Active-Play-536/12-Years-Old-Up-563/RipStik-Caster-Board-Silver-p46490/pstart1/
I tried to implement the idea of cloning and animate the clone..
See my DEMO