Creating scrollable frames on a blank page?

Question

Level 1

30 points

Creating scrollable frames on a blank page?

Hi all

I've got a site on which I use a blank 1.0 "black" template as the front page. I have created a number of boxes where I put different text and pictures which change on a fairly regular basis, but I now want to make the individual boxes scrollable since 1) some browsers are not fitting the content in each box properly, and 2) I want to keep the box sizes constant and simply allow visitors to scroll up and down within boxes.

How would I go about doing this? I use iWebEnhancer to insert html and iframes into some pages, so can tweak html if needed.

Javascript would be a sweet way of doing it, although a simple html scroll bar would also be fine (and would probably avoid software issues on different computers). I just don't know what the coding to be inserted would be.

The page is at www.narly.co.nz if you want to see what I mean about having text boxes on the page. At the moment some browsers (FF on PC) won't show some pictures in the top left box, as it runs out of space, although FF on Mac, Safari and IE on PC all view it fine.

Thanks for any suggestions - a few quick points:

a) Re the slideshow mentioned on the page, I know it's not working - I forgot to run iWebEnhancer this morning (someone was bound to mention this 🙂
b) I'm not a big fan of the blog templates.

Thanks!
Narly

Posted on Jul 2, 2006 8:36 PM

Reply

Answer 1

James Tseng

Level 6

12,120 points

Jul 2, 2006 9:09 PM in response to narlyk

In your <iframe></iframe> expression, just use the "scrolling="yes"" attribute to get a regular scrollbar within the iframe. Here is an example from my GuestMap page...

<iframe src=" http://mapservices.locaweb.com.br/showmessageboard.do?id=jwtseng" width="924" height="200" scrolling="yes" border="0" style="border:none;" frameborder="0"></iframe>

You can see the scrollable messageboard in action by going to my GuestMap page...

http://guestmap.dirtdoog.com

Sign the Guestmap while you are there and watch the messageboard update with your entry! Hope this helps. Thanks!

Reply

Answer 2

narlyk Author

Level 1

30 points

Jul 2, 2006 10:25 PM in response to James Tseng

Hi James

Thanks for that, but a few questions.

I manually create text boxes in a blank iweb template - do I have to re-enter the dimensions of this box in the iframe? Sorry if I'm not making sense - is this the order of things I have to do:

1) Create box
2) Type stuff in (as much as I want)
3) add iframe html command in there with scrolling=yes (so: <iframe>scrolling="yes"</iframe>)
4) publish
5) run iWeb enhancer to insert html iframe code

Thanks in advance!
Narly

p.s. signed your guestmap a few days ago 🙂 look around Hong Kong

Reply

Answer 3

James Tseng

Level 6

12,120 points

Jul 2, 2006 10:29 PM in response to narlyk

Ah, yes.... I see your big afro hairdo in the vicinity of Hong Kong now! Thanks!

If you are using iWebEnhancer, then follow whatever directions you need for that application to work. I don't use it, so I'm not really familiar with it. But it sounds right (the steps you have listed).

And yes, you need to specify the same dimensions of the text box in the <iframe> expression. Basically just use the example I posted above, replace your own URL and also your text box height and width settings.

Reply

Answer 4

narlyk Author

Level 1

30 points

Jul 2, 2006 10:48 PM in response to James Tseng

Thanks James - I will give it a crack when I get home.

Narly

p.s. glad you found my afro!

Reply

Answer 5

James Tseng

Level 6

12,120 points

Jul 2, 2006 11:09 PM in response to narlyk

Good! Should be smooth sailing, but let us know if you run into any trouble!

Reply

Answer 6

narlyk Author

Level 1

30 points

Jul 4, 2006 5:31 AM in response to James Tseng

Hmm - not working, but I think it's partly that I'm using the wrong commands. iframe doesn't seem to be what I need...

Here's the problem:

I want to have 4 standard text boxes/areas on my front page (see www.narly.co.nz). I don't want to keep changing the box size, and ideally I'd like to make each box scrollable in a web browser so that i can put as much text in there as is needed without resizing the box.

Does anyone know what HTML code I need to paste into each box so that I can do this? I'm using iWebEnhancer, so inserting HTML is no problem.

Cheers!
Narly

Reply

Answer 7

varkgirl

Level 5

