When pasting data into a cell, the page scrolls to the top of the page or to the bottom of the targeted cell.
How can I remove any scrolling on paste? I would like for the page to not move at all.
You can apply fixes like below code:
$(document).ready(function () {
var position_Y_before = null;
$(".handsontable").handsontable({
//some code here for initializing the table and its functions
//Then I added this callback function
beforeKeyDown: function(e) {
position_Y_before = window.pageYOffset || 0;
};
});
//Here we prevent from scrolling to top of page after pasting to handsontable with cmd+v or ctrl+v
$(window).scroll(function(){
if(position_Y_before != null){
window.scrollTo(0, position_Y_before);
position_Y_before = null;
}
});
});
This works for me at least, hope it helps you as well!
Related
Using JQGrid-4.3.3 with jquery.contextmenu.js plugin.
I'm using onContextMenu inorder to dynamically show the menu according to a specific cell value inside the selected row. (return true or false).
The problem is after the menu is shown, when I right click another row the menu that was open for the previous row is not closed. If I don't want to show the menu for a row and the menu was opened before , it can't be closed until I show the menu again in another row, or when I left click anywhere in my page.
How can I close the old menu once a onContextMenu returns false ?
UPDATE:
this is my code:
function createGridContextMenu(grid_)
{
$("tr.jqgrow" , grid_).contextMenu('grid_contextmenu' , {
bindings: {
'item1': function(trigger)
{
}
},
menuStyle: { font:'11px Arial, Verdana, Helvetica',
border: '1px solid #000' ,
width: '130px'
},
itemStyle: { border: 'none', padding: '4px' },
itemHoverStyle: { backgroundColor: '#C0C0C0', border: 'none'},
onContextMenu : function(event, menu)
{
var selected_row_id = $(event.target).parent("tr").attr("id");
var row = grid_.jqGrid('getRowData',selected_row_id);
if(row.status == 1)
{
return false;
}
else
{
grid_.setSelection(selected_row_id, true);
return true;
}
},
onShowMenu: function(event, menu)
{
return menu;
}
});
}
I'm calling createGridContextMenu
inside
loadComplete: function()
{
createGridContextMenu($(this));
},
Thank's In Advance.
I suppose that the reason of the problem is the wrong place where you create context menu. The second problem is setting separate context menus on different rows of the grid.
The callback loadComplete will be executed every time on loading of the grid, paging, sorting and so on. The current implementation uses $("tr.jqgrow" , grid_).('grid_contextmenu' , {...});. On the other side you can set the context menu of the whole <table> instead of setting on every <tr> of the body of the table. Because <table> will be not recreated on every filling of the grid you can do the following
// create the grid
$("#grid").jqGrid({
...
});
// set context menu immediately after creating of the grid
// you need remove calling of createGridContextMenu from loadComplete
$("#grid").contextMenu('grid_contextmenu', {
...
});
I hope that such changes will solve your current problem. I would recommend you additionally to update jqGrid which you use to the current version 4.6.0 which you can download from trirand.
UPDATED: You can hide context menu on leaving it. To do this you can modify the lines 57-59 of the code of jquery.contextmenu.js from
.bind('click', function(e) {
e.stopPropagation();
});
to
.bind('click', function(e) {
e.stopPropagation();
}).mouseleave(function (e) {
if (e.pageX === -1 && e.pageY === -1) {
return; // over tooltip
}
hide();
});
Alternatively you can do the same without modification of jquery.contextmenu.js. You need just to do the same after calling of contextMenu. The final code will be
// create the grid
$("#grid").jqGrid({
...
});
// set context menu immediately after creating of the grid
// you need remove calling of createGridContextMenu from loadComplete
$("#grid").contextMenu('grid_contextmenu', {
...
});
// register mouseleave handler which close the menu
$("#jqContextMenu").mouseleave(function (e) {
if (e.pageX === -1 && e.pageY === -1) {
return; // over tooltip
}
$(this).hide().next().hide();
});
I'm using ajax to pull in content to create a light box type content page. It also has a next and prev button once loaded so hence the use of ajax.
I wanted to use Ajax for the page navigation too. But if someone clicks a page link and then tries to use the light box feature both the jquery and ajax requests no longer work within the loaded area.
I've read a lot about bind and delegate but not sure how to use them in this context
Here's my main pieces of code:
// This gets called on document ready
function clicky() {
$link.click(function(e) {
e.preventDefault();
var linkPage = $(this).attr('href');
if ($(this).hasClass('pages')){
// PAGE specific code
if ($('body').scrollTop() != 0) {
$('body').animate({ scrollTop: 0 }, 500, function(){
pageLoad(linkPage);
});
} else { pageLoad(linkPage); }
console.log('page');
} else {
// PRODUCT specific code
if ($('body').scrollTop() != 0) {
$('body').animate({ scrollTop: 0 }, 500, function(){
productLoad(linkPage);
});
} else {
productLoad(linkPage);
}
}
});
}
Here's my ajax for the two different areas:
// Ajax stuff going on for pages
function pageLoad(linkPage) {
// Page stuff fades out
history.pushState(null, null, linkPage);
$("#page-content").load(linkPage + " #guts", function(){
// Loads in page content
});
}
// Ajax stuff going on for Products
function productLoad(linkPage) {
// Page stuff fades out
history.pushState(null, null, linkPage);
$("#product-content").load(linkPage + " #guts", function(){
// Shows an overlay/lightbox and loads in content
});
}
Edit: This worked for me
$(document).on('click', '.link' , function(){
console.log('this worked');
return false;
});
This worked:
$(document).on('click', '.link' , function(){
console.log('this worked');
return false;
});
I am trying to use a modal window within another window as a confirm/message popup, but there are some issues I am not sure if I can't get around.
Here's a jsfiddle of my situation: Fiddle
The problems I am trying to fix are:
Using a modal window while also using appendTo seems to have issues with the back drop, I see its there until you click elsewhere, then it disappears.
It would be great if I could center the modal within my window rather than the Window
Even though dragging is disabled on the modal, if you grab the modal title bar, it will move the outside window.
If I click the 'X' to close the inner modal, it closes my external window.
Can anyone suggest solutions to any of these issues?
$('<div id="confirmModal"><div id="confirmWindow">Is This Correct?<p><input type="button" id="btnYes" value="Yes" /><input type="button" id="btnNo" value="No" /></p></div></div>').prependTo('#Window');
$('#confirmWindow').kendoWindow({
modal: true,
resizable:false,
draggable:false,
appendTo: '#Window',
close: function() {
setTimeout(function(){
$('#confirmWindow').kendoWindow('destroy');
}, 200);
}
});
$('#confirmWindow').find('#btnNo').click(function () {
$('#confirmWindow').kendoWindow('close');
});
$('#confirmWindow').find('#btnYes').click(function () {
$('#confirmWindow').kendoWindow('close');
});
Edit
I have edited the fiddle as the first one was an older version of what i meant to post.
From appendTo documentation:
The element that the Window will be appended to. Note that this does not constrain the window dragging within the given element.
So, Kendo windows are floating, they are not constrained to the element that you append it to. This means that does not make sense prepend the confirmation window to an HTML element and then append it to that same element.
Check response from a telerik enginer
http://www.kendoui.com/forums/kendo-ui-web/window/kendowindow-appendto-boundaries.aspx
<script type="text/javascript">
$(document).ready(function () {
$("#windowName").data("kendoWindow").dragging._draggable.bind("drag", function (e) {
var wnd = $("#window").data("kendoWindow");
var position = wnd.wrapper.position();
var minT = 0;
var minL = 0;
//Get the Window width and height and
//place them in position of the hard-coded width and height
var maxT = 600 - wnd.wrapper.height();
var maxL = 900 - wnd.wrapper.width();
if (position.left < minL) {
coordinates = { left: minL };
$(wnd.wrapper).css(coordinates);
}
if (position.top < minT) {
coordinates = { top: minT };
$(wnd.wrapper).css(coordinates);
}
if (position.left > maxL) {
coordinates = { left: maxL };
$(wnd.wrapper).css(coordinates);
}
if (position.top > maxT) {
coordinates = { top: maxT };
$(wnd.wrapper).css(coordinates);
}
})
})
</script>
I'm using a kendo grid.
I want to add a slide-down animation - when I click on a row in the grid it expands with animation
(the expansion happens with grid.ExpandRow function - kendo inner).
I think that I need the animation on k-detail-row element.
But I still cant find the proper place/way to do that.
Anyone did that already, and can help me with that.
Unfortunately animations are not supported for table rows. Here is a related question: How to Use slideDown (or show) function on a table row?
I had the same question, and although this is an old post, I figured someone might need it.
Unfortunately Kendo does not support this functionality as yet, however there is a solution.
Kendo uses the jquery toggle() to show and hide the detail row, thus by performing a conditional override on the jQuery you can insert animation.
jQuery(function($) {
var _oldShow = $.fn.show;
var _oldHide = $.fn.hide;
$.fn.show = function(speed, oldCallback) {
return $(this).each(function(index, item) {
var obj = $(item);
_oldShow.apply(obj, [speed, oldCallback]);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function () {
var grid = $(this);
grid.slideDown(300);
});
}
});
}
$.fn.hide = function (speed, oldCallback) {
return $(this).each(function () {
var obj = $(this);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function () {
$(this).slideUp(300, function () { _oldHide.apply(obj, [speed, oldCallback]); });
});
} else {
_oldHide.apply(obj, [speed, oldCallback]);
}
});
}
});
I ran into this issue today and managed to solve it using the detailExpand function of the grid. You can then use the Kendo Fx slidedown effect to make the detail row slide down. For example:
detailExpand: function (e) {
var detailRow = e.detailRow;
setTimeout(function () {
kendo.fx(detailRow).slideIn("down").duration(375).play();
}, 0);
}
For more information, please check:
Detailexpand documentation
Kendo Fx documentation
Dialog windows for CKEditor by default appear in the middle of the page but if the page is an iframe with a big height the dialogs appear way down the page.
Is it possible to configure CKEditor to position the dialogs in a different quadrant of the page? For example top middle?
Yes, the link MDaubs gives will guide you to do what you want.
I've had to do this in the past and the following snippet will demonstrate a solution for your problem:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
this.move(this.getPosition().x,0); // Top center
}
})
You can place this in the config file or the ready function for jQuery.
The solution by zaf works in that it helps to position the dialog, but I've found it to produce a bunch of side effects as to how the dialog functions (failing to display the URL of the image in the image dialog is one example).
It turned out that the original onShow() method that is being overridden returns a meaningful value that we should keep. This could be due to a plugin or something, but here's the code that ultimately worked for me:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var onShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
var result = onShow.call(this);
this.move(this.getPosition().x, $(e.editor.container.$).position().top);
return result;
}
});
This may be way you're looking for:
Programatically set the position of CKEditor's dialogs
I just had the same issue as Yehonatan and found this question really fast via Google. But after using the answer provided by zaf I still didn't get a dialog to appear in the proper position when the editor is loaded within an iframe.
In stead of the position() method I used the offset() method to place a dialog right under the toolbar. Together with the response of jonespm I came to this code that seems to work very good, also with existing dialogs.
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var onShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
this.move(this.getPosition().x, jQuery(this.getParentEditor().container.$).offset().top);
if (typeof onShow !== 'undefined' && typeof onShow.call === 'function')
{
return onShow.call(this);
}
}
});
Hopefully this code can help others with the same issue as me.
Correct syntax is:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
if (dialogName == 'image2') {
dialogDefinition.onShow = CKEDITOR.tools.override(dialogDefinition.onShow, function(original) {
return function() {
original.call(this);
CKEDITOR.tools.setTimeout( function() {
/*do anything: this.move(this.getPosition().x, $(e.editor.container.$).position().top);*/
}, 0);
}
});
}
});