Iframe tutorials on Samisite.com

[hidden]

Lots and lots of iframe information on Samisite.com
Check out the extensive tutorials here

Use this section of the forum to pose questions about the popular website feature.

[hidden]

Thank you for your tutorial on iFrames, Special Target Link Make a special link change two iFrame windows at the same time. I've tested the 3 codes on a new page and it worked out fine.  But when I implemented in my site, it did not function. 

My site consist of a top frame and a main frame.  Both initially resides within the same domain.  By navigation, the top frame will stay the same, but the main frame will go outside of the domain and into another site, that has 2 iFrames.  So could the error be that I have the pages within an actual frame or could it be that it navigates outside of the domain?  Is there a solution that I can work around this?  I would very much like to utilize the iFrame, Special Link.

Thanks.

[hidden]

Welcome to the forum!!

Please give us the URL for the page with links and the one with iframes so we can see the code you have implemented. Usually that is the best course for diagnosing your problem. Are you putting your links in the top frame or on the page with the iframes?

The Special Target Link iframe tutorial you mention is a webpage on the samisite.com domain.  That page has 2 iframes and several links.  Those links load pages from outside the samisite.com domain.  The LINKS are on the page with the IFRAMES. The link code points to an iframe window.  If that window does not exist on the page, then the code will not work as written. 

Also, you can use an iframe to pull in a page from off site.  However, many people include code in their webpages to BREAK FRAMES so you can't load the page into a frame.

[hidden]

I've just been looking around at your iframes pages Sam, great job - it's been a while since I looked at it but because I haven't built an iframe in a while I was looking around as my refresher course. Thanks to you for that info - very nicely done. 

[hidden]

Thanks! I tried to cover the issue as fully as I could, with lots of samples.
Believe it or not, I have a bit more to add, when I get time...

[hidden]

I have 3 links and an iFrame. Simple, photo gallery-type situation.

When I click on link #1, I would like to change the color of that link (or its background color), so that it is clear to the user that it is the content related to link #1 that is currently displayed in the iFrame.

I want to highlight the link, not as an active link or visited link, but as an indication of the current content of the iFrame.

I know, I can have a caption load along side the iFrame (in a second iFrame for instance, or on the external page itself), but I want something happen to the link itself, color or style... I hope this is clear.

Can someone help?

iFrames are great. Thanks in advance.
Laurent in France

[hidden]

I understand what you would like but don't know of any way to do it.

1) link is on different page than the content of the iframe and there is no way that the link would KNOW which page is loaded into the iframe.
2) links have their own properties as you mentioned.. unvisited, visited, hover state, clicked state and there is no way to build in state based on page location (even if on the same page).  HTML code has limitations and that is one of them.

When I have seen the link be a different color displayed, the menu, appearing to be the same from page to page is not actually the same.  Each page has a separate "CURRENT PAGE" defined so when the new page loads the link for the CURRENT PAGE is different. The code is not identical on each page/it is not static as used with an iframe.

As you mentioned, you COULD use the SPECIAL TARGET LINKING to have 2 iframes load as shown in this page.  Frame 1 could be a very small iframe could have the CURRENT/ACTIVE page name in it.  I have a title/description in a long thin iframe above a larger 2nd iframe.

I know of no other way to do it...

WELCOME TO THE FORUM!!

[hidden]

hello i got a huge problem with IFRAME HOVERS OVER IMAGE the tut its cool but my problem is that i got an index using tables and iframes, i`ve tryed to use the tut but i need it inverse, i mean the small iframe its under the big iframe, is there a way to make it? cuz its killing me.

i wanna use the smaller iframe as an backround of the bigger iframe (i can`t use the small frame image as a table backround image cuz it will multiply the image, if i use a <div> for that image it will appear over the iframe and it will make the scrool bar from iframe unusuable)

is there any way to do it? (hope u understanded my question  )

[hidden]

Probably a z-index issue (not covered in the tutorials...Even though I have pages ot tutorials on Iframes, I have not made samples to demo this topic yet...)

By specifying the z-order of iframes, you can stack them one on top of another.
Add STYLE="z-index:1" to your code so it looks like this:

Code: [Select]

<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="1" scrolling="no" STYLE="z-index:1"></iframe>

