Vertical Scroll Bar - Page 3 - Post...

User 187934 Photo


Senior Advisor
20,268 posts

Phil wrote:
I have wanted something like a frame that scrolls in VSD for along time but gave up until I read this post. Paintbrush, can you or anybody please explain to me exactly how you do this? Being a rank amateur I’m lost where you say “I use the editor to create the divs”. I use the html tool often so I am familiar with that part, I think. I hope I conveyed what I’m asking makes sense.

Phil


Phil
This example makes use of an Iframe. There's a scrolling <div> also that I'm sure paintbrush will post an example of.

Make the page that will be the content for the scrolling box. name that page "scroll2" per my example. You can make it what ever you want.
Now in VSD on the page you would like the scroll place this code inside an HTML box in the body html.
<IFRAME SRC="http://mywebsite.com/scroll2.html" WIDTH=700 HEIGHT=500 scrolling=auto> If you can see this, your browser doesn't support IFRAMES. </IFRAME>


You can adjust height and width to your liking. Hope this is enough info. Post back if you need any more help.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 117201 Photo


Registered User
58 posts

Hi Eric,

Thank you for the quick reply, but I’m still a little lost (ok I’m really lost and my compass is broken). I’m redesigning my daughter’s web site using a test url http://www.americancamcast.com/wip/ on this page http://www.americancamcast.com/wip/whois.html is where I would like to have a scrolling frame (I would like all the text on the right to be in the scrolling frame).

What do I have to have in the HTML box on the page and what do I have to add using the HTML editor?

Phil
User 187934 Photo


Senior Advisor
20,268 posts

Phil In VSD create a new page that only has the text that you want in the scroll. Make the page width under page properties the same width that you want the scrolling box to be. I would make it about the same width you made your text box in vsd on http://www.americancamcast.com/wip/whois.html. Lets call this page "dirtyjentext". Now go to the page "whois" in VSD and paste this code into a HTML box by clicking the html tool on the left hand panel. Paste this code to the body html.
<IFRAME SRC="http://www.americancamcast.com/wip/dirtyjentext.html" WIDTH=300 HEIGHT=500 scrolling=auto> If you can see this, your browser doesn't support IFRAMES. </IFRAME>

You'll have to change the width to match the page width of "dirtyjentext" and adjust the height to look good on the page.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 117201 Photo


Registered User
58 posts

Hi Eric,

Thank you for the help the instructions got me on the right track. I got the scroll box working as you can see at http://www.americancamcast.com/wip/whois.html now I have to figure out the sizing and word-wrap problems in the box. But that’s a morning project right now I got to get my tired butt to bed.

Thanks again,

Phil
User 271657 Photo


Ambassador
3,816 posts

Here's a page with a scrolling div:
http://elaynas.com/services.html

Similar to an iframe, but the html/css and content was written in the CC HTML Editor then inserted in VSD with the html tool:

<style type="text/css">

<!--
div.scroll {
height: 375px;
width: 450px;
overflow: auto;
border: 3px double #827d3e;
background-color: #dee8bd;
padding: 6px;
font-family: arial;
color: #546222;
line-height: 17px;
}
-->
</style>

<div class="scroll">
<h4><b><a name="salon services">salon services</a></b></h4>
<ul>
<li>haircut and blow-dry style...40/50</li>
<li>haircut...28/35</li>
</ul>

</div>


The div file needs to be added to the site files (Edit > Add Files, browse to the div file and add it). Then use the html tool to place it on the page.

For your iframe, you also have a few other choices for appearance;
after width and height, you can put frameborder="0" (no border), if you'd rather have it blend in with the page. Also, marginwidth and marginheight (marginwidth="6") to put a little space between the text and the border - if you have a border.

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 117201 Photo


Registered User
58 posts

I really appreciate all the help I’m getting but I am getting frustrated as hell. I got the scrolling frame to show on http://www.americancamcast.com/wip/whois.html but the text formatting is terrible, it has lines with one word on it etc. I don’t know if this is a word wrap problem or what (I did copy and paste it for a word document). The scrolling frame is pointing to http://www.americancamcast.com/wip/dirtyjentext.html where the formatting looks ok.

I would like to try what Paintbrush wrote about but I don’t understand it.

Thank you for trying to help this lost individual.

Phil
User 187934 Photo


Senior Advisor
20,268 posts

Try copying the text to notepad first save it and then copy and paste it to VSD. This should strip the formatting that word is placing on the text.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,268 posts

The current width of your "dirtyjentext" is 585. and the Iframe on "whois" is 300 so you need to change the width of the "dirtyjentext" page to 300 and the text box that the text is in to something a little smaller then that Or you could increase the width of the Iframe on "whois" to match those pages. Don't sweat this we'll get it working for you.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Ambassador
3,816 posts

Phil, for the text in your iframe, make a new blank page in VSD. Make it just a bit larger than your Iframe.
I usually draw a rectangle (add shape) in the top-left corner and make it the size of the area my text will fill then put a guideline along the right edge of it and one just a few pixels in from the left. Now delete the rectangle and you have the area for your text. If you copy/paste from another document you'll need to adjust it some to make sure you don't have those dangling words (or try Eric's method, above). I usually type right into that VSD page so it looks good from the start. Be sure to change your text to whatever color/font goes with the rest of the site.

I hope that's not too confusing. The rectangle is just a 'measuring device' - if my text needs to fit an area that's 300px wide, that's what size I make the rectangle so I can tell where to put the guidelines, then I don't need the rectangle any more. :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 117201 Photo


Registered User
58 posts

Hi Eric,

I tried note pad and resizing as you suggested above, but still get the same results. I’m not giving up yet, am still trying different things.

Phil

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.