Code Monkey home page Code Monkey logo

Comments (25)

yonicd avatar yonicd commented on June 12, 2024 2

@RLesur any ideas on how this can be solved?

from slickr.

ahdee avatar ahdee commented on June 12, 2024 2

Thanks a bunch @yonicd and @RLesur this great and I think solves an important issue. Also thanks for the css hack for the arrows; that is enough for me to work on as well!
thanks!

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024 1

from slickr.

yonicd avatar yonicd commented on June 12, 2024

Thanks for opening the issue.

Can you please supply a fully reproducible example.

from slickr.

yonicd avatar yonicd commented on June 12, 2024

The sliders work for me on a tabset


---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r}
library(slickR)
```

## tab1 {.tabset}

### My first slider

This is the first slider

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```

### tab2

This is the second slider

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```

The second slider gets activated for some reason if you click on it (try an arrow).

This doesn't seem to be a problem with slickR or the underlying js library, but the way that the tabs work with htmlwidgets.

craninfo
── Check Info (Sys.time: 2020-07-07 07:36:03) ─────────────────────────────────────────────────────────────────────────────────────────────────────────────
── Flavor: r-release-osx-x86_64 ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       package                                    source       date     loaded cran_version release  
1           ps                            CRAN (R 3.6.2) 2020-05-08      1.3.3        1.3.3   ERROR  
2  viridisLite                            CRAN (R 3.6.0) 2018-02-01      0.3.0        0.3.0   ERROR  
3         xml2                            CRAN (R 3.6.2) 2020-04-01      1.3.0        1.3.2    WARN *
4        dplyr                            CRAN (R 3.6.2) 2020-05-29      1.0.0        1.0.0    NOTE  
5      ggplot2                            CRAN (R 3.6.0) 2020-03-05      3.3.0        3.3.2    NOTE *
6    ipaddress                            CRAN (R 3.6.2) 2020-05-12      0.3.0        0.3.0    NOTE  
7      iptools                            CRAN (R 3.6.0) 2018-12-09      0.6.1        0.6.1    NOTE  
8  matrixStats                            CRAN (R 3.6.0) 2018-07-23     0.54.0       0.56.0    NOTE *
9         Rcpp                            CRAN (R 3.6.3) 2020-04-09    1.0.4.6      1.0.4.6    NOTE  
10       readr                            CRAN (R 3.6.0) 2018-12-21      1.3.1        1.3.1    NOTE  
11   rmarkdown        Github (rstudio/rmarkdown@18ba267) 2020-01-30      2.1.1          2.3    NOTE *
12       rstan                            CRAN (R 3.6.0) 2019-07-09     2.19.2       2.19.3    NOTE *
13 StanHeaders                            CRAN (R 3.6.0) 2019-06-14  2.18.1-10     2.21.0-5    NOTE *
14     stringi                            CRAN (R 3.6.1) 2020-02-17      1.4.6        1.4.6    NOTE  
15    urltools                            CRAN (R 3.6.0) 2019-04-14      1.7.3        1.7.3    NOTE  
16     viridis                            CRAN (R 3.6.0) 2018-03-29      0.5.1        0.5.1    NOTE  
17 AsioHeaders                            CRAN (R 3.6.0) 2020-03-11   1.12.2-1     1.12.2-1      OK  
18  assertthat                            CRAN (R 3.6.0) 2019-03-21      0.2.1        0.2.1      OK  
19   backports                            CRAN (R 3.6.2) 2020-05-13      1.1.7        1.1.8      OK *
20   base64enc                            CRAN (R 3.6.0) 2015-07-28      0.1-3        0.1-3      OK  
21       callr                            CRAN (R 3.6.2) 2020-03-28      3.4.3        3.4.3      OK  
22         cli                            CRAN (R 3.6.0) 2020-02-28      2.0.2        2.0.2      OK  
23       clipr                            CRAN (R 3.6.0) 2019-07-23      0.7.0        0.7.0      OK  
24  colorspace                            CRAN (R 3.6.0) 2019-03-18      1.4-1        1.4-1      OK  
25      crayon                            CRAN (R 3.6.0) 2017-09-16      1.3.4        1.3.4      OK  
26        crul                            CRAN (R 3.6.0) 2019-11-06      0.9.0        0.9.0      OK  
27        desc               Github (r-lib/desc@da19501) 2020-04-03 1.2.0.9000        1.2.0      OK *
28     details                                     local 2020-01-12      0.2.1        0.2.1      OK  
29      digest                            CRAN (R 3.6.0) 2020-02-23     0.6.25       0.6.25      OK  
30    ellipsis                            CRAN (R 3.6.2) 2020-05-15      0.3.1        0.3.1      OK  
31    evaluate                            CRAN (R 3.6.0) 2019-05-28       0.14         0.14      OK  
32       fansi                            CRAN (R 3.6.0) 2020-01-08      0.4.1        0.4.1      OK  
33    generics                            CRAN (R 3.6.0) 2018-11-29      0.0.2        0.0.2      OK  
34     ggrepel                            CRAN (R 3.6.0) 2019-05-07      0.8.1        0.8.2      OK *
35        glue                            CRAN (R 3.6.2) 2020-05-13      1.4.1        1.4.1      OK  
36   gridExtra                            CRAN (R 3.6.0) 2017-09-09        2.3          2.3      OK  
37      gtable                            CRAN (R 3.6.0) 2019-03-25      0.3.0        0.3.0      OK  
38         hms                            CRAN (R 3.6.0) 2020-01-08      0.5.3        0.5.3      OK  
39   htmltools                            CRAN (R 3.6.0) 2019-10-04      0.4.0        0.5.0      OK *
40 htmlwidgets                            CRAN (R 3.6.0) 2019-10-08      1.5.1        1.5.1      OK  
41    httpcode                            CRAN (R 3.6.2) 2020-04-10      0.3.0        0.3.0      OK  
42        httr                            CRAN (R 3.6.0) 2019-08-05      1.4.1        1.4.1      OK  
43      inline                            CRAN (R 3.6.0) 2018-05-18     0.3.15       0.3.15      OK  
44    jsonlite                            CRAN (R 3.6.0) 2020-02-02      1.6.1        1.7.0      OK *
45       knitr                            CRAN (R 3.6.0) 2020-02-06       1.28         1.29      OK *
46   lifecycle                            CRAN (R 3.6.0) 2020-03-06      0.2.0        0.2.0      OK  
47         loo                            CRAN (R 3.6.0) 2019-03-13      2.1.0        2.2.0      OK *
48    magrittr                            CRAN (R 3.6.0) 2014-11-22        1.5          1.5      OK  
49     munsell                            CRAN (R 3.6.0) 2018-06-12      0.5.0        0.5.0      OK  
50     packrat                            CRAN (R 3.6.0) 2018-11-14      0.5.0        0.5.0      OK  
51      pillar                            CRAN (R 3.6.2) 2020-05-05      1.4.4        1.4.4      OK  
52       pingr                            CRAN (R 3.6.0) 2019-10-21      2.0.0        2.0.1      OK *
53    pkgbuild                            CRAN (R 3.6.1) 2019-10-09      1.0.6        1.0.8      OK *
54   pkgconfig                            CRAN (R 3.6.0) 2019-09-22      2.0.3        2.0.3      OK  
55         png                            CRAN (R 3.6.0) 2013-12-03      0.1-7        0.1-7      OK  
56 prettyunits                            CRAN (R 3.6.1) 2020-01-24      1.1.1        1.1.1      OK  
57       purrr                            CRAN (R 3.6.0) 2019-10-18      0.3.3        0.3.4      OK *
58          R6                            CRAN (R 3.6.0) 2019-11-12      2.4.1        2.4.1      OK  
59     rematch                            CRAN (R 3.6.0) 2016-04-21      1.0.1        1.0.1      OK  
60       rlang                            CRAN (R 3.6.2) 2020-05-02      0.4.6        0.4.6      OK  
61   rprojroot                            CRAN (R 3.6.0) 2018-01-03      1.3-2        1.3-2      OK  
62   rsconnect                            CRAN (R 3.6.0) 2019-07-22     0.8.15       0.8.16      OK *
63  rstudioapi                            CRAN (R 3.6.1) 2020-02-07       0.11         0.11      OK  
64      scales                            CRAN (R 3.6.0) 2019-11-18      1.1.0        1.1.1      OK *
65 sessioninfo                            CRAN (R 3.6.0) 2018-11-05      1.1.1        1.1.1      OK  
66      slickR                                     local 2020-02-28   0.5.0001        0.4.9      OK *
67      tibble                            CRAN (R 3.6.2) 2020-04-20      3.0.1        3.0.1      OK  
68  tidyselect                            CRAN (R 3.6.2) 2020-05-11      1.1.0        1.1.0      OK  
69   triebeard                            CRAN (R 3.6.0) 2016-08-04      0.3.0        0.3.0      OK  
70        utf8                            CRAN (R 3.6.0) 2018-05-24      1.1.4        1.1.4      OK  
71       vctrs              Github (r-lib/vctrs@504ec96) 2020-06-02      0.3.1        0.3.1      OK  
72      whoami                            CRAN (R 3.6.0) 2019-03-19      1.3.0        1.3.0      OK  
73       withr                            CRAN (R 3.6.0) 2018-03-15      2.1.2        2.2.0      OK *
74        xfun                            CRAN (R 3.6.0) 2020-01-13       0.12         0.15      OK *
75        yaml                            CRAN (R 3.6.0) 2020-02-01      2.2.1        2.2.1      OK  
76 addressable Github (ropenscilabs/addressable@d04bccf) 2020-06-02   0.0.1.91         <NA>    <NA> *
77     cchecks     Github (ropenscilabs/cchecks@df3c80c) 2020-06-02   0.1.8.94         <NA>    <NA> *
78    craninfo                                     local 2020-06-07      0.0.1         <NA>    <NA> *
79        curl                            CRAN (R 3.6.0) 2019-12-02        4.3         <NA>    <NA> *
80    processx                            CRAN (R 3.6.1) 2020-02-09      3.4.2         <NA>    <NA> *

from slickr.

ahdee avatar ahdee commented on June 12, 2024

@yonicd thanks! Sorry I was a bit busy yesterday to post an example. However I would've done the same. Its showing up now. I think the issue was that I was not activating the arrows as you mentioned previously. But it works when the arrows are pushed. I'm wondering now if there is an option in the setting to activate the first slide? A side question. Is there anyway to make the arrows bigger or with different icon?

opts_dot_number <- settings(
    initialSlide = 0,
    slidesToShow = 1,
    slidesToScroll = 1,
    focusOnSelect = TRUE, # I wonder if there is an option for auto load?
     arrows = T, ## bigger arrows or icon? 
    dots = TRUE
    )

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024

I am having the same issue. i have 3 caroussels behind tabsets, and they all appear empty. The only way to populate it with a first picture is to click on the right arrow. This is undesirable as most users won't understand it.

Is there a small piece of JS code that can be inserted into the .Rmd that would simulate that first click event?

The page is published here and the code is below:

--- 
title: "Locus of Centers of Ellipse-mounted Triangles "
author: Dan Reznik and Iverton Darlan
date: July, 2020
output:
    bookdown::html_document2:
      theme: cosmo
      css: style.css
      number_sections: no
link-citations: yes
bibliography: [elliptic_billiards_v2.bib,authors_rgk_v1.bib]
csl: computer.csl
---
```
```{r,echo=F}
knitr::opts_chunk$set(
  cache=T,
  collapse=T,
  comment="#>",
  dpi=300,
  fig.align="center",
  out.width='100%'
)
```

