I'm using JQuery UI Dialog like this ;
$(function () {
var dlg = $("#dialog").dialog({
draggable: true,
resizable: false,
width: 950,
height: 480,
autoOpen: false,
modal: true,
minHeight: 30,
minwidth: 30,
title: 'test'
});
});
Window :
function PopupUrl(url, name, width, height) {
var features = "location=1, status=1, scrollbars=1, width=" + width + ", height=" + height + '"';
window.open(url, name, features);
}
Dialog was opened page's center but popup appear different coordinates. I want to overlapping. How to do this?
Just add a calculated top and left to your features list and the popup will be positioned at the center of the screen :
function PopupUrl(url, name, width, height) {
var top = parseInt((screen.availHeight / 2) - (height / 2));
var left = parseInt((screen.availWidth / 2) - (width / 2));
var features = "location=1, status=1, scrollbars=1, width=" + width + ", height=" + height + ", top=" + top + ", left=" + left;
window.open(url, name, features);
}
Related
How can I jump a resized div to next row when the resize is constrained on the parent div like below (fullcalendar like thing).
Update.This code is dependent on InteractJS (http://interactjs.io/)
interact(resizeDiv)
.resizable({
edges: { left: true, right: true, bottom: false, top: false },
restrictEdges: {
endOnly: true,
outer: '.month'
},
restrictSize: {
min: { width: 80, height: 3 },
max: {height: 3}
},
inertia: true,
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height);
var onTopElement = document.elementFromPoint(event.clientX, event.clientY);
let calendarArea = document.getElementById('calendarArea');
console.log(event.clientY, target.offsetTop);
})
Example - Fullcalendar:
Fullcalendar logic is simple, it will create a new div on next row rather than using the same div which you are resizing and apply resize(for fullcalendar, it uses JQuery resize event) event on the new div. I think its technically impossible to use the same div(same dom element) on the two rows which you are trying to do.
As seen in the attached fiddle https://jsfiddle.net/0ws7fws0/5/, user can resize the triangle using north east and south east position.
Below is the code being used
$(document).ready(function() {
var windowWidth = $("#div1").width();
var windowHeight = $("#div1").height();
$(".triangle").css({
"border-top-width": windowWidth / 2 + 'px '
});
$(".triangle").css({
"transform": "rotate(360deg)"
});
$(".triangle").css({
"border-right": windowWidth + 'px solid lightskyblue'
});
$(".triangle").css({
"border-bottom-width": windowWidth / 2 + 'px '
});
$("#div1").draggable({
containment: ".abcde"
});
});
$("#div1").resizable({
handles: "ne,se",
containment: ".abcde",
minHeight: 40,
minWidth: 40
}, {
start: function(e, ui) {
},
resize: function(e, ui) {
var height = Math.round(ui.size.height);
var width = Math.round(ui.size.width);
$(".triangle").css({
"border-top-width": height / 2 + 'px'
});
$(".triangle").css({
"border-bottom-width": height / 2 + 'px'
});
$(".triangle").css({
"border-right": width + 'px solid lightskyblue'
});
$(".triangle").css({
//"margin-top": height + 'px'
});
$(".triangle").css({
"transform": "rotate(360deg)"
});
},
stop: function(e, ui) {
var height = Math.round(ui.size.height);
var width = Math.round(ui.size.width);
}
});
Here user can stretch the triangle but the handle position should be fixed so that the position is not changed even if its resized i.e. ne and se handles can be used to resize but w handle should be fixed(disabled). How do I achieve the same ?
Solution :
What i have done
Break the triangle into two parts: lower and upper
Keep the fixed handle (let's say pin) at same level
Decrease the opp radius when handle(handle use to resize) and pin comes at the same level
See https://jsfiddle.net/0ws7fws0/12/
$(document).ready(function() {
var windowWidth = $("#div1").width();
var windowHeight = $("#div1").height();
$("#div1").draggable({
containment: ".abcde"
});
});
$("#div1").resizable({
handles: "ne,se",
containment: ".abcde",
minHeight: 40,
minWidth: 40
}, {
start: function(e, ui) {
},
resize: function(e, ui) {
var height = Math.round(ui.size.height);
var width = Math.round(ui.size.width);
},
stop: function(e, ui) {
var height = Math.round(ui.size.height);
var width = Math.round(ui.size.width);
var diff = Math.abs(ui.size.height - ui.originalSize.height);
var bottomW = parseInt($(".lower-triangle").css("borderBottomWidth"),10);
var topW = parseInt($(".upper-triangle").css("borderTopWidth"),10);
if (ui.size.height > ui.originalSize.height) {
if($(e.originalEvent.target).hasClass("ui-resizable-se")) {
$(".lower-triangle").css({
"border-bottom-width": (bottomW + diff) + 'px'
});
} else if ($(e.originalEvent.target).hasClass("ui-resizable-ne")) {
$(".upper-triangle").css({
"border-top-width": (topW + diff) + 'px'
});
}
}
else { /*when you compress*/
if($(e.originalEvent.target).hasClass("ui-resizable-se")) {
if ((bottomW - diff)>0) {
$(".lower-triangle").css({
"border-bottom-width": (bottomW - diff) + 'px'
});
}
else {
$(".lower-triangle").css({
"border-bottom-width": '0px'
});
$(".upper-triangle").css({
"border-top-width": ui.size.height + 'px'
});
}
} else if ($(e.originalEvent.target).hasClass("ui-resizable-ne")) {
if ((topW - diff)>0) {
$(".upper-triangle").css({
"border-top-width": (topw - diff) + 'px'
});
}
else {
$(".upper-triangle").css({
"border-top-width": '0px'
});
$(".lower-triangle").css({
"border-bottom-width": ui.size.height + 'px'
});
}
}
}
$(".lower-triangle, .upper-triangle").css({
"border-right": width + 'px solid lightskyblue'
});
}
});
I am using angular with ng-grid and I want the height of my grid to adjust according to number of rows.
Here's what I did when there was no footer:
<div class="gridStyle" ng-grid="gridOptions" ng-style="getTableStyle()"></div>
+
$scope.getTableStyle = function() {
var rowHeight = 30;
var headerHeight = 35;
return {
height: ($scope.selectedTab.materials.length * rowHeight + headerHeight) + "px"
};
};
And that went OK.
But when I added a footer with template:
$scope.gridOptions = {
data: 'tab.materials',
rowHeight: 30,
headerRowHeight: 35,
footerRowHeight: 35,
showFooter: true,
footerTemplate: '<div ng-repeat="col in renderedColumns" style="width:{{col.width}}px; display: inline-block"><div class="ngCellText">{{getTabSummary(selectedTab, col.field)}}</div></div>',
and changed getTableStyle to this:
$scope.getTableStyle= function() {
var rowHeight = 30;
var headerHeight = 35;
var footerHeight = 35;
return {
height: ($scope.selectedTab.materials.length * rowHeight + headerHeight + footerHeight + 5) + "px"
};
};
The grid now appears with a vertical scroll bar (and as consequence -> with a horizontal as well).
See plunker:
http://plnkr.co/edit/jZJLidotNoQR3lKppI2p?p=preview
I am using fancybox 1.3.4 to show some content in popup, but the popup is not centered in browser how to fix it?
html code:
<a class="clickMe" title="" message="Last Updated: 10/1/2013">Privacy Policy</a>
js code:
$("body").on("click", ".clickMe", function(){
showAlertSized($(this).attr("title"), $(this).attr("message"), $(this).attr("width"), $(this).attr("height"));
});
function showAlertSized(title, msg, width, height) {
debugger;
if(width === undefined){
//width = 965;
width = '95%';
}
if(height === undefined) {
//height = 700;
height = '95%';
}
var content = '<h1>' + title + '</h1>' +
'<p class="msg">' + msg + '</p>' +
'<div class="fancy-btns"><input type="button" value="" onclick="closeAlert()" class="fancy-ok-btn" /></div>';
$.fancybox({
'content': content,
'hideOnOverlayClick': false,
'overlayOpacity' : 0.7,
'overlayColor' : '#777',
'width': width,
'height': height,
'autoDimensions': false,
'autoSize': false
});
}
here is the screenshot
your width and height are set to 95% of the viewport so by logic you have 5% width and height unaccounted for. Try adding 'margin': 2.5% to your fancybox initialisation call, this should put a 2.5% margin on all 4 sides of your fancybox, making it perfectly centered. Unfortunately I am unable to test this or provide a coded example, but theoretically it should work!
I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?
Thanks in advance.
This is the code they use
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
so you can use the same with a slight change (assuming you use a modern version of jQuery)..
$('#yourbutton').click(function() {
var TB_WIDTH = 100,
TB_HEIGHT = 100; // set the new width and height dimensions here..
$("#TB_window").animate({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
});
Demo at http://jsfiddle.net/gaby/rrH8q/
Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.
$("#tab").click(function() {
$("#TB_window").css("height", newHeight);
$("#TB_window").css("width", newWidth);
$("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 );
$("#TB_window").css("margin-left", ($(window).width()-newWidth)/2);
});
A little correction in Gaby aka G. Petrioli's answer so that popup should set the margins also correctly :
var TB_WIDTH = 500, TB_HEIGHT = 400;
// set the new width and height dimensions here..
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10)
+ 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) +
'px"'});
I did something like this.
This needs to be re-launched if the wiewport is resized while the popup is open.
function tb_position() {
if(TB_WIDTH > $(window).width())
{
$("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'});
$("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'});
$("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'});
}
else
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
}
You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".
var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(),
TB_HEIGHT = 400; // set the new width and height dimensions here..
setTimeout(function() {
jQuery("#TB_window").css({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
}, 0);