PDA

View Full Version : Frame Trouble

Teragram
11-18-2004, 07:32 PM
I am busy coding the newest version of my website...

http://www.teragramfilms.com/birdy.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Teragram Films</title>

<style>


#content iframe {position: absolute; height: 270px; width: 479px; margin-top: 40px; margin-left: -65px}

body {background-color: #D2F0FF; margin: 0; padding: 0}
#shellshell {height: 100%; width: 100%}
#shell {background-image: url(birdy.jpg); position: fixed; width: 850px; height: 700px; left: 0px; top: 0px; background-repeat: no-repeat}
</style>
</head>
<div id="shellshell">
<div id="shell">
</style>
</head>
</p>

<style type="text/css">

/*<![CDATA[*/


select {
font-family:times new roman, system;
font-size:11px;
color:#ffffff;
background:#FF067F;
}


#sel0 {
width:75px;
margin:4px;
float:left;
}
#sel1,#sel2,#sel3,#sel4,#sel5,#sel6,#sel7,#sel8 {
display:none;
width:75px;
margin:4px;
float:left;
}


/*//]]>*/

</style>

<script type="text/javascript">
//<![CDATA[

function displayBoxes(num) {

if(num=="") {
return;
}
else {
document.getElementById("sel"+num).style.display="block";
}
}

function hideBoxes() {

for(num=1;num<document.forms[0].elements.length;num++) {
document.getElementById("sel"+num).style.display="none";
document.forms[0].reset();
}
}

//]]>
</script>

</head>
<body>



<form action="#">
<div>
<select id="sel0" onchange="displayBoxes(this.value)" onfocus="hideBoxes()">
<option value="0"> - - - - - -</option>
<option value="8">_New</option>
<option value="1">_Films</option>

<option value="2">_Bios</option>
<option value="3">_Upcoming</option>
<option value="7">_Downloads</option>
<option value="4">_Contact</option>

</select>

<select id="sel1" onchange="displayBoxes(this.value)">
<option >_</option>
<option value="5">_Shorts</option>
<option value="6">_Bloopers</option>

</select>

<select id="sel7" onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">
<option>_</option>
<option value="wallpaperpage.html">_Wallpapers</option>
<option value="buddyiconpage.html">_Buddy Icons</option>
<option value="bannerpage.html">_Banners</option>
<option value="flyerpage.html">_Flyers</option>
</select>

<select id="sel2" onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">
<option >_</option>

<option value="jaredpage2.html">_Jared</option>
<option value="andrewpage2.html">_Andrew</option>
<option value="milespage2.html">_Miles</option>
<option value="elipage2.html">_Eli</option>
<option value="markpage2.html">_Mark</option>
<option value="nicolepage2.html">_Nicole</option>
<option value="stephpage2.html">_Stephanie</option>
</select>

<select id="sel8" onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">

<option >_</option>
<option value="newfilms.html">_Films</option>
<option value="everythingelse.html">_Everything Else</option>

</select>


<select id="sel3" onchange="displayBoxes(this.value)">
<option>_</option>
<option value="13">Fifty</option>

</select>

<select id="sel4" onchange="displayBoxes(this.value)">
<option>_</option>
<option value="jaredcontactpage.html">_Jared</option>
<option value="andrewcontactpage.html">_Andrew</option>
<option value="questionscontactpage.html">_Questions</option>

</select>

<select id="sel5" onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">
<option>_</option>
<option value="altercationpage2.html">_Altercation</option>

<option value="shockpage2.html">_Shock</option>
<option value="mooshoopage2.html">_Moo-Shoo</option>
<option value="sevenstepspage2.html">_Seven Steps</option>
<option value="rougepage2.html">_Le Rouge</option>
<option value="atticpage2.html">_Attic Phase 2</option>
</select>

<select id="sel6" onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">
<option>_</option>
<option value="tutm25page2.html">_Turn up the Madness 2.5</option>

<option value="tutm2page2.html">_Turn up the Madness 2</option>
<option value="tutmpage2.html">_Turn up the Madness</option>

</select>
</div>

<div id="content">
<iframe name="content" height="270" width="479" src="hello.html" frameborder="0" scrolling="yes"></iframe>
</div>

