Dynamically change the location of the popover depending upon where it displays - javascript

I'd like to dynamically change the popover placement (left/right, top/bottom) depending on where the element is located on the screen.
//get_popover_placement(dom_el) returns 'left', 'right', 'top', or 'bottom'
function set_popover(dom_el) {
var the_placement = get_popover_placement(dom_el);
$(dom_el).popover({
offset: 10,
placement: the_placement
}).popover('show');
}
//set the placement on every hover
$('a[data-rel=popover]').hover(function(){
set_popover(this);
}, function(){});
It works the first time, but if the position of the element changes (when the window is resized, for example), the placement is not updated with subsequent calls to set_popover.
I added a little bit of code to get_popover_placement that adds a different color border to the element, depending on the placement. The border color gets updated every time, indicating the code is being called and the calculations are being done correctly, but the placement does not get updated.
It appears as though the placement option can only be set one time. How can I get around this limitation? Is there a variable somewhere that can be cleared to reset popovers?

Try this change, using the .on() function in jQuery to attach an event listener:
Changed this reply by updating Kevin Ansfield's - added code to the placement function.
$('a[data-rel=popover]').popover({
placement: get_popover_placement
});
function get_popover_placement(pop, dom_el) {
var width = window.innerWidth;
if (width<500) return 'bottom';
var left_pos = $(dom_el).offset().left;
if (width - left_pos > 400) return 'right';
return 'left';
}

I just checked the bootstrap source again and realised that functions passed to the placement property get passed arguments. I managed to achieve a similar thing to what you were attempting, try the following and see if it works for you:
$('a[data-rel=popover]').popover({
offset: 10,
placement: get_popover_placement
});
function get_popover_placement(pop, dom_el) {
// your placement function code here
}

Related

Visual feedback for value update

