?
Solved

Scrolling text boxes, with custom scroll bars

Posted on 2006-04-26
14
Medium Priority
?
19,216 Views
Last Modified: 2011-08-18
I have several pages I need scrolling text boxes on. They need to be a percise size because they fit in the middle of a page. How do I do this in dreamweaver? I have Dreamweaver MX, do I do it in a Layer, or does it need to be frames? A Form Object? I'm just not sure. Also is there a way I can make custom Scroll bars (color and shape?) I will post the example at www.douganfarms.com/ahi/example.html
Thaks in Advance, John
0
Comment
Question by:douganfarms
  • 7
  • 5
  • 2
14 Comments
 

Author Comment

by:douganfarms
ID: 16545512
Skip the custom scroll bars, I did some research and I don't think it's worth the work.THanks John
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16546118
John,

You can do a couple of things:

CSS allows some control over the scroll bars and size of divs.

Flash allows a TON of it.  You may want to investigate creating a flash movie that holds the scrolling text box.  It sounds like the best possible solution.
0
 

Author Comment

by:douganfarms
ID: 16546307
Flash is not really an option, as the client wants to be able to content manage the scrolling text box. How or where do I find out more about the CSS solution? Thanks, John
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16546386
Coloring and controllable elements of scrollbars:

http://www.htmlite.com/CSS011.php
http://rainbow.arch.scriptmania.com/css/css_scrollbars.html

To create an inline scrolling box:

http://www.quackit.com/css/css_scrollbars.cfm

Combine the lesson in the last link with the information in the first two to get the maximum effect.

Flash could still be an option for you...There is nothing that says the content of the scroll box has to be hard-coded into Flash.  ActionScript is perfectly capable of calling an external file or database and reading the text of it into the movie.  In fact, that is how most Flash-based sites work.  Someone creates the page elements (navigation, graphics, animations, sound) that surround a content area.  The content area pull in text from external files or a database that someone other than the flash developer can control.

If you want the specifics, post a question in the Flash TA or just search it...this is a common task.
0
 
LVL 8

Expert Comment

by:klykken
ID: 16556132
Set a specific height and width on your layer, and then set overflow to auto or scroll.
0
 

Author Comment

by:douganfarms
ID: 16567499
Klykken, howdo I set speciftc height and width to the layer? Then can I table the whole page if there are no layer overlaps?
Thnaks, John
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16569612
douganfarms,

read the third link I posted:

<style>
.contentBox {
      display:block;
      border-width: 1px;
      border-style: solid;
      border-color: 000;
      padding:5px;
      margin-top:5px;
      width:200px;
      height:50px;
      overflow:scroll
      }
</style>
<div class="contentBox">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
0
 

Author Comment

by:douganfarms
ID: 16569862
Jason 1178, thank you for the links, I did read them. I tried the style solution in dreamweaver invironment, and if I put all the text in the box expands on the page, and when I say "convert to 3.0 compatible" layers to tables. It says I can't do it because layer 18 overlaps layer 19? Should I first build the page, tabel it then paste the text?
John
0
 
LVL 8

Expert Comment

by:klykken
ID: 16570435
If you want to support version 3 browers then forget about it.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16570670
You don't want to convert that div to a table cell, it loses the properties of the div.  Just stick the div in the cell and set the size and it should pull the size of the cell to match.

Set up the layers and covert to a table so the layout is the way you want it.  Then replace the cell contents with the div and add the style.  That ought to achieve the effect you are looking for.

Can you post a link so I can take a look at what you are trying to do?  Hopefully we are on the same page here.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16570671
Whoops

Forget about posting the link.  I forgot you did it in the original question
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 16570706
John,

Here's sort of what I mean.  I may have picked the wrong cell to fix (when they are named layer1 through layer20, that can happen):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ahi Sushi</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style>
.contentBox {
     display:block;
     border-width: 1px;
     border-style: solid;
     border-color: 000;
     padding:5px;
     margin-top:5px;
     width:160px;
     height:305px;
     overflow:scroll
     }