Each iframe should have its own z-index number. The lowest z-index number will be on the bottom, the highest number will end up on top.

Based on your description, without seeing the image and frames, I would put the image as a the background of the content page, not the background of a table. There are ways to make that image not repeat, or to repeat only horizontally or vertically, or fix it at left centered or right position, etc.  But that's the wonderful thing about the web.  We can do things many different ways!

[hidden]

wow the z-index thing its awsome, but i`ve used another method using <div> first i tought that using div i`ll get troubles from resolution, or from window size, but i`ve observed that using a <div> in a table the div won`t change his position, so this is the result:

http://www.alwadiegroup.com/mushop/

the index has, 3 iframes on the right side:

1 with the pic, positioned right
1 iframe its blank one to keep the table bigger
and the last one its the one with the main.htm included

and i think it look nice

[hidden]

Excellent solution!  Often there is more than one way to resolve web issues.
You've done a nice job on the site!   
Thanks for sharing it with us!

[hidden]

Hi,

I have a "framed" web page, with the LEFT side the NAV area (150 pixels wide), and
the middle being the "mainFrame" (750 wide).
Below is the the iFRAME code that gets loaded...
but all of the LINKed pages loads into the LEFT side, although the target=mainFrame or _blank.

Any suggestions on how to make this work greatly appreciated.


<HTML><HEAD><TITLE>7570 Left side Area uPAGE</TITLE></HEAD>
<BODY bgColor=#ffee88>
<DIV><A href="http://Rotary.org" target=mainFrame>Rotary.org[/url]</DIV>
<DIV>&nbsp;</DIV>
<DIV><A href="http://uPublishIT.com" target=_blank>uPublishIT[/url]</DIV>
</BODY></HTML>


Thanks,

Mike

[hidden]

Lots and lots of iframe information on Samisite.com
Check out the extensive tutorials here

Use this section of the forum to pose questions about the popular website feature.

Hi,

I have a "framed" web page, with the LEFT side the NAV area (150 pixels wide), and
the middle being the "mainFrame" (750 wide).
Below is the the iFRAME code that gets loaded...
but all of the LINKed pages loads into the LEFT side, although the target=mainFrame or _blank.

Any suggestions on how to make this work greatly appreciated.


<HTML><HEAD><TITLE>7570 Left side Area uPAGE</TITLE></HEAD>
<BODY bgColor=#ffee88>
<DIV><A href="http://Rotary.org" target="mainFrame">Rotary.org[/url]</DIV>
<DIV>&nbsp;</DIV>
<DIV><A href="http://uPubli.com" target="_blank">uPubli[/url]</DIV>
</BODY></HTML>


Thanks,

Mike

[hidden]

Please help! I've tried to go through the tutorials on iframes but my brain just don't get it. 

I'm trying to add iframes to this page:

h**p://www.geocities.com/bwinspirit/index10.html

I want the links below the player to open up where the player is on the same page.

Is this possible? Can anyone show me how?

Thank you, Barb

[hidden]

Instructions specifically for YOUR situation: 
Took me 45 minutes to write it up.  Will take you less time to implement! 

Note that some FREE hosting and some ONLINE site builders have limitations what you can do.
If you can insert code into your webpages, you can make an iframe.

STEP 1: Make the window
Take the video that is playing OFF the page.
Put it on its own plain web page (no menus, links, only the video)
These plain webpages are CONTENT pages, seen only through the iframe.
Call that video page:  videostart.html

Now, on the page where you sent us, you will replace the video with an iframe.
Call that iframe: videoframe
This will cut a WINDOW in your current web page. 
Since you want to start the page showing your starting video, I have set the code to point to that webpage when you open the webpage. And your video size is WIDTH="295" HEIGHT="245" so I made the iframe a bit bigger.  You may need to adjust the size a bit.

Code: [Select]

<iframe name="videoframe" src="videostart.html" width="310" height="260" frameborder="0" ></iframe>
Copy and place that piece of code into your insert web page design.
That is the basic iframe.  A window cut into your page, displaying another page.
------
STEP 2: Make the links
If you want to see other web pages in that window, you can put each video on its own plain web page.
Call them video1.html  video2.html   video3.html etc 
Then your links will ALL target the videoframe iframe, like these 3 samples:

