How did they do this?

Forum Moderators: open

Message Too Old, No Replies

How did they do this?

Need help determining the best technology for this...

mida68

4:11 am on Dec 19, 2003 (gmt 0)

I normally create pretty basic sites and stay away from frames but I've found a fairly subtle feature that I'd like to implement.

I found a template (that I don't want to purchase ;-) showing an internal scrolling window:

(hope this is OK to demonstrate my question)
Here is the template:
http://www.templatemonster.com/show.php?templ=3100&type=1&order=date&search_words=liquor
&from_=any&to=any

Not only does this page have an internal scrolling window but it's stylized to match the design.

How do you think they did this?
What is the best approach for this feature?

I'm assuming there is more than one way and, of course, I want to be as browser-compatible as possible.

THANKS!

[edited by: DaveAtIFG at 5:45 am (utc) on Dec. 19, 2003]
[edit reason] DeLinked URL [/edit]

TheDave

4:33 am on Dec 19, 2003 (gmt 0)

It could be a div with style="overflow: scroll; <scrollbar colour defs>"

mida68

5:47 pm on Dec 19, 2003 (gmt 0)

Hmmm, I kind of get what you are saying but I have little experience with this kind of thing and wouldn't be able to take what you have and actually create a similar window for my own site.

Do you or anyone else know of of a tutorial that you can point me to? I think you can do this with Javascript and/or DHTML (not sure exactly what that means) but I want to make sure I don't lock up anyone's browser, etc..

Thanks!

jimbeetle

6:11 pm on Dec 19, 2003 (gmt 0)

You can do it with something as simple as an iframe, though I'm not sure about styling the scroll bars. As for browsers, I think Netscape only started supporting iframes in v6.

defanjos

6:14 pm on Dec 19, 2003 (gmt 0)

That could be Flash also.

mida68

6:50 pm on Dec 19, 2003 (gmt 0)

I'm thinking of using an IFrame which I think you can stylize using CSS, not sure. If a browser does not support it, what would happen, a blank area on the page?

Elijah

7:47 pm on Dec 19, 2003 (gmt 0)

Instead of an iframe you could use a scrolling div.
Here's an example of what you could do:


<html>
<head>
<title>Div Scrolling Example</title>
<style type="text/css">
.scrolling {
width:232px;
height:255px;
overflow: auto;
scrollbar-face-color: #009CFF;
scrollbar-highlight-color: #00CCFF;
scrollbar-3dlight-color: #0066FF;
scrollbar-darkshadow-color: #0000FF;
scrollbar-shadow-color: #0033FF;
scrollbar-arrow-color: #FFFF00;
scrollbar-track-color: #CCCCCC;
}
</style>
</head>
<body>
<div class="scrolling">
<p>This will scroll.</p><p>So will this.</p>
<p>See it's working!</p><p>Nice isn't it?</p>
<p>This will scroll.</p><p>This will scroll.</p>
<p>This will scroll.</p><p>This will scroll.</p>
<p>This will also scroll</p>
</div>
</body>
</html>

You can then change the colors to fit your needs.
Note: Styling the scrollbars only works in Internet Explorer 5.5 and above.

Just an idea ;)

Elijah

mida68

8:48 pm on Dec 19, 2003 (gmt 0)

Yippee! That is wonderful. Thanks for doing my homework ;-)

I will try to fiddle with he colors and attributes (now I know enough to look this stuff up on the web to learn more!) and see what I can come up with.

THANKS!

Aditya Dugar

3:02 pm on Dec 25, 2003 (gmt 0)

They have used an iframe

Calling an external html file with loads of css.

My first post here.

Webmasterworld here i am!