</form>
</body>
</html>
</div>
</div>
</body>
</html>



I am finding that, after i created all the individual pages, "atticpage2.html","wallpaperpage.html", etc...that i cannot seem to get the pages to open with in the frame. I have never used css before, and the drop boxes are coded in css. Does anyone know the script needed and/or where to place it, so the pages will appear within the frame? Thanks.

P.S. If you're using IE the frame will move to the right everytime a new dropbox opens, it does not do this in Firefox, anyone know why it moves and how to remedy it?
Pegasus
11-18-2004, 11:13 PM
You have several </head> tags and a couple of <body> tags, which isn't allowed. You also have your main tags, <html><body>, etc. incorrectly nested. And that's just at a quick glance.

I'm not sure what else is wrong with the code, but you can check the page out at http://validator.w3.org , either an on-line page, or one that you have on your computer.

Peg
Teragram
11-18-2004, 11:17 PM
thank you for your comment, but, what about my question?
Pegasus
11-18-2004, 11:38 PM
Well, part of the problem could be the incorrect code you have on the page. The rest of it is the fact that you haven't targetted the pages to go into the iframe.

<a href="mypage.html" target="content">Link</a>

Peg
Teragram
11-18-2004, 11:45 PM
Ive tried that, the "a href" method. But I must have "option" in there. And as far as the tags are concerned, i dont understand what you were saying...not allowed? Arent "body" and "head" tags mandatory?
Pegasus
11-19-2004, 12:31 AM
They are mandatory but there's only supposed to be one pair of each, not three or four of each.

Okay, found the problem. Add this part inside the <head></head> tags at the top of your code.

<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

Then, at the beginning of each menu add:

onChange="MM_jumpMenu('content',this,1)"

Or rather, add the MM_jumpMenu('content',this,1)" to your current onChange values. That should work.

Peg
Teragram
11-19-2004, 10:46 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Teragram Films</title>

<style>


#content iframe {position: absolute; height: 270px; width: 479px; margin-top: 40px; margin-left: -65px}

body {background-color: #D2F0FF; margin: 0; padding: 0}
#shellshell {height: 100%; width: 100%}
#shell {background-image: url(birdy.jpg); position: fixed; width: 850px; height: 700px; left: 0px; top: 0px; background-repeat: no-repeat}
</style>
<script language="JavaScript">
<function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
>
</script>





</head>
<div id="shellshell">
<div id="shell">
</style>
</head>
</p>

<style type="text/css">

/*<![CDATA[*/


select {
font-family:times new roman, system;
font-size:11px;
color:#ffffff;
background:#FF067F;
}


#sel0 {
width:75px;
margin:4px;
float:left;
}
#sel1,#sel2,#sel3,#sel4,#sel5,#sel6,#sel7,#sel8 {
display:none;
width:75px;
margin:4px;
float:left;
}


/*//]]>*/

</style>
<script type="text/javascript">
//<![CDATA[

function displayBoxes(num) {

if(num=="") {
return;
}
else {
document.getElementById("sel"+num).style.display="block";
}
}

function hideBoxes() {

for(num=1;num<document.forms[0].elements.length;num++) {
document.getElementById("sel"+num).style.display="none";
document.forms[0].reset();
}
}

//]]>
</script>

</head>
<body>



<form action="#">
<div>
<select id="sel0" onchange="displayBoxes(this.value)" onfocus="hideBoxes()">
<option value="0"> - - - - - -</option>
<option value="8">_New</option>
<option value="1">_Films</option>
<option value="2">_Bios</option>
<option value="3">_Upcoming</option>
<option value="7">_Downloads</option>
<option value="4">_Contact</option>

</select>

<select id="sel1" onchange="displayBoxes(this.value)">
<option >_</option>
<option value="5">_Shorts</option>
<option value="6">_Bloopers</option>
</select>

<select id="sel7" onchange="location.href=this.value"; "MM_jumpMenu('content',this,1)">
<option>_</option>
<option value="wallpaperpage.html">_Wallpapers</option>
<option value="buddyiconpage.html">_Buddy Icons</option>
<option value="bannerpage.html">_Banners</option>
<option value="flyerpage.html">_Flyers</option>
</select>

<select id="sel2" onchange="location.href=this.value">
<option >_</option>
<option value="jaredpage2.html">_Jared</option>
<option value="andrewpage2.html">_Andrew</option>
<option value="milespage2.html">_Miles</option>
<option value="elipage2.html">_Eli</option>
<option value="markpage2.html">_Mark</option>
<option value="nicolepage2.html">_Nicole</option>
<option value="stephpage2.html">_Stephanie</option>
</select>

<select id="sel8" onchange="location.href=this.value">
<option >_</option>
<option value="newfilms.html">_Films</option>
<option value="everythingelse.html">_Everything Else</option>

</select>


<select id="sel3" onchange="displayBoxes(this.value)">
<option>_</option>
<option value="13">Fifty</option>

</select>

<select id="sel4" onchange="displayBoxes(this.value)">
<option>_</option>
<option value="jaredcontactpage.html">_Jared</option>
<option value="andrewcontactpage.html">_Andrew</option>
<option value="questionscontactpage.html">_Questions</option>

</select>

<select id="sel5" onchange="location.href=this.value">
<option>_</option>
<option value="altercationpage2.html">_Altercation</option>
<option value="shockpage2.html">_Shock</option>
<option value="mooshoopage2.html">_Moo-Shoo</option>
<option value="sevenstepspage2.html">_Seven Steps</option>
<option value="rougepage2.html">_Le Rouge</option>
<option value="atticpage2.html">_Attic Phase 2</option>
</select>

<select id="sel6" onchange="location.href=this.value">
<option>_</option>
<option value="tutm25page2.html">_Turn up the Madness 2.5</option>
<option value="tutm2page2.html">_Turn up the Madness 2</option>
<option value="tutmpage2.html">_Turn up the Madness</option>
</select>



</div>



<div id="content">
<iframe name="content" height="270" width="479" src="hello.html" frameborder="0" scrolling="yes"></iframe>
</div>

</form>





</body>
</html>




</div>
</div>

</body>
</html>




So my code should now look like this? If so, its not working.

So sorry, but im clueless when it comes to css and javascript. Thanks so much, youve been a great help thus far.

-Jared
Pegasus
11-19-2004, 12:17 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Teragram Films</title>
<style>
#content iframe {position: absolute; height: 270px; width: 479px; margin-top: 40px; margin-left: -65px}
body {background-color: #D2F0FF; margin: 0; padding: 0}
#shellshell {height: 100%; width: 100%}
#shell {background-image: url(birdy.jpg); position: fixed; width: 850px; height: 700px; left: 0px; top: 0px; background-repeat: no-repeat}
</style>
<script language="JavaScript">
<function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
>
</script>

<style type="text/css">
/*<![CDATA[*/
select {
font-family:times new roman, system;
font-size:11px;
color:#ffffff;
background:#FF067F;
}

#sel0 {
width:75px;
margin:4px;
float:left;
}
#sel1,#sel2,#sel3,#sel4,#sel5,#sel6,#sel7,#sel8 {
display:none;
width:75px;
margin:4px;
float:left;
}

/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function displayBoxes(num) {
if(num=="") {
return;
}
else {
document.getElementById("sel"+num).style.display="block";
}
}

function hideBoxes() {
for(num=1;num<document.forms[0].elements.length;num++) {
document.getElementById("sel"+num).style.display="none";
document.forms[0].reset();
}
}
//]]>
</script>
</head>
<body>
<div id="shellshell">
<div id="shell">
<div>
<form action="#">
<select id="sel0" onchange="displayBoxes(this.value)" onfocus="hideBoxes()">
<option value="0"> - - - - - -</option>
<option value="8">_New</option>
<option value="1">_Films</option>
<option value="2">_Bios</option>
<option value="3">_Upcoming</option>
<option value="7">_Downloads</option>
<option value="4">_Contact</option>
</select>

<select id="sel1" onchange="displayBoxes(this.value)">
<option >_</option>
<option value="5">_Shorts</option>
<option value="6">_Bloopers</option>
</select>

<select id="sel7" onchange="location.href=this.value"; "MM_jumpMenu('content',this,1)">
<option>_</option>
<option value="wallpaperpage.html">_Wallpapers</option>
<option value="buddyiconpage.html">_Buddy Icons</option>
<option value="bannerpage.html">_Banners</option>
<option value="flyerpage.html">_Flyers</option>
</select>

