Would someone be good enough to help me please. I am creating a horizontally scrolling set of photographs that will scroll across the screen where each image will be taking up something like 800 x 500 pixels.
What I did:
I created an html box slightly larger than this;
I set this box to overflow: auto;
I created another html box with exact dimensions for image import;
I duplicated the above box several times but here I hit the problem;
FW, very understandable, gives me the following dialogue:“Items not duplicated since given offsets would set position outside pasteboard”.
So how can I create multiple boxes ready to receive the images inside my horizontally scrolling html box? I tried setting the actual image boxes to : overflow: “hidden” thinking that FW would recognise these image boxes as well hidden so they would not be literally on the page so to speak.
Dave you are a life saver, I have spent the last hours going through Iframes and complex coding tutorial to try and work all this out. I have searched the database and the manual. And all i had to do was enlarge the darn pasteboard - have you any idea how I feel right now? (I am smiling). But one question, When I set the scrolling to “auto” or “scroll” for the containing Html element that hold the images I get vertical scroll bars when there is absolutely no need for them. But when I set this scroll to Visible the vertical scroll bars disappear but thankfully the horizontal ones stay. Can you explain? As this “Visible” setting means that I can not pull in the right side of the window, that contains the images, away from the edge of the browser.
I just answered this question this morning for someone else. Search on
the Web archive of this list for overflow-y and you should find it
immediately. Substitute overflow-x for overflow-y in my answer, and
you’re all set.
Walter
On Dec 15, 2010, at 2:24 PM, Chris Watts wrote:
Dave you are a life saver, I have spent the last hours going through
Iframes and complex coding tutorial to try and work all this out. I
have searched the database and the manual. And all i had to do was
enlarge the darn pasteboard - have you any idea how I feel right
now? (I am smiling). But one question, When I set the scrolling to
“auto” or “scroll” for the containing Html element that hold the
images I get vertical scroll bars when there is absolutely no need
for them. But when I set this scroll to Visible the vertical scroll
bars disappear but thankfully the horizontal ones stay. Can you
explain? As this “Visible” setting means that I can not pull in the
right side of the window, that contains the images, away from the
edge of the browser.
The only way to do this (scroll one direction only) is to use the Extended dialog. First, remove the overflow setting you added with the Inspector (change it back to the default of “Visible). Then from the main menu choose Item / Extended, and make sure that the DIV Style tab is selected. Then click new, and enter the following name/value pair:
Name: overflow-y
Value: auto
This will cause the scroll bar to appear only if it’s needed and then only on the y-axis (vertical scroll).
Walter
So in your case
Name: overflow-x
Value: auto
This will cause the scroll bar to appear only if it’s needed and then only on the x-axis (horizontal scroll).
===============I just answered this question this morning for someone else. Search on the Web archive of this list for overflow-y and you should find it immediately. Substitute overflow-x for overflow-y in my answer, and you’re all set===========
Hi Walter, well I looked and looked, I found many references to overflow but how could I be sure that what I was reading was the right thing? I am still trying to decipher from the manual with its limited explanation about how to apply the “before html /head”, and then the edit styles box although the latter seems starightforward enough. anyway, thanks Walter.
Dave, Hi, It does not work. Actually i set the value to none, because I do not want any vertical scroll.
Before this I got rid of the vertical scroll bars by having one larger html box set to visible scroll. The other Html box nested inside this one - and it could be any width - Imade it 100 pixels it really makes no difference at all. Then placed 6 experimental images (Almost Screen size) inside this 50px html box and set that to visble. Although I do not get the vertical scrolling this is not ideal because the images come from the far right side of the screen. i can reduce this distance by about 150 px by extending the top most html box to about 5000px where it extends well beyond the last image. But while this all works I need control - I need to set the whole darn thing in the centre of the screen not look like all the images are coming from a mysterious space on the far right edge of the screen.
Overflow-y: none did not work and I only had one html box set to visible as you said. Thankyou, Chris
Also, please be patient with me, but in trying to identify the html box in order to check the css style that is about it- I found it to be Item 2 - but when I go to: Edit-Styles" it is not listed. So apart from taking the damn page into firefox and code burner and deciphering everything how do i view the css style that is applied to the html box?
Ok, back to the original problem. I can have exactly what I want but for the images they need to be appearing from about the middle of the right side of screen and not from the far absolute end of the screen.
So far I have failed to do this. The vertical scroll is gone so long that I keep the html box scroll set to visble but its length makes no difference naturally. If I set scroll to auto or none then I get the appearance of the images sliding perfectly in the centre of screen but I get the damn vertical scroll bar.
I’m losing it here with FW, thinking of dreamweaver to be honest - I am familiar with dreamweaver - it is hugely complex, but I have access to incredible tutorials and that would be the only reason - the classroom tutorials, I could master FW in One damn week but at this rate I will be struggling for months.
Please follow these steps to enable the overflow in one direction
only. Follow these steps completely, do not try to apply them to your
existing page until you have finished them and internalized what they
mean and do.
New page, HTML 4 or better, CSS Layout button on.
Draw an HTML box on the page to be your horizontally scrolling area.
While this box is still selected (all 8 handles showing at the corners
and sides) choose Item / Extended from the main menu.
Make sure that the DIV Style tab is highlighted.
Click the New button, then in the sub-dialog that appears, enter the
following:
Name: overflow-x
Value: auto
Okay the stack of dialogs. If you were to publish now, you would see
that your box now has the overflow-x property assigned within its
style tag.
Now you can add your inline content within that box by double-clicking
inside the box so you see a flashing text cursor, and then using the
Insert menu or copy and paste or typing to add it. Any inline content
will follow the rules established by this set of steps, and if the
content is wider than the box, you will see a horizontal scroll bar.
Now, to apply this to your existing page, make sure that you have
selected the correct box in your layout, and used the Item / Extended
method (not anything to do with the Styles palette, and not related to
the ID of the resulting box – this is direct manipulation of the
object).
Hi Walter, Thankyou for your instructions, appreciated. But it has got worse, in fact 3 times worse. For a start off, the images start to break and continue on different lines. Secondly I get a vertical scroll bar BUT, then we have not inserted anywhere in the div> style> overflow-y: none; Anyway I will try something else and go back to an Outer HTML box that contains the html box you asked me to do. I will mess with the overflow in the inspector pallette. It is the outer HTML box that allows the images to stay in one continuous line. But will keep for the moment the Page>Extended>div style>attributes that I assigned earlier.
If you have any extra idea please share them. I just do not want a carousel, although I may purchase one that I have seen should all this get too much.
If you want a long film-strip effect, then you will need a third level
to the cake: an inner DIV that is the full width of all of the inner
“panes” added together, plus any margin between them. So if you were
looking at an outline view of your page, it would look like this:
outer box (with the overflow-x setting on it)
inner filmstrip box, the full width
box 1 (float left)
box 2 (float left)
box 3 (float left)
...
All of these inner boxes are inline, so you draw the outer box in the
normal manner, then you double-click inside it and use Insert / HTML
Item to add the next level – the full width “filmstrip” box – and
use the Inspector to set its width to be the calculated width of all
of the inner “frames” of the filmstrip. Then you double-click inside
of the filmstrip to again get a text cursor, and insert each of your
frames within that. Three levels, like a Russian nesting-doll.
If you want a Carousel effect, just use the Carousel Action (free,
from ActionsForge) and be done with it. Draw a box where you want the
effect to appear (this will set the position and the size for the
finished effect). Duplicate it once, and drag the copy somewhere else
on your page. Apply Carousel to the original. Select the duplicate,
and apply Carousel Pane to that. (There are several Actions contained
in the bundle, when you install one you get them all.) Now you can
duplicate the duplicate (which has Carousel Pane applied to it) as
many times as necessary to complete your effect. Create each pane’s
content by first clicking on the pane, then drawing the content over
it so it becomes a “child object” of that pane. You can put the
resulting panes anywhere on the page or pasteboard, they will be
removed from view when the page is published, and the result will be
visually what you want (I think). There are navigation Actions –
Carousel Tab and Carousel Button – which allow you to provide either
direct or relative navigation between the elements. No scroll bars
will be in evidence at all, just whatever navigation you create in
your design.
Walter
On Dec 16, 2010, at 8:52 AM, Chris Watts wrote:
If you have any extra idea please share them. I just do not want a
carousel, although I may purchase one that I have seen should all
this get too much.
Hi Walter, wow 10 out of 10 for doorzettingsvermogen, (that’s dutch for perseverence and literally means "through-established/determined- ability).
I am going to do exactly what you said above on another page - I want to know everything you see. BUT Ihave good news, I just did it.
I set a new HTML box on the page, gave it an overflow of auto. the page is set to align=none. The html box is centred on the page and quite narrow, all the images extend beyond the html box into the pasteboard.
I kept the attributes in the extended> div style> the same as you gave. BUT the images I imported as graphic items into graphic boxes. The only difference is that I duplicated each box first while the html box was extended. then reduced the width of the html box to very narrow.
Actually this is not ideal, the blue horizontal scroll needs to change colour and this is a default property of all browsers world wide so have to figure out how to change the colour.
I will be trying out your instructions above Walter - thankyou they are not wasted at all.
Hi Walter, =====================================All of these inner boxes are inline, so you draw the outer box in the normal manner, then you double-click inside it and use Insert / HTML Item to add the next level — the full width “filmstrip” box — and use the Inspector to set its width to be the calculated width of all of the inner “frames” of the filmstrip. Then you double-click inside of the filmstrip to again get a text cursor, and insert each of your frames within that.=========================
This inline thing never works, the text, the images, theboxes all break up and shift downwards onto different lines. I never see the advantage of clicking a text cursor and then choosing “insert” It seems so ridiculous when just drawing your boxes works more efficiently, I never get things going out of line… And actually what is this “Insert” anyway. Itdoes really strange things when I drag it like suddenly creating a cross hair and re-creating another box?!?
Anyway Walter I do not want to take any more of your invaluable time. thanks for the help. Oh, Itried that action yesterday by the way but failed to understand a couple of the instructions that came with it. Looks like you have quoted from that action differently, makes more sense what you said above, could not fathom the instructions that I read on the web page even as I was trying it. Oh I know you made it, so a double thankyou. maybe I will get round to it again.
Hallo david, yes that is precisely what I achieved in the beginning, by the way I like the arrowpointers, nice touch, obviously a bit of java script. Anyway, The main problem was bringing in the far right hand side of the screen to the centre so that only one image per pane would be seen without getting vertical scrollbars. I have solved that now, but I am DEFINATELY interested to see how you did this and to compare it with mine.
By the way, I have CSS code ready to change the colouring of the scrollbars. But I wonder if this can be done in Freeway? You do not know do you. I suppose I would enter in the code using the dialogue and select
.
Thankyou Dave, was your page an action? or did you do it all by hand in Freeway?
Thankyou Dave, hesido.com is something I am going to have to takemy time on, I have bookmarked it though. the code is simple and you insert it between the and , I can use it as an internal style sheet so no problem - I will give it a go.
Weavers website looks interesting enough, I have bookmarked that one also but will pull on the reigns here, need to replicate a few things that I think that I think that I might know just to make sure that I actually do know them…if you get me.
But thankyou Dave for your tips and input, everything is digestible, have I spelt that right? anyway take care and kind regards to you.