Message 1519 of 1761

Using an Iframe for a Menu

Some folks are interested in how to use an iframe for a menu in a message post and/or on their web site. This thread is to discuss the best ways to do this.

I'm going to give information about how I did the iframe (scroll box) in the sticky and ask you folks to make suggestions for improvements to the code, ideas about styling the external HTML file and whatever other tips and tricks you would like to share. I've already found a few things that needed to be changed from the original, so it won't hurt my feelings at all if you point out something for improvement or make suggestions.

See the first reply for more information
Mimi58's profile
Where is the first reply???
Oceanbreez61's profile

over 3 years ago
The code for the iframe is in the "codes to revise and use" file. view link ccs.110mb.com/eons/codestoshare.html The message box editor changed the actual URL of the external file to "view link". You put the iframe code where you want to iframe to appear on your web page or in your post.

The code:
<center><div style="width:525; height:150; clip:rect(0,404,404,0); background:#FFF;"><iframe id="stlinks" name="stlinks" src="view link" width="525" height="150" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:5px; border-color: maroon; background:#FFF; border-style: double;"></iframe></div></center>

You also need an external HTML page where you have your links listed. I used a table to help with layout, but that's not strictly necessary. Here's the link to the Studio external file. ccs.110mb.com/eons/studiomenu.html view link

I gave the iframe an id and a name, so these would need to be changed in your iframe. You would also need to change the URL to point to your external file.

You also need to add a target after the links in the source of the HTML external file. I used
target="_parent"
but have since learned that it is probably better to use
target="_blank"

I store the external file offsite at 110mb so that I can update it without breaking the link to it in the sticky.

There are different things you can change about the code and different ways you can style the HTML file. This is how the Studio menu was made. If you have any questions, just ask.

Also, I'm salivating to learn ways it could improve and your tips, tricks and techniques - so, if you have information to share - please post!
Mimi58's profile

over 3 years ago
Here it is! My dial up connection wanted to aggravate me today!
Mimi58's profile

over 3 years ago
Mimi, I'm terribly confused. What is an iframe (scroll box)? Menue box etc.
Roseartlefty's profile

over 3 years ago
The word "menu" is a term for a list of navagation links - usually the navigation links on a web site. There is a box in the "announcement" sticky that has a "menu" of links to help files. There are different ways of making a "menu". Some use a "drop down" list.

The box in the "announcement" sticky for the group has a scroll bar on it's right side that you use to see all the links. So, some people call that kind of a box a scroll box - because you can scroll to see the rest of the information.

It was made by using code for an iframe which is short for "inline frame". That part of the announcement "calls in" a whole different page and puts it in the box. It's kind of like looking through a window and seeing another page. Iframes can call in any web page.

Here's a scroll box where you can peek at w3schools.com front page. It was made using the code for an iframe.



You have to use the scroll bars to see it because the information on the page is bigger than the iframe box.

I am using the scroll box for the links to the help files so that when I want to add, delete or change something in the "menu", I can edit the other page that's offsite and not have to redo the whole sticky.

So, think of it this way
menu - list of links
Scroll box - a box with a scroll bar at the side and/or bottom
iframe - a window on a web page where you can see a web page located somewhere else. (There's a little more to it, but that's enough for now)

You can play with an iframe at www.w3schools.com/html/tryit.asp? filename=tryhtml_iframe view link

Hope this helps! If you want to know more, just ask!
Mimi58's profile

over 3 years ago
More about the External HTML page.

It doesn't have to be anything fancy. You can do it in notepad Textedit for Macs. This is part of the left column of the Studio scroll box without a table and using target="_blank":
- - - - - - - - - - - - -
Creating a web site help file

Useful Tools
"Fix code so you can post it converter" View changes as you Edit

The Studio Help Files
Codes to Revise and use The Studio Links File (Index)
- - - - - - - - - - - - - - - -
And here is the code:

<a href="http://ccs.110mb.com/webpage.html" target="_blank">Creating a web site</a> help file<br /><br />Useful Tools<br /><a href="http://www.botos.com/eons/ convert_04.html" target="_blank">"Fix code so you can post it converter"</a> <a href="http://htmledit.squarefree.com/" target="_blank">View changes as you Edit</a><br /><br />The Studio Help Files<br /><a href="http://ccs.110mb.com/eons/ codestoshare.html" target="_blank">Codes to Revise and use</a> <a href="http://ccs.110mb.com/eons/ StudioLinks.html" target="_blank">The Studio Links File (Index)</a>

- - - - - - - - - - - - - -
The main thing to remember is to add target="_blank" after each link and this is done to the source code.

When you have your list ready in notepad or Textedit for Macs, then add the HTML page tags.

Above your list put:
<html> <head> <title>YOUR TEXT</title> <body>

After your list put:
</body> </html>

Then save the page with either .htm or .html as the suffix instead of .txt

Course, it's easier to do it with Kompozer or another HTML editor! Those instructions come next!

PS: Thanks again for your converter tool, mbotos. It sure does come in handy posting code!
Mimi58's profile

over 3 years ago
Creating an external HTML links file using an HTML editor, such as Kompozer. (Use the help file, "Introduction to Kompozer" or the help file, "Introduction to SeaMonkey" as a reference.)
     1.  Create a table to help you limit the width, if you want.
     2.  Start writing your list of title sections and links.
     3.  Go to source view. Add target="_blank" after every link, but before the >
          Example: <a href="http://ccs.110mb.com/eons/ StudioLinks.html" target="_blank">The Studio Links File (Index)</a>
     4.  Use the editor of choice to put in a background, change the font color, size and style, etc.
     5.  Save you file on your computer. 

I just love to let an HTML editor do the work!

I've just about revised the section on iframes in the "codes to revise and use" file. It will tell you how to put everything together. There are also a few extra tips about posting in a Eons message box. So, be sure to check it out!

Do any of you folks have some tips, techniques or suggestions that would make this easier or better? Does anyone have something they don't quite understand? Feel free to post!
Mimi58's profile

over 3 years ago
Can't answer your PM. Sorry.

I received a PM asking for directions on making a "Scrolling Directory", but there was no choice to reply under the message. I then went to the inbox and clicked on reply. This message popped up, "This member has chosen not to receive private messages." So, there is either a glitch in the system or the person didn't realize that I wouldn't be able to reply to their PM. So, I'm bumping this older post up hoping the person can find it.

The info in the directory has gone through various changes. In the beginning, the file stored off site contained a table with a list which was changed off and on. Here's a link to one of the older versions. view link www.eons.com/groups/topic/1528664- Scrolling-Directory-FYI The info stored offsite can be a simple list, also. The latest revision was adding the drop down menus.

You could also have a scrolling div (container) in your sticky message with a list of links. I'm googling to try to find that post, so there may be another older post appear, LOL!

You can see other examples of iframes being used to call in info from other sites. And if you use iframes and want to invite folks to see what you've done, feel free to post a link to your group(s) in a reply. It's always fun to see what others have done.

If you are interested in how to do this, just ask questions about what you don't understand.
Mimi58's profile

over 2 years ago

Eons Picks

Visit Eons-Only Specials
For a limited time, get FREE SmartSound Earbuds on purchases of $100+! Use the code “EONSBUDS” at checkout.

Eons Rewards Club
Great shopping deals & savings for Eons Members!

Save on Eons Games
Eons Downloadable Games. Now just $6.99!

Read Member Blogs
Eons has great blogs—read the latest from members or start yours!