<select id="sel2" onchange="location.href=this.value">
<option >_</option>
<option value="jaredpage2.html">_Jared</option>
<option value="andrewpage2.html">_Andrew</option>
<option value="milespage2.html">_Miles</option>
<option value="elipage2.html">_Eli</option>
<option value="markpage2.html">_Mark</option>
<option value="nicolepage2.html">_Nicole</option>
<option value="stephpage2.html">_Stephanie</option>
</select>

<select id="sel8" onchange="location.href=this.value">
<option >_</option>
<option value="newfilms.html">_Films</option>
<option value="everythingelse.html">_Everything Else</option>
</select>

<select id="sel3" onchange="displayBoxes(this.value)">
<option>_</option>
<option value="13">Fifty</option>
</select>

<select id="sel4" onchange="displayBoxes(this.value)">
<option>_</option>
<option value="jaredcontactpage.html">_Jared</option>
<option value="andrewcontactpage.html">_Andrew</option>
<option value="questionscontactpage.html">_Questions</option>
</select>

<select id="sel5" onchange="location.href=this.value">
<option>_</option>
<option value="altercationpage2.html">_Altercation</option>
<option value="shockpage2.html">_Shock</option>
<option value="mooshoopage2.html">_Moo-Shoo</option>
<option value="sevenstepspage2.html">_Seven Steps</option>
<option value="rougepage2.html">_Le Rouge</option>
<option value="atticpage2.html">_Attic Phase 2</option>
</select>

<select id="sel6" onchange="location.href=this.value">
<option>_</option>
<option value="tutm25page2.html">_Turn up the Madness 2.5</option>
<option value="tutm2page2.html">_Turn up the Madness 2</option>
<option value="tutmpage2.html">_Turn up the Madness</option>
</select>
</form>
</div>

<div id="main">
<iframe name="content" height="270" width="479" src="hello.html" frameborder="0" scrolling="yes"></iframe>
</div>

</div>
</div>

</body>
</html>
I'm not the greatest with Javascript, either, but I think this will work. You had a few of your tags incorrectly nested and a few too many ending tags. You also had the iframe and a <div> named the same. You can't do that. Each name has to be unique. I renamed the <div> "main".

If not, I'll ask one of the Javascript whizkids to wander in and see what we're both doing wrong. ;)

Peg
Teragram
11-19-2004, 01:31 PM
thank you so much. I need to know where to place target="content" as to direct it to open within the frame....also, with the code that you have given me, the frame moves to the right everytime i open a new drop box, it used to only do this in IE...

look at it here (http://www.teragramfilms.com/birdy.html)


Any suggestions?
Pegasus
11-19-2004, 03:06 PM
Okay, I think I messed up. Where you want the content of the jump box, the script looks like this:

<select id="sel#" onchange="location.href=this.value; MM_jumpMenu('content',this,1)">

I think I had one pair of quotes too many.

And if we put a spacer in here like so:

</form>
</div>
<p>&amp;nbsp;</p>
<div id="main">

it should move the iframe box down a bit so that it doesn't move. The other option would be to position the box using CSS, but I'm not quite sure how that works yet. The first set would be relatively positioned and the second would be absolute, leaving a bit of space for the dropdown menus.

I'll go see if I can find Scoutt or Coothead. They're whizzes at this stuff.

Peg
coothead
11-19-2004, 04:29 PM
Hi there Teragram, Hi Peg,

just popped in with my tool box :D

Try this...<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>
<title>Teragram Films</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
/*<![CDATA[*/

body {
background: #d2f0ff;
margin: 0px;
padding: 0px;
}

#shell {
background-image: url(birdy.jpg);
background-repeat: no-repeat;
position: fixed;
width: 850px;
height: 700px;
left: 0px;
top: 0px;
}

select {
font-family:times new roman, system;
font-size:11px;
color:#fff;
background:#ff067f;
}

#sel0 {
width:75px;
margin:4px;
float:left;
}

#sel1,#sel2,#sel3,#sel4,#sel5,#sel6,#sel7,#sel8 {
display:none;
width:75px;
margin:4px;
float:left;
}

