Skip navigation
Currently Being Moderated

How can I make a scrolling text box?

Apr 11, 2012 1:43 PM

How can I make a scrolling text box?  So when people read my stories all they have to do is move the bar/arrow to read the test.

 

Message was edited by: Corey@Adobe Edited title to add to FAQ

 
Replies
  • Currently Being Moderated
    Apr 11, 2012 1:23 PM   in reply to twtybrd678

    I had the same problem... so i created an object and inserted an HTML code. This code:

    <style type="text/css">

    .scroll {

              padding: 5px;

              height: 277px;

              width: 290px;

              overflow-y: scroll;

              overflow-x: hidden;;}

    </style>

    <div class="scroll">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis elit et dui scelerisque id condimentum tellus mollis. Phasellus varius augue at lectus egestas sit amet dapibus sem interdum. Vivamus aliquet augue vitae magna porttitor eget sagittis quam convallis. Integer aliquam sodales odio vel aliquet. Suspendisse non orci ut quam ultricies iaculis vitae vel neque. Sed sit amet neque a dui adipiscing convallis. Nam consectetur commodo arcu, eget feugiat risus tempus non. Suspendisse dignissim porta ue vulputate luctus tincidunt. Duis quis tortor massa, sed scelerisque elit. Nam id vulputate orci. Morbi a porta lorem. Nunc elementum viverra sem quis blandit. Cras vel eros erat. Aliquam erat volutpat. Sed id odio nec erat viverra ultricies vel ac mi.</p>

    </div>

     

     

    One more thing! If you want to see the both scroll bars just change the hidden to scroll

     

    I hope it helps.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 2:03 PM   in reply to twtybrd678

    Muse does not currently have this feature. As a workaround please use the Object > Insert HTML... feature to insert an HTML code snippet that accomplishes a scrolling text container.

     

    In the Get Satisfaction archive, fuddlebunker created the following snippet which is similar to Welddar's response:

     

    <style type="text/css">
         .scroll {      
             padding: 10px;      
             height: 280px;
             width: 580px; 
             overflow: scroll;
         }
    </style>

    <div class="scroll">     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
           Aliquam venenatis elit et dui scelerisque id condimentum
           tellus mollis. Phasellus varius augue at lectus egestas
           sit amet dapibus sem interdum. Vivamus aliquet augue vitae
           magna porttitor eget sagittis quam convallis. Integer aliquam
           sodales odio vel aliquet. Suspendisse non orci ut quam
           ultricies iaculis vitae vel neque. Sed sit amet neque a dui
           adipiscing convallis. Nam consectetur commodo arcu, eget
           feugiat risus tempus non. Suspendisse dignissim porta risus,
           eu lobortis metus facilisis non. Mauris id lacus eu tellus
           porttitor sodales in sed enim. Mauris euismod libero sed mi
           ultricies ac vehicula tellus tristique. Donec lacus tellus,
           varius sit amet mattis at, feugiat sed ante. Duis auctor
           iaculis aliquet. Vivamus fringilla nisi non eros congue
           dapibus. Praesent quis molestie mauris. Donec adipiscing
           dui ut elit interdum eu scelerisque sem pellentesque.
        </p>     <p>Nulla pharetra nisl adipiscing ipsum fringilla at auctor
           ipsum posuere. Etiam ac dolor turpis. Nam non ligula purus.
           In metus nisl, ullamcorper ac sodales quis, molestie id leo.
           Etiam faucibus dui at eros molestie interdum. Quisque quis
           eros vel urna fermentum iaculis. Quisque vestibulum erat in
           risus lobortis malesuada rhoncus purus vestibulum. Integer
           vehicula ultrices quam, ac faucibus dui tristique sed. Duis
           nec felis mauris. Morbi non neque turpis, at lobortis mauris.
           Fusce a turpis sit amet leo ullamcorper semper et dignissim
           sem. Phasellus lacinia sodales massa, eget egestas velit
           malesuada at. Quisque feugiat erat in dolor eleifend ut
           convallis ante vehicula. Aenean a turpis neque, vitae eleifend
           augue. Class aptent taciti sociosqu ad litora torquent per
           conubia nostra, per inceptos himenaeos. Nunc porta, massa
           at viverra tincidunt, quam sem pellentesque felis, sed
           mattis lectus arcu eu turpis.
        </p>     <p>Sed rutrum iaculis vulputate. Duis sed lectus lacus. Etiam
           faucibus, libero id placerat congue, turpis leo varius magna,
           vitae dapibus neque libero eu elit. Vivamus quis urna sed
           nibh elementum sodales quis in dolor. Sed ut metus ut metus
           facilisis fringilla vel sit amet mi. Etiam placerat lectus
           sed nibh bibendum vulputate non rhoncus est. Quisque vulputate
           luctus tincidunt. Duis quis tortor massa, sed scelerisque elit.
           Nam id vulputate orci. Morbi a porta lorem. Nunc elementum
           viverra sem quis blandit. Cras vel eros erat. Aliquam erat
           volutpat. Sed id odio nec erat viverra ultricies vel ac mi.
         </p> </div>
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2012 11:57 AM   in reply to Corey@Adobe

    is there a way to customize the scrollbars? the sample is fine, but the scroll bars have that windows 95 feel about them

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2012 12:04 PM   in reply to buccigraphic

    never mind. i guess the scroll bars are os dependent

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2012 1:57 PM   in reply to Corey@Adobe

    Okay, so now how do I edit the type style, headers, font and such? 

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 16, 2012 6:54 PM   in reply to Plonta Creative

    I too wondered this. I tried inserting css code and it didn't work. Then I nocticed that when I clicked on the new html box, my option bar (where you set fill, stroke, etc), had an option for text on the far right side. The pallet with all the different options (like where you get your widgets) also has the ability to change your text characteristics.  I was able to change the font, size and color of the text in my html box using the standard text options.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2012 3:13 AM   in reply to annonack

    How can i place a list of brands that is already in an accordian widget inside a scrollbar, and keep the links to each brand?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2012 10:55 AM   in reply to Jakobsen2

    You would have to use the html object. Use the code that is above in this thread to create the scroll bars, and then instead of the paragraphs of text information insert the html code for each of your links.

     

    <a href="http://www.brand.com">Brand name</a>

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 4, 2012 11:14 PM   in reply to annonack

    ah, thats loads of work ... each brand in the list have a link to a new page that I have set up in Muse ... but thanks for telling me how

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 6, 2012 12:42 PM   in reply to Jakobsen2

    you can override the os scroll bars using some JS. Here is a tutorial I found on the net. It seems really simple actually. You can even make your own Scroll bar if you are familiar with Photoshop etc.

     

    http://serifaddons.com/uniquescrollbar.html

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 22, 2013 3:23 AM   in reply to Corey@Adobe

    That's pretty easy; thanks.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 29, 2013 2:11 PM   in reply to dutchKALKY

    How can you change the color on the scrollbar?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 7, 2014 2:00 AM   in reply to Welddar

    I used this code for more than one text box in one page, but the width of these boxes are changing to the one I made last.

    Is it possible to have a different width for different boxes?

     

    I made these two text boxes:

     

    <style type="text/css">

    .scroll {

              padding: 5px;

              height: 450px;

              width: 460px;

              overflow-y: scroll;

              overflow-x: hidden;;}

    </style>

    <div class="scroll">

    <p>

    text1

    </p>

    </div>

     

    and:

     

    <style type="text/css">

    .scroll {

              padding: 5px;

              height: 200px;

              width: 667px;

              overflow-y: scroll;

              overflow-x: hidden;;}

    </style>

    <div class="scroll">

    <p>

    text2

    </p>

    </div>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points