R Shiny中ID和类组合的Javascript问题

Question

I am working on a project and am stuck with one of my final steps. I am developing a shinyApp and have done stuff like the following within my ui.R file, at the end of my tags$body section:

tags$script(HTML('

            window.onscroll = function() {myFunction()};

            var sidebar = document.getElementById("sidebar");

            var title = document.getElementById("title");
            var titleHeight = title.offsetHeight;


            function myFunction() {
            if (window.pageYOffset >= titleHeight) {
              if ($(window).width() > 1280) {
                sidebar.classList.add("sticky-wide");
              } else if ($(window).width() > 780) {
                // This is the final issue:
                sidebar.classList.add("sticky");
                //sidebarWell.classList.add("stickyWell");
              } else {
                sidebar.classList.add("sticky-narrow");
              }
            } else {
              if ($(window).width() > 1280) {
                sidebar.classList.remove("sticky-wide");
              } else if ($(window).width() > 780) {
                sidebar.classList.remove("sticky");
                //sidebarWell.classList.remove("stickyWell");
              } else {
                sidebar.classList.remove("sticky-narrow");
              }
            }
            }'))...

Note that "sidebar" is the id name given to my shiny element "sidebarPanel()". So that when I scroll beyond the title at the top of the page, my sidebar becomes sticky based on the following code in my css file (note the very last element I am pretty sure is from my predecessor's previous code and I believe is some global style options assigned to a class that shiny labels automatically):

 .stickyWell { box-sizing: border-box; width: calc(33% - 30px); } .sticky { box-sizing: border-box; width: calc(33% - 30px); /*width: inherit;*/ position: fixed; top: 0; height: 100vh; } .sticky-narrow { width: 100%; } .sticky-wide { box-sizing: border-box; width: calc(426.67px - 30px); position: fixed; top: 0; height: 100vh; } /*Change style options of a singular selectInput box by first defining a class for it:*/ .my_class .selectize-input { border-top-left-radius: 0px; border-top-right-radius: 0px; } #ss-connect-dialog { opacity: 1 !important; padding: 1em; position: fixed; top: 50px; bottom: auto; left: 50px; padding-left: 45px; padding-right: 18px; width: 300px; height: auto; z-index: 99999; background-color: #404040; color: white; border-radius: 3px; font-size: 0.9em; box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px; } 

Update: Note the if statements have been updated and now work properly. This is the closest I have gotten the code to working, but the second case in the nested if statement does not adjust the width properly.

The following was one solution I used in the past but seems incompatible with the window.onscroll feature:

@media only screen and (max-width: 1280px) and (min-width: 780px) {
  #sidebar.well {
    box-sizing: border-box;
    width: calc(33% - 30px);
    /*position: fixed;*/
    overflow-y: scroll;
    height: 80vh;
  }
}

This used to be in my CSS file and adjusted the width the appropriate amount (note the 33% is due to column = 4 for sidebarPanel and the 30px is twice the border of the sidebarPanel, set by default, later I can make this more robust). So ideally I need to figure out a way to implement this in my javascript section of ui.R (one of my attempts being connected to the commented lines involving "stickyWell" in the first code bluck, which calls a similar looking thing, to the @media above, in the first block of css code).

---

Remaining portions of original post follows and can be ignored

The issue is that the width of my sidebar becomes too large when scrolling down the page. I found a solution to this earlier, but it runs into the issue of the sidebar width changing before and after I scroll beyond the title.

One way I figured out to get around this was to use:

#sidebar.well {
  box-sizing: border-box;
  width: calc(33% - 30px);
}

in my css file as well (where the class name "well" is assigned automatically by R shiny and specifically using the id-class name combo correctly sizes things). But this only fixes the width after scrolling beyond the title (when the sidebar gets the position:fixed property) and screws up the width prior to scrolling beyond the title.

So now what is left to do is to only enable the above css snippet when I scroll beyond the title. I have tried such things as:

var sidebarWell = document.getElementById("sidebar").getElementsByClass("well")[0];

and then within the proper if statement (in the first block of code) I tried adding things like:

sidebarWell.setAttribute("style", "box-sizing: border-box;");
sidebarWell.setAttribute("style", "width: calc(33% - 30px);"); 

or

sidebarWell.classList.add("stickyWell");

After first renaming "#sidebar.well{}" in the css file to "stickyWell{}".

I am new to javascript, what am I missing or doing wrong? Please note that I think I am very limited with id and class names because of how shiny labels things, and I have tried applying the above style changes to just id="sidebar" but it does not work how I think it should.

---

In response to the first comment:

Firstly, I figured I would include any relevant parts of the code that may create conflicts. First the way the sidebarPanel is defined:

sidebarLayout(
  sidebarPanel(id="sidebar",
               width=4,
               ...

with nothing else major in that section of ui.R (mainPanel is defined with width=8. Then in the beginning of ui.R, I have

shinyUI(fluidPage(
  includeCSS("extrahtmlfunc.css"),
  tags$head(
    # 2018-06-19: Fixes issue where a slider that appears at certain zoom levels for figures using splitLayout (only shows up on Chrome):
    tags$style(HTML(".shiny-split-layout > div { overflow: visible; }")),
    # The following makes it so the UI doesn't look to weird in super-wide browsers
    tags$style(type="text/css", 
               ".container-fluid {  max-width: 1280px; }"
    ),
    ...

That should be all that is relevant, the rest is minor color styles or similar tweaks. Note that this last thing is what makes some easier fixes for my solution more difficult, because I need separate cases for different page widths (I am updating the first block of code to reveal the full details of these cases in the function myFunction(), which I removed to shorten my post; note the second case of the nested if statement is the only one not working properly).

I also updated the second block of code with the rest of my css file as per request.

Answer 1

Found a workaround:

First off, I was able to incorporate my previous css code that fixed the issue but I was previously unable to incorporate with the window.onscroll feature. This was one of the main ways to solve my question, and there are likely other solutions which may be better.

Recall the snippet from my original CSS file that gave the correct sizing:

 @media only screen and (max-width: 1280px) and (min-width: 780px) { #sidebar.well { box-sizing: border-box; width: calc(33% - 30px); /*position: fixed;*/ overflow-y: scroll; height: 80vh; } } 

Note that the @media... connects to the second case of the nested if statement in my javascript portion of my ui.R. It was hard to tell if I was able to replicate this with things like:

 .stickyWell { box-sizing: border-box; width: calc(33% - 30px); } 

in conjunction with

 var sidebar = document.getElementById("sidebar"); var sidebarWell = sidebar.getElementsByClassName("well")[0]; if(...){ if(...) { ... } else if (...) { ... sidebarWell.classList.add("stickyWell"); }... 

because the "33%" seemed to not work within javascript (perhaps someone knows why). I even found and tried a way to transform the first block of CSS code directly into my javascript section:

 $("#sidebar.well").css("box-sizing", "border-box"); $("#sidebar.well").css("width", "calc(33% - 30px)"); 

but this did not work (I even inspected the element when running the app and it did not accept the second portion of the style above).

However, once learning how to implement css code directly into javascript, I realized I might be able to replace the 33% with a precise number of pixels as that worked in the ".sticky-wide" portion of my original question. Here is the resulting solution:

 shinyUI(fluidPage( includeCSS("extrahtmlfunc.css"), tags$head( ... , tags$script(HTML(' window.onscroll = function() {myFunction()}; var sidebar = document.getElementById("sidebar"); var title = document.getElementById("title"); var titleHeight = title.offsetHeight; function myFunction() { if (window.pageYOffset >= titleHeight) { if ($(window).width() > 1280) { sidebar.classList.add("sticky-wide"); } else if ($(window).width() > 780) { sidebar.classList.add("sticky"); $("#sidebar.well").css("box-sizing", "border-box"); $("#sidebar.well").css("width", "calc(" + $(window).width()/3 + "px - 30px)"); } else { sidebar.classList.add("sticky-narrow"); } } else { if ($(window).width() > 1280) { sidebar.classList.remove("sticky-wide"); } else if ($(window).width() > 780) { sidebar.classList.remove("sticky"); $("#sidebar.well").css("box-sizing", ""); $("#sidebar.well").css("width", ""); } else { sidebar.classList.remove("sticky-narrow"); } } } ' ) ) # Closes tag$script ) # Closes tag$head ... # Rest of ui.R ) ) # Closes shinyUI 

I hope this ends up helping someone else.