5,029 points

Jul 4, 2006 6:01 AM in response to narlyk

3) add iframe html command in there with scrolling=yes (so: <iframe>scrolling="yes"</iframe>)

The scrolling="yes" has to go INSIDE the iframe thingy - <iframe scrolling="yes">blah blah blah </iframe>

Reply

Answer 8

narlyk Author

Level 1

30 points

Jul 4, 2006 7:33 AM in response to varkgirl

Hmm, still not working 😟

I tried putting an iframe in there, but the box just disappears (see http://web.mac.com/narlyk/iWeb/slides/tested.html - you can highlight it and see the text). Also tried to use a

code, but also nothing.

Wondering what I'm doing wrong - this is what I pasted into the box for the above trial <iframe>scrolling="yes"</iframe> and I put it right at the start.

I'm off to bed now, but if anyone has any ideas, I would be extremely grateful (nb - it's just a plain box I'm after with text and pics, not a link to another page)

Cheers!
Narly

Reply

Answer 9

varkgirl

Level 5

5,029 points

Jul 4, 2006 10:12 AM in response to narlyk

You still left scrolling="yes" outside of the iframe tag! 😟

It should look like this (I think):

<iframe scrolling="yes">

sunday 2 july

so england got knocked out of the world cup last night - it’s not all bad news really (well for me):

that’s my betting slip from last night. i managed to correctly guess a 90 minute draw and a portugal win on a penalty shootout. i based this prediction on a quick game of "fifa 2006" on the playstation just before the match, so i might try this again for the semi finals and see how my punting goes.

in a bad night for england sport, their cricket team just suffered a huge defeat at the hands of sri lanka. england scored 321 off their 50 overs, which sri lanka passed with 13 overs to go. an opening partnership of 286 by the lankans didn’t help the english at all.

</iframe>

Reply

Answer 10

narlyk Author

Level 1

30 points

Jul 4, 2006 4:36 PM in response to varkgirl

Hmm. Tried it that way and now only a dark frameless box shows up.

Thanks for your reply though - I'll keep tinkering...

Reply

Answer 11

mwong

Level 4

1,211 points

Jul 4, 2006 10:54 PM in response to narlyk

You can achieve this in several ways:

If you wish to use an iframe, then within the first iframe tag you need to put in the 'source' of the frame, eg

<iframe src="http://mysite.com/sitename/myexternalpage" width="640" height="380" scrolling="yes"></iframe>

You will see that the src can be your own page, where you've put a simple text box with the text in, and uncheck the boxes 'include page in navigation menu' and 'display navigation menu'.

The other method could be to use a textarea tag. Something like this:

<textarea id="blah" readonly="readonly" rows="5" cols="10">your text here, blah blah blah</textarea>

But looking at your original question, I just wonder if you are making things more complicated than they need be. Why not reduce the font size and/or increase the text box size and/or increase the inset margin dimension? Also do not try and put text right up to the edge of boxes because browsers do render sizes a little differently.

Michael
iMac 20" Intel Core Duo 2GHz
=

Reply

Answer 12

varkgirl

Level 5

5,029 points

Jul 5, 2006 3:50 AM in response to narlyk

OK, my mistake...

You need to make a separate .html page with your text on it (see mwongs post)...

So if you upload that html page at the same level as your iWeb created pages, it would be <iframe scr="newpagename.html" scrolling="yes"></iframe>

Reply

Answer 13

narlyk Author

Level 1

30 points

Jul 5, 2006 5:40 AM in response to mwong

Thanks all for replies - I think easiest solution is to simplify the page (I didn't know about that text next to a border causes problems).

Thanks to everyone for helping me out on this one.

Cheers!
Narly

Reply

Answer 14

narlyk Author

Level 1

30 points

Jul 5, 2006 8:25 PM in response to mwong

Thanks again for the suggestion re moving text away from the frames. Has made the page look better in all browsers. Had originally wanted scroll bars as the text wasn't fitting when viewed in some browsers, but creating a 10 or 8 px inset on each of the boxes has solved the problem.

Cheers
Narly

Reply

Answer 15

mwong

Level 4

1,211 points

Jul 5, 2006 10:11 PM in response to narlyk

You're welcome!

Michael
iMac 20" Intel Core Duo 2GHz

Reply