Is there a way to make only part of a Packery/Draggabilly container draggable? Say, only making the .chartHeader in the below example draggable - yet having the overall .chartContainer move as one piece? Currently, only the .chartHeader is draggable and everything else stays behind. I'd like to have everything move at once like one big happy family.
Here's a fiddle: http://jsfiddle.net/uD5rG/
Thanks in advance!
<div class="chartContainer">
<div class="chartHeader">HEADER</div>
<div class="chartContent">CONTENT</div>
</div>
Here's my packery/draggabilly config:
var container = document.querySelector("#packeryContainer");
var pckry = new Packery( container, {
itemSelector: '.chartContainer',
columnWidth: 350,
rowHeight: 255,
gutter: 15
});
// make packery items draggable
var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
var elem = itemElems[i];
// get the .chartHeader element
var headerElem = elem.querySelector(".chartHeader");
// make element draggable with Draggabilly
var draggie = new Draggabilly( headerElem );
// bind Draggabilly events to Packery
pckry.bindDraggabillyEvents( draggie );
}
Fixed # http://jsfiddle.net/uD5rG/1/
I added draggabilly's handle option, as seen below
// make element draggable with Draggabilly
var draggie = new Draggabilly( elem , {
handle: '.handle'
});
Use the binding to jquery UI Draggable. It works fine for me with the jquery UI attribute handle.
http://packery.metafizzy.co/draggable.html#jquery-ui-draggable
Your solution, that you posted on jsfiddle does not work for me.
Just use the handle option like Cole mentioned.
$(function () {
var $container = $('.packery');
$container.packery({
columnWidth: 80,
rowHeight: 82 /* +2 for the bottom margin on .item */
});
// bind draggabilly events to item elements
$container.find('.item').each(makeEachDraggable);
function makeEachDraggable(i, itemElem) {
// make element draggable with Draggabilly
var draggie = new Draggabilly(itemElem, {
handle: '.header'
});
// bind Draggabilly events to Packery
$container.packery('bindDraggabillyEvents', draggie);
}
});
Here's a simple fiddle: http://jsfiddle.net/ex5TJ/
Also, have a look at this link for more details: http://draggabilly.desandro.com/
using jquery:
var draggie = $grid.find('.grid-item').draggable({
handle: '.ui-sortable-handle'
});
$grid.packery('bindUIDraggableEvents', draggie);
Related
So I'm using this directive to collapse a variable height card in Ionic. The directive grabs the auto height and changes it to a defined height so it can then be collapsed to 0 with a css animation. It was working fine for my needs, but now I need to use ng-src to dynamically load an image within the card. What's happening is the image is being loaded after the directive, so the image loads and overflows the card.
Directive:
.directive('collapse', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, ngElement, attributes) {
var element = ngElement[0];
$timeout(function(){
$scope.$watch(attributes.collapse, function (collapse) {
var newHeight = collapse ? 0 : getElementAutoHeight();
element.style.height = newHeight +"px";
ngElement.toggleClass('collapsed', collapse);
});
function getElementAutoHeight() {
var currentHeight = getElementCurrentHeight();
element.style.height = 'auto';
var autoHeight = getElementCurrentHeight();
element.style.height = currentHeight +"px";
getElementCurrentHeight(); // Force the browser to recalc height after moving it back to normal
return autoHeight;
}
function getElementCurrentHeight() {
return element.offsetHeight
}
});
}
};
}])
and HTML:
<div ng-repeat="item in items | orderBy : '-'" collapse="item.deleted">
<div class="list card">
<img class="full-image" ng-src="{{item.image}}"/>
</div>
</div>
As you can see I've injected $timeout and leaving the interval blank in hopes it will wait until the DOM is loaded, but it seems no matter how I use it, the directive still explicitly sets the height of the element in css before the image child element is rendered. How can I delay the setting of element height until after ng-src is loaded in each ng-repeat item?
First thing, angular $timeout without an $interval will not wait for the DOM tree to load, basically, what it does is waiting for the current digest cycle to finish before executing the function in the first parameter. By doing so, it will allow the your code to wait till the directive finish compile and render before calculating the height of the div.
However, there is no guarantee that the image will be loaded by that time. Images are loaded by the browser independently from DOM rendering, therefore, to calculate the height of the container having images precisely, you should make use of JS Image Object and the load event. Once the images are fully loaded, then you can update the height.
Also, for your directive, I don't think you need to calculate the height every times the collapse variable changed (inside the watch), you can simply wait till the image being loaded, calculate the height once, store it inside the scope object, and reuse it whenever the collapse variable change.
Okay, so thanks to Thai's input, I have a working solution:
.directive('collapse', [function () {
return {
restrict: 'A',
link: function ($scope, ngElement, attributes) {
var element = ngElement[0];
var img = element.querySelector('.full-image');
angular.element(img).bind('load', function() {
var autoHeight = getElementAutoHeight();
element.style.height = autoHeight + "px";
});
$scope.$watch(attributes.collapse, function (collapse) {
var newHeight = collapse ? 0 : getElementAutoHeight();
element.style.height = newHeight +"px";
ngElement.toggleClass('collapsed', collapse);
});
function getElementAutoHeight() {
var currentHeight = getElementCurrentHeight();
element.style.height = 'auto';
var autoHeight = getElementCurrentHeight();
element.style.height = currentHeight +"px";
getElementCurrentHeight(); // Force the browser to recalc height after moving it back to normal
return autoHeight;
}
function getElementCurrentHeight() {
return element.offsetHeight
}
}
};
}])
Here is my code, where I'm trying to detect the element, which a jQuery UI draggable is hovering over. I need to get the element's object and attributes, such as class names (in this case .sortable-grid,.sortable-table,.sortable-row,.sortable-cell).
The answers found here only show how to get the draggable item itself (ui.helper or event.target), but not the element it is hovering above.
The best way to answer would be using the prepared JSFiddle, since my code uses an iframe, which would not work if the full code is posted here:
JSFiddle
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
<div style="background-color:grey;display:inline;cursor:move" id="draggable">DRAG ME</div>
<iframe src="https://fiddle.jshell.net/piglin/UAcC7/1869/show/" id="frame" style="width:100%;overflow:visible" seamless="seamless" scrolling="no"></iframe>
JS:
$("#draggable").draggable({
drag: function(event, ui) {
//Some code here
}
}
It was possible by modifying the function from another answer to fit this purpose. After adapting it to use the contentWindow of the iframe and adding offset calculation it works now.
Solution
function allElementsFromPointIframe(x, y, offsetX, offsetY) {
var element, elements = [];
var old_visibility = [];
while (true) {
element = document.getElementById('frame').contentWindow.document.elementFromPoint(x - offsetX, y - offsetY);
if (!element || element === document.getElementById('frame').contentWindow.document.documentElement) {
break;
}
elements.push(element);
old_visibility.push(element.style.visibility);
element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
}
for (var k = 0; k < elements.length; k++) {
elements[k].style.visibility = old_visibility[k];
}
elements.reverse();
return elements;
}
var selected = $('');
var tmpColor = 'transparent';
$("#draggable").draggable({
drag: function(event, ui) {
var el = $(allElementsFromPointIframe(event.pageX, event.pageY, $(frame).offset().left, $(frame).offset().top));
var div = $(el).filter('ul, li').not($(this));
selected.css({'backgroundColor': tmpColor});
selected = div.last()
tmpColor = selected.css('backgroundColor');
selected.css({'backgroundColor': 'red'});
console.dir(div);
},
iframeFix: true,
iframeOffset: $('#iframe').offset()
});
i am having a hard time finding any information on the ordering of directives and their updating of css properties.
for example, i have two directives, one to set an element to full screen height, and one to align content vertically.
app.directive('fullscreenElement', function() {
return {
restrict: "A",
link: function(scope,element,attrs){
$(element).each(function(){
$(this).css('height', $(window).height());
});
}
};
});
app.directive('alignVertical', function() {
return {
restrict: "A",
link: function(scope,element,attrs){
var height = $(element).height();
var parentHeight = $(element).parent().height();
var padAmount = (parentHeight / 2) - (height / 2);
$(element).css('padding-top', padAmount);
}
};
});
They both work independantly, the trouble is when they are nested, the align-vertical directive doesnt work, im assuming this is because the css height hasn't been set yet? how do i make sure it is set before the alignVertical directive runs? any tips for writing these two directives in a more angular way would be appreciated.
this works:
<header style="height:800px">
<div align-vertical>
this content is centered vertically as expected
</div>
</header>
this doesn't work (content doesnt center vertically, even though header height is now fullscreen):
<header fullscreen-element>
<div align-vertical>
the header element is now fullscreen height but this content is *not* centered vertically
</div>
</header>
thanks
Figured out a solution, posting it here in case anyone finds it helpful.
The trick is to use scope.watch and scope.evalAsync to monitor changes of height to the parent container and run them after rendering is complete.
app.directive('alignVertical', function() {
return {
link: function($scope, element, attrs) {
// Trigger when parent element height changes changes
var watch = $scope.$watch(function() {
return element.parent().height;
}, function() {
// wait for templates to render
$scope.$evalAsync(function() {
// directive runs here after render.
var that = $(element);
var height = that.height();
var parentHeight = that.parent().height();
var padAmount = (parentHeight / 2) - (height / 2);
that.css('padding-top', padAmount);
});
});
},
};
});
I am finally reaching out for help. I've been trying to get a no results message to show up on my Isotope image gallery for a week now, with only a little bit of luck. I had an example working at one point, but the message wouldn't hide until the animation was complete, so it didn't look good at all.
Surely someone has a solution.
I would greatly appreciate it if someone is able to help me. I have test site that I will link here in just a second.
For now here is the first half of my isotope configuration file. I have the '.message-div' placed at the bottom of my #isotopegallery div with css applying 'display: none;.'
jQuery(window).load(function() {
var $container = $('#isotopegallery').imagesLoaded(function() {
$container.isotope({
itemSelector: '.photo',
masonry: {
columnWidth: 161,
gutter: 10
},
transitionDuration: '0.6s'
});
// Filters
//
var filters = {};
$('#isotopefilters').on('click', '.menu-item', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.filter-title');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[filterGroup] = $this.attr('data-filter');
// combine filters
var filterValue = '';
for (var prop in filters) {
filterValue += filters[prop];
}
$container.isotope({filter: filterValue});
// Possibility
$container.isotope( 'on', 'layoutComplete',
function( iso, laidOutItems ) {
if ( laidOutItems < 1 ) {
$('.message-div').fadeIn('slow');
} else {
$('.message-div').fadeOut('fast');
}
})
});
});
});
There is an easy workaround to achieve the "no result" message.
Consider ".photo" as class for the itemSelector. As isotope is simply attaching ".isotope-hidden" to the div-container if it does not match the filter, the number of these divs equals the total of all isotope items in case of "no result". Easy:
if($(".isotope-hidden").length == $(".photo").length) {
$("#mynoresults").show();
}
I have a container and I want to scroll to the bottom of it on trigger of an event. I have tried everything on Google but nothing seems to work.. These are the things that I have tried so far so that you dont waste any time:
1.
Ext.get('detailsViewId').scrollTo("top", -Ext.get('detailsViewId').getHeight());
2.
var mainContainer=this.getDetailContainer();
//I get the container here, so no error in the above line
mainContainer.scrollTo..................
mainContainer.element.scrollTo..................
and many more things from the "Developer Tools" of Chrome.
So nothing has worked yet so I am hoping that I can get something from Stackoverflow users.
Thanks in advance.
Sencha Touches uses a non-native ScrollableView to make containers scrollable.
You can get the ScrollableView by calling the getScrollable() method on a scrollable container. This ScrollableView uses a Ext.scroll.Scroller to apply the scrolling logic.
var scrollableView,
scroller,
containerList
containerList = Ext.Viewport.add({
scrollable: true,
// creating a few items to make the container overflow.
defaults: {
style: 'background-color: hsl(180, 45%, 85%);',
padding: 30,
margin: 20
},
items: function(){
var ar = [];
for(var i = 0; i < 30; i++) {
ar.push({ html: 'item ' + i});
}
return ar;
}()
});
scrollableView = containerList.getScrollable();
scroller = scrollableView.getScroller();
scroller.scrollBy(0,99999);
The example is runnable here: https://fiddle.sencha.com/#fiddle/5pm
note: the scroller has an method called scrollToEnd, but somehow this didn't work as expected, which is why I'm using 99999 as an scrollBy y argument.
Here's how it works for me:
var mainContainer=this.getDetailContainer();
var scroller = mainContainer.getScrollable().getScroller();
scroller.scrollToEnd(true);