Some very simple HTML code required please.

[MacBoobsPro]

I have absolutely no HTML knowledge whatsoever and was hoping someone would be kind enough to edit the code I have below. First of all let me tell you a story. Are you sitting comfortably?

Once upon a time I used Wufoo to put a form on my iWebsite and it worked, although with my limited HTML knowledge its implementation on my site is not as elegant as I would like. Anyway... inspecting the code in the iWeb HTML snippet box got me thinking.

I hate how iWeb forces the entire page to reload especially when in say a portfolio section when really only one image needs to change but yet iWeb reloads the whole page. When filling in the form on my page only the form changes when a user submits something; I liked it. So I stripped out the code and started playing around to try and (possibly) utilise it in my portfolio pages.

I can get my portfolio work to appear and I have figured out how to get scrolls bars to appear. However because I am such a HTML retard I would like to know how I can make the frame scrollable vertically (but not horizontally) but also not show any scroll bars.

I found this bit of code:
iframe width="200" style="overflow-x: hidden;">"

that should help me in my quest but I can't figure out where to put it so it works. I'm aware the codes require < at the start. I just dont know how to 'post' HTML without it becoming active.

The code I have so far is below. Basically I want a 200px wide vertically scrollable frame, no horizontal scrolling but also no scroll bars visible. If some one could edit the code for me I would be very grateful.


iframe height="200" allowTransparency="true" frameborder="0" scrolling="yes" style="width:100%;border:none" src="http://web.me.com/stuartluff2/logobox/iphone_1.html"><a href="http://web.me.com/stuartluff2/logobox/iphone_1.html"></iframe

Also what are peoples thoughts on using iframes? I have read CSS can achieve the same results but I am even more useless at that. Lets just say my middle name is 'drag and drop'.

My full name is MacBoobspro Draganddrop Extreme.

 

[SrWebDeveloper]

This will seem like a long reply and I included sample code at the bottom, but take a moment to read this carefully.

First, read this easy to understand novice tutorial on iframes:

http://www.htmlcodetutorial.com/frames/_IFRAME.html

Many experienced developers will tell you that iframes is not a truly professional approach, i.e. the scrolling regions are unsightly and a little less elegant than other approaches. But, it's easy to implement which is perfectly suited for personal sites or if the developer is novice. The more advanced method involve a layout using div's and CSS and Ajax to control how specific content areas are updated. CSS allows complete control over scroll bar behavior, but this system requires knowledge of various skills and disciplines. Older browsers don't support iframes, but iframe tag has a means of dealing with unsupported browsers if you read the tutorial.

In a nutshell, the code you listed above is copy/pasted incomplete - it's missing the opening "<" character and there is no official support for allowTransparency="true" so that should be removed and CSS styling should be used instead. You should also avoid using FQDN in the src and limit it to simple relative or absolute paths. Finally, some developers around here would prefer you assign a class or ID to your iframe and put the styling in an external style sheet.

Example, using your incomplete and odd looking code, assuming all files are in one central directory (keep it simple!):

<iframe height="200" width="450" frameborder="0" scrolling="yes" id="myiframe" src="/stuartluff2/logobox/iphone_1.htmliphone_1.html" name="phone_iframe">
<!-- Displayed to unsupported browsers -->
<a href="/stuartluff2/logobox/iphone_1.html">
</iframe>

In your style sheet:

#myiframe {

width: 100%;

}

Step 1: Read tutorial
Step 2: Write down on paper which pages will be used in which iframes
Step 3: Write your HTML and CSS, use the tutorial page for the HTML

-jim

 

[MacBoobsPro]

Thanks for the reply much appreciated.

 

[angelwatt]

Scrolling with no visible scroll bar?? That's counter-intuitive and is bad usability. If you can't see a scroll bar, why would a visitor think there's any scrolling?

My thoughts on iframes. Avoid when possible (accessibility reasons), but they are needed for embedding content from other services like Google Maps. I don't think I've seen a good enough reason for using iframes to embed content from your own site, though I could be wrong on that.

On the topic of

I hate how iWeb forces the entire page to reload especially when in say a portfolio section when really only one image needs to change but yet iWeb reloads the whole page.

That is where AJAX comes into play, changing page content without going to a new page. Though that's not likely to be something you can easily implement in iWeb.

If you have a link with the portfolio perhaps one of us here could offer a different solution than the iframe one you're trying.

 

[MacBoobsPro]

Scrolling with no visible scroll bar?? That's counter-intuitive and is bad usability. If you can't see a scroll bar, why would a visitor think there's any scrolling?

My thoughts on iframes. Avoid when possible (accessibility reasons), but they are needed for embedding content from other services like Google Maps. I don't think I've seen a good enough reason for using iframes to embed content from your own site, though I could be wrong on that.

On the topic of

That is where AJAX comes into play, changing page content without going to a new page. Though that's not likely to be something you can easily implement in iWeb.

If you have a link with the portfolio perhaps one of us here could offer a different solution than the iframe one you're trying.

Like I said I am really just experimenting (casually) with what can be done in iWeb. I have no web knowledge whatsoever (hence using iWeb) so talking about AJAX and the like just sort of goes over my head, although I do appreciate the info.

I have had a VERY quick look at the link SnrWeb posted and even that doesnt make much sense to me. However when I have time I will read it properly and try and figure it out.

I think visually and so I am absolutely terrible with numbers and code etc however my spelling attributes are fantastic, but I guess that comes down to visualisation too (shape of words etc).

Regarding posting a link. I don't know exactly what I want to do with it yet but if I can get something simple that works well then I may create a frame that displays a portfolio piece and when clicked will change to another image. I was asking about scrolling only vertically not horizontally because I was looking into possibly just scrolling down a few samples of work. In this format the frame could be placed to one side of my site.

My site is here:

www.stuartluff.co.uk (redirects to)

http://web.me.com/stuartluff2/stuartluff/index.html

The testpage I am dabbling on is:

http://web.me.com/stuartluff2/stuartluff/testpage.html