I've been trying to integrate infinity inside a defined scrolled area.
My UI is a bunch of inline-block thumbnails (not floated). Grid Layout.
Infinity works perfect inside my page when it occupy the whole page width & height, and each element is block level, with simple DOM inside.
But when create a little more advanced UI, with grid interface, and an infinity area to scroll inside a container (ListView's height isn't defined. It's container does), then all gets wrong.
Even more than that. If I give 100% to HTML & Body, infinity fails. it calculates wrong listView`s height.
How to solve this? Grid UI is a desired & common one.
JS Fiddle Demos:
All 1300 elements are block-level - #OK
ListItem (CSS) Width & Height defined - #OK
ListItem as inline-block - #Broken
Code Example (Infinity NG Integration)
var demoApp = angular.module("demo", []);
demoApp.controller("demoCtrl", function($scope) {
$scope.items = [];
for(var i = 0; i < 1300; i++) {
$scope.items.push({ title: "Item " + i });
}
});
demoApp.directive("infinityScroll", function() {
'use strict';
return {
restrict: "A",
transclude: true,
link: function(scope, elm, $attrs) {
scope.listView = new infinity.ListView($(elm));
}
};
});
demoApp.directive("infinityItem", function() {
'use strict';
return {
restrict: "A",
link: function(scope, element, attrs) {
scope.listView.append(element);
}
}
});
PostScript: I noticed in the API Reference, that ListItem has width & Height properties. Same as ListView.
I couldn't find how to implement it, Inside the build code itself, i haven't seen how to pass this properties to the object.
Sorry if its obvious thing, and its possible to do that.
Will appreciate any help.
Thanks.
Actually right now I discovered my problem.
2 elements that messed up with my UI where actually - Overflow:Hidden for my Body,HTML, and Height:100% for a page container.
I have removed Overflow:Hidden, and Height from the page container (not ListView!) and all is fine.
'useElementScroll:true' and .scrollable classname did not assisted me, and prevented me from needing do this actions.
Now my UI is impacted, and I need to see how I`ll solve it.
Edit:
I have opened an issue at airbnb git, and I hope they will pay attention to this. Not been able to set a father and relate only to him, is an issue that adds complexity.
https://github.com/airbnb/infinity/issues/46
Related
I'm wondering if it's possible to use only CSS to create a parallax scrolling background that meets the following specifications.
It works on an element that sits inside an otherwise static layout (i.e. my whole page layout isn't a group of parallaxing items)
The background isn't entirely fixed in place; it moves, just not as fast as the rest of the page.
I've looked up tons of tutorials for parallaxing backgrounds, and have found some seemingly great tutorials, but they all have one of the following problems.
They rely on the whole page being a parallax group so that you're actually scrolling over a container via an "overflow: auto" specification
The background is totally fixed in place
they use JavaScript.
Sooo, I can accomplish what I want with JavaScript fairly easily. Here's a full working example on JSFiddle that you can try out.
CSS
.parallax-row {
background-image: url(http://lorempixel.com/output/nature-q-c-781-324-3.jpg);
background-size: auto 150%;
}
JavaScript
/**
* Update the parallaxing background img to partially scroll
*/
jQuery(document).ready(function($) {
$(window).on('scroll', function() {
$('.parallax-row').each(function(index, el) {
var $el = $(el);
var fromTop = $el.offset().top + ($el.outerHeight() / 2) - $(window).scrollTop();
var windowHeight = $(window).height();
var percent = (fromTop * 100 / windowHeight);
$el.css('background-position', '0 ' + percent + '%');
});
});
});
Is it possible to accomplish that same effect with just CSS?
I'm trying to get the height of a div in angularjs, but it only returns the initial value and never updates:
vm.summaryHeight = $(".history-log-container").height();
console.log(vm.summaryHeight);//returns 0 and then never logs again.
How can I get the height of this div as it updates?
I tried this:
link: function ($scope, element, attrs) {
//console.log(element.height());
$scope.$watch(function(){
return element.height();
}, function(oldVal, newVal){
//returns the initial values then nothing else
console.log(arguments);
})
}
As others have said, the value will be taken once unless you specify otherwise. Try something like;
$(document).resize(function(){
// Your code here
});
If your window size changing affects the height of the target element then whenever the document is resized the value will be retaken. This might also work if you were to target the element rather than the document;
$('.history-log-container').resize(function(){
// Your code here
});
But you'd have to check that out- I just usually have all my window responsive sizings within the one document resizing function.
I am using Angular 1.3 and Bootstrap 3.2. I want to create a single webpage that does exactly this: http://lewisking.net. i.e. I want to be able to have vertically stacked divs that are the height of the viewport. I'm thinking of making a directive that watches the browser height/width and updates the style accordingly.
Any other ideas? Any tips for implementing with a directive?
This is the perfect use case for vh and vw.
Simply set:
.wrapper {
width: 100vw;
height: 100vh;
}
And it will work out the box. If you have to support any old browsers you can easily do a quick JS fall back.
CSS will get you part of the way, but you will need JS to update your 100% height on resize
and scrollTop points etc. And you will also need a way to animate the scroll anyway. This isn't exactly what I would do but it explains the basic idea.
$($window).on('resize', function() {
$scope.winWidth = $(window).width();
$scope.winHeight = $(window).height();
});
...
$scope.getSectionStyle = function(){
return {width:$scope.winWidth, height:$scope.winHeight} ;
}
...
<section id="sectionId" ng-style="getSectionStyle()"
To animate the scroll I just use jQuery like. If you're a angular purist there is $achorScoll but it has no animating at this point so you need to do some extra factory or directive like https://github.com/durated/angular-scroll/
$rootScope.scrollTo = function(_to){
$("html, body").delay(300).animate({scrollTop:_to},{ easing: "easeOutExpo"}, 2000);
}
To get _to you just find the elements offset().top something like :
var offset = $('#sectionId').offset();
$rootScope.scrollTo(offset.top);
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.
I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:
http://jqueryui.com/demos/sortable/#display-grid
Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit:
See quirksmode for another css-only workaround.
Could you provide a sample of your code? Also, why does the list have display:none set?
For instance, should be as simple as this:
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.
Hope that helps.
You need to explicitly set the width and height for the area.
Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/
Here is the script:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Basically, you need to update the ulWidth and divWidth when you add the new item.
Then just set the background image to repeat horizontally and you should be set.
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
Note: You will need to set the height; otherwise you will not see the background because the li are floated.
For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it.
See the links below, it also have demo, so you can understand the concept:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
and
http://aloestudios.com/misc/overflow/