I have contenteditable td elements in a table. I'm using bootstrap and table-hover (so the colour changes when you hover over a row. On blur of the td I do an ajax request that updates the value on the server and then I get a response that indicates success or the error. On success I want to indicate that the value has updated successfully. Right now I'm doing this:
var trueColor;
trueColor = $(element).css('backgroundColor');
$(element).animate({
backgroundColor: '#cce2ff'
}, {
duration: 100,
complete: function() {
$(element).delay(10).animate({
backgroundColor: trueColor
}, {
duration: 900
});
}
});
So I'm using the complete callback of the first animate to put the colour back to what I want it to be. The code works but the problem is obviously if you're hovering over the element when it sets trueColor. I've thought of using css animations but the main thing was that I didn't know how to get a "flash" kind of effect (I think maybe keyframes would help but I don't know how to use them let alone how browser compatible they are).
So the question is basically how do I achieve the effect? I don't mind whether it's css or javascript and I welcome superior suggestions if you think there's a better way to give this sort of visual feedback to a user.
Update
Thanks to #chiliNUT I am removing the class to get the colour but the problem was then that jquery's animate had styled the element and so hovering was broken on modified cells. So now I also removeAttr("style") to get rid of that once we're done
var trueColor;
$(el).closest('table').removeClass('table-hover');
trueColor = $(el).css('backgroundColor');
$(el).closest('table').addClass('table-hover');
$(el).animate({
backgroundColor: '#cce2ff'
}, {
duration: 100,
complete: function() {
$(el).delay(10).animate({
backgroundColor: trueColor
}, {
duration: 900,
complete: function() {
return $(el).removeAttr("style");
}
});
}
});
You can remove the hover effect while its doing the display update, then restore it once the display update finishes. You can get the table element containing the td with $(element).closest('table') and then remove the hover effect with removeClass('table-hover') and then put it back with addClass('table-hover'), so
var trueColor;
//remove hover
$(element).closest('table').removeClass('table-hover');
//get original color
trueColor = $(element).css('backgroundColor');
//restore hover
$(element).closest('table').addClass('table-hover');
//..rest of your original code

OpenLayers zoom scroll events are ignored if no layers are visible

I've noticed that if all OpenLayers.Layers have visibility set to false, I can no longer zoom in and out using my mousewheel. I can still use the OpenLayers.Control.Zoom buttons, but no longer the mouse wheel.
Is there anyway to disable this 'feature'?
Edit:
Here is a jsfiddle link. Set the layer to invisible, then scroll, then set it back to visible. It doesn't change. Now set it invisible, use the zoom control button, then set it back visible.
http://jsfiddle.net/a8kK4/56/
Here's some code for how the map is instantiated because SO won't let me post jsfiddle without it:
var map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
layers: [ new OpenLayers.Layer.OSM() ]
});
The issue is to do with the onWheelEvent of the MouseWheel handler, see the code here on github. The issue arises with the lines
if (!overScrollableDiv && overMapDiv) {
if (allowScroll) {
as with the map hidden, you will never get it so that all of these conditions are met and therefore the call to this.wheelZoom(e) which actually does the zoom in/out never gets called. The behavior you are seeing is, therefore, by design.
One, somewhat crude way to fix this, is to override the whole function and just set the line where allowScroll is initialized to true, ie, you put the the whole function into your code, after the main OpenLayers.js has downloaded, and just change that one line
OpenLayers.Handler.MouseWheel.prototype.onWheelEvent= function(e){
if (!this.map || !this.checkModifiers(e)) {
return;
}
var overScrollableDiv = false;
//CHANGE THIS LINE TO TRUE
var allowScroll = true;
var overMapDiv = false;
//rest of function .......
};
The problem of doing this is that a scroll will now happen if you use the mouse wheel anywhere. There is probably a more elegant way by changing the conditions under which the values of overMapDiv and allowScroll and overScrollableDiv get set. I could not get this to work on jsFiddle (I think due to version conflicts), but locally it worked as expected. I hope this helps.

jQuery animate element and hide

I'm building Windows 8 app in JavaScript. What I'm trying to do is to slide the html element out of the screen and then change its "display" property to "none":
var panelContainer = $('#panelContainer');
panelContainer.animate({ right: '-400px' }, 200, function () {
panelContainer.hide();
});
But this code doesn't work correctly: it just immediately hides the element without animation.
I've also tried:
var panelContainer = $('#panelContainer');
panelContainer.animate({ right: '-400px' }, 200, function () {
panelContainer.hide(200);
});
and it works, but it's a hack: I don't want to change the opacity when animating and I don't need to have additional timeout for hiding.
I've found that jQuery UI library has extended show and hide methods that do that, but I would like not to reference this library just for one call. I'm aware that there is a WinJS.UI.Flyout that performs similar operation, but it's not applicable in my case. Any ideas how this can be done?
The problem was that jQuery does not put hide animation into its animation queue by default. That's why my initial code was hiding the html element first and then animating it. The solution for that is to call hide with the parameter that explicitly specifies that hide call should be queued:
panelContainer.hide({queue: true});

Which is proper listener to use doLayout function?

I am working in EXTJs, Please check below example:
var containerForm=Ext.widget('panel',{
width: 1100,
border: false,
frame: true,
"layout":"fit",
title: 'Add User',
hidden:true,
listeners:{
'afterrender': function(panelObj,eOpts )
{
panelObj.doLayout();
}
}
});
Html of above panel is updating via ajax response as shown in the following code:
formObj.update(jsonResp.html,true,function(){
containerForm.doLayout();containerForm.focus();
});
containerForm is auto height panel, because this panel is used for multiple pupose,
When "formObj.update" populating this panel content, it's content loading properly but
If ajax response "jsonResp.html" has any image, that time doLayout() function is not helping to align panel height properly,
i added doLayout function at 2 places but callback function is not helping me in above case:
when i call doLayout function after 2 seconds then only it's work correctly:
formObj.update(jsonResp.html,true,function(){
setTimeout('containerForm.doLayout(); containerForm.focus();', 2000);
});
Which is proper listener to use doLayout function?
You could take a look at the Mutation Events but these are not cross browser compatible. If they were, you could try:
formObj.on('DOMSubtreeModified', function(){containerForm.doLayout();}, this);
You really just need to make sure your formObj.update() is complete. That is why your timeout is helping. If you want to make sure the innerHtml is set, just check it yourself.
If you look at the Source for Ext.dom.Element.update(), it is just using dom.innerHtml to update the html. In your update callback, you could check to see if the innerHtml is there before calling doLayout(). Some simple example code I threw together quick.
var doLayoutIfComplete = function(){
if(document.getElementById('formObjId').innerHTML == jsonResp.html){
containerForm.doLayout();
}
else{
doLayoutWhenComplete.delay(500); //Check again in 500ms
}
}
var doLayoutWhenComplete = new Ext.util.DelayedTask(function(){
doLayoutIfComplete();
});
formObj.update(jsonResp.html,true,function(){
doLayoutWhenComplete.delay(500);
});

grumble.js, jQuery plugin (Bubble popups): how to make it not polute my document body with unremovable trash?

I want to show a popup many on click. I want that many to be in a bubble. So I created a demo: here. But that Bubble generator plugin i use tends to keep tons of trash in the DOM each time it shows a popup. Well so I tried to destroy trash via
$('.grumble-text').remove();
$('.grumble').remove();
$('.grumble-button').remove();
But it somehow brakes it at all=( So how to change grumble-bubble popup plugin code to make it either keep DOM clean or at least make plugin independent of trash it creates?
I've recently updated the plugin to provide better control of positioning and angle. The update also persists the grumble, invoking the plugin more than once on an element will not create extra left over DOM.
Try updating to the latest code. The code below should now work as you expect.
var html = ''
+'Download me'
+'<br/>'
+'Edit me'
+'<br/>'
+'Delete me';
var $grumble = $('#grumble3');
$grumble.mouseup(function(eventObj) {
$grumble.grumble({
text: html ,
angle: (Math.random() * 360 + 150),
distance: 30,
hideOnClick: true,
onShow: function() {
$grumble.addClass("hilight");
},
onBeginHide: function() {
$grumble.removeClass("hilight");
}
});
}).mousedown(function() {
$grumble.addClass("hilight");
});
Thanks for your interest. If there are any further problems please raise them as bugs on the github page. https://github.com/jamescryer/grumble.js
Use the grumble and button parameters on the onHide callback like this:
$('#grumble').grumble({
text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle: 85,
distance: 50,
showAfter: 4000,
hideAfter: 2000,
onHide: function(grumble, button) {
grumble.bubble.remove();
grumble.text.remove();
button && button.remove();
}
});
This allows you to remove only the "trash" (I prefer "leftovers") associated with that specific tooltip/popup/bubble. Note that button only exists if hasHideButton is true, hence the button && existence check.
Why do you want to remove it? Is the 'trash' causing problems with browser performance?
In general, the only way to do this is to dig into the plugin source and add a function to remove the plugin, if one is not already present. If you just remove the related DOM elements you will leave behind references to them and events handlers that access them.

Categories

Resources