Develop Reference

What's causing Intersection Observer API to respond differently when replacing synchronous logic with asynchronous logic?

Context
I've used the "Intersection Observer API" to build an infinite scroll image gallery. Basically this API allows me to load more items when a certain dummy DOM element enters the viewport.
Prototype
Currently the prototype is implemented for an “iPhone X” (375x812) mobile device only. See: http://urbexco-acceptance.droppages.com/min_rep_ex_working (use Chrome DevTools 'inspect' device toolbar to select the right resolution). The image gallery is generated based on 57 items in the "database". When scrolling down, first 15 elements are loaded, then 15 more elements are loaded, then another 15 elements are loaded into the DOM, then another 10 elements are loaded, and finally 2 elements are loaded. When there are still more than 15 items left to be loaded, they are added using the following logic:
function addItems(n){
// Append new items to .items-wrapper
var items = document.querySelector('.items-wrapper');
for (var i = 0; i < n; i++) {
var url = 'https://img01.ztat.net/article/spp-media-p1/09742e38c25b3e1d9716e02f8e76e87d/89fc0bda6a2c446a8e9e0d8adbc9a4fe.jpg';
width = 170.5;
height = 246;
var newDiv = document.createElement('div');
newDiv.classList.add('item');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + width + '"' + "height=" + height + "/>";
}
}
Minimal Working Example (no mobile view possible)
https://jsfiddle.net/9jqgzymo/
Objective
Since image width and height are currently hardcoded, I am now trying to assign width and height dynamically based on the image url. I try to achieve this using the getMeta() function:
function addItems(n){
// Append new items to .items-wrapper
var items = document.querySelector('.items-wrapper');
for (var i = 0; i < n; i++) {
var url = 'https://img01.ztat.net/article/spp-media-p1/09742e38c25b3e1d9716e02f8e76e87d/89fc0bda6a2c446a8e9e0d8adbc9a4fe.jpg';
getMeta(url);
}
}
function getMeta(url){
var img = new Image();
img.onload = function(){
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
};
img.src = url;
}
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}
Challenge
When implementing it this way, I see that - on initiation - already 30 items from the "database" where added to the DOM. Sometimes even all of them? Currently the non-working prototype is implemented for an “iPhone X” (375x812) mobile device only. See: http://urbexco-acceptance.droppages.com/min_rep_ex_not_working (use Chrome DevTools 'inspect' device toolbar to select the right resolution). For a minimal working example, see: https://jsfiddle.net/k3p20qno/
Key question
What is the reason that with my new implementation, on initiation, already 30 or more items are added to the DOM? How can I fix it?

Well the problem lies in here :
function getMeta(url){
var img = new Image();
img.onload = function(){
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
};
img.src = url;
}
Above code does an async operation with onload event. So it doesn't wait to image to be loaded.
If you turn this into a function that returns a promise you will get the result that you expect. And you should await where you call the function. That way when you add the intersection element it will add it as the last element of the items wrapper. If you don't await it will be added as the first element because the loading of the images will be async and will happen later.
function getMeta(url){
var img = new Image();
const p = new Promise(resolve =>{
img.onload = function(){
console.log( this.width+' '+ this.height );
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
resolve()
};
})
img.src = url;
return p;
}
Fiddle
Edit: Put the resolve() in the right position which is inside the load function

PopupCenter by opening new window instead of overwriting the previous one

Can the PopupCenter function open a new window instead of overwriting the previously opened window? I tried to add target="_blank" but it does not work.
I have the code written as below:
HTML:
Submit Form<br>
View Form<br>
Javascript:
function PopupCenter(url, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2;
var params = "width=" + w + ", height=" + h;
params += ", top=" + top + ", left=" + left;
params += ", directories=no";
params += ", location=no";
params += ", menubar=no";
params += ", resizable=yes";
params += ", scrollbars=yes";
params += ", status=no";
params += ", toolbar=no";
newwin = window.open(url, title, params);
if (window.focus) { newwin.focus(); }
//return false;
}
For instance, the link for submit form and view form will open seperate windows. Is it possible to achieve this? Need some help and thanks in advance.

