I need to re-position an existing popover once Ajax data has been returned (size of data returned will vary) and I am doing this by modifying .css top and left for the popover in the completion block.
I can read the height and width with :
$popoverElement.height()
$popoverElement.width()
Then re-calculate positions for $popoverElement.css({top: newtop}) and $popoverElement.css({left: newleft}).
From looking at other posts, this seems to be the only option.
If data-placement of current popover is right, I just need to change top (to adjust the vertical position of the popover). However, if the data-placement is left then I also need to change the horizontal position of the popover.
How can I read the data-placement attribute of the popover, to use in an if clause? I am setting this attribute correctly in the page, but don't know how to reference it in my function.
EDIT : The reason I'm doing this, is because the arrow is no longer aligned when the popover resizes with the new content - this is the problem I am trying to solve, if there's a better way to achieve this, please let me know!
You can get it from the bs data object associated with the popover instance.
var popoverData = $popoverElement.data('bs.popover');
var popoverPlacement = popoverData.options.placement;
console.log(popoverPlacement);
You can use jQuery data() to read the current value (assuming the popover() has already been instantiated):
$popoverElement.data("placement");
http://www.codeply.com/go/33aPVnvfyy
Related
I have a page containing a list of items:
Load more button should load some more items via ajax and append it to the items container preserving current scroll position. So after I click it the feed I expect it to look like this (green items are new):
But in fact Chrome 56 executes some computations to make the page stay in the same state, and what I see looks like this:
Is there any way to prevent this smart scrolling position setting in Chrome?
Update: I can reproduce the behavior only if parent container ('body' in my case) has 'display: flex' property (I use it to achieve 'sticky footer' feature).
I solved a similar problem by adding overflow-anchor: none; to the scroll container.
https://wicg.github.io/ScrollAnchoring/
Today it seems that this property was excluded? When adding 'overflow-anchor: none;' as style on a div element I get the message: Validation (CSS 3.0): "overflow-anchor" is not a known css property name.
This is simple. Before performing your AJAX call, save the scroll position of the page to a variable, then, after the call, scroll to the position indicated by that variable. Here is what you should write before your AJAX call:
var scrollpos = window.scrollY;
and here is the code after your AJAX call
window.scrollTo(0,scrollpos)
Hope this works
Why chrome makes calculations to preserve the scroll position? Usually the page will only be longer, so the scroll position stay fixed anyway.
I assume you remove the button, so the position cannot be kept, while content was not reloaded. You should reserve the button space in the dom and remove the reserved space when inserting the reloaded items.
In salesforce lightning component, we have three different divs which we are hiding and showing as needed using display none css property. Fist div has more contents and we have to scroll the page till the end to submit the form and on submit next page is visible which has few lines of content but we have to scroll up to see those contents. Is there any way that I can avoid scrolling. Second div is taking first div height.
You could try this in your doInit controller method:
window.scroll(0, 0);
Use below code. As Salesforce lightning use 'transform' CSS property to scroll.
Just apply 'scroller' class to the div you want to put on top.
var cssScrolltoTop = $(".scroller"); // css class to find scroll position
if (cssScrolltoTop) {
var cssScrolltoTopTransform = cssScrolltoTop.css("transform");
if (cssScrolltoTopTransform) {
cssScrolltoTop.css("transform", "translate3d(0px, 0px, 0px)"); //set 'transform' since lighntning architecture uses css 'transfrom' property to scroll
}
}
I faced similar issues , then we used this event in the controller to resize the div:
$A.get("e.ui:updateSize").fire();
This was later deprecated by salesforce then we wrapped the div which is expanding / collapsing:
<ui:scrollerWrapper >
// Add your <div>
</ui:scrollerWrapper>
To make the scrollTop = 0 to work the container div has to have an internal scroll. Which we can get by either giving a height via px or via vh.
Try that out it should work. I was facing a similar issue while adding LWC inside Flexi Page. The Flexi page has its own scroller but for that, the scrollTop doesn't work. But if we create a separate scroller at the top-level div then the scrollTop starts to work.
Check this out. I have created this and it works perfectly fine for me: https://webcomponents.dev/edit/3vpWJ46hxykfPSACfuNN
I am building a site with a right aligned nav.
The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.
I am trying to create a solution for my menu below.
jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/
I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js.
I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover.
There maybe a better css only solution, but i couldn't find one.
Any help is appreciated! :D
Edit: updated explanation.
You have already calculated the left of your last menu, why didn't you use?
$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
$("#last-menu-item").mouseenter(function(){
$("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").css({'display':'none'});
});
});
Check Here
As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.
But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:
<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
Then change your javascript to:
// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...
You can also do the offset calculations in javascript and only specify position in your templates
Fiddle at: http://jsfiddle.net/cYsp6/7/
I cant Make with css
$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
$("#last-menu-item-drop-down").css('position','absolute').css('left',a);
$("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").hide();
});
Updated Fiddle:
Fiddle
I have a table with a fixed layout. The columns take up more space than is available so a horizontal scroll bar appears. Currently you can move around in the table using the keyboard arrows. But when a cell is selected that is not in view I need to programmatically tell the scrollbar to move. I thought this would be scrollleft but is not settable and is always zero. Instead I have achieve my desired effect by using scrollIntoView(false). This works but I still want to know why scrollleft was not working.
Please see my fiddle. The function you may want to use is called scrollLeft()
http://jsfiddle.net/ydj5E/
jQuery Docs: http://api.jquery.com/scrollLeft/
MDN: https://developer.mozilla.org/en/DOM/element.scrollLeft
I have a list of images in columns. I want to change the position of the image when user clicks on the image. I want to change the position of the image to the top image in that column. Please give me some idea how to do it.
There are several ways to do this. Either you manipulate the DOM or you change the CSS class. Dom manipulation way :
document.getElementById(parentNode.id).removeChild(this);
document.getElementById(parentNode.id).prependChild(this);
Use the .detach() command from jquery, it will allow you to set it back in later with all the events intact: http://jsfiddle.net/rkw79/QnWhR/
$('img').click(function() {
var x = $(this).detach();
x.prependTo('body');
});
animated version: http://jsfiddle.net/rkw79/PXPgT/