Using the jQuery Fancybox plugin with Isotope, I'm trying to figure out how to update the Fancybox gallery order in lightbox view after I change the Isotope sort by options.
When I re-sort the images I need to be able to tell Fancybox what the new order is, so that when I navigate between images in lightbox view it goes to the next image in the newly sorted order. Right now the next/previous buttons take you to the next/previous image in the original sort order.
Any help is much appreciated.
With reference to this page, the relevant part looks something like this...
$('.option-set').change(function() {
var $this = $(this);
var delay = 1100; // approx 1 second delay after last input
clearTimeout($this.data('timer'));
$this.data('timer', setTimeout(function(){
$this.removeData('timer');
$('a[rel^="lightbox"]').each(function() {
var opacity = $(this).parent().css("opacity");
$(this).attr('rel','lightbox['+opacity+']');
});
Shadowbox.clearCache();
Shadowbox.setup();
}, delay));
});
It's a hack of course. Whenever one of the checkboxes is changed, this routine waits a bit to let isotope do its thing and then updates all 'rels' to correspond to the opacity of their respective parents. So there will actually be two sets of rels (lightbox[0] and lightbox[1]). But because there is no visible thumbnail for lightbox[0], those images are in effect removed from the lightbox/shadowbox.
I came across the same problem and looked around to find a solution and stumbled upon this as well. As I couldn't find a solution, I thought I'd try it myself and the solution was simple. Not sure if this has an affect on performance of the browser, but simple DOM manipulation will give you the required behavior. I'm using isotope V2 and events in this version is a bit different to that in V1. Fancybox version shouldn't matter.
First you have to make sure you have set isInitLayout: false when initializing isotope.
var $container = $("#isotopeContainer");
$container.isotope({
//other options
isInitLayout: false
});
After that, you have to bind to the layoutComplete event on your isotope container.
$container.isotope('on', 'layoutComplete', function(isoInstance, laidOutItems) {
var $firstItem = laidOutItems[0].element;
$($firstItem).prependTo(isoInstance.element);
var $lastMovedItem = $firstItem,$nextItem;
for (var i = 0; i < laidOutItems.length; i++) {
$nextItem = laidOutItems[i].element;
if ($nextItem != $firstItem) {
$($nextItem).insertAfter($lastMovedItem);
$lastMovedItem = $nextItem;
}
}
});
As you set isInitLayout to false while initializing isotope, you have to call the arrange method manually to lay it all out properly.
$container.isotope('arrange');
I'm pretty sure there is room for improvement. But I'm happy with this solution.
Hope someone will find this useful.
Came across the exact same issue tonight!
I suggest re-ordering the order of your griditems in javascript, before you call the isotope function, that way, all your items will already be in the correct order and any lightbox plugin won't get confused :)
(like this for example: jquery sort list based on data attribute value)
Hope I helped someone ;-) Worked like a charm for me :-)
Related
I'm not sure if this is possible and no luck on researching this. I'm working on a dashboard using DC.js charts and crossfilter.js. I'm going to use a Row chart as an example. Instead of clicking on the items to filter, is it possible to do that opposite?
For example. When I click on an item from a row chart, instead of filtering on that selected item, it will deselect that item and filter the rest of the other items. And then I will keep clicking on other items to deselect.
Pretty much my goal is to implement a feature where a user can hold the 'CTRL key' and 'left click' the items in the Row Chart to deselect. This way a user dont need to click more than 50+ items in the row chart to filter and have few items not to filter.
I do have a code where Javascript detect an event where "CTRL" and "Left click" triggers. but not sure of how to filter all except the ones that are clicked.
I hope this makes sense. I tried to look at the DC.js or Crossfilter api and I cannot find a function that can do that or am i missing something.
It sounds like you want the same behavior except for the very first click, where you want to keep everything else and remove the clicked item if ctrl is pressed.
If there is anything selected, then a click should toggle as usual, whether or not ctrl is pressed.
As Ethan suggests, you could probably implement this as a filterHandler. That should work too, but since it's mostly the same behavior, I'd suggest using an override of onClick.
Unfortunately the technique for overriding this method is not pretty, but it works!
var oldClick = rowChart.onClick;
rowChart.onClick = function(d) {
var chart = this;
if(!d3.event.altKey)
return oldClick.call(chart, d); // normal behavior if no mod key
var current = chart.filters();
if(current.length)
return oldClick.call(chart, d); // normal behavior if there is already a selection
current = chart.group().all()
.map(kv => kv.key)
.filter(k => k != d.key);
chart.replaceFilter([current]).redrawGroup();
};
I used the alt key instead of ctrl because ctrl-click on Macs is a synonym for right-click.
I'm using this on the rowcharts where I need this feature.
It's a little bit shorter than the other answer, maybe it can be useful to someone (I don't know which is better).
// select only one category at a time
mychart.onClick = function(_chart){ return function (d) {
var filter = _chart.keyAccessor()(d);
dc.events.trigger(function () {
_chart.filter(null);
_chart.filter(filter);
_chart.redrawGroup();
});
}; }(mychart)
Where mychart is the name of your dc.rowchart
var mychart = dc.rowChart('#mychart');
[EDIT]
This one works too, is shorter, and works with barcharts
mychart.addFilterHandler(function (filters, filter) {
filters.length = 0; // empty the array
filters.push(filter);
return filters;
});
I need to re-order rows within ag-grid by using drag-drop. The drag drop methods are simple enough but when the drop occurs there seems no easy way to switch the rows locations.
I attempted a
gridOptions.api.removeItems(selectedNode);
to clear the current and then
gridOptions.api.insertItemsAtIndex(2, savedNode);
but the drop event appeared to re-fire preventing that approach. Plus the insertItems (when ran first) falls over in internal ag-grid looping.
I would rather not re-sort the gridRows manually and then reset the gridRow data which would be somewhat clunky. This seems a common request on most grids so i assume it can be done but have just missed the relevant documentation. Thanks for any help..
K have finally got an Angular 2 method working, though currently I have to switch off sorting and filtering on the grid.
This particular example is relying on row selection being enabled (due to how it is finding some records). Grid dragdrop should be disabled (as that drags the grid visually which sucks) Instead use a processRowPostCreate to set up draggable params at the row level. This sets the dragged option to the row which looks much nicer.
in gridOptions
processRowPostCreate: (params) => {
this.generateRowEvents(params);
},
which calls
private generateRowEvents(params) {
params.eRow.draggable = true;
params.eRow.ondragstart = this.onDrag(event);
params.eRow.ondragover = this.onDragOver(event);
params.eRow.ondrop = this.onDrop(event);
}
I track the source recrord in the onDrag method
var targetRowId: any = $event.target.attributes.row.value;
this.savedDragSourceData = targetRowId;
onDragOver as usual
On drop we have to protect against an infinite loop (ag-grid appears to recall live methods when items are added to the grid hence the ondrop occurs multiple times) and then insert, delete and splice over both the grid and its data source ( I will carry on looking at using the grid to populate the data as opposed to the source data as that would allow source/filter, currently doign that inserts blank rows). An event (in this case) is then emitted to ask the owning component to 'save' the adjusted data.
private onDrop($event) {
if ($event && !this.infiniteLoopCheck) {
if ($event.dataTransfer) {
if (this.enableInternalDragDrop) {
this.infiniteLoopCheck= true;
var draggedRows: any = this.gridRows[this.savedDragSourceData];
// get the destination row
var targetRowId: any = $event.target.offsetParent.attributes.row.value;
// remove from the current location
this.gridOptions.api.removeItems(this.gridOptions.api.getSelectedNodes());
// remove from source Data
this.gridRows.splice(this.savedDragSourceData, 1);
if (draggedRows) {
// insert into specified drop location
this.gridOptions.api.insertItemsAtIndex(targetRowId, [draggedRows]);
// re-add rows to source data..
this.gridRows.splice(targetRowId, 0, checkAdd);
this.saveRequestEvent.emit(this.gridRows);// shout out that a save is needed }
this.v= false;
}
else {
this.onDropEvent.emit($event);
}
}
}
}
NOTE we are wrapping the grid in our own class to allow us to write one set of grid methods and not replicate over the application whenever the grid is used.
I will be refining this over the next few days but as a basic this allows the ag-grid in angular 2 to drag drop rows to sort records.
If you don't find a solution within ag-grid then you can do this by adding one more directive("ngDraggable") and integrate it with ag-grid.
Please find the following working plnkr for this.
https://embed.plnkr.co/qLy0EX/
ngDraggable
Hope this helps..
I got a app that shows multiple pages, which are dragable. As the content of those can get very long I want to show only the page-name and limit the height of the page to about 50px on beginDrag() and reset the height to auto on endDrag(). Unfortunately this doesnt work, the styles get just ignored. I think this happends because react-dnd needs to keep the proportion of the elements so it can handle the drop-targets and knows which component is at which position. Is there any other way to accomplish this?
If you use a dragPreview then it will use that instead of the screenshot-ed component, similar to what he does in the tutorial (http://gaearon.github.io/react-dnd/docs-tutorial.html):
componentDidMount: function () {
var connectDragPreview = this.props.connectDragPreview;
var myPlaceholder = <Placeholder /> // A fake component with the height you want
myPlaceholder.onload = function() {
connectDragPreview(myPlaceholder);
}
}
(Note that you'll have to inject the connectDragPreview through the collector like he did as well)
I'm not quite sure I understand the problem but may be connectDragPreview can help you?
Some useful info here
I have a tinyMCE textarea in which I want to limit how large, in pixels, whatever the user enters. Really, I do. I know this is not how most people use tinyMCE, but we are allowing clients to enter and format their own ad text for an ad that is a specific size (407px by 670px). So I want to limit what they can enter to that particular size. I can't limit the number of characters, because that would vary depending on font style/size. I actually want the input to fit within a particular sized box.
I have successfully sized the editor area and turned off the resizing of the editor and the scrollbars (in Firefox anyway), but it will still let the user continue typing past the edges of the box. Is there ANY way to prohibit this?
http://www.retailpromoinc.com/RestaurantAdvertising.php
Thank you for your consideration, I have been wrestling with this for HOURS!
Its a complicated one, as far as i know is there no feature from the TinyMCE Api to do so. What you could try to do is to configure the iFrame that is created by TineMCE.
By:
function iFrameConfig() {
var iFrame = document.getElementById('textareaid_ifr');
iFrame.setAttribute('scrolling', 'no');
iFrame.style.width = '300px';
iFrame.style.height = '600px';
}
Looks like you will have to write an own plugin for this. I will show you the steps necessary for this.
Here is a tutorial on howto write an own plugin, this is not difficult.
You will have to check for the editor content heigth for each of the users actions (keyup, paste, aso.). Use the predefined tinymce event handlers for this.
If the size of 670px is smaller than the real size you will have to undo the last user action automatically using the following line tinymce.get('my_editor_id').undoManager.undo();
I based my solution on Thariama's idea with undo (THX).
setup : function(ed) {
ed.wps = {}; // my namespace container
ed.wps.limitMceContent = function(ed) {
if ((ed.wps.$textcanvas.height() + ed.wps.textcanvasDummyHeight) > ed.wps.iframeHeight) {
ed.undoManager.undo();
}
};
ed.onKeyDown.add(ed.wps.limitMceContent);
ed.onChange.add(ed.wps.limitMceContent); // change is fired after paste too
ed.onInit.add(function(ed) {
// cache selectors and dimensions into namespace container
ed.wps.$iframe = $("textarea.tinymce").next().find("iframe");
ed.wps.iframeHeight = ed.wps.$iframe.height();
ed.wps.$textcanvas = $(ed.wps.$iframe[0].contentDocument.body);
ed.wps.textcanvasDummyHeight = parseInt(ed.wps.$textcanvas.css("marginTop"), 10) + parseInt(ed.wps.$textcanvas.css("marginBottom"), 10);
});
}
Working demo. Works on keyDown and paste. Tested only in FF 12 and Chrome.
My code does a .pantolatlong then a .showinfobox
The info box does not appear, unless I remove the pantolatlong. I guess it is stopping it. I tried adding it to the endpan event but that did not work.
What is the simplest way to pan to a pushpin and display the infobox for it?
I was using setcenter, but I discovered that sometimes setcenter pans, and this breaks it.
After some insane googling, I came up with the solution, and I'll share it here so that others can hopefully not have the grief I went through.
I created and power my bing map using pure javascript, no sdk or iframe solutions. In my code, I generate the javascript to add all of the pins I want to the map, and inject it using an asp.net label.
If you call the setCenter() method on your Bing Map, it is supposed to instantly set the map, surprise surprise, to the coordinates you specify. And it does... most of the time. Occasionally though, it decides to pan between points. If you do a SetCenter, followed by a ShowInfoBox, it will work great, unless it decides to pan.
The solution? Being great programmers we are, we dive into the sdk, and it reveals there are events we can hook into to deal with these. There is an onendpan event, which is triggered after a pan is completed. There is also an onchangeview event, which triggers when the map jumps.
So we hook into these events, and try to display the infobox for our pushpin shape... but nothing happens. Why not?
You have to give it a few milliseconds to catch its breath, for unknown reasons, when the event is called. Using a setTimeout with 10 milliseconds seems to be fine. Your box will appear great after this.
The next problem is, you only want it to appear when it pans via whatever you used to make it flick between your pushpins (in my case, a table with onclick methods). I create/destroy the event handlers on the fly, although there are other options such as using a global variable to track if the user is panning, or if the system is panning in response to a click.
Finally, you have the one bug that comes from this. If you click a place in your list, and it jumps/pans to that location, the infobox will display fine. If the user dismisses it though, then clicks again on the list item, the map does not move, and therefore no events are triggered.
My solution to this is to detect if the map moved or not, by recording its long/lat, and using another setTimeout method, detecting if they changed 100ms later. If they did not, display the infobox.
There are other things you need to keep track of, as there is no way I can see to pass parameters to the eventhandlers so I use global javascript variables for this - you have to know which pushpin shape you are displaying, and also keep track of the previous mapcoordinates before checking to see if they changed.
It took me a while to piece all this together, but it seems to work. Here is my code, some sections are removed:
// An array of our pins to allow panning to them
var myPushPins = [];
// Used by the eventhandler
var eventPinIndex;
var oldMapCenter;
// Zoom in and center on a pin, then show its information box
function ShowPushPin(pinIndex) {
eventPinIndex = pinIndex;
oldMapCenter = map.GetCenter();
map.AttachEvent("onendpan", EndPanHandler);
map.AttachEvent("onchangeview", ChangeViewHandler);
setTimeout("DetectNoMapChange();", 200);
map.SetZoomLevel(9);
map.SetCenter(myPushPins[pinIndex].GetPoints()[0]);
}
function EndPanHandler(e) {
map.DetachEvent("onendpan", EndPanHandler);
setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10);
}
function ChangeViewHandler(e) {
map.DetachEvent("onchangeview", ChangeViewHandler);
setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10);
}
function DetectNoMapChange(centerofmap) {
if (map.GetCenter().Latitude == oldMapCenter.Latitude && map.GetCenter().Longitude == oldMapCenter.Longitude) {
map.ShowInfoBox(myPushPins[eventPinIndex]);
}
}
Here is another way:
function addPushpin(lat,lon,pinNumber) {
var pinLocation = new Microsoft.Maps.Location(lat, lon);
var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: pinNumber.toString() });
pinInfobox = new Microsoft.Maps.Infobox(pinLocation,
{ title: 'Details',
description: 'Latitude: ' + lat.toString() + ' Longitude: ' + lon.toString(),
offset: new Microsoft.Maps.Point(0, 15)
});
map.entities.push(pinInfobox);
map.entities.push(pin);
pin.setLocation(pinLocation);
map.setView({ center: pinLocation});
}