```{r,echo=F,message=F,cache=F,warning=F}
library(tidyverse)
library(fs)
library(slickR)
library(knitr)
source("util.R")
```

# Loci {.tabset}

Consider an ellipse with $a,b$ semi-axes. Now consider a triangle $T$ with vertices ${V_1}{V_2}{V_3}$ where ${V_1}{V_2}$ are held fixed on the ellipse's:

1. foci
1. left and right vertices
1. top and bottom vertices
1. left and top vertices

Shown below are the loci of triangle centers of $T$ ($X_1$=Incenter, $X_2$=Barycenters, etc., after Kimberling [@etc]) over all $V_3(t)=[a\cos(t),b\sin(t)]$ on the ellipse.

To view the pictures below, select a tab (for a particular ellipse aspect ratio $a/b$) and click on the caroussel's right arrow to initialize it.

```{r,eval=F,include=F}
dir_ls("locus_single_vtx_150") %>% as.character %>% length
```

## a=1.5 {-}

```{r,echo=F}
g_fnames <- as.character(dir_ls("locus_single_vtx_150")) %>% str_c(g_url,"/",.)
slickR(
    g_fnames,
    height=600,
    # width = 800,
    width='90%',
    slideType = 'img-lazy') + 
  slickR::settings(fade=T,adaptiveHeight=T,
                   lazyLoad = 'ondemand',
                   speed=50)
```

