Tutorials
36 replies to this thread. Most Recent
Custom Scrollbar Javascript
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.
I hope you find this useful. :-)
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
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.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
Hi Chuck,
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
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Hi Erik,
Thanks for the complement.
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.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
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.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
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???
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
I’m surfing…
On 3 Dec. 2007, 8:14 pm, dhrose wrote:
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.
There is also an action called Extra Resources that can be found here www.softpress.com/kb/article.php?id=456
I have never used it, but sounds straight forward enough.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
chuckamuck
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>
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
Here is a link to an example of the scroller that works in IE6.
www.lorenswebworks.com/bellas/untitled2a.html
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
On 3 Dec. 2007, 10:09 pm, lfedje wrote:
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.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
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?
www.lorenswebworks.com/bellas/untitled2a.html
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?
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
I’m surfing…
On 4 Dec. 2007, 12:41 am, dhrose wrote:
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.”
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
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…
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
I’m surfing…
On 4 Dec. 2007, 7:16 pm, dhrose wrote:
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.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
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.
www.softpress.com/kb/article.php?id=196
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
On 4 Dec. 2007, 11:11 pm, lfedje wrote:
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.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
My first comment is that you should be complimented for the work that you have put into this, and I hope that you get any bugs in it resolved.
For my purposes, iFrames work perfectly and do not defy any standards, however, Frames do, and I for one would never use frames.
Yes, you are restricted to the native scrollbar, but I can live with that.
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
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.
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
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.
perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/
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.
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
Here is another example where it works in IE, FF and Safari. This is all based on the code you provided in your tutorial. Thanks for that, BTW.
www.lorenswebworks.com/scroller/scroller.html
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).
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
On 5 Dec. 2007, 4:58 pm, lfedje wrote:
The question is, how do you prevent the container height from changing or making it so that it remains empty (no value).
That is always the question with Freeway. Because Freeway generates the code at the time of publishing, “editing” the html is not an option. Actually, keeping the size field empty is a simple matter of deleting the size then “tabbing” out of the field. The tabbing is the critical step here.
Any standards compliant browser will display the max-height styling correctly. IE is not one of them. So the question is, as you rightly surmise, where to put the styling code in Freeway so that IE won’t choke? It is definitely not straight forward.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
On 5 Dec. 2007, 4:58 pm, lfedje wrote:
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).
I checked your page link. This does not work in Safari of Firefox on the Mac. This turns off the scrolling basically.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
Yes, I just saw that.
Honestly I had it working using the hard coded method, but then I went in and changed a few things. I then tested it in IE and all was ok, but forgot to check out FF and Safari.
Back to the drawing board.
Back to you later. BTW, I was able to get the height out of the container div.
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
I mentioned this before but why not use a conditional statement (stylesheet) that targets the specific IE version? You can define the CSS for your div however you need to for those browsers.
Todd
On Dec 5, 2007, at 2:45 PM, chuckamuck wrote:
Any standards compliant browser will display the max-height styling correctly. IE is not one of them. So the question is, as you rightly surmise, where to put the styling code in Freeway so that IE won’t choke? It is definitely not straight forward.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Ok, try it again.
I removed the style and manually put in the height:288px.
What we really want is to maintain the height for the container at 288px, but when you resize the content the container increases to the same height.
Loren
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
iMac 24”, MiniMac and PC, Leopard and Windows in Parallels
On 5 Dec. 2007, 8:12 pm, Todd wrote:
I mentioned this before but why not use a conditional statement (stylesheet) that targets the specific IE version? You can define the CSS for your div however you need to for those browsers.
Yes, yes you did. :)
Wouldn’t happen to know where I can find a good example would you?
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
As a matter of fact I do.
First, in FW terms:
- Go to menu > Page > HTML Markup…
- Select Before </HEAD> and insert…
3.
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/ie6.css"/> <![endif]-->Now create your stylesheet and add the necessary CSS to fix whatever problem you’re having.
For example:
#mydiv {
width:200px;
border:.2em
}
I use Coda or CSSEdit (or a text editor) for this but you could use FW to create the stylesheet though I find the process clunky. I then manually place the CSS file in the CSS folder (on the server) that FW creates though you can place it anywhere. Be sure to change the above reference to match the actual location if it’s somewhere other than the CSS folder.
The above example targets only IE6 but depending on what IE browsers are acting up you could get them all in one shot if need be. More herewww.javascriptkit.com/howto/cc2.shtml
Any questions give a shout.
Todd
On Dec 5, 2007, at 4:06 PM, chuckamuck wrote:
Yes, yes you did. :)
Wouldn’t happen to know where I can find a good example would you?
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
So nobody can post a FW example file with this working?
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
I’m surfing…
On 11 Dec. 2007, 8:18 pm, dhrose wrote:
So nobody can post a FW example file with this working?
See the link at the end of the tutorial.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
Hmmm… I can’t see anything different in this file than the one I created other than maybe the javascript file I have is not the same? But hey, it works… One question, the scroller seems to get longer if I extend the scroll container? Is there any way to maintain the size of the scroller while changing the scroll area?
Thanks again!
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
I’m surfing…
I just realized the javascript has to be in the “site” folder… which I had no idea (where it was) since I copy whole sites and redo with different logos and such for demo purposes! Hmmm… what’s the best way to duplicate a site and maintain the links and resources as well as the site location… if you want to use one to build another? …and that scroller button? Any way to make it stay the same size??? Thanks again.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
I’m surfing…
On 12 Dec. 2007, 2:02 pm, dhrose wrote:
Hmmm… I can’t see anything different in this file than the one I created other than maybe the javascript file I have is not the same?
Different javascript file? Ok…..
But hey, it works… One question, the scroller seems to get longer if I extend the scroll container? Is there any way to maintain the size of the scroller while changing the scroll area?
Thanks again!
No. The length of the scroller is totally automatic and is determined by the javascript according to the length of the content div. More content, shorter scroller; less content, longer scroller. However, the width of the scroller is totally up to you.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
Hmmm… doesn’t the “container” style affect the scroller as well as the content? I noticed if I create a second “container” style for the scroller, it will change the scroll button, but then the dom.javascript needs to be changed… right?
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
I’m surfing…
On 13 Dec. 2007, 1:46 pm, dhrose wrote:
Hmmm… doesn’t the “container” style affect the scroller as well as the content? I noticed if I create a second “container” style for the scroller, it will change the scroll button, but then the dom.javascript needs to be changed… right?
No, the “content” size is what determines the scroller size. The “container” style only sets the vertical size of the container that the “content” is displayed in.
It may seem otherwise, but the fluctuating size of the scroller bar is how scroll bars work normally.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
So is there any way to change the scroller/scroll independently of the actual text area? Has to be some way to change the code… Geez, I’m no java expert, but I see this all the time?
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
I’m surfing…
Interesting development related to using this tutorial with Freeway PRO 5. Currently in version 4.x you can input a specific height in the settings palette, but Freeway will not accept it when the content is larger than the height indicated. This has been fixed in Freeway 5. What that means is that the height now works correctly in IE.
Basically the tutorial advises creating a style with the CSS max-height value added through the Extended menu option. This is no longer necessary with Freeway 5. You can simply put in a height value and Freeway 5 will now accept that regardless of content.
Once Freeway 5 ships I will update the tutorial to reflect the change.
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
As I promised, I have updated the tutorial to reflect changes in use with FW5. Actually less work now…which is a good thing! :-)
tutorials mailing list email@hidden Update your subscriptions at: freewaytalk.net/person/options
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