</style>
</head>
<body onLoad="MM_preloadImages('images/homdrink_nav2.gif','images/homdelivery_nav2.gif','images/hompress_nav2.gif','images/homeabout_nav2.gif','images/hom_online2.gif','images/homfood_nav2.gif','images/food_sub_sushi2.gif','images/food_sub_lowcarb2.gif','images/food_sub_lunch2.gif','images/food_sub_dinner2.gif','images/food_sub_speacials2.gif','images/food_sub_desserts2.gif','images/food_sub_takeout2.gif','images/food_sub_sushi1.gif','images/homfood_nav1.gif')">
<div id="Layer1" style="position: absolute; left: 120px; top: 11px; width: 141px; height: 122px; z-index: 1"><a href="index.html"><img src="images/homlogo_lft.gif" width="141" height="122" border="0" /></a></div>
<div id="Layer2" style="position: absolute; left: 261px; top: 11px; width: 102px; height: 88px; z-index: 2"><a href="index.html"><img src="images/homlogo_rt.gif" width="102" height="88" border="0" /></a></div>
<div id="Layer3" style="position: absolute; left: 540px; top: 62px; width: 60px; height: 37px; z-index: 3"><a href="sushi.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav2.gif',1)"><img src="images/homfood_nav2.gif" alt="food menue" name="Image12" width="60" height="37" border="0" id="Image12" /></a></div>
<div id="Layer4" style="position: absolute; left: 600px; top: 62px; width: 60px; height: 37px; z-index: 4"><a href="drink.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav1.gif','Image8','','images/homdrink_nav2.gif',1)"><img src="images/homdrink_nav1.gif" alt="ahi sushi drinks" name="Image8" width="60" height="37" border="0" id="Image8" /></a></div>
<div id="Layer5" style="position: absolute; left: 660px; top: 62px; width: 60px; height: 37px; z-index: 5"><a href="delivery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav1.gif','Image9','','images/homdelivery_nav2.gif',1)"><img src="images/homdelivery_nav1.gif" alt="ahi sushi delivery" name="Image9" width="60" height="37" border="0" id="Image9" /></a></div>
<div id="Layer6" style="position: absolute; left: 720px; top: 62px; width: 60px; height: 37px; z-index: 6"><a href="press.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav1.gif','Image10','','images/hompress_nav2.gif',1)"><img src="images/hompress_nav1.gif" alt="ahi sushi press section" name="Image10" width="60" height="37" border="0" id="Image10" /></a></div>
<div id="Layer7" style="position: absolute; left: 780px; top: 62px; width: 40px; height: 37px; z-index: 7"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/homfood_nav1.gif','Image11','','images/homeabout_nav2.gif',1)"><img src="images/homabout_nav1.gif" alt="about ahi sushi" name="Image11" width="40" height="37" border="0" id="Image11" /></a></div>
<div id="Layer8" style="position: absolute; left: 820px; top: 62px; width: 142px; height: 93px; z-index: 8"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','images/hom_online2.gif',1)"><img src="images/hom_online1.gif" alt="online lunch menue" name="Image14" width="142" height="93" border="0" id="Image14" /></a></div>
<div id="Layer9" style="position: absolute; left: 261px; top: 99px; width: 132px; height: 35px; z-index: 9"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi2.gif',1)"><img src="images/food_sub_sushi2.gif" alt="ahi sushi and sashimi menu" name="Image13" width="132" height="35" border="0" id="Image13" /></a></div>
<div id="Layer10" style="position: absolute; left: 393px; top: 99px; width: 71px; height: 35px; z-index: 10"><a href="lowcarb.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image15','','images/food_sub_lowcarb2.gif',1)"><img src="images/food_sub_lowcarb1.gif" alt="low carb menu" name="Image15" width="71" height="35" border="0" id="Image15" /></a></div>
<div id="Layer11" style="position: absolute; left: 464px; top: 99px; width: 54px; height: 35px; z-index: 11"><a href="lunch.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image16','','images/food_sub_lunch2.gif',1)"><img src="images/food_sub_lunch1.gif" alt="ahi sushi lunch menu" name="Image16" width="54" height="35" border="0" id="Image16" /></a></div>
<div id="Layer12" style="position: absolute; left: 518px; top: 99px; width: 60px; height: 35px; z-index: 12"><a href="dinner.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image17','','images/food_sub_dinner2.gif',1)"><img src="images/food_sub_dinner1.gif" alt="ahi sushi dinner menu" name="Image17" width="60" height="35" border="0" id="Image17" /></a></div>
<div id="Layer13" style="position: absolute; left: 578px; top: 99px; width: 72px; height: 35px; z-index: 13"><a href="specials.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image18','','images/food_sub_speacials2.gif',1)"><img src="images/food_sub_speacials1.gif" alt="ahi sushi speacials menu" name="Image18" width="72" height="35" border="0" id="Image18" /></a></div>
<div id="Layer14" style="position: absolute; left: 650px; top: 99px; width: 70px; height: 35px; z-index: 14"><a href="desserts.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image19','','images/food_sub_desserts2.gif',1)"><img src="images/food_sub_desserts1.gif" alt="ahi sushi desserts menu" name="Image19" width="70" height="35" border="0" id="Image19" /></a></div>
<div id="Layer15" style="position: absolute; left: 720px; top: 99px; width: 100px; height: 35px; z-index: 15"><a href="takeout.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/food_sub_sushi1.gif','Image20','','images/food_sub_takeout2.gif',1)"><img src="images/food_sub_takeout1.gif" alt="ahi sushi take out menu" name="Image20" width="100" height="35" border="0" id="Image20" /></a></div>
<div id="Layer16" style="position: absolute; left: 261px; top: 134px; width: 15px; height: 305px; z-index: 16"><img src="images/food_lft_pic.gif" width="15" height="305" /></div>
<div id="Layer17" style="position: absolute; left: 660px; top: 134px; width: 160px; height: 305px; z-index: 17">
<div class="contentBox">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>

</div>
<div id="Layer18" style="position: absolute; left: 120px; top: 439px; width: 836px; height: 120px; z-index: 18"><img src="images/food_bottom_pic.jpg" width="836" height="120" /></div>
</body>
</html>

By replacing the image in layer17 with the sample from the link, you get a scrolling text box with that content.
0
 

Author Comment

by:douganfarms
ID: 16597885
Thanks, Jason 1178
I did get it to work, you can see the final product in about a week at http://www.ahisushi.com
Thanks everyone for your help, John
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16597926
Great!
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Is your organization moving toward a cloud and mobile-first environment? In this transition, your IT department will encounter many challenges, such as navigating how to: Deploy new applications and services to a growing team Accommodate employee…
In this video I will demonstrate how to set up Nine, which I now consider the best alternative email app to Touchdown.
Suggested Courses

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question