This is a really though one.
I have wrtitten this javascript to connect actions in javascripts and actions in a flash application in my site.
The flash app is a bar that displays reltime indices.
But it has 4 rows . The user can choose which row to display by pressing
the up or down arrow.
I am trying to recognize if the user click one of those buttons by recognizing the x and y with
e.pageX and e.pageY
This should works (and it does!) becuase the flash is always on the bottom (fixed position)
The thing is that it works in FF but not in chrome or IE.
The code is
$('body').click(function(e){
var arrowWidth = 15;
var arrowHeight = 12;
x_left = $("body").width() * 0.88 - 30;
x_right = $("body").width() * 0.88;
y_down_bottom = $(window).height() -2//screen.height; //$
y_down_top = y_down_bottom - arrowHeight;
y_up_bottom = y_down_bottom - arrowHeight-2;
y_up_top = y_up_bottom - arrowHeight-4;
if (e.pageX > x_left && e.pageX < x_right ){
if (e.pageY>=y_down_top && e.pageY<=y_down_bottom ){
//pressed down
.............
}
}
EDIT:
Thanks to carnio I changed my approach by sending it through flash external interface.
I used
import flash.external.*; // for sending up and down arrows events to javascript
and this on the press up and down events
//update javascript
// The name of a JavaScript function to call
var callJasFunction:String = "GetBtnTicker";
//parameter
var msg:int = page;
// The return value after calling JavaScript
ExternalInterface.call(callJasFunction, msg);
and it works.
Related
I'm trying to add a simple counter in the bottom of my app like this one:
And it is very simple atm, 80 is my array.length that is being populated through my axios request.
<div>{people.length.toLocaleString()}</div>
And as I scroll down the page, using react-infinite-scroll, the number goes up and up and this is just fine. What I'm trying to do is subtract the number as the user goes back up the page.
Is this something harder than I'm thinking? If so, don't give me the full answer, just give me the path to follow. Thanks.
This is what I'm trying to accomplish: https://mkorostoff.github.io/hundred-thousand-faces/
you can do by using scroll event with window.innerHeight and the element bottom height to check whether its available inside the display window.
You can try like this using onscroll event which is available in library itself.
let counter = 0;
[listofElement].find(ele => {
var conditionHeight = window.innerHeight;
var cordinat = ele.getBoundingClientRect().top;
counter++;
return conditionHeight < cordinat;
});
You can check here with sample working part.
Looking at the source of the page you've linked, the code uses this function to get the size of the page:
function getScrollPercent() {
var face_width = document.getElementById('first').clientWidth;
var face_height = document.getElementById('first').clientHeight;
var body = document.documentElement || document.body;
var faces_per_row = Math.floor(main.clientWidth / face_width);
var total_height = total / faces_per_row * face_height;
var scroll_percent = (body.scrollTop - main.offsetTop + body.clientHeight) / total_height;
var count = Math.floor(scroll_percent * total);
var chunked_count = count - (count % faces_per_row);
if (chunked_count > 0) {
counter.classList = "fixed";
}
else {
counter.classList = "";
}
return (chunked_count > 0) ? chunked_count : 0;
}
The essential bit is var scroll_percent = (body.scrollTop - main.offsetTop + body.clientHeight) / total_height;. Basically, if you can calculate your total height (assuming that isn't infinite), then you can use body.clientHeight, +/- offsets, divided by totalHeight to figure out how far down the page you are. Call this from an event listener on scroll, and you should be good to go.
Incidentally, if this is the infinite scroll library you're talking about using, it's no longer maintained in favor of react-infinite-scroller.
using react-infinite-scroll, you can't back axios request results or remove generated doms.
The solution is calculating width and height of every doms and calculate offset.
Check how many doms are above the scrollReact and so so.
This question already has answers here:
Center a popup window on screen?
(19 answers)
Closed 5 years ago.
I found the following JavaScript code many years ago (between 8 and 10 years ago, I think) though I can't remember where or when. I use it to make popup windows with answers for a Jeopardy review game for my French students. I dabble a little bit but I don't know very much beyond the absolute basics about coding (I do know how to change the background color in this code and the window size, for example). I would like to have the popup window be centered in the middle of the page rather than opening in the upper left of the window.
I've seen code bits in response to other questions (Center a popup window on screen? for example) that look like they should make that happen but when I've tried adding them in different places to my existing code it always makes the feedback window no longer open. I don't know enough about coding to know what of that code I need or where to put it. I have tried pulling the VAR lines and adding them to the existing code but as I have said, it disables the popup window completely.
Can someone help me tell me if it is possible to modify this code to center the popup window in the middle of the page or if I should try to find a different code to make that happen?
Thank you for your help.
Shannon
Here is the code that I have:
function feedback(message) {
var browser = navigator.appName;
var browserVersion = navigator.appVersion;
if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {
// This function opens a new window with the message text.
// The window will disappear when it loses focus.
msgWindow=window.open('','msgWindow','toolbar=no,location=no,directories=no, status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,width=210,height=180');
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");
msgWindow.document.write("</HEAD>");
msgWindow.document.write
("<BODY BGCOLOR='#FAE080' onblur='window.close()'>");
msgWindow.document.write
("<P><CENTER><FONT SIZE=+1><B>" + message + "</FONT></B></P></CENTER>");
msgWindow.document.write("</BODY>");
msgWindow.document.close();
} else { // Not Netscape or Internet Explorer
alert(message);
}
} // end of JavaScript Function feedback
It is not working here in code snippet but you can check this fiddle Check this
function myFunction() {
var pageURL="http://google.com";
var w = 500;
var h = 500;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
window.open("https://www.google.com",'','width=' + w +', height='+h +',top='+top+',left='+left);
}
<button onclick="myFunction()">Click Here</button>
Your modified Code Will be like this Check updated Fiddle
function feedback(message) {
var browser = navigator.appName;
var browserVersion = navigator.appVersion;
if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {
// This function opens a new window with the message text.
// The window will disappear when it loses focus.
var w = 210;
var h = 190;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var msgWindow=window.open("",'','width=' + w +', height='+h +',top='+top+',left='+left);
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");
msgWindow.document.write("</HEAD>");
msgWindow.document.write("<BODY BGCOLOR='#FAE080' onblur='window.close()'>");
msgWindow.document.write("<P><CENTER><FONT SIZE=+1><B>" + message + "</FONT></B></P></CENTER>");
msgWindow.document.write("</BODY>");
msgWindow.document.close();
} else { // Not Netscape or Internet Explorer
alert(message);
}
} // end of JavaScript Function feedback
Ok. I want to apologize first because I don not even know how to title this question properly.
I will try to explain:
I have a working code for this that kind-of-works, but it is a bit messy, so I am trying to divide it into small functions.
The whole process is a simulated scrollbar:
-div id="scrollbar" represents the scrollbar track.
-div id="scrollbar"'s only child represents the scrollbar thumb.
Now. Whenever an "onmousedown" event takes place in document.documentElement, function checkAndPerform(e) gets executed.
checkAndPerform(e) gets borders of scrollbar and calls the following functions:
-checkClick(e): It checks if click has occurred inside scrollbar and returs true or false.
-perform(): If result of checkClick is true, it moves thumb to click position. Also, it scrolls down the section where the scrollbar operates (section id="ejercicios"). Finally, it adds a "mousemove" EventListener to document.documentElement, with function followMe(e) attached to it.
This followMe function calls a function that limits scroll to trackbar borders. After that it perform translation of div and scrolling of section while "mousemove" is active, and finally calls a function release(), that adds a "mouseup" EventListener to remove the followMe function after mouse button gets released.
The idea for the code was got here:
How can I retrieve all mouse coordinates between mousedown to mouseup event, where you can see in accepted answer that function called "trackPoints" gets called troubleless (as it is in my previous code).
So, here it is troubling javascript code:
function getHeight(object) {
var height = object.getBoundingClientRect().bottom - object.getBoundingClientRect().top;
return height;
}
function checkClick(e) {
console.log("x:" + e.pageX, "y:" + e.pageY);
if (e.pageX > sBLeft - 5 && e.pageX < sBRight + 5 && e.pageY < sBBottom && e.pageY > sBTop) {
adentroBar = true;
console.log("meas adentro");
} else {
adentroBar = false;
console.log("meas afuera");
}
return adentroBar;
}
function scrollLimited(e) {
if (e.pageY < sBTop) {
translateY = 0;
} else if (e.pageY > sBBottom) {
translateY = getHeight(scrollBar) - getHeight(thumb);
} else {
translateY = e.pageY - sBTop - .5 * getHeight(thumb);
}
}
function followMe(e) {
scrollLimited;
thumb.style.transform = "translate3d(0," + translateY + "px,0)";
document.getElementById('ejercicios').scrollTop = translateY * ratio;
document.documentElement.addEventListener("mouseup", release, false);
}
function perform() {
if (adentroBar === true) {
translateY = e.pageY - sBTop - getHeight(thumb) / 2;
}
thumb.style.transform = "translate3d(0," + translateY + "px,0)";
document.getElementById('ejercicios').scrollTop = translateY * ratio;
document.documentElement.addEventListener("mousemove", followMe, false);
}
function release() {
document.documentElement.removeEventListener("mousemove", followMe, false);
}
function checkAndPerform(e) {
var translateY, adentroBar, scrollBar = document.getElementById('scrollbar'),
thumb = scrollBar.getElementsByTagName("div")[0],
sBLeft = scrollBar.getBoundingClientRect().left,
sBRight = scrollBar.getBoundingClientRect().right,
sBTop = scrollBar.getBoundingClientRect().top,
sBBottom = scrollBar.getBoundingClientRect().bottom,
preg = document.getElementById('preguntas'),
ratio = preg.offsetHeight / (getHeight(scrollBar) - getHeight(thumb));
if (e.which === 1) {
checkClick;
perform;
}
}
document.documentElement.addEventListener("mousedown", checkAndPerform, false);
Also, here it is a jFiddle for it: https://jsfiddle.net/pa0exs4q/
I may provide the working code in case you find it interesting, but as i have said, it is really messy and porly written.
Problem is second function in flow (checkClick), is not even being called.
I have tried to call it as (checkClick(e)), in that case it runs, but fails to recognize variables defined above in checkAndPerform.
In my working code, everything was an only function, so i think it may be a scope problem, but I am open for any ideas.
If you have a function named myFunction, you can pass it around simply as myFunction, but to actually call it you have to write it as myFunction(). So this:
function checkAndPerform(e){
var translateY, adentroBar, scrollBar=document.getElementById('scrollbar'), thumb=scrollBar.getElementsByTagName("div")[0], sBLeft=scrollBar.getBoundingClientRect().left, sBRight=scrollBar.getBoundingClientRect().right, sBTop=scrollBar.getBoundingClientRect().top, sBBottom=scrollBar.getBoundingClientRect().bottom, preg=document.getElementById('preguntas'), ratio=preg.offsetHeight/(getHeight(scrollBar)-getHeight(thumb));
if (e.which===1){
checkClick;
perform;
}
}
Should become this:
function checkAndPerform(e){
var translateY, adentroBar, scrollBar=document.getElementById('scrollbar'), thumb=scrollBar.getElementsByTagName("div")[0], sBLeft=scrollBar.getBoundingClientRect().left, sBRight=scrollBar.getBoundingClientRect().right, sBTop=scrollBar.getBoundingClientRect().top, sBBottom=scrollBar.getBoundingClientRect().bottom, preg=document.getElementById('preguntas'), ratio=preg.offsetHeight/(getHeight(scrollBar)-getHeight(thumb));
if (e.which===1){
checkClick(e);
perform(e); // make sure to pass e and expect it in perform, otherwise it won't have access to it
}
}
Without seeing your corresponding markup, this seems to me the most likely and glaring issue in your code.
I am using the App Lab bu code.org which allows me to make an "app" using blocks or their JavaScript equivalent. In this app, I am applying the kinematic equations as seen in this chart:
My program calculates the maximum height and the horizontal velocity based the user input for time, r or the horizontal range, and the launch angle (which currently is not used). To do so, it manipulates the first of four equations to:
v_x = (x - x_0) / t
or put simply, the horizontal velocity is the total distance traveled horizontally minus the initial horizontal velocity (which is always 0) divided by the time. For the height, it simply uses the second equation. Code:
var time = 1;
var range = 1;
var angle = 0;
var GRAVITY = -32.2;
var v_yo = 0;
var y_o = 0;
setText("time", time);
setText("x_range", range);
setText("launch", angle);
function horizontal_velocity() {
var v_x = ((range - 0)/time * 3600)/5280;
setText("text_area1", v_x.toFixed(5));
}
function maximum_height() {
var height = 0.5 * GRAVITY * Math.pow(time/2, 2) + (v_yo * (time/2)) + y_o;
setText("text_area2", height.toFixed(5));
}
onEvent("timey", "click", function(event) {
setText("time", 0);
});
while (GRAVITY < 0) {
time = getText("time");
range = getText("x_range");
angle = getText("launch");
v_yo = 0 - GRAVITY * (time/2);
horizontal_velocity();
maximum_height();
}
The results work perfectly fine (test it here) but the one thing that is not working is the Clear buttons... well just the first for now. The rest do not have any code attached. So to "clear" the text field under the label Time in Seconds, you need to click the button. This should have triggered the onEvent() in the code and call setText("timey", 0) which is supposed to replace the current text with a 0.
Unfortunately during debug, it shows that when the button is clicked, it doesn't even call the onEvent() which doesn't allow the first button to work. For those curious about what onEvent() does, check this doc. So why is onEvent() not being called even though the id of the button timey and the second parameter click corresponds to the correct button and action respectively. Also, the code within onEvent() is a function, which is legal if you check the third example in the doc.
The editor also includes a design section:
I am using ajax to dynamically load XML from a web service, the returned records are limited to just 25 items for each url 'load' or 'call'.... to work around that I have a process whereby the user scrolls down the page and when they reach 90% of the page height (or when they reach page bottom - not sure which I'll choose yet), a variable named startindexnum is incremented by 25.
so startindexnum starts out at 25... then after the first 'fire' of the function, the startindexnum becomes 50, on the 3rd it becomes 75, etc. etc.
my problem is that it fires multiple times and is somewhat erratic - processing multiple times when I scroll to the bottom and increasing by MORE than 25 sometimes (no doubt a result of running multiple times I think).
anyone have any idea what I need to tweak to get this to correctly generate the incremental startindex variable to append to my ajax URL where Im retrieving XML? thanks.
var scrollcount = 1;
var startindexnum = 25;
var processing;
$(document).ready(function(){
$(document).scroll(function(e){
if (processing)
return false;
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
//if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9){
// you're at x% of the page
processing = true;
scrollcount = scrollcount + 1;
startindexnum = scrollcount * startindexnum;
console.log(scrollcount);
docall();
processing = false;
};
};
});
});
The problem is I am betting docall() is an asynchronous call, so setting of processing to false after that call does nothing to block the future scroll events.
The setting of false is happening before the results are returned. You want to set processing back to false when docall() is done doing its task.
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
//if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9){
// you're at x% of the page
processing = true;
scrollcount = scrollcount + 1;
startindexnum = scrollcount * startindexnum;
console.log(scrollcount);
docall();
//processing = false; <--get rid of this
};
and
function docall(){
//When you are done fetching the new data and update the page set
function AjaxCallIsDone() {
processing = false;
}
}
In addition to epascarello's post...
you don't need the $(document).scroll(fn) and the window.onscroll, which you are attaching to every time your document scroll handler is executed. A few things:
1) Firstly, take a look at this scroll post by John Resig. Scrolling by J.Resig
2) If you want the jquery method then use window instead of document $(window).scroll(fn).
3) If not then I think the following will work for you:
var scrollcount = 1;
var startindexnum = 25;
var processing;
$(document).ready(function(){
window.onscroll = function(ev) {
if (!processing) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
processing = true;
scrollcount = scrollcount + 1;
startindexnum = scrollcount * startindexnum;
console.log(scrollcount);
docall();
}
}
}
});