when i use slick grid frozenColumn function.
i move the bottom Scrollbar to the width as the frozencolumn width.
then move the left Scrollbar down quickly.
the frozenColumn become blank.
does the bug in slick grid. or need i do some setup
slick.grid.js
function appendRowHtml
code block
else if (( options.frozenColumn > -1 ) && ( i <= options.frozenColumn )) {
appendCellHtml(stringArrayL, row, i, colspan, d);
}
lost parameter d
Related
I'm working with a side navigation bar and I'd like it to be a fixed position on the screen, but I want it to stop being fixed after you scroll so far down. Is there any way to go about this?
Use this function. On scroll this function will trigger. Write the if condition inside function to remove fixed
$( "#target" ).scroll(function() {
if($(element).height() === "500px") {
// remove scroll fixed
$(scroll).css("position","relative") //or use absolute also.
}
});
Assuming that it's already fixed, the only thing you have to do is the following:
if($(window).scrollTop() > 150){
$('#nav').css('position', 'relative');
}
And of course, change #nav to your own selector and 150 to the value you desire.
How to override primefaces OneMenu in order to see it over captcha, ie below? My selectOneMenu have no any changes.
My guess is that the menu panel doesn't have enough space to fit in the lower part, instead it's positioned above, as the aligning of the panel is being set by javascript (PrimeFaces.widget.SelectOneMenu.alignPanel), using the jQuery UI .position() method which allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents, and the default value for collision attribute is flip (In PrimeFaces 5 it's flipfit) resulting the positioned element overflows the window in some direction, or to move it to an alternative position.
In this case you could implement one of these three solutions:
extend the space on the lower part, maybe adding margin to the
captcha, in this way the panel would fit in bottom.
OR change the hight of the panel
<p:selectOneMenu height="100" >
Making it a bit shorter so it can fit.
OR you can override the PrimeFaces.widget.SelectOneMenu.alignPanel function
to set the collision attribute to none, in the position function:
PrimeFaces 5
PrimeFaces.widget.SelectOneMenu.prototype.alignPanel = function() {
if(this.panel.parent().is(this.jq)) {
this.panel.css({
left: 0,
top: this.jq.innerHeight()
});
}
else {
this.panel.css({left:'', top:''}).position({
my: 'left top'
,at: 'left bottom'
,of: this.jq
,collision: 'none' // changing from flipfit to none
});
}
}
PrimeFaces 4
PrimeFaces.widget.SelectOneMenu.prototype.alignPanel = function() {
var fixedPosition = this.panel.css('position') == 'fixed',
win = $(window),
positionOffset = fixedPosition ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null;
this.panel.css({left:'', top:''}).position({
my: 'left top'
,at: 'left bottom'
,of: this.jq
,offset : positionOffset
,collision: 'none' // changing from default flip to none
});
}
Of course you should call it in the document.ready, and when you update the component.
I don't recommend this approach too much, but sometimes it's the only solution.
Hope this helps.
For necessary SelectOneMenu add style top find an optimal value and apply it. For me it is:
#registrationForm\:facultyList_panel {
top: 413px !important;
}
UPDATE 09.07: It does not helps for another screen resolution. The question is still relevant.
This is for a single page, with a navbar that links to local anchors only.
The navbar comes after a header, but sticks to top when scrolling down.
You can see how it works on github pages
But I've got two offset problems with link/anchors:
as long as you don't scroll, the anchors are offset and masked by the navbar.
once the navbar is affixed, the following links work as intended but not the first one.
A body margin breaks the layout as it prevents the header from beginning right at the top:
body {
margin-top: 65px;
}
I've tried without success to play with margin/padding for the sections:
section {
padding-top: 65px;
margin-top: -65px;
}
Here are the html and css
Any idea how to fix that?
Can it be solved with pure css?
Or do I need some js fix to account for the affix?
I think your problem has only to do with the affix. I found a problem in 3 situations:
no scroll and clicking a link
click the first link
scoll, click the first link and click an other link.
In this three situation you click from an position where you affix is not applied to a position where your affix has been applied.
What happens your click scrolls the target anchor to the top of the page and applies the affix (set navbar's position to fixed) after this. Result the navbar overlaps the content.
I don't think you could fix this with css only. I think your solution of adding a margin / padding to the section will be right, but you will have to apply the margin after the affix.
I tried something like:
var tmp = $.fn.affix.Constructor.prototype.checkPosition;
var i = 0;
var correct = false
$.fn.affix.Constructor.prototype.checkPosition = function () {
$('#content').css('margin-top','0');
tmp.call(this);
if(i%2!=0 && $(window).scrollTop()<443){correct=true}
if(i%2==0 && correct){$('#content').css('margin-top','83px').trigger('create'); correct=false}
i++;
}
This feels to complex and also only seems to work on firefox now.
update
I think i could fix your problem by overwritting the complete affix checkPosition function:
$.fn.affix.Constructor.prototype.checkPosition = function ()
{
if (!this.$element.is(':visible')) return
var scrollHeight = $(document).height()
var scrollTop = this.$window.scrollTop()
var position = this.$element.offset()
var offset = this.options.offset
var offsetTop = offset.top
var offsetBottom = offset.bottom
if(scrollTop==378)
{
this.$window.scrollTop('463');
scrollTop==463;
}
if (typeof offset != 'object') offsetBottom = offsetTop = offset
if (typeof offsetTop == 'function') offsetTop = offset.top()
if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
var affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? false :
offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
offsetTop != null && (scrollTop <= offsetTop) ? 'top' : false
console.log(scrollTop + ':' + offsetTop);
if(scrollTop > offsetTop) {$('#content').css('margin-top','83px'); console.log('margin') }
else{$('#content').css('margin-top','0');}
if (this.affixed === affix) return
if (this.unpin) this.$element.css('top', '')
this.affixed = affix
this.unpin = affix == 'bottom' ? position.top - scrollTop : null
this.$element.removeClass('affix affix-top affix-bottom').addClass('affix' + (affix ? '-' + affix : ''))
if (affix == 'bottom') {
this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
}
}
Some values are hard coded (now) so this function only will work for your example on github pages.
Demo: http://bootply.com/81336
On github pages you use "old" versions of jQuery and Bootstrap. You don't need to set an offset for the scrollspy. You don't have to call $('#navbar').scrollspy(); also cause you already set the scrollspy with data attributes.
See also: https://github.com/twbs/bootstrap/issues/10670
remove this hardcode values
When clicking an internal link (start with #{id}) the anchor with id={id} will be scrolled to the top of the viewport.
In this case there will be a fixed navbar (affix) so the anchor should scroll to the top minus the height of the navbar.
The height of the navbar will be 85px (63 pixels of the brand image + 2 pixels of the border + the margin-bottom of 20 px of the .navbarheader)
This value will be used here:
if(scrollTop > offsetTop) {$('#content').css('margin-top','83px'); console.log('margin') }
else{$('#content').css('margin-top','0');}
I have used 83 (may look better?).
So the 83 can be replaced with: var navbarheight = $('#nav').innerHeight()
Then we have these:
if(scrollTop==378)
{
this.$window.scrollTop('463');
scrollTop==463;//typo?? make no sense
}
The (first) link scrolls the anchor to the top where the affix is not
applied yet (below data-offset-top="443") the height of your fixed
navbar is not used in calculacting so this point will be 443 - 85
(navbarheight) = 378. This code could be replace with.
if(scrollTop==(443-navbarheight))
{
this.$window.scrollTop(scrollTop+navbarheight);
}
Note 443 now still will be hardcoded. It is also hardcoded in your
html with affix-top.
Watch out Replacing the values with the above won't work. The
situation between (af)fixed and not will change for every scroll
action. The part if(scrollTop==378) is a trick not a solution. It
solves the situation for scrollheight < data-offset-top. We could not
apply the whole range, case in that case the user can't never scroll
back to the top (this.$window.scrollTop scrolls him back again and again).
Also the calculation of navbarheight will be tricky. When the navbar
is fixed $('#nav').innerHeight() / height will return 85 (including
the margin). In the absolute position this will be 65.
I have some keywords that show up in separate inline-block elements with 10%(=80px) width. Currently I am setting overflow:hidden; for longer words, but it's not a good practice. I want that if some of these keywords are longer than usual, their parent div (the one with currently 10% width applied to) should be twice its size: 160px. I wonder if this can be solved with CSS3 only.
I'll try to explain it visually:
+__80px__+__80px__+__80px__+
+__text__+
+__longer text____+
+______way longer text_____+
instead of
+overflow hi+ or +random width to fit text+
If the text does not fit in 80px, its container should be 160px. That simple. Please help me.
I can't think of any way to do this in CSS, but with a little JavaScript magic you can make it work:
// assuming all elements are in a container with id="container"...
var qsa = document.getElementById('container').children, l = qsa.length, i;
for( i=0; i<l; i++) {
if( qsa[i].scrollWidth > 240) {
// this one handles REALLY long text by cutting them off with "..."
qsa[i].style.textOverflow = "ellipsis";
qsa[i].style.whiteSpace = "nowrap";
}
if( qsa[i].scrollWidth > 160) qsa[i].style.width = "240px";
else if( qsa[i].scrollWidth > 80) qsa[i].style.width = "160px";
// else do nothing, leave the deafult 80 width
}
Is there a built in way to determine if a component is fully visible in a Flex application (i.e. not offscreen one way or the other). If not how would I go about figurin it out?
I want to show or hide additional 'next' and 'previous' buttons if my primary 'next' and 'previous' buttons are off screen.
What event would be best to listen to to 'recalculate' ? stage.resize?
thanks!
here is a method for calculating if the component is within the bounds of the stage, it will not however tell you if the component is being hidden by another component, or if the component is being hidden because it is outside the bounds of another container.
public function isComponentWithinStage(c:UIComponent):Boolean {
var tl:Point = c.localToGlobal(new Point(0, 0));
var br:Point = c.localToGlobal(new Point(c.width, c.height));
//are we off the left or top of stage?
if ( tl.x < 0 || tl.y < 0 ) {
return false;
}
var stage:Stage = Application.application.stage;
//off the right or bottom of stage?
if ( br.x > stage.width || br.y > stage.height ) {
return false;
}
return true;
}
Could you give the specifics of the visible item and the container(s) it's in? Is it a matter of having to scroll some container to get to the buttons? Or is it a matter of someone has dragged a child window of a flexlib:MDICanvas partially off screen?
I think it's going to come down to if the x,y position of the component is beyond the width and height of its container, (and so on up through the parent containers until you reach your top level Application.)