Develop Reference

How to resize already exising window and open new chrome window on the right side

Currently i'm developing google chrome extension.
I tried using the below code
chrome.action.onClicked.addListener(async () => {
chrome.windows.create({
url,
type: "panel",
height:650,
width: 400,
focused: true,
left:1000,
top:100
});
});
I need to resize already existing window to half of the screen and open the new window on the other side

chrome.browserAction.onClicked.addListener(async () => {
chrome.windows.getCurrent((currentWindow) => {
chrome.windows.update(currentWindow.id, {
width: currentWindow.width / 2,
});
chrome.windows.create({
url,
type: "panel",
height: 650,
width: currentWindow.width / 2,
focused: true,
left: currentWindow.left + currentWindow.width / 2,
top: 100,
});
});
});
This will first get the current window using chrome.windows.getCurrent and then update its width to half the screen width. After that, it will create a new window with the same height as the original window, but with half the width of the screen, starting from the right side of the original window.

Try using this to resize the existing window: (based on my reading of https://developer.chrome.com/docs/extensions/reference/windows/)
chrome.windows.getCurrent(window => window.width /= 2);

How to determine where the current visible vertical location inside a jquery dialog is?

I have a case where I am using a jquery ui dialog and I have any html table in the dialog where the dialog is fixed height:
$("#modalDialogContainer").dialog({
resizable: false,
height: 700,
autoOpen: false,
width: 1050,
modal: true,
I call an AJAX query from a button click and I want to use jquery UI blockUI plugin to show a "loading" message. Something like this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
The issue I have is that the content in the dialog is longer than the height of the dialog
and I given the dialog is FIXED height so that causes the dialog to have a vertical scroll bar.
Having the scroll bar is fine (that's actually what I want) but the knock on effect is that
because of that depending if the user has scrolled down or not, the blockUI message is not centered (or even visible on the screen) vertically.
Question: Is there anyway I can detect what is visible areas inside a dialog that has a vertical scroll bar to vertically align the block message properly?
Above as you can see its hard coded to be 200px from the top so it works great if the user hasn't scrolled down but you can't see the message if the user has scrolled down the whole way
In short, if i am at the top of the scroll, then i would have this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
if i am at the bottom of the scroll, then i would want this:
$("#myTableInsideDialog").block({
css: {
top: '',
bottom: "200px",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});

I wouldn't alternate between top AND bottom properties:
For a window sized 1000px, top:800 == bottom:200
The important question, is how you can find out your scroll distance from the top. For that lets use a function:
function calcTopLocal() {
var s = $('#modalDialogContainer').scrollTop() + 'px';
return s;
}
Now, to apply it to your block:
$("#myTableInsideDialog").block({
css: {
top: calcTopLocal()
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
This can be refactored many ways. The significant detail is using scrollTop() and applying styling.
response to MKaama:
My proposed answer has no loops, no timers, and no suggestions of repeated action. There is no
Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU

If you want to add an loading message when the ajax is requesting the data, you can append a <div> on the dialog containing the message you want to display. Then you can apply a relative position to the dialog and an absolute position to the <div> and with margin:auto the div remains in the center of dialog always, even if you scroll the dialog.
jsFiddle demo
$("#modalDialogContainer").dialog({
resizable: true,
height: 300,
autoOpen: true,
width: 300,
modal: true,
buttons: {
'call ajax': function(){
// insert the loading div to the dialog
$(this).parent().append("<div class='loading' />");
$.ajax({
type: 'json',
url: 'jsonRequest.php',
complete: function(){
// remove the loading div
$('.loading').remove();
},
success: function(){
//do what you want
}
});
}
}
});
the CSS file should be something like this
#modalDialogContainer{
position: relative;
}
#myTableInsideDialog{
height: 1000px;
width: 100%;
}
.loading{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
...
}

there is a useful plugin that can tell if an element is visile on screen or not ( scrolled to ) , you may simply use it , the function returns true for visible areas on screen :
Here is a quick demo:
http://opensource.teamdf.com/visible/examples/demo-basic.html
Here is the source page :
http://www.teamdf.com/web/194/jquery-element-onscreen-visibility
usage as simple as:
$('#element').visible()

Use
$('#modalDialogContainer').scrollTop()
to find the amount of user's scroll.
You can then show your message with
{ top: $('#modalDialogContainer').scrollTop()+'px' }
And it will always be visible for them, and appear at the top of what they are looking at :)

Why bother with the height of the content at all?
I mean, isn't an easier solution to the problem possible by putting a "BlockUI" on the JQuery Dialog. Since you have a fixed height there, your block UI would most certainly be fixed as well. There is no way the scroll can now affect your message.
A crude example is hosted here in fiddle. It gives you both experiences so you can see how it behaves.
For example, you can put the block UI on the following class.
var container = ".ui-dialog";
$(container).block({
message: '<h1>Processing</h1>'
});
$.ajax({
url: "/echo/json/",
data: {
json: {},
delay: 5
}
}).done(function() {
console.log("Done with ajax");
$(container).unblock();
});

Iframe content not loaded in JQuery Dialog

i have a page where i will create a iframe dynamically and append that to a div.
That div will be attached to a jquery dialog.
<div id="diviframe"></div>
<script>
var iFrame = $('<iframe id="thepage" width="450" height="400"></iframe>').appendTo("#diviframe");
var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
iFrameDoc.write('<p>Some useful html</p>');
iFrameDoc.write('<p>Some useful stuff</p>');
iFrameDoc.close();
$("#diviframe").dialog({
autoOpen: false,
modal: true,
height: 500,
width:500,
open: function(ev, ui) {
}
});
$("#diviframe").dialog('open');
The contents of iframe is not written when its opened in jquery dialog.
can anyone suggest a workaround for this?
Update:
function test() {
var iFrame = $('<iframe id="thepage" width="500" height="500" src="http://stackoverflow.com"></iframe>').appendTo("#diviframe");
var parent = "divparent";
var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document;
iFrameDoc.write('<p>Some useful html</p>');
iFrameDoc.write('<p>Some useful stuff</p>');
iFrameDoc.close();
return iFrame;
}
var $dialog; //Must be at the global scope
function dialog() {
alert(1);
$.get(test, {}, function(html) {
$dialog.html(html);
$dialog.dialog("open");
});
}
$(function() {
//Initialize (without showing it)
var $dialog = $('<div id="dialog" title=""></div>').dialog({
autoOpen: false,
modal: true
});
});
dialog();
I tried to call a function dynamically after the jquery dialog loads but its showing some errors. How to load a function from jquery dialog?

I don't think you need to use an iframe for what you're doing, unless you've stripped out some vital detail before posting your question.
You can append your content directly to #diviframe, and it'll display just fine.
$("#diviframe").append("<p>Some useful html</p>");
$("#diviframe").append("<p>Some useful stuff</p>");
I wonder - are you trying to make a scrollable panel inside the dialog? If so, you can set the CSS of a div to achieve what you need:
.myScrollableBox {
width: 450px;
height: 400px;
overflow: auto;
border: 1px solid #000;
}
You might also want to add some padding to that, so that the text isn't jammed hard against the borders.

Sencha Touch - iframe scrolling in iPhone

In one of my views, I have an Ext.Component that shows an iframe.
It is defined like this:
Ext.define('MyApp.view.MyView',
extend: 'Ext.Component',
alias: 'widget.myview',
id: 'myView',
config: {
style: '-webkit-overflow-scrolling: touch; height: 100%; overflow: auto;',
href: false
},
template: [
{
reference: 'iframeElement',
tag: 'iframe',
style: 'height: 100%; width: 100%; border: 0;'
}
],
updateHref: function(href){
this.iframeElement.set({ src: href });
}
});
When I render the component, I load the iframe content using updateHref('http://');
The problem is, on iPhone, when I scroll the iframe content down and the scrolling is ended,
the document is scrolled back up automatically to the beginning.
How can I solve this?

OK, I found a workaround for this issue.
The solution is to set the height of the iframe to a high value, such as 2000px. Then, the content won't jump back to the beginning if you scroll less than 2000 px from the top.

How do I hide the outline in popup window

I created popup/modal window in JS, and I need to hide the outline map container. For init map I used this js code
self.mapDialogOptions = {
autoOpen: false,
modal: true,
draggable: false,
resizable: false,
height: 450,
width: 1050,
title: '',
dialogClass: '',
open: function () {
$(this).find('#map-close').on('click', function () {
$('#map-container').dialog('close');
self.isMapDialogVisible(false);
});
}
};
If I click on the popup (map) container appears outline
see screenshot

In your css file add:
#map-container {
border-style: none;
border-width: 0;
}

When you open a jquery poup its content is moved to the body, that why your popup become so large.
So after you opened the popup, you can move its content back to the original container.
Or you can adjust the map container paddings.