Is it possible to programmatically send the window to #anchor_box when results are available at the end of an observeEvent() with a long running time, instead of relying on the user clicking on a link like
a("Go to Results", href = '#anchor_box')Is it possible to programmatically send the window to #anchor_box when results are available at the end of an observeEvent() with a long running time, instead of relying on the user clicking on a link like
a("Go to Results", href = '#anchor_box')If you want to achieve this functionality, utilizing JavaScript is the way to go. There are various methods available, but one approach involves acquiring the element and employing scrollIntoView(). This can be seen in action here: anchor jumping by using javascript.
A convenient method of integrating JavaScript within a shiny environment is through library(shinyjs).
To instruct R to shift focus to the desired element, consider implementing the following:
runjs('
document.getElementById("anchor_box").scrollIntoView();
')
You can determine when to trigger this action by wrapping it within an observeEvent():
observeEvent(eventExpr = input$clck, handlerExpr = {...})
One drawback to keep in mind is that refreshing the page won't automatically "scroll up to the top".
Example for Replication:
library(shiny)
library(shinyjs)
ui <- fluidPage(
a("Navigate to Results", href = '#anchor_box'),
actionButton("clck", "Move Programmatically!"),
plotOutput("plot", height = 1300),
div(id = "anchor_box", "HERE"),
useShinyjs(),
)
server <- function(input, output, session) {
output$plot <- renderPlot({
plot(1)
})
observeEvent(eventExpr = input$clck, handlerExpr = {
runjs('
document.getElementById("anchor_box").scrollIntoView();
')
})
}
shinyApp(ui, server)
I am struggling with calculating the sum of values in the Total Amount column of my Material-UI DataGrid. How can I achieve this and ensure that the sum is also updated when a filter is triggered? Any guidance on how to sum the entire Total Amount column ...
This snippet displays JS code to create a quiz index table and HTML code to display the index. function load(){ var data = [ { "id": "qc1111", "quizName": "Quiz1", "course": "111", "dueDate": "1/ ...
Having trouble inserting a button element after another element selected using jQuery. Here's how I have my element selected: let btn = $("a[translate='server.ipmi.kvm.LAUNCH']")[0]; When I try to insert the button after it, I'm using ...
The material-ui paper component is implemented on my homepage and functioning correctly. However, when navigating to another page and returning to the homepage, the paper component disappears, leaving only text rendered. Can you help me identify the issue? ...
To ensure proper code format, errors are logged and returned to the client using Postman in development mode, but are not sent back to the client in production mode. The following code represents the global error handler: module.exports = (err, req, res, n ...
Whenever I try to call the lookUpItem function from ItemSearch.vue, I always get an undefined response. Code snippet from ItemSearch.vue: <script setup lang="ts"> import { lookUpItem } from '../systemApi' async fu ...
I have a question regarding image visibility. Is it possible to hide certain images from a "SHOW ALL" list, but have them appear in a different category list? Below is the code snippet: <section> <ul class="portfolio_filters"> < ...
There seems to be an excess of white space at the bottom of my webpage, despite my efforts to adjust margins and padding. I've inspected the elements using browser developer tools but have been unable to pinpoint the issue. var chatResponseBox = do ...
I'm encountering an issue while attempting to connect to Firefox using RSelenium for web scraping. Any assistance would be greatly appreciated. > rD <- rsDriver(browser = "firefox") checking Selenium Server versions: BEGIN: PREDOWNLOAD ...
I'm facing an issue with a private module on Github that I am adding to my project using npm. Despite having a .npmignore file in the module, the files specified are not being ignored when I install or update it. Here is what my project's packag ...
I recently installed react-native-vector, but I'm seeing strange symbols when using it. Can anyone provide guidance on how to properly utilize this library? Platform: Android import React from 'react'; import {View, Text, StyleSheet} from & ...
After searching high and low, I still can't seem to find the answer to my simple question. Maybe it doesn't exist, but I won't give up just yet. So here's the scenario: I created a global prototype in Vue, essentially a global class, ...
class AppRoutes extends Component { render () { return ( <Suspense fallback={<Spinner/>}> <Switch> <Route exact path="/" component={ HomePage } /> <Route exact path="/acti ...
I had an idea to import a prebuilt gltf scene created in Blender, then add some 3D text using the ttf loader and manipulate it. Each loader worked perfectly when used separately, but strange things started happening when I combined them into a single scrip ...
I created a simple mini-app with a search bar and a table displaying data. Users can enter keywords in the search bar to filter the data in the table using lodash debounce function for smoother performance. Everything works fine except for one issue - when ...
I am in possession of an item: { "200737212": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "nice ...
Highchart is new to me. I recently created a basic chart showing the count of males and females over the past five years. I have included a screenshot for reference. I am wondering if it's possible to remove duplicate labels from both axes? Below is ...
Recently, I made the transition of my Angular app from version 4 to 6. Here is a peek at my package details: Package.json file: { "version": "0.10.50", "license": "MIT", "angular-cli": {}, ... Upon running npm run start, an error popped up in th ...
In the process of creating a basic login form using HTML and CSS, I'm incorporating Javascript to handle empty field validations. To view my current progress, you can find my code on jsfiddle My goal is to implement validation for empty text fields ...
When working on my angular application, I encountered an issue while trying to send a jwt token as a header for request authorization. The error 500 was triggered due to the jwt token being sent in an incorrect format. Here is how I am currently sending it ...