MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-Todoist scrolling list (Marquee)

    Scheduled Pinned Locked Moved Development
    3 Posts 2 Posters 772 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • MZ-BERM Offline
      MZ-BER
      last edited by

      Hello there - I’m using the MMM-Todoist to present my Alexa shopping list. By the end of the week, the list is getting extremely long. I’d like to have the list at some point (e.g. 10 entries) to scroll from the top to botton through the list. I know there’s a nice feature you can do with CSS: marquee.

      Here’s an example that’s purely (I guess) with CSS : http://jsfiddle.net/vn2Vu/7/

      Do you know guys if that is something that can be done with MMM-Todoist?

      I’m medium to CSS and JS but willing to learn it more and more 💪

      Thank you very much in advance!

      2021-10-24_16-45-19.jpg

      1 Reply Last reply Reply Quote 0
      • MZ-BERM Offline
        MZ-BER
        last edited by MZ-BER

        Quick update on this. Maybe someone else is looking for a similar way to automatically scroll through the list. You can added following code to the custom.css file:

        /* MMM-Todoist Scrolling Animation */
        .MMM-Todoist .divTable {
               white-space: nowrap;
               overflow: hidden;
               height:150px;   /* increase or decrease the height of the scrolling area*/
               box-sizing: border-box;
        }
        
        .MMM-Todoist .divTable div {
               -webkit-animation: divTable 25s linear infinite alternate;   /* adjust the seconds for the scrolling speed */
        }
        
        @-webkit-keyframes divTable {
              0% { -webkit-transform: translateY(5%); }
            100% { -webkit-transform: translateY(-70%); }
        }
        

        So the shopping or ToDo list is scrolling from the top to the bottom and back to the top again. Here an example: http://jsfiddle.net/51d4umwo/1/

        S 1 Reply Last reply Reply Quote 1
        • S Away
          sdetweil @MZ-BER
          last edited by

          @MZ-BER lucky it’s a div table and not html table

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • 1 / 1
          • First post
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Sam, technical setup by Karsten.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy