Can't understand iframes!

[hidden]

A couple years ago, I got on these forums when I was using Google Pages. I had a hard enough time understanding them then but now I'm using Golive 6 and I'm having a much harder time with them.

GL 6 doesn't have an iframe object, or obviously, I would have used it. So now I'm trying to figure out how to use the source code to generate an I frame.

I keep reading that it's so simple, but to me it's anything but. This is the one thing in the world that I just can't figure out on my own. I've looked at about 40 or 50 websites tonight to try to understand it but no one shows how to do it. They all fall short of going through the whole process of it.

In Golive, I did the first part of putting the iframe code in there and the image shows but I still don't know how to link a thumbnail image to the iframe image. There is not a single website that shows how to link a thumbnail image to the iframe.

Also whenever I see the code, everyone has a simple little url like "me.jpg" in the code. Well my url's are much longer than that because in Golive, you have to put images in folders and everything else and it creates long url paths and I can't copy and paste them because they are not copyable.

Anyway, everyone seems to explain how to put an image in an iframe but not how to link it from another image which is what it's purpose is. I did put an image in the iframe area but what good is that when you can't use a thumbnail to call it up.

This is really hard for me to explain but maybe some day I'll get my brain wrapped around how this is done. I'm sure I'm not the only one to have problems with this. I'm sure other people give up on it and go away quietly.

I wish someone would explain this process once and for all, and stop saying how simple it is, because it isn't.

[hidden]

WHEW!   You are seriously frustrated!  
Take a breath and relax a moment.  
You may have found the right place to fix your issue!

I have MANY MANY MANY iframe samples on samisite.
One of them may help you, if not, we can try to create a sample specifically for you if necessary if my verbal instructions don't do enough.
You are not alone!  Lots of folks have difficulty with implementing iframes!
Some folks have a difficult time getting the individual pieces to work, even when they understand the concept.
Some folks can't understand the concept and try to implement anyway and that just makes it worse.

The good news is that once you get it....you get it!
Iframes have certain rules you must follow.
It's like a light bulb goes off and from that point on, you GET it!
Have gotten many folks to using iframes that thought they couldn't!  
I can not promise to get you doing what you want but I will certainly TRY MY HARDEST.

Let me first make sure that I understand WHAT YOU want to do.  
Lots of things you can do with iframes and I need to understand what YOU want to do with them to best assist you.

Sounds like you want to change the content of an iframe using thumbnail links.  Is that correct?
Please look at this sample.  Is this what you had in mind?
(There are no instructions on that page, I just want you to tell me that's what you need to do or not)

My main iframe tutorial page is here: http://www.samisite.com/test-csb2nf/id43.htm


Generally, there are 3 parts to an iframe project:

1) The main page that holds the iframe code usually has the links.
The iframe is simply a HOLE (or WINDOW) cut into your webpage so you can see some other page through it.

This is a hard concept to understand! After all, how can a flat page on the computer have a hole in it?
- I can show you how it is done by using 1 sheet of paper and 2 other items (newspaper, magazine, ad, anything printed).
- Take the plain piece of paper and cut a square hole in it, anywhere in it.
- Then put the first other item with text or images on it behind the sheet of paper.
- You will see the main sheet of paper surrounding the image or text that shows up through that hole/window in your sheet of paper!  Just like your web page with a hole cut into it to see the other content.
- Now swap the item in back with another piece of paper/book/magazine.  The main paper stays the same, but the e "content" of the hole/window changes!
Exactly like an iframe on your computer screen!


2) LINKS are used to change the contents of the iframe by using a target statement.  
Your links will use the target="....." statement to point your link to the iframe.  without that statement, your image link will just act like a normal link and open in the same page or new page!  If you have 2 iframes on the same page, they need unique names like: iframe1, iframe2, iframe3, etc.  Then each of your links would need to say WHICH iframe you want to change.  All the code samples below are for just ONE iframe named IFRAME1

If you name your iframe IFRAME1 then your links would have the target:    target="IFRAME1"



SIMPLE TEXT LINK HTML CODE -  Relative link:

Code: [Select]

<a href="id43.htm" target="IFRAME1">Example 1: RELATIVE </a>This is the type that most sites tell you to use. And you might be able to use them in your website project too.
This type points directly to a file (webpage, photo, text, etc) that is stored in the same directory folder as your web page with the iframe.
- If you store your images with the iframe web page, this WILL work for you.
- If you store your images in a different folder, then you need to modify this to point to the right folder OR use Absolute link instead.


SIMPLE TEXT LINK HTML CODE -  Absolute link:

Code: [Select]

<a href="http://www.samisite.com/test-csb2nf/id43.htm" target="IFRAME1">Example 2: ABSOLUTE</a>If you store your images in a different folder than the web page, you can use an absolute link style.  This means that you are pointing only to one place, one address specifically.


SIMPLE TEXT LINK HTML CODE -  Absolute link with a floating tooltip:

Code: [Select]

<A href="http://www.google.com"  target="IFRAME1" title="Google: the best search engine!">Example 3: Google</A>This sample shows an absolute link WITH the extra little title that allows your visitor to hover over the link to see a little tool tip.


IMAGE LINK from thumbnail to larger USING CODE

Code: [Select]

<A HREF="http://www.yourwebsite.com/imagefolder/myimage.jpg/"  target="IFRAME1" ><IMG SRC="http://www.yourwebsite.com/imagefolder/myimagethumbnail.jpg/" border=0 width="80 height="80">/A>
Things you will have to change:
the href="" is the web page or image you want to show in your iframe!
the myimage.jpg is the fullsize image name (or use a web page name instead)
the SRC="" myimagethumbnail.jpg is the thumbnail (small) image name
border = 0 means you do not want a border around your image, change to 1, 2, 3, etc to get different size border
width and height must be changed to fit YOUR thumbnail image.


3) CONTENT for your iframe.
These can be images, web pages, text files, many things.
You can even put images ON web pages and point your links to the web pages so they blend with the main web page!  If you have 10 links, you need at least 10 "content" pieces":  10 web pages, or 10 images, or 5/5, etc... your choice.



OK.... After reading this...tell me what does not make sense.  
What do I need to clarify for you?


Would love to see what you do with the iframe.

[hidden]

First of all, thank you for taking your time in showing me how to do this.

I understand the concept of how the iframe works...believe me...I really do. To answer your question about how I want this to work, yes, I need it to work like you have it on the sample page, where I click on a thumbnail image and it shows the larger image in the larger window.

So I have a small image (thumbnail) and a larger window (the iframe). The thing that seems to be missing in your explaination is where does the code go that you have given here? And where is it supposed to point to? Isn't there supposed to be some code that says <iframe> and so on? All I see here is the code that targets to the iframe but not the iframe itself.

Ok, I have a table cell with a thumbnail image in it. Then I have a larger cell that will contain the iframe. Don't BOTH of those cells have to have code in order to link to one another? I only see that you gave the target code but not the iframe code. I really don't think I'm getting this at all. I will repeat though that I DO understand the concept of how it should work but I just can't wrap my brain around how to use the code. I've tried for hours to get this to work and it just keeps getting more complicated.

What I need to know also is how to enter the code for the iframe itself.  I really don't know how to explain the problem I'm having. I'm at just as much of a loss as when I started with this.

Maybe I should try something else, even though I desperately want to have an iframe on my page. I wish there was some way I can explain what I'm doing to do.

I'm not the type of person to give up on anything but this is consuming so much of my time. It's driving me crazy.

[hidden]

I think what I'm asking is where is the code that you gave supposed to go? in the cell with the thumbnail or the cell with the iframe?

ok, I have an idea:

This is the code I'm using for the iframe:

Code: [Select]

<td rowspan="4" colspan="2" align="center" valign="middle" nowrap><iframe name="FRAME1" src="http://www.robertkimballfineart.com/site_pages/LS_211.html" width="730" height="360" frameborder="0" ></iframe></td>
and this is the code that I have for my thumbnail:

Code: [Select]

<td colspan="2" align="center" valign="middle" nowrap><a href="site_pages/LS_211.html" target="frame1"><img src="images/thumbs/LS_211_thumb.jpg" alt="" border="0"></a>
When I test it out, and click on the thumbnail it just brings up the larger image in another window altogether. It doesn't bring it up in the iframe even though the target is pointing right to it. I can't seem to connect the thumbnail to the iframe for some reason.

Sorry, I am just not getting this at all. I don't really think I'll end up with one of those ah ha moments because it's just not something that's so obvious to me. If I ever get it figured out, I'll have to copy what I've done but I don't think I'll understand it fully.

[hidden]

BTW, I'm using GoLive 6. and there are fields in the "inspector" where you can fill in the fields such as "target", but not one for the source. In the target field, I entered frame1.

I don't know any other information I can give right now.

[hidden]

Thanks for responding.    It helps to understand where you have a disconnect.
(We all get them, just happen at different places along the way  )

I have a version of Go Live (not sure which one I have) at home that I can test late tonight to give you a screen shot or two of what works or doesn't work.  

Please note that different software behaves differently! Sometimes we have to adjust code to fit the way individual software works.  For example: the CSB program that many of the samisite.com visitors use does not allow the full target statement!  We have to leave off the end " to get it to work properly. Go Live may also have a quirk that must be identified.  Google hosts their own web hosting and the standard iframe code does not work on that either. Hopefully you will not have that problem.)


I went to your site.  
I looked at your iframe (even though you have no border on it).
I looked at your code for the iframe and found no obvious problem with it.
Yet the basic iframe is not working.
If the iframe (window) is not working then no link to that iframe will work either!

The way you have it coded, web page should load with a webpage viewable inside the iframe.
That iframe window should load showing LS_211.html of your site.
I can visit that page directly, so I can tell your src= part of the iframe is pointing to the right page address, yet it does not load when your page loads. Tested in both Internet Explorer and FireFox.
And the basic iframe will not work in either browser.
 
You SHOULD be getting the basic iframe to work and yet it is not!
Might I suggest you change the name of the iframe from "frame1" to "iframe1"? And keep all the code/links, etc using only lower case? Makes a big difference on some servers!

I will do some research and post back.... The only time I have seen this is when an online builder is used and it does not allow iframes (like google hosted pages).  

While I have been looking at your page, you have changed it!  
I was going to repost your page on a different host to see if the CODE is the problem or your server.

Please answer:
- Are you using an ONLINE type builder? (or do you have the program physically installed on your computer like my golive?)
- Who is your host for the website?
- Are you on a windows or linux server (if you know)?

[hidden]

Thank you very much for your reply!

Actually I didn't change anything on my site at all today. I don't know how that could have happened. The only thumbnail image I have used to active the thumbnail is the one on the left. I guess you must know that now.

Ok, I just went into Golive and changed it from frame1 to iframe1 and uploaded it. The second and third thumbnail finally started linking to the iframe.  So I guess were on the right track. I just don't have them linking to the correct images. One is linking to an image that is too large and the other is linking to the thumbnail, but those should be minor problems to deal with compared to everything else.

Ok, another update:
I think I got it working now. I can even link to files that are not within the same folder as the index page. I don't know how that happened but I'm happy about that.

To answer your questions, I'm not using a type builder...just golive on my computer.
Also, I'm using GoDaddy as my host.
And I don't know about the server if it's WIndows or Lenux.

Thank you for your help! I'd like you to stay with me on this if you can until I get it just right...please.

[hidden]

The second and third thumbnail finally started linking to the iframe.  

The NAME of the iframe is very important. Can make or break the code.

Godaddy offers both windows and linux servers.  Windows is less picky about Caps. Linux is VERY picky about caps.  IFRAME1 and iframe1 are two different things on a linux server!   If you have an image named myimage.jpg and the code says MYimage.jpg the code may not work because the names are not the same,they do not match...CAPS can interfere! Many people say a Best Practice is to use lowercase for image names, files, etc. so coding is more consistent and less likely to break. I say that you just need to be CONSISTENT with naming and coding. They MUST match for image names, iframes, everything!  Like:
- If you have the name of the iframe as IFRAME1, then all your code must use caps in the iframe name to point to that iframe name="IFRAME1". 
- If you use lower case, then all your code must use lowercase in the iframe name to point to that iframe name="iframe1"

Thank you for your help! I'd like you to stay with me on this if you can until I get it just right...please.

Of course!

Ok... Your main page has an iframe with this code:

Code: [Select]

<iframe name="iframe1" src="http://www.robertkimballfineart.com/site_pages/LS_211.html" width="730" height="360" frameborder="0" ></iframe>So when your main web page loads, it will load with content showing in the iframe. Works fine!

Actually I didn't change anything on my site at all today. I don't know how that could have happened.

Strange!  When I first looked at your code it matched what you pasted into the forum. Then when I went back to capture info to test directly, I found that your src="" was empty instead of having web page listed.  Oh well...just another wacky thing.

The second and third thumbnail finally started linking to the iframe.

Yes.  That's because the target="iframe1"

Code: [Select]

<a href="site_pages/LS_212.html" target="iframe1"><img src="images/thumbs/landscape_213.jpg" alt="" border="0"></a>

Code: [Select]

<a href="site_pages/landscape_212.jpg" target="iframe1"><img src="site_pages/landscape_212.jpg" alt="" height="101" width="100" border="0"></a></
The first thumbnail is still linking to target="frame1" so it can't find the iframe. Easy fix! Simply change that first image link to target="iframe1" and it will work too.

Code: [Select]

><a href="site_pages/LS_211.jpg" target="frame1"><img src="site_pages/LS_211_thumb.jpg" alt="" border="0"></a>

I can even link to files that are not within the same folder as the index page. I don't know how that happened but I'm happy about that.

Yes. As I said, you are currently using a "relative" link.  
- When you have a source pointing only to the page or image name like src="LS_211.jpg", the browser assumes it must stay in the same directory as the web page calling the picture.
- When you have a source pointing only to the FOLDER AND page or image name like src="site_pages/LS_211.jpg", the browser will stay on the same website, but change to the folder you define (site_pages in your case) to get the page/picture you are asking for.
- When you define a full website address http... you use an absolute link. This type may point to any place on your website, or somewhere not on your website at all.  Warning! DO NOT link to someone else's website to pull in their content without permission. That is STEALING in two ways: content that is not yours AND bandwidth which can shut down a website.

One is linking to an image that is too large and the other is linking to the thumbnail, but those should be minor problems to deal with compared to everything else.

Yes.. Check your photo names. All thumbnails should be xx_tn.jpg or xx_thumb.jpg, etc.  Your landscape_212.jpg should be named landscape_212_thumb.jpg since it is a thumbnail. Don't know what you named the full size pic!  


Using your current iframe settings:
Any image taller than 360 will need to be scrolled vertically.
Any image wider than 730 will need to be scrolled horizontally.

Unless your purpose is to ZOOM into an image for more detail, I would suggest you confine your image sizes to FIT within the iframe you define.
In other words, to fit your current iframe size, keep your images 355 tall or less so no vertical scrolling will be necessary. Less scrolling makes for a more pleasant experience for the visitor.

You may end up adjusting the size of the iframe or adjust the image sizes to fit the current iframe size. Totally your choice, your concept of how you want to display your artwork. No right or wrong...just personal preference.


By the way, there is nothing wrong with your current design...just recommending you consider who you want to visit/purchase from your site as you build:
You have set your iframe size is 730 wide (very wide!) by 360 tall. I have my monitor set to 1024x768 so I have to scroll back and forth to see the page. Is that what you intend?  Laptops tend to have higher resolution settings than desktop computers. Though many people are getting larger monitors for desktops, they may not be expanding the resolutions also.  Consider your viewers carefully and design for your average vistor.
Older eyes tend to use lower resolutions so the font stays large enough to read easily(800x600/1024x768) while younger eyes tolerate smaller font better so use larger resolution (1280x768, etc)...

[hidden]

Thank you for your continued help!

I'll keep working on the things you suggested. I really didn't know that it mattered that code was case sensitive. I'm sure that plus putting the i in iframe1. I figured that if the two match, it would work, but anyway I guess not. I'm glad you told me. 

Actually I thought that you had to add the word relative into the code for it to work like that.

Oh, yeah, I had the width at 730 because that's what I copied the code that you provided. I changed it last night to 500 because it looked to stretched out. I know you just provided that size to use as an example.
Is there a way to make it resize according to the size of the image? I guess using a percentage would work but I'm not sure about how the code should be with that setting. 

I hope the warning you gave about not linking to another website was a general warning and not something I'm doing wrong again. eeekkk.

Also, just wondering what you mean about who I let visit my site? Is there something I really need to know about that? and maybe something I should know about how to protect my site against the bad guys?

[hidden]

Thank you for your continued help!

Not a problem!  Love to help!! And like I said at the beginning, I will try my hardest to get you going!
Think you are in a much better place now than when we started.  

I really didn't know that it mattered that code was case sensitive.

Most people don't until something breaks.
If you are on a Linux server, this is vital. One of the most important things you will ever learn about websites.
If you are on a Windows server, it is not as important until the day that you need to move the site and suddenly it breaks!  
Better to do it right from the start and avoid the break.

Actually I thought that you had to add the word relative into the code for it to work like that.

Nope.  Relative and Absolute are terms to describe the types of links.  So when you see a link that is http..... you will know that is an absolute type link. So now you know what it is, and what it is named.  

Is there a way to make it resize according to the size of the image?

No.

I guess using a percentage would work but I'm not sure about how the code should be with that setting.

Yes.
Simply replace your =500 with a =50%, or =40%, =100% etc... test it, see what you like.
Your iframe is being put inside a table cell so it can only be a % of the cell provided.
Some tables use set pixel sizes and can not change.
Some tables use a % setting and can expand/contract with the size of the window.
Don't remember what you have.
(You can see what I mean by visiting this page: http://www.samisite.com/csb5demo/tables.htm  set your computer screen to 800x600 to view it then revisit it again at 1024x768 and see the tables change!)
Play with the iframe code and your own monitor resolution to see the results and set it to something you like.

I hope the warning you gave about not linking to another website was a general warning and not something I'm doing wrong again. eeekkk.

Yes general warning I tell everyone when dealing with linking.
Some people do not realize the damage they can do by linking to someone else's photos, to someone else's content.
Some people don't care and do it anyway.
Unless a site gives permission to link directly to their content (photo bucket, etc) just don't do it.  
(Can you tell I have a pet peave about people that steal content from others? I am a nice person and share a lot of my time and stuff with others. I HATE it when someone steals from me.  So unnecessary!  I have detailed post about this elsewhere that explains why this is stealing, how it costs the other site, why it should not be done, etc but since you are not doing it I did not send you to read it.  )

what you mean about who I let visit my site

You misunderstood what I wrote.
Not a matter of who you LET visit your site... I was saying who you WANT to visit your site.  
As you build a website, you should consider who will be your audience. Who are you marketing your site to?
And build accordingly. Your website design should reflect the type of individuals you want to attract to your site.
Ex:  Samisite.com tends to attract mature adults (40 - 85) so none of my font is tiny. Yes I have helped folks in 80's to edit/maintain their own sites!!! My visitors tend to have lower monitor resolutions so I still build with 800x600 and 1024x768 in mind. Etc.  If you expect a younger audience, then using smaller font is just fine...
If the visitor is straining to read the text, they won't stay around.  

[hidden]

Thank you for clearing all that up! I think I got that AHA! moment.  Maybe you can take a look and see if it looks right to you.
I just can't seem to figure out how to make the different size images fit into the iframe. Like putting a square into a rectangle.

Also, to make the horizontal alignment, right. I set the attributes to right but the are still going left. I'm sure it's something I'm overlooking.

Another thing I'm trying to do is embed my own Youtube video into an iframe. This is a video I made and Youtube allows you to embed videos into your own website or blog.
I can easily put the video into a table cell and it works but I'm having a hard time making a video work in an iframe. It's either something I'm doing wrong or it can't be done. I don't know.

Thanks again!
Bob

[hidden]

I just figured out how to put videos in iframes. It didn't take that long with the knowledge of how to make image iframes. I'd still like you to look at my site to see if I did anything wrong.

Thank you for all your help!

[hidden]

Your drawing page uses the iframe very well.  CONGRATS!   

Also, to make the horizontal alignment, right. I set the attributes to right but the are still going left. I'm sure it's something I'm overlooking.

Sorry. Iframes load to the left. Function of browser windows.

I was looking at your code on the video page and I found something you should fix.

Code: [Select]

<link href="file:///C:/Users/Bob/Desktop/robertkimballfineart%20folder/robertkimballfineart/.css/styles_main.css" rel="stylesheet" media="screen">The CSS stylesheet is pointing to a file on YOUR local PC not to a file on the website.
     file:///C:/Users/Bob/Desktop/.....
You need to link to a file on the web space.

Also saw that the your page names have SPACES.  %20 tells me that.
drawings%20gallery.html = drawings gallery.html
Do NOT use spaces in any file naming.  Use _ instead.
Change your filepage name to drawings_gallery.html
No picture, video, image, etc should have spaces in the name.
Bad form. And URL's never have spaces!

To implement video, you put the embed code on web page then called that page into your iframe. 
If you want to, you can add code to make sure your video content pages ONLY appear in an iframe.

[hidden]

I've been working a lot on my iframes. I think I got them going pretty good. I just had to ticker around with the sizes and background colors some to get them just right.
I just wish I didn't have to target the iframe code itself to a web page...it's really hard if not, not possible to get the size just right without having scroll bars on them. When I target an image to the iframe, it works good but the initial src, I guess has to be to an html page and I can't seem to get it to work with the iframe just right. It's not a big deal though since the thumbnail images work good with it.

I fixed the page names with spaces. No more %20's as far as I can see. Thanks for the heads up on that.

There's a stange thing going on though that seems serious. When I open my site in Firefox and Chrome it's fine but in Internet Explorer, it's not showing up right. Most of the things on my site are not there. I think there's something about IE I don't know about in my code or something.

[hidden]

oh no!. I have a couple more problems that I just discovered.

On my drawings page, Firefox shows my drawings in the iframe just how they should be. IE and Google Chrome, shows the drawings full size, creating scroll bars.
Actually, when I thought about it, I don't know why Firefox is showing them correctly. The images are larger than the iframe window. I was pleasantly surprised when they worked in FF. But if they work there, it seems they would work that way in the other browsers too.

Also, my home page iframe doesn't show up correctly in IE, but the other pages do. And the home page loads correctly in the other browsers. I must have something screwed up somewhere but I can't see where the mistake is.

[hidden]

I recommend that either:
1) Prepare your images to FIT the iframe. On your own computer, make copies of the images, resized to fit the iframe properly then upload them to the website. If you keep the same file name when you upload them, you will not have to change any code. Do NOT depend on any browser to do this for you. Many versions of IE and FF, many plugins and settings that can vary depending on the individual computer.  If the intent is to show the work in the iframe, then do just that and make the work fit the space.  
2) OR: If you want to show LARGE images, then accept the scroll bars (horizontal/vertical) to allow the visitor the option of really seeing the image close up.
3) OR: Use a pop-up window that will allow a larger image to show (least favorite option).