Code: [Select]

<A href="http://www.geocities.com/bwinspirit/video1.html"  target="videoframe" title="Video: Highwayman">Highwayman</A>

Code: [Select]

<A href="http://www.geocities.com/bwinspirit/video2.html"  target="videoframe" title="Video: Barber's Adagio For Strings">Barber's Adagio For Strings</A>

Code: [Select]

<A href="http://www.geocities.com/bwinspirit/video3.html"  target="videoframe" title="Video: Give Me Love">Give Me Love</A>
I numbered your video pages so you can change out the videos and the page address remains correct.
You could name the video pages based on the name of the video if you want.  Just faster to build links following the same standard pattern for me.

---------
EXTRA STEP: (optional but RECOMMENDED STRONGLY!)
You should also use the code discussed in this thread to get rid of the dotted line and click to activate for the video that shows in Internet Explorer.  Put the code on each video page.

---------
EXTRA STEP: (optional)
If you do not want people to go to your video pages directly by typing in an address like

Code: [Select]

http://www.geocities.com/bwinspirit/video3.html you can set a special code into your video page that forces the visitor to come back to the WINDOW page first to see the video! 

Each video content page needs these lines of code at the top of the page:

Code: [Select]


<script type="text/javascript" src="iframe.js"></script>
<body onload="detect();">

Open NOTEPAD on your computer and paste in this code.
Save it as iframe.js

Code: [Select]

function detect()
{ var framesetpage = "index10.html"
   if (parent.location.href == window.location.href)
      parent.location.href    = framesetpage}
Now upload that file called iframe.js to the website using FTP software, into the same directory as the iframe. This file sends the visitor to the window page (index10.htm) with the iframe on it. If the iframe is in a different page, then identify that page in the code instead of index10.htm

[hidden]

THANK YOU Samantha!!!

I finished updating the code for the first video: Highwayman and it worked splendidly! I added the js as you suggested and have tried to do everything exactly per your instructions and it is EXACTLY what I wanted!

I couldn't be more pleased. 

I added a link to your website on that page:

http://www.geocities.com/bwinspirit/index10.html

Barb

 

[hidden]

Congratulations!     I am so happy for you.
Thanks for the incoming link!

[hidden]

I tried both of the extra steps and followed the directions to the letter but the iframe.js didn't work. Not sure if that Flash Fix worked because I never get that "click to activate and use this control" with the videos.

BTW...

I hope it's okay Sami, I posted your website on my "Web Friends" page with a note:

http://www.geocities.com/bwinspirit/index7.html

I clicked on many of the links on your page and...WOW! Your site is beeeautiful!   

Barb

[hidden]

Thank you for the extra note!  Very kind, lovely and appreciated. 

Your video page loads well and you have a nice choice for your visitors. Nice job with it!

As to the js scripts... you implemented them properly but neither are working as intended.  Probably due to the extra code that GEOCITIES free accounts have (for the ads and framing).  There are limits for free accounts. That's ok.  They are not NEEDED for the iframe functionality. 

In fact the one has nothing to do with iframes.  ieupdate.js is a patch for people on IE6 like my home computer because we DO get the message for every active content (videos, music, flash, etc). Microsoft broke that one with one of the updates a while back and webmasters that used FLASH menus everywhere screamed when it happened. I keep my work computer on version 7 and home 6 so I can see what the browser is doing to the website layout.

[hidden]

I've used other js and they worked fine, that's why I thought maybe I had done something wrong when I created the js file you recommended. I changed the word wrap setting thinking that might be it and uploaded the file again, but nothing. You must be right that free service has limits.

I changed my video page a bit, there were too many video icons so I used more iframe code to add scrolling. I think my next project will be to put the video icons on the left and the player on the right so that a visitor will not have to scroll down the page at all.

I've spent more time going through your code pages and had a wonderful time. Seeing and implementing new code has always been exciting for me but I'm getting to the age where things just don't connect as easy as they used to. I'm making more and more mistakes in my code and changing/checking is taking much longer.  Well, like my mama says...age is a curse!

Barb

[hidden]

