I want to scrollIntoView a record when the grid has been sort. This is what I'm using:
onSort: function(event) {
event.onComplete = function () {
w2ui.grid.scrollIntoView(10);
}
}
You need to delay the scrollIntoView()
https://jsfiddle.net/zxcgxkxa/1/
onSort: function(event) {
event.onComplete = function () {
setTimeout(function(){
w2ui.grid.scrollIntoView(10);
}, 10);
};
}
because after grid.sort() is executed, w2grid will internally execute grid.refresh(), which internally executes a delayed scrolling:
setTimeout(function () { // allow to render first
obj.resize(); // needed for horizontal scroll to show (do not remove)
obj.scroll();
}, 1);
Related
Lines and polygons are added without problems, but when trying to add markers on top of a polygon layer ("lyrPoly"), it interprets that I want to click on the polygon (e.g. opens popup) instead of adding marker. How can I avoid this? I am using leaflet.pm to add markers, linestrings and polygons.
This is the code for the marker:
map.on('pm:create', function(e) {
e.marker;
var type = e.layerType,
layer = e.layer;
$(document).ready(function() {
var jsnMarker = layer.toGeoJSON().geometry;
jsnMarker = {
type: "MultiPoint",
coordinates: [jsnMarker.coordinates]
};
})
});
$(function() {
$('.check').change(function() {
var data = $(this).val();
if (data == "versionOne") {
var markerStyle = {
draggable: false,
icon: customIcon,
};
var options = {
markerStyle,
}
map.pm.enableDraw('Marker', options);
} else if (data == "versionTwo") {
var markerStyle = {
draggable: false,
icon: otherIcon,
};
var options = {
markerStyle,
}
map.pm.enableDraw('Marker', options);
}
$('.check').trigger('change');
});
And inside the ajax function I use this:
lyrMarker = L.geoJSON(jsnMarker, {
pointToLayer: function (feature, latlng) {
if(feature.properties.marker_type=="versionOne"){
return L.marker(latlng, {
icon: customIcon
})
}else if
(feature.properties.marker_type=="versionTwo"){
return L.marker(latlng, {
icon: otherIcon
})
} ,
onEachFeature: forEachMarker
});
For the polygon-layer I have a corresponding "onEachFeature"-function that looks like this:
function forEachFeature(feature, layer) {
var att = feature.properties;
var popupContent =
"Popup-content" ;
layer.bindPopup(popupContent, {
offset: [0, -120]
});
layer.on("click", function (e) {
lyrPoly.setStyle(style); //resets layer colors
layer.setStyle(highlight); //highlights selected.
});
};
Adding marker to the background/basemap works fine, but not onto the polygon layer. Why is that, and what would be a good solution? I don't want to add the marker to the same layer as the polygons, but avoid polygons "getting in the way".
I've had ideas about making the polygon layer interactive: false while in adding-marker-mode, but haven't succeeded.
Update your click event and test if drawing mode is enabled:
function forEachFeature(feature, layer) {
var att = feature.properties;
var popupContent =
"Popup-content" ;
layer.bindPopup(popupContent, {
offset: [0, -120]
});
layer.on("click", function (e) {
if(!map.pm.Draw.Marker.enabled()){
lyrPoly.setStyle(style); //resets layer colors
layer.setStyle(highlight); //highlights selected.
}
});
};
Update
To disable the popup open event add following code at the top of your file. Before you create a Layer with a Popup:
L.Layer.include({
_openPopup: function (e) {
var layer = e.layer || e.target;
//This IF is new
if(map.pm.Draw.Marker.enabled()){
return;
}
if (!this._popup) {
return;
}
if (!this._map) {
return;
}
// prevent map click
L.DomEvent.stop(e);
// if this inherits from Path its a vector and we can just
// open the popup at the new location
if (layer instanceof L.Path) {
this.openPopup(e.layer || e.target, e.latlng);
return;
}
// otherwise treat it like a marker and figure out
// if we should toggle it open/closed
if (this._map.hasLayer(this._popup) && this._popup._source === layer) {
this.closePopup();
} else {
this.openPopup(layer, e.latlng);
}
},
});
Example: https://jsfiddle.net/falkedesign/dg4rpcqe/
I am using swiper.js and fancybox v3 to create a popup gallery. One of the slide contain a video, however after I have click and open popup, the video will load and start playing whatever which slide I landed. I have tried to use any events to stop pause the video but it still can't work. Anyone got a solutions?
Here is a codepen example:
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
init: false,
pagination: {
el: '.swiper-pagination',
observer: true,
observeParents: true,
on: {
slideChangeTransitionStart: function () {
$('.swiper-slide').find('video').each(function () {
console.log(this);
this.pause();
});
},
slideChangeTransitionEnd: function () {
$('.swiper-slide').find('video').each(function () {
this.pause();
});
}
}
},
})
$('.fancybox-trigger').click(function (e) {
e.preventDefault();
var thisTarget = $(this).data('index');
$.fancybox.open({
src: "#lightbox",
type: 'inline',
opts: {
toolbar: false,
defaultType: 'inline',
autoFocus: true,
touch: false,
afterLoad: function () {
mySwiper.init();
mySwiper.slideTo(thisTarget - 1)
$('swiper-slide').find('video').each(function () {
this.pause();
})
}
}
})
})
});
https://codepen.io/anon/pen/mKOwag?editors=0010
I am not swiper expert, therefore I can not explain why, but I found that callbacks work if you add them like this:
mySwiper.on('slideChange', function() {
$('.swiper-slide').find('video').each(function() {
this.pause();
});
});
Demo - https://codepen.io/anon/pen/ERNogR
I just want to know where can I place some function in my drag and drop. I tried using alert messages to know where the event takes place but it's not executing any of my alert boxes. I put alert boxes in comment, those are places i used to place it but nothing happens. My drag and drop works but it cant fire alert box. I dont know what is wrong. Help me. Thanks.
var adjustment;
$(function () {
$("#container1, #container2").sortable({
group: 'ol.simple_with_animation',
pullPlaceholder: false,
onDragStart: function ($item, container, _super) {
var offset = $item.offset(),
pointer = container.rootGroup.pointer;
adjustment = {
left: pointer.left - offset.left,
top: pointer.top - offset.top
};
_super($item, container);
},
onDrag: function ($item, position) {
$item.css({
left: position.left - adjustment.left,
top: position.top - adjustment.top
});
// alert('oink');
},
onDrop: function ($item, container, _super) {
var $clonedItem = $('<li/>').css({ height: 0 });
$item.before($clonedItem);
$clonedItem.animate({ 'height': $item.height() });
// alert('wew');
$item.animate($clonedItem.position(), function () {
$clonedItem.detach();
_super($item, container);
// alert('oink');
});
// alert('oink');
},
});
//alert('oink');
});
This works perfect to me. Hope it will help those who struggle too :)
$("#container1, #container2").sortable(
{
group: 'ol.simple_with_animation',
onDrop: function ($item, container, _super) {
var $clonedItem = $('<li/>').css({ height: 0 });
$item.before($clonedItem);
$clonedItem.animate({ 'height': $item.height() });
$item.animate($clonedItem.position(), function () {
$clonedItem.detach();
_super($item, container);
});
alert('oink');
}
});
I have used Alloy UI Modal window. The code is:
YUI().use(
'aui-modal',
function(Y) {
var modal = new Y.Modal(
{
bodyContent:'test',
centered: true,
headerContent:headerContent,
modal: true,
render: '#testModal',
width: 631,
id:'modalSource',
destroyOnHide:true
}
).render();
modal.addToolbar(
[{
label: 'Add',
on: {
click: function() {
addData();
//modal.hide() works here but i need to close it inside addData..
}
}
},
{
label: 'Cancel',
on: {
click: function() {
modal.hide();
}
}
}
]
);
}
);
The function addData is in a different js file and makes an Ajax call, so I need to pass id of modal window and close it after success callback . Do you have any idea on how to get id of modal window and use modal.hide over there. Thank you
function addData()
{
$('#modalSource').hide();
}
After going through some AUI tutorials, managed to solve it..Just pass an instance of modal window into addData function and then call hide() method.
modal.addToolbar(
[{
label: 'Add',
on: {
click: function() {
addData(modal);
}
}
},
function addData(modalInstance)
{
//do needed stuff
modalInstance.hide();
}
I want to queue some kineticJS transitions with variable duration, for example:
scrub.transitionTo({
x:400,
duration: 4,
callback: function() {
console.log('complete 400');
scrub.transitionTo({
x:500,
duration: 1,
callback: function() {
console.log('complete 100');
}
});
}
});
These are just two nested transitions of the same object, but I want to automate this procedure for 10 or more nested callbacks.
You can create a new object and place your transition data in it.
var transition1 = {
x:400,
duration: 4,
callback: function(){
console.log('complete 400');
....
}
};
var transition2 = {
x:500,
duration: 1,
callback: function() {
console.log('complete 100');
}
};
Then you can just create a while loop to call the transitions without a need for a callback.
But since you do want a callback, you need to create a function which the callback will call and a condition will be checked.
function callFunction(scrub, numberOfExecutions){
if(condition == myCondition){
scrub.transitionTo(transition1);
numberOfExecutions--;
}
else if(condition2 == myCondition2){
scrub.transitionTo(transition2);
numberOfExecutions--;
}
if(numberOfExecutions < 1) return 0;
else return 0;
};
As a note, it's not wise to do these nested recursive calls as some browsers will automatically think the scripts are stuck in an infinite loop and won't execute.