View Full Version : IFRAME and Behaviors

12-12-2005, 09:02 PM
I have a website with thumbnail images. What I'm looking to do, using <IFRAME>, is when the visitor clicks on the thumbnail the appropriate frame will load.

I'm assuming that it would be a behavior. Unfortunately I'm not sure what behavior and how I can get it to load the appropriate page into the frame.

Any advice? :(

Creative Insanity
12-12-2005, 10:14 PM
No it is not a behaviour. It is just a straight out link and done thus:

<a href="file_to_load" target="iframe_name"><img src="link_image.gif" border="0"></a>

12-12-2005, 11:34 PM
Creative Insanity,

Thank you SOOO much for responding.


12-13-2005, 01:45 AM
Maybe I'm not doing it right? Here is my original code:

<span style='color:red'>added code tags as i hate an untidy house - dj</span>

<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<td width="45%" valign="top"><table width="98%" border="0" align="center" cellpadding="3" cellspacing="0">
<td width="33%"><div align="center"><a href="javascript:;" onMouseOver="MM_swapImage('Image1','','corpid/burst/images/thumbs/logo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="corpid/burst/images/thumbs/logo_bw.jpg" name="Image1" width="100" height="100" border="0" id="Image1"></a></div></td>
<td width="33%"><div align="center"><a href="New%20Folder/corpid/burst/images/thumbs/poster_bw.jpg" onMouseOver="MM_swapImage('Image2','','corpid/burst/images/thumbs/poster.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="corpid/burst/images/thumbs/poster_bw.jpg" name="Image2" width="100" height="100" border="0" id="Image2"></a></div></td>
<td width="33%"><div align="center"><a href="javascript:;" onMouseOver="MM_swapImage('Image3','','corpid/burst/images/thumbs/bannergif.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="corpid/burst/images/thumbs/banner_bw.jpg" name="Image3" width="100" height="100" border="0" id="Image3"></a></div></td>
<td><div align="center"><a href="javascript:;" onMouseOver="MM_swapImage('Image4','','corpid/casa_latina/images/thumbs/casa_stationary.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="corpid/casa_latina/images/thumbs/casa_stationary_bw.jpg" name="Image4" width="100" height="100" border="0" id="Image4"></a></div></td>
<td><div align="center"><a href="javascript:;" onMouseOver="MM_swapImage('Image5','','corpid/casa_latina/images/thumbs/casa_menu.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="corpid/casa_latina/images/thumbs/casa_menu_bw.jpg" name="Image5" width="100" height="100" border="0" id="Image5"></a></div></td>
<td><div align="center"><a href="javascript:;" onMouseOver="MM_swapImage('Image6','','corpid/casa_latina/images/thumbs/casa_poster.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="corpid/casa_latina/images/thumbs/casa_poster_bw.jpg" name="Image6" width="100" height="100" border="0" id="Image6"></a></div></td>
<td valign="top"><p align="center" class="portfolio">
[b] [color=red]<iframe src="images/corpid/casalatina/frames/menu.htm" name="frame" width="325" marginwidth="0" height="300" marginheight="0" scrolling="no" frameborder="0"> <font color="#FFFFFF">Sorry your browser does not support certain html code. Please download the latest version of your browser and come back. Thank you.</font></iframe>[/color][/b]

Creative Insanity
12-13-2005, 01:49 AM
Not a very presice name ah.
Maybe try renaming so they make sence to what they are for.
Like that iframe could be named nav_frame, or menu_frame.
The purpose of iframes is to have embeded scrolling.

12-13-2005, 02:23 AM
Okay ... I got it to work, but I do not want scroll bars .. how do I get rid of them?


Creative Insanity
12-13-2005, 05:07 AM
With an iframe it depends on the browser. FF 1.0.7 will not show scrollbars if they not needed but IE will show them regardless. I know of no way to remove them, other than colour them same as the bg colour. Why are you using an iframe for a menu selection anyway if it is a fixed size? Would not divs do the same job and without the bars.

12-13-2005, 08:13 AM
try this monkey...

It will resize the iframe to whatever size page it pulls in therefore scollbars are off as they arent needed

i have tested it across the common browsers

place in <head> tag..
var iframeids=["myframe"]

// hide frame if not supported dj 17/11/05
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigat or.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 // add additional height for early firefox users dj 17/11/05

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextr aHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe)
currentfr.attachEvent("onload", readjustIframe)

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)

function loadintoIframe(iframeid, url){
if (document.getElementById)

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)


iframe code....
<iframe id="myframe" src="shop.html" width="750" scrolling="auto" align="middle" frameborder="0"></iframe>

12-14-2005, 12:39 PM
Someone had said to me, and I thought it was on here, "why use IFRAMES when you can use DIV's"

What working on is a Professional Portfolio of my work. Here's what I have in mind:

When you view any specific topic/page there are be thumbnails of some of my works. As the visitor clicks on the image, I want a preview of that image to open up to the right and text to open up under the thumbnails on the left (bottom). I know that as you read this it may be hard to visualize but it does look okay. So I started out using layers and adding the show/hide behavior to the thumbnails, but what I discovered is that if you view my site at a monitor resolution other then the one i designed it on it looks all jacked up. The layers are NOT where they are supposed to be.

So ... I was given the suggestion to use IFRAMES. I also tried using FLASH, with what little knowledge I have with it. I can create animations and such, but was about to throw the computer out the window trying to design an entire site.

I need to design something that is easy to modify. Something I can add and take away things easily.

I am open to suggestions ... do you feel that IFRAMES is the best way to go? Aren't DIVS actually CSS? Or ... if you happen to have some other suggestions PLEASE ... by all means ... lay them on me.

Thank you all, and Happy Holidays.
Aleja :blink:

12-14-2005, 12:54 PM
IFRAME and DIV are 2 completely different things.

IFRAME is used when you need to load an external page into your layout. If you are using IFRAMES for pages that are all in your website, you have to go back to the person that adviced you to use them and ask what he's thinking.

DIV is simply a container in your html code that you can assign any CSS style and content to, in any way you want.
DIV's are NOT CSS. HTML is structure and CSS is style. 2 complete different things. A website could consist of 3 'layers'. One is structure, which is done by HTML, the other is style which is done by CSS, and third is behaviours which is done by javascript.

You should look into Dreamweaver Templates and a good HTML book. There's plenty of posts in this forum about templates:) for further info just google it. You'll find plenty of HTML books on amazon.

12-14-2005, 03:15 PM

Thank you for your response. I guess I have some things to think about. Although I am not a "newbie" I am finding after 5+ years of web design, and only using HTML and tables there is still soooo much for me to learn.

I've learned that layers are not necessarily reliable, so building a portfolio with this technique is not successful. However, because I've never used DIV codes, but have seen them before, I am really unsure the best way to tackle this project.

Aleja :blink:

12-14-2005, 03:28 PM
If you are using IFRAMES for pages that are all in your website, you have to go back to the person that adviced you to use them and ask what he's thinking.
it wasnt me but ....

i like IFRAMES and have used them as i have used other tools in my tool shed. They have come in very useful at times within the application development area and i have used them to call pages that live within the root of my site. Yes i could have linked them to a _blank or even a _self or even a popup but i chose an IFRAME and a fine job, me and the IFRAME did together

In the web world can you say there is a tool Specifically for Specific jobs (use this for this and that for that) i dont think there is. I understand that there is limits but if you use a tool like an IFRAME in a different and novel way then that what makes the web and web development special.

example <table>. This has got to be one of the most abused tags ever. I think it was devised to present tabular data

by bending the rules is what pushes the technology forward (if there were any rules in the first place)

12-14-2005, 05:14 PM
davidj, why would you use iframes when you can simply do a div with overflow scroll? (If it's the scroll effect you are trying to achieve) We all know about the usability issues with frames.

Creative Insanity
12-14-2005, 05:38 PM
div with overflow scroll?
Not being one that uses divs, tell me more about this.

12-14-2005, 06:22 PM
The basics of it is pretty easy, use the CSS property OVERLOW to set what should happen if the content is too large for the parent box:
<div style="width: 300px; height: 100px; overflow: scroll;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ranjan wrote a tut on it as well
http://www.dreamweaverclub.com/css-scroller.php ('http://www.dreamweaverclub.com/css-scroller.php')

Creative Insanity
12-15-2005, 07:33 AM
Ahh cool dom.. must read that.

Sorry aestronza for hijacking your thread.. you can have it back now LOL