Many Freeway users, including myself have at some point wanted to create a scrollable text area with a custom scrollbar. There have been scrolling layer actions available for some time but none that provide a custom scroll bar.
As I promised, you will find a tutorial herethat will explain how to deploy a custom scroll area using divisions and Javascript that I stumbled upon in my internet searches. To be fair I did not create the code for this. I am only providing instructions on how to utilize this within Freeway.
Although I have successfully tested the tutorial pages with Safari and Firefox, I don’t guarantee this will work 100% everywhere.
Naturally I didn’t test this with IE for Windows before posting… and what a surprise, it doesn’t work right, however it does work right in Firefox 2 for Windows. If someone would care to decipher the fix to make it work with Explorer i’ll be happy to add it to the tutorial.
Great tutorial, exactly what I was looking for.
But, I can’t seem to limit the size (bottom) of the container.
Whatever “max-height” I use, it doesn’t have any effect.
It gets about the same size as the content
The scroller does work; the text hides fine at the top of the container.
Any suggestions?
Many Thanks, Erik
Yes i’ve seen this behavior when I tried following the tutorial myself. Basically the max-height is being ignored, though i’m not sure what the reason is. The way I resolved it was to remove the style from the container div, trash the style and recreate it in the style editor, then reapply the style to the container div.
As an aside, this is still a problem with IE 6 (and earlier I suspect) on Windows. The height is being ignored by IE even though other browser have no problem. I’m sure there is a way to trick IE into doing this, but no idea what that is yet.
I know IE 6 and below (not sure about 7) ignore max-width and min-
width attributes so this may also apply to the max-height value as
well. Could you use a Conditional statement to override this behavior
in IE6? Just a suggestion/guess.
Todd
On Nov 28, 2007, at 12:51 PM, chuckamuck wrote:
As an aside, this is still a problem with IE 6 (and earlier I
suspect) on Windows. The height is being ignored by IE even though
other browser have no problem. I’m sure there is a way to trick IE
into doing this, but no idea what that is yet.
I just tried this script… I did everything as indicated, and everything seems to be correct, but er, how do I copy/move the dom.drag.js file into the resource sitefolder/website???
I just tried this script… I did everything as indicated, and everything seems to be correct, but er, how do I copy/move the dom.drag.js file into the resource sitefolder/website???
You need to use a third party ftp file transfer program. Transmit is very popular and reasonably priced. Cyberduck is also popular and free.
I tested out the 13th Parallel demo in IE and it works. I then duplicated it in Freeway and got it to work. The following appears to be missing from the HEAD of your page. That code can be adjusted later if required.
It would be interesting to see if this would be the problem. The CSS can be adjusted later.
<style type="text/css">
#container {
position : absolute;
top : 10px;
left : 10px;
width : 500px;
height : 200px;
background : #EEE;
overflow : hidden;
border : 1px solid #666;
}
#content {
position : relative;
width : 490px;
left : 5px;
}
p {
font : normal 10px/14px arial,helevetica,san-serif;
}
#scrollArea {
position : absolute;
left : 515px;
top : 10px;
height : 200px;
width : 15px;
border : 1px solid #666;
overflow : hidden;
}
#scroller {
position : absolute;
top : -1px;
width : 15px;
background : #AAA;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
}
</style>
I tested out the 13th Parallel demo in IE and it works. I then duplicated it in Freeway and got it to work. The following appears to be missing from the HEAD of your page. That code can be adjusted later if required.
It would be interesting to see if this would be the problem. The CSS can be adjusted later.
Actually, that is nothing more than the CSS styling. This is exactly how the tutorial is set up without pasting in outside code. I’ll take a look at that site again to see if there is something else going on.
Hmmm… Something isn’t working, and I copied the code from the tutorial. I uploaded the code to my server using Transit, so it’s there… I saw This link back awhile ago, but I can’t duplicate it in Freeway?
I copied the Java code to a Markup item (from the tutorial), and the indents aren’t there. That’s the only thing I can see that’s the different from the example and my version…
Anybody got a Freeway file I can see what’s wrong?
I copied the Java code to a Markup item (from the tutorial), and the indents aren’t there. That’s the only thing I can see that’s the different from the example and my version…
There’s your problem. Don’t use a Markup item. Read that part of the tutorial again where it says “Open the Page menu and select HTML Markup.”
I used the “Page” markup same result. I can copy the Raven example (code), paste in to a Page markup in FW, and it displays perfectly on the preview and browser. But when I create the same thing as per the tutorial instructions in FW, it doesn’t give me the same results (not close)… I’m trying to just copy the css from the raven code, and enter it in FW manually to see if I can duplicate the Raven example on the page…
Could someone just make a quick FW page and post it??? I’d really like to use this instead of the Scroll Action, if I could get it to look like the raven example…
I used the “Page” markup same result. I can copy the Raven example (code), paste in to a Page markup in FW, and it displays perfectly on the preview and browser.
Problem with this method is it bypasses Freeway and therefore is not using the wysiwig way of working in Freeway. If you can write straight code and format a whole page like the sample at 13th Parallel, then there is not much point in using Freeway. You could use CSSEdit instead.
Could someone just make a quick FW page and post it??? I’d really like to use this instead of the Scroll Action, if I could get it to look like the raven example…
I’ll make a link on the tutorial page to down load a zip archive with the Freeway file.
What I don’t understand is why you wouldn’t just install the third party iframe action. It does it all in one fell swoop, with no need for all of this work. Installed and functioning in 30 seconds.
What I don’t understand is why you wouldn’t just install the third party iframe action.
An iframe displays the contents of a separate page as opposed to the content on a single page. Besides requiring 2 pages, you are also stuck with whatever scroll bars are native to the system the browser is running on.
An iframe can certainly be used, and the action available makes it straight forward. The other scrolling action is also easy to use, but does not offer scroll bars for navigation.
I’m sure more standards aware web gurus would argue that frames of any sort are not “semantically” a good idea.
Regardless, the use of this script is nothing more than an alternative. It is up to the individual to decide what works best for them.
chuckamuck, I must apologize for my above misstatement. After your comment I decided to do some research into the use of iframes and find that generally, your reference to “not “semantically” a good idea.” does hold true, but depends to some degree on how they are used.
This site may provide the solution, or at least lead you in the right direction. Go down to the code for max-height in IE. Also pay attention to responses 2 and 3.
I am not familiar enough with Freeway to implement the * html part and it appears that without it the code won’t work, but it’s a start.
Sometimes the only way to get at the root is to do things manually, which I did in this case, but there may be a workaround in Freeway.
I changed the style for content to height:288px.
I then removed height:288px from the container div. (this was done simply by editing the html and uploading the new html file).
What appears to be happening is that when you first set up your container, all is ok, but when you put the content html object in, the container html object takes on the height of the content object.
The question is, how do you prevent the container height from changing or making it so that it remains empty (no value).
