Skip navigation
ncee
Currently Being Moderated

Make or add scrolling window?

Apr 30, 2012 2:32 PM

Is there a way to make or add a scrolling feature to a window? We have a client who wants to add testimonials

but they don't want a window that is 10" long in the page.

 

I will be TRYING to do this from a page made (I believe) with Site Builder?

 

I'm on a mac using Dreamweaver CS4

 

Skip

 
Replies
  • Currently Being Moderated
    Apr 30, 2012 5:34 PM   in reply to ncee

    Something like this JQuery script might do the trick: http://logicbox.net/jquery/simplyscroll/custom.html

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,729 posts
    Oct 15, 2010
    Currently Being Moderated
    May 1, 2012 1:44 AM   in reply to ncee

    Why not try a 'randomizer' script to display random testimonials every time the page loads? Your JS will be something like this:

     

    // display random testimonial

    var list = $(".testimonials ul li").toArray();

    var elemlength = list.length;

    var randomnum = Math.floor(Math.random()*elemlength);

    var randomitem = list[randomnum];

    $(randomitem).css("display", "block");

    Your HTML will be something like this:

    <div class="testimonials">

            <h2>Testimonials</h2>

            <ul>

             <li>
                <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                <p><strong>John Smith</strong></p>
              </li>
              <li>
                <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
                <p><strong>John Smith</strong></p>
              </li>
              <li>
                <p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
                <p><strong>John Smith</strong></p>
              </li>
             
           
    </ul>

             </div>

     

    Your CSS can be customized to whatever you want. Something similar to this to start with:

    .testimonials ul li {display:none;}

    .testimonials ul li strong {font-weight:bold;}

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 6:28 AM   in reply to ncee

    Lookup "jquery carousel".  There are many different variations of examples out there.  Personally I'd go back to your client and ask for an example website and just view the source code of that site to see what they are using or do the Google search and find something as close to that as you can.

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 6:59 AM   in reply to ncee

    If you don't want anything fancy, just basic, use a simple div whose overflow has been set to auto (see example below)

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <style type="text/css">

    #scroll {

        width: 350px;

        height: 200px;

        overflow: auto;

    }

    </style>

    </head>

     

    <body>

    <div id="scroll">

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    <p>Scroll this text at 200px high</p>

    </div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 7:02 AM   in reply to ncee
     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 7:25 AM   in reply to ncee

    ncc download code from here weblink

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,729 posts
    Oct 15, 2010
    Currently Being Moderated
    May 1, 2012 7:58 AM   in reply to ncee

    Have you placed the CSS file in your filepath? Thats the file which defines 'overflow' for your scrolling viewPort.

    <link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>

     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 8:13 AM   in reply to ncee

    Thats most likey because you have not downloaded the two jquery scripts you need to make it work.

     

     

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>

     

     

     

    Download the COMPLETE zip file from the link below:

    http://baijs.nl/tinyscrollbar/example.zip

     
    |
    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