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 calculate window width based on getBoundingClientRectAsync values of another element?

Is it possible to calculate viewport or window width based on getBoundingClientRectAsync values of element which is in virtual DOM?
Running JS in web worker (amp-script):
let button = document.querySelector('.tooltip-trigger');
async function addTooltip(event) {
tooltipElem = document.createElement('span');
document.body.appendChild(tooltipElem);
let coordsTrigger = await target.getBoundingClientRectAsync();
// How to get right offset?
let windowWidth = coordsTrigger.left + coordsTrigger.width;
console.log(windowWidth);
}
Target Element (wrapped in amp-script):
<amp-script layout="fill" script="tooltip-async"><span class="tooltip-trigger"></span></amp-script>
The half working solution is to use window.innerWidth. Half working, because window.innerWidth value changes only after page reload, and is not changing on resize or any other event for some reason. Probably because it is running in amp-script web-worker DOM and not in main;
coordsTrigger out:
bottom: 383.65625
height: 24
left: 122.59375
right: 201.640625
top: 359.65625
width: 79.046875
x: 359.65625
y: 122.59375

print scroll position in Framer.js

I'm prototyping in Framer.js. I have a scroll component and scroll content, I'm trying to print the current x or scrollX position of the content. So if I scroll 500px to the right the code will print 500
Bg = new BackgroundLayer
backgroundColor: 'FFF'
scroll = new ScrollComponent
width: 750
height: 1334
scrollVertical: false
layerA = new Layer
width: 750 * 5
height: 1334
superLayer: scroll.content
layerA.style.background = "-webkit-linear-gradient(45deg, #2AF 0%, #F00 100%)"
# get current x value of scroll content
print layerA.scrollX
Framer Demo: http://share.framerjs.com/70pi1l6is76t/
Codepen Demo: http://codepen.io/matter/pen/78fc798001529418123b84470ea8c625?editors=0010
Thank you in advance,

You can print the current scrollX value by adding an event listener:
scroll.onScroll ->
print scroll.scrollX
More on events: http://framerjs.com/docs/#events.events
Updated Framer demo: http://share.framerjs.com/jvmsrtmm7i5g/

How to use jQuery scroll to change the height of an element?

I have a HTML class navigation with the initial height of 100px and min-height is 40px. I want to change the height of the class, based on the scroll (if scroll down than size will decrease and if scroll up than size will increase). I use the following code and it's working perfectly.
$(window).scroll( function() {
if( $('.navigation').offset().top > 50 )
{
$('.navigation').css({
'height' : '40px',
'background' : 'rgba(37, 37, 37, 0.9)'
});
} else {
$('.navigation').css({
'height' : '100px',
'background' : '#b24926'
});
}
});
If I press the keyboard down arrow key two times than navigation class moved from original height to minimum height and if the up arrow key press two times than navigation class moved from minimum height to original height.
But I want to make the scroll more smooth (like 4-5 up or down key presses to reach from one height to another).
For example: initial height is: 100px and minimum height is 30px. Now:
if down arrow key is pressed/mouse wheel is move down one time than height will be 85px, if again down arrow is pressed height will be 70px and so on. That means for each down arrow key is pressed/mouse wheel is move down than height will decrease by 15-20px and for each up arrow key is pressed/mouse wheel is move up, height will increase by 15-20px.
Can anyone tell me how can I do that (without using third party api).
Thanks

You can use simple percent calculation to update height
var limitForMinimalHeight = 400; //after this distance navigation will be minimal height
var maxHeight = 100;
var minHeight = 40;
$(window).scroll( function() {
var screenTop = $(document).scrollTop();
var achievedDistancePercent = Math.min(screenTop*100/limitForMinimalHeight, 100);
var amounToAdd = ((maxHeight - minHeight) * (100 - achievedDistancePercent))/100;
var newHeight = minHeight + amounToAdd;
$('.navigation').height(newHeight);
});
You can test it on JSFiddle

$(document).scroll(function() {
if($(this).scrollTop()>100) {
$('.selector').addClass('scrolled');
}
if($(this).scrollTop()<40) {
$('.selector').removeClass('scrolled');
}
});

How can I determine how many squares are needed to fill a browser window, dynamically?

I'm making colored squares to fill a browser window (say, 20px by 20px repeated horizontally and vertically).
There are 100 different colors, each link to a different link (blog post relevant to that color).
I want to fill the browser window with at least 1 of each colored square, and then repeat as necessary to fill the window, so that there are colored squares on the whole background, as the user drags the window smaller and larger.
If these were just images, setting a repeatable background would work. But, I would like them to be links. I'm not sure where to start on this. Any ideas, tips?
Here's the link to the site I'm working on: http://spakonacompany.com/
I think the most specific piece I need here is this: how can I determine the number of squares needed to repeat to fill the background, using jQuery that dynamically calculates that using the size of the browser window, including when dragged, resized, etc?
Many thanks. :)

To get browser's window width and height I use this function ->
//checking if the browser is Internet Explorer
var isIEX = navigator.userAgent.match(/Trident/);
var doc = isIEX ? document.documentElement : document.body;
function getwWH() {
var wD_ = window;
innerW = wD_.innerWidth || doc.clientWidth;
innerH = wD_.innerHeight || doc.clientHeight;
return {iW:innerW, iH:innerH}
}
There is also a native method of detecting when the browser's window is being resized which works in all major browsers (including IE 8, if you're planning on supporting it) ->
window.onresize = function(){
//here goes the code whenever the window is getting resized
}
So, in order to define how many squares are required to fill the window, you can get the window's width and divide it by the width of the square you are going to fill the window with ->
//getting total number of squares for filling the width and the height
width_ = getwWH().iW; //the width of the window
height_ = getwWH().iH; //the height of the window
If your square's width and height are static 20 by 20, than we can calculate total number of squares per window by dividing our width_ variable by 20 (the same for the height_) ->
squaresPerWidth = width_/20;
squaresPerHeight = height_/20;
So every time our browser window is getting resized we do this ->
window.onresize = function(){
width_ = getwWH().iW;
height_ = getwWH().iH;
squaresPerWidth = width_/20;
squaresPerHeight = height_/20;
//and the rest of the code goes here
}
Haven't tested it but this should work.

Here's something I whipped up. It uses a fixed number of resizable squares, but if you need squares of a fixed size, you just set the window to overflow: hidden and generate an unreasonably large number of squares.
var fillGrid = function(getColor, onClick) {
var tenTimes = function(f){
return $.map(new Array(10),
function(n, i) {
return f(i);
});
};
var DIV = function() {
return $('<div></div>');
};
var appendAll = function(d, all) {
$.map(all, function(e) {
d.append(e);
});
return d;
};
appendAll($('body'),
tenTimes(function(col) {
return appendAll(DIV().css({ height : "10%" }),
tenTimes(function(row) {
return DIV().css({
height : "100%",
width : "10%",
backgroundColor: getColor(row, col),
'float' : "left"
}).click(function() { onClick(row, col); });
}));
}));
};
You have to supply two functions, one to specify the color, the other to be invoked when the user clicks.