Make mathquill field scroll always with the cursor
When the cursor is outside of viewport, in Mathquill the cursor stay hidden unless the user scroll. Normally like in normal calculator views the mathfield should auto-scroll with the cursor so the cursor is always shown to the user.
Behavior of Other Math editors :
https://i.imgur.com/1JbRv2F.gifv
Behavior of Mathquill :
https://i.imgur.com/9E15uS2.gifv
I have tried to check if the cursor is outside viewport then I scroll automatically but the problem is the cursor lose the focus and become a null element and I can't scroll to it.
javascript jquery mathquill
asked Nov 25 '18 at 12:09
AndroLifeAndroLife
4961821
add a comment |
When the cursor is outside of viewport, in Mathquill the cursor stay hidden unless the user scroll. Normally like in normal calculator views the mathfield should auto-scroll with the cursor so the cursor is always shown to the user.
Behavior of Other Math editors :
https://i.imgur.com/1JbRv2F.gifv
Behavior of Mathquill :
https://i.imgur.com/9E15uS2.gifv
I have tried to check if the cursor is outside viewport then I scroll automatically but the problem is the cursor lose the focus and become a null element and I can't scroll to it.
javascript jquery mathquill
asked Nov 25 '18 at 12:09
AndroLifeAndroLife
4961821
add a comment |
When the cursor is outside of viewport, in Mathquill the cursor stay hidden unless the user scroll. Normally like in normal calculator views the mathfield should auto-scroll with the cursor so the cursor is always shown to the user.
Behavior of Other Math editors :
https://i.imgur.com/1JbRv2F.gifv
Behavior of Mathquill :
https://i.imgur.com/9E15uS2.gifv
I have tried to check if the cursor is outside viewport then I scroll automatically but the problem is the cursor lose the focus and become a null element and I can't scroll to it.
javascript jquery mathquill
asked Nov 25 '18 at 12:09
AndroLifeAndroLife
4961821
When the cursor is outside of viewport, in Mathquill the cursor stay hidden unless the user scroll. Normally like in normal calculator views the mathfield should auto-scroll with the cursor so the cursor is always shown to the user.
Behavior of Other Math editors :
https://i.imgur.com/1JbRv2F.gifv
Behavior of Mathquill :
https://i.imgur.com/9E15uS2.gifv
I have tried to check if the cursor is outside viewport then I scroll automatically but the problem is the cursor lose the focus and become a null element and I can't scroll to it.
javascript jquery mathquill
javascript jquery mathquill
asked Nov 25 '18 at 12:09
AndroLifeAndroLife
4961821
asked Nov 25 '18 at 12:09
AndroLifeAndroLife
4961821
asked Nov 25 '18 at 12:09
AndroLifeAndroLife
4961821
asked Nov 25 '18 at 12:09
AndroLifeAndroLife
4961821
asked Nov 25 '18 at 12:09
AndroLifeAndroLife
4961821
4961821
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I solved this problem by using the following code :
First I added a function to detect if the cursor is outside viewport (source : https://stackoverflow.com/a/15203639/3880171)
function isElementVisible(el) {
var rect = el.getBoundingClientRect(),
vWidth = window.innerWidth || document.documentElement.clientWidth,
vHeight = window.innerHeight || document.documentElement.clientHeight,
efp = function (x, y) {
return document.elementFromPoint(x, y)
};
// Return false if it's not in the viewport
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
// Return true if any of its four corners are visible
return (
el.contains(efp(rect.left, rect.top))
|| el.contains(efp(rect.right, rect.top))
|| el.contains(efp(rect.right, rect.bottom))
|| el.contains(efp(rect.left, rect.bottom))
);
}
I added onKeyUp Event to mathview :
<span id="expression" onkeyup="onEditorKeyPress()"></span>
finally, the function that do the magic of scrolling is :
function scrollToCursor() {
mathField.focus();
var cursor = document.querySelector(".mq-cursor");
if (cursor != null && !isElementVisible(cursor)) {
document.querySelector(".mq-cursor").scrollIntoView();
}
}
function onEditorKeyPress() {
scrollToCursor();
}
answered Nov 26 '18 at 15:57
AndroLifeAndroLife
4961821
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53467285%2fmake-mathquill-field-scroll-always-with-the-cursor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I solved this problem by using the following code :
First I added a function to detect if the cursor is outside viewport (source : https://stackoverflow.com/a/15203639/3880171)
function isElementVisible(el) {
var rect = el.getBoundingClientRect(),
vWidth = window.innerWidth || document.documentElement.clientWidth,
vHeight = window.innerHeight || document.documentElement.clientHeight,
efp = function (x, y) {
return document.elementFromPoint(x, y)
};
// Return false if it's not in the viewport
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
// Return true if any of its four corners are visible
return (
el.contains(efp(rect.left, rect.top))
|| el.contains(efp(rect.right, rect.top))
|| el.contains(efp(rect.right, rect.bottom))
|| el.contains(efp(rect.left, rect.bottom))
);
}
I added onKeyUp Event to mathview :
<span id="expression" onkeyup="onEditorKeyPress()"></span>
finally, the function that do the magic of scrolling is :
function scrollToCursor() {
mathField.focus();
var cursor = document.querySelector(".mq-cursor");
if (cursor != null && !isElementVisible(cursor)) {
document.querySelector(".mq-cursor").scrollIntoView();
}
}
function onEditorKeyPress() {
scrollToCursor();
}
answered Nov 26 '18 at 15:57
AndroLifeAndroLife
4961821
add a comment |
I solved this problem by using the following code :
First I added a function to detect if the cursor is outside viewport (source : https://stackoverflow.com/a/15203639/3880171)
function isElementVisible(el) {
var rect = el.getBoundingClientRect(),
vWidth = window.innerWidth || document.documentElement.clientWidth,
vHeight = window.innerHeight || document.documentElement.clientHeight,
efp = function (x, y) {
return document.elementFromPoint(x, y)
};
// Return false if it's not in the viewport
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
// Return true if any of its four corners are visible
return (
el.contains(efp(rect.left, rect.top))
|| el.contains(efp(rect.right, rect.top))
|| el.contains(efp(rect.right, rect.bottom))
|| el.contains(efp(rect.left, rect.bottom))
);
}
I added onKeyUp Event to mathview :
<span id="expression" onkeyup="onEditorKeyPress()"></span>
finally, the function that do the magic of scrolling is :
function scrollToCursor() {
mathField.focus();
var cursor = document.querySelector(".mq-cursor");
if (cursor != null && !isElementVisible(cursor)) {
document.querySelector(".mq-cursor").scrollIntoView();
}
}
function onEditorKeyPress() {
scrollToCursor();
}
answered Nov 26 '18 at 15:57
AndroLifeAndroLife
4961821
add a comment |
I solved this problem by using the following code :
First I added a function to detect if the cursor is outside viewport (source : https://stackoverflow.com/a/15203639/3880171)
function isElementVisible(el) {
var rect = el.getBoundingClientRect(),
vWidth = window.innerWidth || document.documentElement.clientWidth,
vHeight = window.innerHeight || document.documentElement.clientHeight,
efp = function (x, y) {
return document.elementFromPoint(x, y)
};
// Return false if it's not in the viewport
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
// Return true if any of its four corners are visible
return (
el.contains(efp(rect.left, rect.top))
|| el.contains(efp(rect.right, rect.top))
|| el.contains(efp(rect.right, rect.bottom))
|| el.contains(efp(rect.left, rect.bottom))
);
}
I added onKeyUp Event to mathview :
<span id="expression" onkeyup="onEditorKeyPress()"></span>
finally, the function that do the magic of scrolling is :
function scrollToCursor() {
mathField.focus();
var cursor = document.querySelector(".mq-cursor");
if (cursor != null && !isElementVisible(cursor)) {
document.querySelector(".mq-cursor").scrollIntoView();
}
}
function onEditorKeyPress() {
scrollToCursor();
}
answered Nov 26 '18 at 15:57
AndroLifeAndroLife
4961821
I solved this problem by using the following code :
First I added a function to detect if the cursor is outside viewport (source : https://stackoverflow.com/a/15203639/3880171)
function isElementVisible(el) {
var rect = el.getBoundingClientRect(),
vWidth = window.innerWidth || document.documentElement.clientWidth,
vHeight = window.innerHeight || document.documentElement.clientHeight,
efp = function (x, y) {
return document.elementFromPoint(x, y)
};
// Return false if it's not in the viewport
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
// Return true if any of its four corners are visible
return (
el.contains(efp(rect.left, rect.top))
|| el.contains(efp(rect.right, rect.top))
|| el.contains(efp(rect.right, rect.bottom))
|| el.contains(efp(rect.left, rect.bottom))
);
}
I added onKeyUp Event to mathview :
<span id="expression" onkeyup="onEditorKeyPress()"></span>
finally, the function that do the magic of scrolling is :
function scrollToCursor() {
mathField.focus();
var cursor = document.querySelector(".mq-cursor");
if (cursor != null && !isElementVisible(cursor)) {
document.querySelector(".mq-cursor").scrollIntoView();
}
}
function onEditorKeyPress() {
scrollToCursor();
}
answered Nov 26 '18 at 15:57
AndroLifeAndroLife
4961821
answered Nov 26 '18 at 15:57
AndroLifeAndroLife
4961821
answered Nov 26 '18 at 15:57
AndroLifeAndroLife
4961821
answered Nov 26 '18 at 15:57
AndroLifeAndroLife
4961821
4961821
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53467285%2fmake-mathquill-field-scroll-always-with-the-cursor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
