[SOLVED] Fun with iFrames (Well it would be fun if it worked... help!)

[Chezshire]

Hi and hello to everyone,

  in a nutshell, I'm trying to make a contact page for my student project. The contact page appears when you click on the word 'contact' in the nav area and when you do, the hover state triggers an iframe which has the contact page. I've tested the idea out and it works. But when i try to plug it in, it doesn't work correctly. I don't know why - i've firebugged it and used the firefox tool kit (thanks for the tip on this) and resolved some problems but I'm kind of stumped now. So. Uhm. Help?

 

Thank you everyone!

 

Proof of concept:http://xpg.us/xSCC/xFinalP/dinnersforsinners/template/contact/index.html

> If you mouse over the last bullet item it triggers the iFramed contact form as desired.

Test of Concept: http://xpg.us/xSCC/xFinalP/dinnersforsinners/template/tricks2.html

> As you can see the iFrame is in a permanent state of hover rather then only appearing when it hovers. Once i get the hover working correctly I will then style it nicely - right now it's a horribly obvious red so that it can be seen.

 

 

 

dfs_mini.css:

/* remove above code */

a#contactform div.popup {
display:none;
}
a#contactform:link div.popup {
display: none;
color:red;
position: absolute;
right: 100px;
top: 40px;
z-index: 100
}

a#contactform:visited div.popup {
display: none;
color:red;
	position: absolute;
right: 100px;
top: 40px;
z-index: 100
}

a#contactform:hover div.popup {
display: block;
padding: 0px;
text-align: left;
position: absolute;
right: 0px;
top: 40px;
z-index: 100;
}

div.popup input {
float: right;
width: 200px;
margin-left: 5px;
}

div.popup textarea {
float: right;
width: 200px;
}

iframe.contactform {
border: none;
width: 325px;
scrolling: no;
}

 

 

 

dfs_divs.css:

* { 
padding: 0; 
margin: 0; 
}

#wrapper { 
width: 900px;
margin: 0 auto;
}

#header {
width: 900px; 
height: 168px;
}

#indicia {	 
 width: 217px; 
 height: 168px;

 float: left;
}

#banner { 
 width: 683px;
 height: 135px;
 float: right;
 display: inline;
}

#nav_container { 	 
 width: 683px;
 height: 33px;

 float: left;
 position: relative;
 z-index: 1;
}

/* houses Content - Content Divs follow (#rightcolumn, #leftcolumn, etc.) */
#columnsFaux {
width: 900px;

background-image:url('../images/bkg/BkG_columnsFaux.gif');
/*background-color: #0f0;*/
background-repeat:repeat-y;
overflow: auto;
}

#leftcolumn { 
 background: #aa9f4e;

 width: 188px;
 min-height: 602px;

 margin-left: 29px;

 float: left;
}


#rightcolumn { 
 background: #fffff1 url('../images/bkg/bkg_leftcolumn.jpg') no-repeat bottom left;

 width: 649px; 
 min-height: 602px;

 border-right-style:solid;
 border-width:5px;
 border-color:#aa9f4e;


 float: left;
 display: inline;
}

	/* nested inside right column */
	#recipe { 
	width: 440px;
	margin-left: 10px;

	float: left;
	}

	/* nested inside right column */
	#ingredients {
	text-align: center;
	width: 185px;
	margin-right: 10px;
    
	float: right;
	}

		/* nested inside right column */		
		/* Only applies to Schedule Page */
		#calendar { 
		width: 400px;
		margin-left: 10px;

		float: left;
		}

	/* nested inside right column of Tricks page */
	#tricks { 
	width: 440px;
	margin-left: 10px;

	float: left;
	}

	/* nested inside right column of Tricks page */
	#notes {
	text-align: center;
	width: 185px;
	margin-right: 10px;
    
	float: right;
	}

#footer { 
width: 900px;
height: 43px;

background-image:url('../images/bkg/bkg_06.gif');
background-repeat:no-repeat;
background-position:top right;

clear: both;
}

#login {
text-align: center;

width: 188px;
height: 43px;

margin-left: 29px;

float: left;
}

div.login {
min-height: 43px;
display: table-cell;
vertical-align: middle;
}

#legal {
text-align: center;

width: 683px;
height: 43px;

float: right;
display: inline;
}

#badgesOfHonor
{
text-align: center;

margin-top: 40px;

}

 

[JustLikeIcarus]

The :hover pseudo class is only going to apply that specific css when the mouse cursor is actually hovering over the link.  Once you move the mouse away they will be removed.  This type of thing is best done with Javascript.

[Chezshire]

Thanks for the advice JustLikeIcarus, very much appreciated. That said I was able to solve it so that it works. The problem as it turns out was a pathing issue - I didn't have my css sheet for the iFrame correctly pathed (very embarrassed by that).

 

As for doing something like this with JavaScript, I'm not very good with JavaScript at this time and honestly wouldn't know where to begin or to end (yet). I'm going to start studying JavaScript starting this december and with your advice in mind will likely revisit this site build and retool once I understand how too - Thanks!

 

-Chez

 

PS: How does one become an 'enthusiast' or a 'guru', etc? Just kind of curious.

[Maq]

PS: How does one become an 'enthusiast' or a 'guru', etc? Just kind of curious.

 

Hi Chezshire

 

The groups (Guru) are decided by the PHPFreaks team/staff.  The post based ranks (enthusiast), are well, based on post count.

 

Read more here: http://www.phpfreaks.com/forums/index.php/topic,232740.0.html