#content {
position: absolute;
top: 40px;
left: 65px;
height: 270px;
width: 479px;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

function displayBoxes(num) {

if(num=="") {
return;
}
else {
document.getElementById("sel"+num).style.display="block";
}
}

function hideBoxes() {

for(num=1;num<document.forms[0].elements.length;num++) {
document.getElementById("sel"+num).style.display="none";
document.forms[0].reset();
}
}

function goThere(url) {

document.getElementById("content").src=url;
}

//]]>
</script>

</head>
<body>

<div id="shell">

<iframe id="content" src="hello.html" frameborder="0" scrolling="yes"></iframe>

<form action="#">
<div>
<select id="sel0" onchange="displayBoxes(this.value)" onfocus="hideBoxes()">
<option value="0"> - - - - - -</option>
<option value="8">_New</option>
<option value="1">_Films</option>
<option value="2">_Bios</option>
<option value="3">_Upcoming</option>
<option value="7">_Downloads</option>
<option value="4">_Contact</option>
</select>

<select id="sel1" onchange="displayBoxes(this.value)">
<option >_</option>
<option value="5">_Shorts</option>
<option value="6">_Bloopers</option>
</select>

<select id="sel3" onchange="displayBoxes(this.value)">
<option>_</option>
<option value="13">Fifty</option>
</select>

<select id="sel7" onchange="goThere(this.value)">
<option>_</option>
<option value="http://www.google.com">_Wallpapers</option>
<option value="http://www.yahoo.com">_Buddy Icons</option>
<option value="http://www.lycos.com">_Banners</option>
<option value="http://www.htmlforums.com">_Flyers</option>
</select>

<select id="sel2" onchange="goThere(this.value)">
<option >_</option>
<option value="jaredpage2.html">_Jared</option>
<option value="andrewpage2.html">_Andrew</option>
<option value="milespage2.html">_Miles</option>
<option value="elipage2.html">_Eli</option>
<option value="markpage2.html">_Mark</option>
<option value="nicolepage2.html">_Nicole</option>
<option value="stephpage2.html">_Stephanie</option>
</select>

<select id="sel8" onchange="goThere(this.value)">
<option >_</option>
<option value="newfilms.html">_Films</option>
<option value="everythingelse.html">_Everything Else</option>
</select>

<select id="sel4" onchange="goThere(this.value)">
<option>_</option>
<option value="jaredcontactpage.html">_Jared</option>
<option value="andrewcontactpage.html">_Andrew</option>
<option value="questionscontactpage.html">_Questions</option>
</select>

<select id="sel5" onchange="goThere(this.value)">
<option>_</option>
<option value="altercationpage2.html">_Altercation</option>
<option value="shockpage2.html">_Shock</option>
<option value="mooshoopage2.html">_Moo-Shoo</option>
<option value="sevenstepspage2.html">_Seven Steps</option>
<option value="rougepage2.html">_Le Rouge</option>
<option value="atticpage2.html">_Attic Phase 2</option>

</select>

<select id="sel6" onchange="goThere(this.value)">
<option>_</option>
<option value="tutm25page2.html">_Turn up the Madness 2.5</option>
<option value="tutm2page2.html">_Turn up the Madness 2</option>
<option value="tutmpage2.html">_Turn up the Madness</option>
</select>
</div>
</form>

</div>

</body>
</html>


...n.b. I have changed the values of select id="sel7" for testing purposes :cool:
..and because I am in a good mood tonight...

I have tidied up your code and validated it ;)
Pegasus
11-19-2004, 06:44 PM
Ta, Coot. Now I know how to do it properly. ;)

Peg
Teragram
11-19-2004, 07:19 PM
Gracias! works beautifully! One thing though, when i type in the page i would like it to go to, "wallpaperpage.html" its longer then one line and breaks it so it doesnt work. Do i need to rename all of my pages that are to long? (95% of them) or is there a way around this? Thanks.
coothead
11-20-2004, 06:09 AM
Hi there Teragram,

if you have problems with line breaks then concatenatenation is the method to use

"wallpaperpage.html" over thre lines would look like this...

"wallpa"+
"perpa"+
"ge.html"