## a=2.0 {-}

```{r,echo=F}
g_fnames <- as.character(dir_ls("locus_single_vtx_200")) %>% str_c(g_url,"/",.)
slickR(
    g_fnames,
    height=600,
    # width = 800,
    width='90%',
    slideType = 'img-lazy') + 
  slickR::settings(fade=T,adaptiveHeight=T,
                   lazyLoad = 'ondemand',
                   speed=50)
```

## a=3.0 {-}

```{r,echo=F}
g_fnames <- as.character(dir_ls("locus_single_vtx_300")) %>% str_c(g_url,"/",.)
slickR(
    g_fnames,
    height=600,
    #width = 800,
    width='90%',
    slideType = 'img-lazy') + 
  slickR::settings(fade=T,adaptiveHeight=T,
                   lazyLoad = 'ondemand',
                   speed=50)
```

# Conclusions

Go back to [main page](index.html).

`r if (is_html_output()) '# References'`

from slickr.

yonicd avatar yonicd commented on June 12, 2024

Thanks for adding the comment, I’ll dig into it to see what can be done

from slickr.

yonicd avatar yonicd commented on June 12, 2024

@dan-reznik that page you linked to initialized all the carousels for me (I didn’t see any tabs though)

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024

from slickr.

yonicd avatar yonicd commented on June 12, 2024