Yes, we have run into certain limitations on free sites sometimes. I have dealt with 3 free sites myself and each had their own quirks for what would work, what does not work.  Others had similar experiences.

Your picture looks like you could easily be my sister. 
Age is not a curse, just a fact of life.  But bifocals ARE a curse! 

Some of the code on samisite.com has been modified for use in CSB and Trellix.  Since you do not use either, remove any ^GEMDIR/  shown in the code. You will not need it. 

Any code in particular you are interested in?  We could help you along with it too.  Just start a new thread in the Script - help with implementation section of the forum (can see it on the master index list).

[hidden]

I do see a resemblance there and ya wanna know somethin' else? I have three brothers, no sisters...I sure could have used one.

And I completely agree with you on the bifocals, have had mine for about two years and I'm STILL not used to them. 

Thanks for the information about the gem tag, I will try to remember that when I get ready to go through your code again.

But right now I have another query. I tried figuring this out myself, really I did but can't get it...if it's even possible:

On my video page you already know that my video is in a frame, those separate pages have the text below the video describing what the song is. I want to make that text a link to another page with the full sized video and I did for the first one: Highwayman...BUT, the link opens up a separate page and both videos are then playing at the same time. 

Is there any way to get the page to open up in the original video page?

Also, you mentioned in an earlier post that your work/home computers have different versions of IE so you can see your website in both. There's a website that can show you what your page looks like in several different browsers, it comes in real handy:

http://browsershots.org/

Thanks for any help you can offer with this latest issue!

Barb

[hidden]

I think I figured it out! 

I added _parent to the A tag. (Which I thought would open up in page in framed window.)

I'm not trusting what's showing up on my computer...would you please check and tell me if it works? Go to page:

http://www.geocities.com/bwinspirit/index10.html

Click on "Highwayman" in table below video and when it loads into video frame, click on the text directly below video. What happens?

Thank you for your help!

Barb

[hidden]

Hello!

I've managed to implement Special target link from http://www.samisite.com/test-csb2nf/id82.htm on my page, but have one question:

Can 1st link be loaded automatically, along with the page? I'd like to have picture from 1st link loaded along with the page.

Can somebody  me with this?  in advance!

Zel.

[hidden]

Welcome to the forum!   

Can 1st link be loaded automatically, along with the page?

Sure!
You can load anything you want into the iframes when the page first loads.

You did not give us the location of your page so I will refer to that sample again.

The code for both iframes is the same except for the size and border setting.
I choose to have blank web pages, but you could start with a web page that has text, images, anything you choose.
This is the code for the original iframes, source is a blank page textstart.htm

Code: [Select]

<iframe name="FRAME1" src="textstart.htm" width="740" height="100" frameborder="0" scrolling="no"></iframe>
<iframe name="FRAME2" src="textstart.htm" width="740" height="400" frameborder="1" ></iframe>
If you change the target source setting, you can define what your page will initially load.
Simply change your basic iframe code: change src= "textstart.htm" to some other source!

In my sample, my first link was this:

Code: [Select]

<a href="javascript:loadTwo('textj1.htm','h**p://hepsep.home.mindspring.com/0c2fa4e0.jpg')">Link 1</a>
That link has two sources, one for each iframe on the page. They are:
'textj1.htm','h**p://hepsep.home.mindspring.com/0c2fa4e0.jpg'

So if you want those two items loaded when the page loads, just change your iframe code to use those sources.
FRAME 1:  
Instead of

Code: [Select]

src="textstart.htm"Replace with your first target source:

Code: [Select]

src="textj1.htm"
FRAME 2:  
Instead of

Code: [Select]

src="textstart.htm"Replace with your second target source:

Code: [Select]

src="http://hepsep.home.mindspring.com/0c2fa4e0.jpg"
Like this:  

Code: [Select]

<iframe name="FRAME1" src="textj1.htm" width="740" height="100" frameborder="0" scrolling="no"></iframe>
<iframe name="FRAME2" src="http://hepsep.home.mindspring.com/0c2fa4e0.jpg" width="740" height="400" frameborder="1" ></iframe>

I would change the text of the first link to Back to Start, Start or Beginning, etc so people know they will return to a page they have already seen.

Let us know how it goes!!!  And share the address of the page too.  We'd love to see what you have done.