You just have to give every link a different title
<html>
<body>
xtf<br>
xtf2<br>
xtf3
<script>
function PopupCenter(url, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2;
var params = "width=" + w + ", height=" + h;
params += ", top=" + top + ", left=" + left;
params += ", directories=no";
params += ", location=no";
params += ", menubar=no";
params += ", resizable=yes";
params += ", scrollbars=yes";
params += ", status=no";
params += ", toolbar=no";
newwin = window.open(url, title, params);
if (window.focus) { newwin.focus(); }
//return false;
}
</script>
</body>
</html>
The first two links in my example open in different windows but not the third, because it has the same title as link nr2

Popup not closing from parent window?

I am having a problem with closing a pop window. My problem is unique in kind if I click Logout from the parent, it closes all the windows, but when I log out from a child, then I am logging out from Parent, so it does not close the other child windows that are open.
When I am logging out from a child and then I am logging out from a parent, I checked in console and it is not going inside the if block.
I am opening all the pop-ups like this -
function openpop1() {
sessionId = getURLParameters('requestID');
userName = getURLParameters('userName');
userId = getURLParameters('userId');
lvalue = getURLParameters('lValue');
lver = getURLParameters('lVer');
window.name = "parent";
var intWidth = screen.width - 10; //Adjust for the end of screen
var intHeight = screen.height - 80; //Adjust for the Icon Bar at the bottom of the window.
var strWinProp = " toolbar=no" //Back, Forward, etc...
+ ",location=no" //URL field
+ ",directories=no" //"What's New", etc...
+ ",status=yes" //Status Bar at bottom of window.
+ ",menubar=no" //Menubar at top of window.
+ ",resizable=yes" //Allow resizing by dragging.
+ ",scrollbars=yes" //Displays scrollbars is document is larger than window.
+ ",titlebar=yes" //Enable/Disable titlebar resize capability.
+ ",width="+intWidth //Standard 640,800/788, 800/788
+ ",height="+intHeight //Standard 480,600/541, 600/566
+ ",top=0" //Offset of windows top edge from screen.
+ ",left=0" //Offset of windows left edge from screen.
+ "";
awin = window.open(aUrl + userName + "&requestID=" + sessionId
+ "&userId=" + userId + "&lValue=" + lvalue + "&lVer=" + lver,'_blank',strWinProp);
}
function openpop2() {
sessionId = getURLParameters('requestID');
userName = getURLParameters('userName');
userId = getURLParameters('userId');
lvalue = getURLParameters('lValue');
lver = getURLParameters('lVer');
window.name = "parent";
var intWidth = screen.width - 10; //Adjust for the end of screen
var intHeight = screen.height - 80; //Adjust for the Icon Bar at the bottom of the window.
var strWinProp = " toolbar=no" //Back, Forward, etc...
+ ",location=no" //URL field
+ ",directories=no" //"What's New", etc...
+ ",status=yes" //Status Bar at bottom of window.
+ ",menubar=no" //Menubar at top of window.
+ ",resizable=yes" //Allow resizing by dragging.
+ ",scrollbars=yes" //Displays scrollbars is document is larger than window.
+ ",titlebar=yes" //Enable/Disable titlebar resize capability.
+ ",width="+intWidth //Standard 640,800/788, 800/788
+ ",height="+intHeight //Standard 480,600/541, 600/566
+ ",top=0" //Offset of windows top edge from screen.
+ ",left=0" //Offset of windows left edge from screen.
+ "";
bwin = window.open(bUrl + userName + "&requestID=" + sessionId + "&userId="
+ userId + "&lValue=" + lvalue + "&lVer=" + lver,'_blank',strWinProp);
}
And while log out I am calling
function onLogout() {
if (awin && !awin.closed) {
awin.close();
}
if (bwin && !bwin.closed) {
bwin.close();
}
sessionId = getURLParameters('requestID');
var rcvReq = getXmlHttpRequestObject();
rcvReq.onreadystatechange = function() {
if (rcvReq.readyState == 4 || rcvReq.readyState == 0) {
var data = rcvReq.status;
}
}
rcvReq.open("GET", logoutUrl +sessionId, true);
rcvReq.send(null);
window.location = loginPageUrl;
}
Now my problem is why is it not going inside the if block when I am logging out from the child and then the parent. I checked this by adding a breakpoint to these lines.
if (awin && !awin.closed) {
awin.close();
}
if (bwin && !bwin.closed) {
bwin.close();
}
I also checked whenever I am closing one pop-up the value of the both awin and bwin is getting set to undefined.
But why it happening. Somebody can help me on this?
EDIT :
Is this because if I am logging out I am setting a modal window on main page for user to tell the session is time out.
The code for that is here-
if (responseBodyFull == "Invalid Session Id passed") {
console.log("Invalid Session");
showModalBoxForInvalidSessionInfo();
}
and the function is defined like this -
function showModalBoxForInvalidSessionInfo(){
$("#modelView").dialog({
autoOpen : false,
modal : true,
buttons : [ {
text : "OK",
icons : {
primary : "ui-icon-heart"
},
click : function() {
$(this).dialog("close");
}
}]
});
$("#modelView" ).dialog("open");
$("#modelView").text("Session Timed Out. Please login again to access the Dashboard");
}
But anyway when we do console.log it is coming to the if part. So, I guess this should not be a problem.

