Developing Shift+PgUp, Shift+PgDn to quickly jump between chat turns #5
Description
When it comes to HTML. I have many button, how to know which of them are now on the visible of the page?
ChatLKK: Good question! One way to determine which buttons are currently visible on the page is by using JavaScript. You can use the offsetParent property of an element, which returns a reference to the closest positioned ancestor element. If this property returns null, then it means that the element is not visible.
Here's an example code snippet in JavaScript:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].offsetParent !== null) {
console.log(buttons[i]);
}
}This code will loop through all of the <button> elements on your page and check whether they have a non-null offsetParent. If so, it means that they are currently visible on the page and their details will be logged to your browser console.
Let me know if you have any other questions or need further assistance with this issue!
those buttons are in a same div but buttons[i].offsetParent are all body! why?
ChatLKK: That's a good question. The offsetParent property returns the nearest positioned ancestor element, which means that if none of the ancestors are positioned (using CSS positioning), it will return the <body> element.
In your case, it sounds like all of the buttons are contained within a single <div>. If this is true, you can try using the getBoundingClientRect() method instead to determine whether an element is currently visible on the page.
Here's an example code snippet:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
var rect = buttons[i].getBoundingClientRect();
// Check if any part of button is visible
if (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight &&
rect.right <= window.innerWidth
) {
console.log(buttons[i]);
}
}This code uses getBoundingClientRect() to get information about each button's position and size on the screen. It then checks whether any part of each button is currently visible in the viewport by comparing its coordinates with those of the viewport (window.innerHeight and window.innerWidth). If so, it logs that button to your browser console.
Let me know if this helps or if you have any further questions!
實測結果，要改一下下
- rect.top -5114.69677734375
- rect.bottom -5093.83963394165
- rect.left 237.27679443359375
- rect.right 260.12500953674316
- window.innerHeight 522 <---- +10 來用比較保險，只要 rect.top > 0 && rect.bottom < this+10 即可
- window.innerWidth 989 <----- 不用管
這個就對了！
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
var rect = buttons[i].getBoundingClientRect();
// Check if any part of button is visible
if (rect.top >= 0 && rect.bottom <= window.innerHeight+10) {
console.log(i,buttons[i]);
}
}how to give those buttons a class so as to distinguish from other buttons
ChatLKK: To give those buttons a class to distinguish them from other buttons on the page, you can use the classList property in JavaScript. Here's an example code snippet:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
var rect = buttons[i].getBoundingClientRect();
// Check if any part of button is visible
if (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight +10 && // add a margin of +10 for safety
rect.right <= window.innerWidth
) {
// Add class to visible button
buttons[i].classList.add("visible-button");
}
}In this code, we've added a line that uses the classList.add() method to add a class called "visible-button" to each button that is currently visible on the screen.
You can then style these specific buttons by defining CSS rules for .visible-button. For example:
.visible-button {
background-color: yellow;
}
This will change the background color of all <button> elements with the "visible-button" class to yellow.
I hope this helps! Let me know if you have any further questions or need additional assistance.
Those buttons are class=="chat_turn_btn". use this to avoid other buttons.
ChatLKK: That's a good idea! If you want to only check the visibility of buttons with class="chat_turn_btn", you can modify the code snippet I provided earlier to include an additional check for this class.
Here's what the updated code would look like:
var buttons = document.getElementsByClassName("chat_turn_btn");
for (var i = 0; i < buttons.length; i++) {
var rect = buttons[i].getBoundingClientRect();
// Check if any part of button is visible and has class "chat_turn_btn"
if (
rect.top >= 0 &&
rect.bottom <= window.innerHeight+10 &&
(' ' + buttons[i].className + ' ').indexOf(' chat_turn_btn ') > -1
) {
console.log(buttons[i]);
}
}This code uses getElementsByClassName() instead of getElementsByTagName() to select only elements with a specific class name. It also includes an additional check in the if statement to ensure that each element has the class "chat_turn_btn" before logging it to your browser console.
Let me know if this helps or if you have any further questions!
這個就對了
var buttons = document.getElementsByClassName("chat_turn_btn");
for (var i = 0; i < buttons.length; i++) {
var rect = buttons[i].getBoundingClientRect();
// Check if any part of button is visible and has class "chat_turn_btn"
if (rect.top >= 0 && rect.bottom <= window.innerHeight+10) {
console.log(buttons[i]);
}
}DoShiftPgUp
- 找到畫面上的
chat_turn_btn沒有的話就用last_chat_turn_btn - 第一個
chat_turn_btn的 index-1 與 0 取 max tolast_chat_turn_btn last_chat_turn_btn.focus()
DoShiftPgDown
- 找到畫面上的
chat_turn_btn沒有的話就用last_chat_turn_btn - 最後一個
chat_turn_btn的 index+1 與 buttons.length 取 min tolast_chat_turn_btn last_chat_turn_btn.focus()
code visible_chat_turn_buttons ( -- buttons[btn,btn,...] visibles[i,j,k,...] )
var buttons = document.getElementsByClassName("chat_turn_btn");
var visibles = []
for (var i = 0; i < buttons.length; i++) {
var rect = buttons[i].getBoundingClientRect();
if (rect.top >= 0 && rect.bottom <= window.innerHeight+10) {
visibles.push(i);
}
}
push(buttons)
push(visibles)
end-codecode DoShiftPgUp ( -- )
visibles = dictate('visible_chat_turn_buttons').pop();
buttons = pop();
if (visibles.length) {
idx = visibles[0]
// 第一個 `chat_turn_btn` 的 index-1 與 0 取 max to `last_chat_turn_btn`
idx = Math.max(idx-1, 0)
btn = buttons[idx];
this.last_chat_turn_btn = idx
} else {
btn = buttons[this.last_chat_turn_btn];
}
btn.focus();
end-code
last :: last_chat_turn_btn=0 \ Initialize code DoShiftPgDn ( -- )
visibles = dictate('visible_chat_turn_buttons').pop();
buttons = pop();
if (visibles.length) {
idx = visibles[visibles.length-1]
// 最後一個 chat_turn_btn 的 index+1 與 buttons.length 取 min to last_chat_turn_btn
idx = Math.min(idx+1, buttons.length-1)
btn = buttons[idx];
tick('DoShiftPgUp').last_chat_turn_btn = idx
} else {
btn = buttons[tick('DoShiftPgUp').last_chat_turn_btn];
}
btn.focus();
end-code