i see it now. thanks for updating that.

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024

from slickr.

yonicd avatar yonicd commented on June 12, 2024

javascript may be a bit tricky because you would need to know the slick sliders id up front and the way the id's are set up now by default the have a random stub to avoid conflicts in multiple slider outputs in the same html doc output.

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024

from slickr.

yonicd avatar yonicd commented on June 12, 2024

one solution is this (@ahdee you were asking about this too):

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100) + 
  slickR::settings(autoplay = TRUE,autoplaySpeed = 1000)
```

it will force the slider to start up. the defaults of the slider are set to pause the autoplay when the mouse is hovering over any part of the slider.

from slickr.

yonicd avatar yonicd commented on June 12, 2024

regarding the name. you can give unique stems for the id (ie instead of baseDiv) then use regex in the js to manipulate the slick

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024

from slickr.

ahdee avatar ahdee commented on June 12, 2024

The very least I wonder if its possible to make the arrows BIGGER so that its very obvious. May be a solution is to just put put a default message - Something like please scroll right to see data?

from slickr.

dan-reznik avatar dan-reznik commented on June 12, 2024

from slickr.

yonicd avatar yonicd commented on June 12, 2024

@dan-reznik here are three tabs first is regular other ones have autoplay.

---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r}
library(slickR)
```

## Results {.tabset}

### Plots

We show a scatter plot in this section.

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```

### Tables 1

We show the data in this tab.

```{r}
slickR::slickR(obj = nba_team_logo$uri,
               height = 100) + 
  slickR::settings(autoplay = TRUE,
                   autoplaySpeed = 1000)
```

### Tables 2

We show the data in this tab.

```{r}
slickR::slickR(obj = nba_team_logo$uri,
               height = 100) + 
  slickR::settings(autoplay = TRUE,
                   autoplaySpeed = 1000)
```

from slickr.

yonicd avatar yonicd commented on June 12, 2024

@ahdee to manipulate the arrows you have two arguments in the settings:

slickR::settings(prevArrow = '<button type="button" class="slick-prev">Previous</button>',
                   nextArrow = '<button type="button" class="slick-next">Next</button>')

you would need to have some css knowledge to be able to use this, which is beyond the scope of this package.

from slickr.

RLesur avatar RLesur commented on June 12, 2024

@yonicd I would try to detect when a tab is activated to refresh the slick element. For instance,

---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r}
library(slickR)
```

## tab1 {.tabset}

### My first slider

This is the first slider

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```

### tab2

This is the second slider

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```

```{js, echo=FALSE}
$('body').on('shown.bs.tab', function(e) {
  $(e.target).parents('.tabset')
             .find('.active .slick-slider')
             .each(function() {
               this.slick.setPosition();
              });
});
```

I'm sure this can be improved.

from slickr.

yonicd avatar yonicd commented on June 12, 2024

thanks @RLesur that works! I like your find a bit more than the one i hacked together :)

here is another example that @daattali helped me construct

---
title: "Untitled"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r}
library(slickR)
```

## Results {.tabset}

### Plots

We show a scatter plot in this section.

```{r}
slickR::slickR(obj=nba_team_logo$uri,height = 100)
```

### Tables

We show the data in this tab.

```{r}
slickR::slickR(obj = nba_team_logo$uri,height = 100)
```


### Tables 2

We show the data in this tab.

```{r}
slickR::slickR(obj = nba_team_logo$uri,height = 100)
```

```{js,echo = FALSE}
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (event) {
  $.each($("[class^=baseDiv]"),function(key,value) {
  value.slick.setPosition()
  })
})

```

from slickr.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.