open window on click of button as modal dialog using javascript

I have to open a window when a button is clicked, as a modal dialog using JavaScript.
I have used window.open, but it shows me two instances, the parent page and the pop-up page.
When the pop-up page is open, then do not allow the user to click on the parent page.
function openWindow() {
var w = 950;
var h = 350;
var t = 0;
var l = 0;
var scrollbars = 1;
var modal = 'yes';
var reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal);
reportWindow.focus();
}

Your code line,
reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal);
is missing an '=' symbol after modal. It should be,
reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal=' + modal);
To open window as dialog box,
<html>
<body>
<script language="JavaScript">
function openWindow() {
if (window.showModalDialog) {
window.showModalDialog("http://example.com","name",
"dialogWidth:255px;dialogHeight:250px");
} else {
window.open('http://example.com','name',
'height=255,width=250,toolbar=no,directories=no,status=no, linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
}
}
</script>
<button onclick="openWindow();">Open window</button>
</body>
</html>
If the above code is not working, please use jQuery modal dialog. You can load any urls to dialog using an iframe.

"window.open" will not work. This command always just opens a popup wich is not "always" on top of its parent.
2 Options:
If you just want to let the user enter a search string you could use
prompt("Please enter a search string:", "");
If you have a complexe search form, you have to create a modal dialog for your own.
There are frameworks which provide this functionality (google for "jQuery") or you create it for your own. Should not be hard, tell me if you need some help!

ASP.NET Javascript: window.open won't work twice

I have an aspx page with a button. When the user clicks that button, the following javascript opens a new browser window (in this case, 'Reasons.aspx'). Works great. Here's the function for that part:
function ShowPanel(url)
{
var width = 750;
var height = 600;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', toolbar=no';
params += ', menubar=no';
params += ', resizable=yes';
params += ', directories=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', location=no';
newwin = window.open(url + '?LetterNumber=1&ReasonType=3', 'd', params); //<--- Change This (LetterNumber) When Copying!
if (window.focus)
{
newwin.focus()
}
return false;
}
Now here's where it gets funky. When this window pops up, there are some controls. One of which is a button, which triggers almost identical code to popup a third window (in this case, ReasonCodes.aspx). Only it won't work. Here's the code for that:
function fGetReasons(url)
{
var width = 750;
var height = 600;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', toolbar=no';
params += ', menubar=no';
params += ', resizable=yes';
params += ', directories=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', location=no';
newwin = window.open(url, 'd', params); //<--- Change This (LetterNumber) When Copying!
if (window.focus)
{
newwin.focus()
}
return false;
}
I've set breakpoints on the javascript. It does execute. Here's what's weird -- The above javascript executes, only I don't get a new window with ReasonCodes.aspx. However, I set a breakpoint in the page_load of ReasonCodes.aspx and all of it executes. So the javascript executes, the code-behind page_load of the third page executes, but I don't get a third page.
Instead, the second window (Reasons.aspx) refreshes. It's like my third window is somehow 'hidden'.
Can anybody tell me what's going on, or what am I missing?
Thanks,
Jason
PS -- I know 3 windows sounds like a lot, and it's not by choice. There's a business need here (this is a local intranet application) and I have to abide by the specs. Thanks.

The 2nd parameter to window.open is the name of the window. You are using the same name in both calls so it is attempting to use the same window. Change the name of the 2nd call and you should be fine.

Or use '_blank' name to open each time in new window!