I just wish I didn't have to target the iframe code itself to a web page...When I target an image to the iframe, it works good but the initial src, I guess has to be to an html page

Nope. You don't have to.  You can point to a text file, a web page, an image.  Your choice.

it's really hard if not, not possible to get the size just right without having scroll bars on them.

Simple. Nearly blank page.  Just like this page that I use as my thank you (appears after my contact form is submitted inside the iframe:  h**p://www.samisite.com/thanks.htm   No borders, or other window dressing.

[hidden]

Ok I tried to use the "Quote" button but I can't figure that out. I'm trying make it easier to communicate with it here. When I click the quote button, it enters the whole message and doesn't have a way to select part of the message I want to quote.
If I highlight part of the message and hit "quote" it STILL brings up the whole message. I searched "help" and it has no instructions on how to use the "quote" button so I'm at a loss with that. I use the quote button on other forums and it's easy to use because it lets you highlight what you want to quote then you hit quote, then it enters that in the message area. On this forum it doesn't do that and I can't seem to figure out how to do it. hhhmmm.
Obviously, it can be done though because your doing it. I don't get it.

Anyway, I'll do the quoting myself the hard way.

Ok I said, "it's really hard if not, not possible to get the size just right without having scroll bars on them."

and you answer was:
Simple. Nearly blank page.  Just like this page that I use as my thank you (appears after my contact form is submitted inside the iframe:  h**p://www.samisite.com/thanks.htm   No borders, or other window dressing.

Maybe I didn't ask the question right. What I meant was, for the iframes. With the example you gave, it is just a simple text box. I already know about how to make text fit in a box, but I'm talking about making the size of the images fit the iframes so perfectly that you don't have scroll bars. I match the image to be exactly the size of the iframe and there are still scroll bars.

[hidden]

Also for some reason, IE isn't showing my home page correctly at all. In FF and Chrome, all my stuff shows up on that page but in IE, the text is not appearing and the iframe is showing either. I don't know how to change anything to make it work. No wonder IE is put down so much. It sucks.

[hidden]

Hi RK,
On a different note, I looked at your site and watched the Apple pencil drawing and oil painting videos. Wow! you are talented. 

[hidden]

Thank you very much for your comment! I really didn't expect to see that. I can't wait to make more videos, which is why I'm trying so hard to get things right on my site. Sami is doing a great job with helping me out with that and her help is much appreciated.

Thanks again for the compliment. 

Bob

[hidden]

Quoting on this forum.    It's quick/easy once you know how.  But not as simple as it should be!
I posted a thread with instructions for it here a while back:
http://samisite.com/forum/index.php?topic=338.0
It's listed under the main topic of board information.
We use Highlight, Copy (CTRL C), Paste (CTRL V) to past a part of the thread and a button available in the post form.

What I meant was, for the iframes. With the example you gave, it is just a simple text box. I already know about how to make text fit in a box, but I'm talking about making the size of the images fit the iframes so perfectly that you don't have scroll bars. I match the image to be exactly the size of the iframe and there are still scroll bars.

Ah...you read the SECOND part of my answer not my first or get that I was answering your question for both images and text...  I started with the image size.  Recommended that:
1) Prepare your images to FIT the iframe. On your own computer, make copies of the images, resized to fit the iframe properly then upload them to the website. If you keep the same file name when you upload them, you will not have to change any code. Do NOT depend on any browser to do this for you. Many versions of IE and FF, many plugins and settings that can vary depending on the individual computer.  If the intent is to show the work in the iframe, then do just that and make the work fit the space.  

Most iframes need a few pixels top and bottom, side to side. Iframe must be wider than the image being displayed. Browsers vary on this issue. And you can only do so much to control inside of the iframe (usually by inserting <body topmargin=0 leftmargin=0> into the html page being pulled into the iframe. Since you are pulling only images you must build a tolerance spacing around the images instead.

Use your largest image to set the dimensions. If your largest image is 500x500 then I would make my iframe 540x540 or even 550x550 to avoid the scroll bars. See which setting works best.
Then keep all images 500x500 or smaller and they will all fit!  Making your iframe 40 - 50 pixels wider/taller than your largest size image will keep those scroll bars at bay.

[hidden]

Went to check the site.  Your iframe is rendering well on the home page now in IE and FF.
Further on image size:
The large image ls_179.jpg (single tree beside stream) is the right WIDTH for that iframe. No horizontal scroll bar. And even though the image is taller (causing a vertical scroll bar) that extra use of the frame did not cause a horizontal scroll bar.  If the image itself had been wider, that vertical scroll bar could have caused a horizontal scroll bar!
The image is 450x457.  The iframe is width="500" height="360
Your image is taller than the iframe so you will get a vertical scroll bar.
To avoid the horizontal scroll bar, your image should be 40-50 pixels thinner than the iframe.
You have a 50 pixel horizontal space around the image, enough for the image AND a vertical scrollbar so the horizontal scroll bar is avoided.  
If your iframe was only 465 pixels wide, you would have a horizontal  scrollbar too because the vertical scroll bar takes up space!

I love the apple drawing. You make it look so simple. Like the apple was already on the page and you just uncovered it.  And the video quality is terrific for that demo...want to know how you recorded it. With a web cam?  I can't learn the art of drawing (sadly I have no talent for it though I have tried) but might learn the technique for making the video.      Someday I will find MY special talent....

[hidden]

Hi Sammi,

I thought I responded to this forum last week but maybe I didn't finish what I was writing and I got distracted and it got lost.

Anyway I'll write it again.

I found the problem that I was having with my site showing up correctly in IE. I had one of my tables right justified instead of left. It took a long time to find the problem but that was it. I'm glad that FF and Crome was ok with it but since most people use IE...well you know.

I'll work more on the info you gave on your last post. I'll tweak it until it's just right.

Thanks for the compliment! As far as making the video, I just use a cheap Logitec webcam for now. I don't have zoom though which is just about the most important part. I record in 640 x 480 size and upload to Youtube. The hardest part as far as I'm concerned is getting the focus just right and positioning the camera correctly. Other than that, it's just recording and editing. Most of my videos are time-lapsed because  Youtube only allows 10 minute videos. So I'm trying to figure out how to make drawing lessons in 10 minutes or less. I can make the videos continue so there are different drawing videos of the same drawing. Anyway that's about all there is to it besides making sure you have the right file format for the video to upload.

If you have any questions about making videos specifically, just let me know. Heaven knows you helped me so much! I appreciate all your help with my site.

Bob

[hidden]

I found the problem that I was having with my site showing up correctly in IE. I had one of my tables right justified instead of left.

Excellent.     Glad you were able to find it. Thanks for sharing it with us!
Sometimes the smallest little thing can trip you up.

I have a couple older webcams but they are not as clear as that is.  I like the time lapse feature. You have the timing short enough that we see the content without making the video tedious or too long.  Good compromise. Good overall demonstration! If I were trying to learn a particular technique, I think I would prefer a short moving video with comment directing my movements.  For years, I avidly watched Bob Ross on our Florida PBS stations, painting in oils calmly talking through his techniques. Your paintings evoke that same sense of peace and serenity.

Other than that, it's just recording and editing.

Do you have a favorite editor? 
Have only edited a few movies and found that the software I had was quite awkward to use and never seems to produce a video of proper size or format. I suppose it is like photo software..as you use it, it becomes easier and some fit better than others.

[hidden]

WOW! Thank you for the compliment.

As you said about not making the videos too long and tedious, I'm trying to find a common ground for making them informative but short. Short enough to not be boring but long enough to be instructive and like you said, with comments. Either with sound or just notations. Like many other people, I can't stand to hear my own voice when it's recorded so I might make notations instead.

Anyway, the editor I'm using now is Windows Movie Maker because it's free. It has many of the features I want so it works for me right now. I know there are editors that are better but not free. I can't name any right now though since it's been a while since I checked. Editing is kind of tedious but the more you do it, the faster you go on it.

When I start my webcam, I have some options to choose from such as video size and exposure and things like that so I try to use the right settings to begin with there so I don't have problems with that later.
Then in movie maker, when your done editing, you can save it in file format .wmv, which it saves it in automatically anyway. Also, if you upload it to Youtube, it's an accepted file format.

If you have any questions, please let me know. I'm not an expert, but I can share my knowledge of it just the same.

[hidden]

I use Corel Video Studio Pro. It is not cheap, but is an excellent video editor.

[hidden]

Actually, I think that is pretty cheap for the price of programs these days. Corel is selling the  version for 69.99. I'm downloading the free trial version right now. It's 633 MB. So it's gonna take a while. The trial version is fully functional.
I'll try it out and see what it's about.

Thanks for the suggestion, Rick.

Bob

[hidden]

Yes, I agree, it is not so expensive. I was just comparing to the free Windows Movie Maker. But  is far superior, with many important features not found in WMM - such as full audio editing, and is reasonably easy to use. I have been using the earlier versions for quite a few years now, when it was originally produced by ULead.

I am certainly not an expert, but if you have any questions, I will try to help.

Rick

[hidden]

Yes,  anything compared to free is expensive I guess. It's all relative. I really never thought that WMM was that great even though I've never tried any others. When something is free it usually isn't that great but it served most of my purposes for the time being.
I've been thinking about getting a better program for video editing for quite a while so maybe this is the one. It's still only 45% loaded so I'll check it out and play around when it's done.
Thank you for the offer and I'll get back to you if I have any tough questions. 

Bob

[hidden]

Sami,

This is just an idea. I don't know if you've tried this before but maybe you can record the making of an iframe in camstudio or some program like that so it would show a video example of how to make an iframe on video. It seems like it would be easier to explain if you can show how it's done. Camstudio is a free download anyway and works nicely.

Just an idea so you don't have to keep explaining and you can provide a link to the video just like you do with the screen shots.

bob

[hidden]

I don't know if you've tried this before but maybe you can record the making of an iframe

Excellent idea!   
Sounds like a good idea.  Could do it in several pieces of software.  Click to see the version that best suits.  CSB, Dreamweaver, XWD, Site Spinner, MS Expression Web and 3 or 4 others. 
Thanks for the suggestion!   

in camstudio or some program like that

I think this is something that would benefit from the flash tutorial type presentation.  (I made one here for publishing settings for CSB: h**p://www.samisite.com/publish/full.htm )
No sound. But moving arrows, descriptions, stop action, timed and click through with replay buttons.

I have used WINK from debugmode.com, an excellent free flash tutorial creation software to capture screen prints in order, and build a step by step tutorial.
The same thing could be done with iframes.

The only negatives I know of: 1) time to prepare them 2) if someone uses a piece of software I do not have (I have a ton but not EVERY type of web builder!)

[hidden]

Bob.  You are the MAN!    So glad you joined the forum.

Because of your post, I mentioned I used WINK.  The last version I used did record or attach sound.  
I went to check for a newer version only to find that the latest one HAS SOUND NOW.
    
And they dumped the old forum I used to participate in and are now using Google Discussions.  
Get used to something and use it. Don't think about update/upgrade till you have to...
What a lovely discovery and something new for me to play with!  
Think it would greatly enhance the iframe pages....

Looking for suggestions:  Anyone know where I can where can I buy more time??  



By the way, how are the mods coming to the images so they FIT your iframes?
Do I need to give better/different instructions/examples to assist?
Hate to leave you hanging.

If you have a minute or two you could stop by the FUN & GAMES section to add to the two games we play (change one thing and word association). Silly Frivolous but fun for a chuckle now and then.

[hidden]

Your very welcome! I'm very happy I joined this forum. You helped me more than you know.  I'm glad I could finally help with something in return.
Did you work on any videos yet? I have noticed that when you make a screen capture video as opposed to a cam video, the file size is soooo much larger. But that's the way it has to be when you have to make a tutorial like that. I think it might be because it record the whole screen when I did the screen capture, but when you record with a webcam the capture is smaller. At least that's my way of thinking.

I downloaded Corel Video Studio Pro that Rick suggested and I love it. I'm still in the trial version (good til the middle of June). It has a lot to it...very much to learn, but I'm getting it. I will be getting the app when the trial is over for sure.

To answer your question about the tweaking of the iframes, I got them to work just right in FF and Chrome, but IE is still a problem. They show up with a white area around the iframe where in FF and Chrome they don't. And I still have those scroll bars. I wouldn't be too concerned about it if most people still didn't use IE, but they do...so.

BTW, did you get any suggestions on how to buy more time? If so, let me know too. 

[hidden]

I'm glad I could finally help with something in return.

Sometimes just sharing an idea can spark a new concept for someone else.  It's amazing how much all of us have have impacted each other because of the forums! Skills have gotten better, software has changed but still some things remain the same: we encourage each other, help when possible and are genuinely pleased to see someone accomplish/learn something.
(Though small, this is actually a 3rd generation forum. It started on other sites. Some of us have have known each other for many years, while others come and go as time permits or as needed. Always a pleasure to have new ideas/concepts introduced).

It's great to hear that Rick's video software is a go for you. Love getting a recommendation before trying software...helps to narrow down the field.

screen capture video as opposed to a cam video, the file size is soooo much larger

Can be! Depends on how often you capture, screen resolution, settings etc. Takes patience to set things up well for the best result. (As you know setting up your videos). Luckily, flash tutorials like Wink and videos like your drawings are different concepts entirely. Different purposes require different technology to present the information well.

Did you work on any videos yet?

Sadly, no.    I was sick for a week, not on the computer.
Now I am further behind on the projects I had lined up.     I won't be able to devote any time to the wink tutorials for projects for a while.
But they are at the top of my "fun things to do" list!  
Once I get a break in the GOTTA DO's, I will make a dreamweaver wink tutorial first.    
I have to draft outlines for each tutorial before taking my screenshots so I make sure I cover the issues I most want to get in and to keep the tutorials tight and light.  Doubt I will add sound. I have a squeaky voice that I don't really like recorded, but using a new version of wink will be fun.

I have a three day weekend coming up and 2 of them are edge to edge packed. The third might have a couple hours I can play with if the other two days stay on schedule!