JavaScript - Frames Stopped Working

I hate javascript....

OK, here's my latest challenge with Javascript. I recently went into twp php files and made a few very minor changes to some outdated $date functions. Now, I have three small icons for 'copy', 'paste','delete' using the javascript 'onclick' function that have stopped working.

In fact, when I replace the two recently revised files with the originals, these icons no longer work there either.

Any help would be appreciated. I'm simply at a total loss for ideas here.

From the primary php file is the relevant lines of source code....As far as I can tell, the second paragraph in each area is returning a 'null' value; i.e. o1a.options.selectedIndex is null.

Code:

function aCopy(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

avail_1a = o1a.options.selectedIndex;
avail_1b = o1b.options.selectedIndex;
avail_2a = o2a.options.selectedIndex;
avail_2b = o2b.options.selectedIndex;
avail_3a = o3a.options.selectedIndex;
avail_3b = o3b.options.selectedIndex;
}

function aPaste(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

o1a.options.selectedIndex = avail_1a;
o1b.options.selectedIndex = avail_1b;
o2a.options.selectedIndex = avail_2a;
o2b.options.selectedIndex = avail_2b;
o3a.options.selectedIndex = avail_3a;
o3b.options.selectedIndex = avail_3b;
}

function aDelete(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

o1a.options.selectedIndex = 0;
o1b.options.selectedIndex = 0;
o2a.options.selectedIndex = 0;
o2b.options.selectedIndex = 0;
o3a.options.selectedIndex = 0;
o3b.options.selectedIndex = 0;

From the supporting php file are the following lines of code....
Code:

$s .= "<td nowrap=nowrap class=calendar style='border-left:1px dashed #000;'>";
$s .= "<a href='javascript:void(0);' onclick=\"aCopy('$year-$month-$d');\"><img src='../admin/_calendar/Copy.gif' alt='Copy Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aPaste('$year-$month-$d');\"><img src='../admin/_calendar/Paste.gif' alt='Paste Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aDelete('$year-$month-$d');\"><img src='../admin/_calendar/Delete.gif' alt='Delete/No Availability' width='16' height='16' border='0' /></a>";
$s .= "</td>";

None of these lines of code were changed or altered when I was updating the code.

Any thoughts or suggestions would be deeply appreciated?

Talltom

I am using javascript to change the buttons on my website so that they load up a different image when hot spots on the buttons are hovered over.

Everything has been working great, but this morning I tried checking out my site and for some reason the javascript wasn't working in Chrome, or on my iphone using Safari.
I tried it in IE and everything still works.

Any ideas on why it would stop working for those two browsers?

Here is the javascript:

Code:

 
function init(){
	
	document.getElementsByTagName('area')[0].onmouseover=function(){
		document.getElementById('crocodileImg').src='Images/crocodileHover.png';	
			this.onmouseout=function() {	
		document.getElementById('crocodileImg').src='Images/crocodile.png';
		}
	}
	
	document.getElementsByTagName('area')[1].onmouseover=function(){		
		document.getElementById('historyImg').src='Images/historyHover.jpg';
			this.onmouseout=function() {
		document.getElementById('historyImg').src='Images/history.jpg';
		}
	}
	
	document.getElementsByTagName('area')[2].onmouseover=function(){
		document.getElementById('applyImg').src='Images/applyHover.jpg';
			this.onmouseout=function() {
		document.getElementById('applyImg').src='Images/apply.jpg';
		}
	}
	
	document.getElementsByTagName('area')[3].onmouseover=function(){		
		document.getElementById('applyImg').src='Images/membersHover.jpg';
			this.onmouseout=function() {
		document.getElementById('applyImg').src='Images/apply.jpg';
		}
	}

	document.getElementsByTagName('area')[4].onmouseover=function(){
		document.getElementById('mediaImg').src='Images/mediaHover.jpg';
			this.onmouseout=function() {
		document.getElementById('mediaImg').src='Images/media.jpg';
		}
	}	
}

if(window.addEventListener){
	window.addEventListener('load',init,false);
}

else { 
	if(window.attachEvent){
	window.attachEvent('onload',init);
	}
}

I'm not sure if seeing the html the js is referencing will help at all, but here it is just in case:

Code:

        <div id="crocodile">
            <img id="crocodileImg" src="Images/crocodile.png" usemap="#crocodileImg" border="0" width="436" height="147" alt="Home" />
            <map id="crocodileImg" name="crocodileImg">
            <area id="crocArea" shape="poly" coords="41,9,23,21,20,58,40,78,72,78,82,86,88,112,117,129,140,126,257,126,274,107,274,79,401,78,420,66,419,26,404,6,369,7,366,0,294,0,291,7," href="index.html" alt="Home" title="Home" /> 	 
            </map>   
        </div>
        
        <div id="history">
            <img id="historyImg" src="Images/history.jpg" usemap="#historyImg" border="0" width="350" height="256" alt="Home" />
            <map id="historyImg" name="historyImg">
            <area id="historyArea" shape="poly" coords="18,77,18,167,48,170,79,208,124,233,174,238,228,218,257,188,266,176,280,184,306,182,338,102,331,93,271,92,254,54,226,27,196,11,169,4,137,7,109,17,82,33,65,51,52,74," href="history2.html" alt="History" title="History" />
            </map>             
        </div>
        
       
        <div id="apply">
            <img id="applyImg" src="Images/apply.jpg" usemap="#applyImg" border="0" width="280" height="223" alt="Apply" />
            <map id="applyImg" name="applyImg">
            <area id="applyArea" shape="poly" coords="17,43,17,57,15,72,20,84,39,83,43,79,56,76,62,62,65,49,77,42,76,36,70,22,65,14,52,14,45,21,38,24,31,32," href="apply.html" alt="Apply" title="Apply" />
            <area id="membersImg" shape="poly" coords="112,49,97,55,77,71,64,89,61,99,47,104,44,123,44,149,46,164,57,168,70,172,82,186,102,197,125,206,146,208,168,201,188,189,201,177,208,166,231,165,254,165,260,150,262,133,262,113,254,97,238,95,221,97,213,97,205,85,197,74,183,63,172,55,159,51,145,48,134,47,"href="members.html" alt="Members" title="Members" />
            </map>           
        </div>
        
        <div id="media">
             <img id="mediaImg" src="Images/media.jpg" usemap="#mediaImg" border="0" width="182" height="149" alt="Media" />
            <map id="mediaImg" name="mediaImg">
            <area id="mediaArea" shape="poly" coords="0,102,16,103,26,117,44,129,67,133,92,128,108,115,118,102,165,102,170,88,173,65,172,52,161,49,141,49,132,42,121,42,110,30,96,22,76,16,60,14,44,18,30,29,19,36,13,48,0,51," href="media.html" alt="Media" title="Media" />
            </map>       
        </div>

Thank you for any replies.

Hi,

On my website, I have one of those trust seals that opens a new window
to display account details.

Last week it worked fine, but today it is not working.
I am sure that I didn't change the code. It still works in IE
but the Mox Firefox window opens with no address.

This is my js code for the new window:

Code:

<script language="javascript" type="text/javascript">
<!--
var win=null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition=300;
TopPosition=150;
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=yes,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}

function hidestatus(){
window.status=''
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)
document.onmouseover=hidestatus
document.onmouseout=hidestatus

// -->
</script>

And this is my HTML

Code:

<!-- // SF-Code Affiliate Marketing ##ak18d54kt** // --> 
<a href="http://www.support-focus.com/check.php?key=SFM64912" 
onclick="NewWindow(this.href,'','860','700','yes','default'); 
 return false" onfocus="this.blur()" >  
 <img src="http://www.support-focus.com/image_load.php?id=SFM64912" 
 alt="Support-Focus Membership Click to Verify - Before you Buy" border="0" ></a><br><br>

The actual trust seal code appears at the bottom of ths page:
Affiliate Marketing test page

Can anyone see any problems with the code ?

I think I did get a firefox update about a week ago
has anyone noticed any changes ?

( I hope its just my code that is wrong )

Oh BTW
if I just enter the link from the trust seal directly into the browser, it opens fine.
Thanks

on this site. There are no validation errors. firebug says my linkOut function is not defined... but I have this:

Code:

function linkOut(link)
{
     var image = link.getElementsByTagName("IMG")[0];
    image.src = image.src.replace("H2.png","H.png");
}

not sure where to go from here.

Hello guys,

I've made a music playlist where you should be able to listen to music (of course). All works fine, i am capable too listen to all the music in my playlist. But, when i reload my website and click on a song, it send me an error message - "Adobe Flash Player has stopped a potentially unsafe operation. If you want the program to communicate with Internet, click on settings." When i click on settings, i get another message - "Sorry, this page is not available". I had also another Option instead of settings which where, "ok". When i click on OK it works fine and it's no problem to scroll through the musiclist and listen to all of the soft songs. But i don't even want the message to appear from the very first time. Do you know what i should do to get rid of the message? Here's my code:

Code:

<!--
BEGIN JAVASCRIPT PLAYER EMBED CODE 
-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="player-holder"></div>

<script type="text/javascript">
	var options = {};
	options.playlistXmlPath = "playlist.xml";
	
	var params = {};
	params.allowScriptAccess = "always";
		
	swfobject.embedSWF("OriginalMusicPlayerPlaylist.swf", "player-holder", "250", "250", "9.0.0",false, options, params, {});
</script>

<!-- END PLAYER EMBED CODE -->

Regards Webjoker

I have a web page with two frames, frame1 and frame2. I am trying to get the body tag of frame2 from frame1. I have declared two variables in javascript in frame1:

var mainFrameDoc = parent.frame2.document;
var mainFrameBody = mainFrameDoc.body;

When I try to utilize the variable mainFrameBody I get an error stating that it is null or undefined.

How can I get a handle to the body tag of frame2?

Hi Friends.........

I have two frames in page and in top frame i have a menu....
some of the submenus are clipped because they hide below second frame as height of first frame is small...however i dont want to change height of frames....
So is there any way so that i could display rest of submenus which are being clipped over second frame......

Please help.....

i have a simple frame that looks like this
http://i307.photobucket.com/albums/n...aker/help2.jpg

i have 3 pages (side.html, page1.html and page2.html) the above picture has side.html and page1.html loaded on default, what i want to do is whenever i click on the page 1 button, page1.html will load on the right side and when i click on page 2 button, page2.html will load

i cant figure out what the code for this is and googling for the solution isn't getting me anywhere

help please

I need to display a picture when it is clicked within various color mats and frames. Does anyone know the code for it? Thanks.

Hi,
I will appreciate if someone could help me with this Case Problem. For some reason that I don't understand, it seems to be working in Firefox, but not IE. Well, most of it is working.

The problem is to create a "Demo" which has three frames in rows. The first frame at the top is the title bar with "Submit Code", "show only code", "show only preview", and "show code and preview" buttons.

The middle frame has 2 textarea boxes. The html code goes in the left box, and the css styles go in the right box.

Once you enter any code in their respected boxes, and press "submit code", it should be rendered as a web page in the third frame below the boxes (which is just an empty document).

I have attached a screenshot of how it should look like, and I am posting my entire code below. Everything is working except for the rendering of the web page in the third frame. When I click on submit, I get no errors, nothing happens.

Any help or suggestions would be greatly appreciated.
Thank you.

Code:

function showPreview(){
  parent.document.getElementById("demo").rows="100,1,*";
}

function showCode(){
  parent.document.getElementById("demo").rows="100,*,1";
  parent.frames[1].document.getElementById("inputhtml").style.height="300px";
  parent.frames[2].document.getElementById("inputcss").style.height="300px";
}

function showBoth(){
  parent.document.getElementById("demo").rows="100,210,*";
  parent.frames[1].document.getElementById("inputhtml").style.height="150px";
  parent.frames[2].document.getElementById("inputcss").style.height="150px";
}

function sendCode(){
  var previewFrame=parent.frames[3];
  var htmlCode=parent.frames[1].document.getElementById("inputhtml").value;
  var cssCode=parent.frames[2].document.getElementById("inputcss").value;

  previewFrame.document.write("<html><head><title></title>");
  previewFrame.document.write("<style type='text/css'>"+cssCode+"</styles>");
  previewFrame.document.write("</head>");
  previewFrame.document.write("<body>"+htmlCode+"</body></html>");
  //previewFrame.document.close();
}
</script>
</head>

<body>
<form name="control" id="control" action="">

<h2 id="demotitle">Creating Web Pages</h2>
<p>
   <input type="button" value="Submit Code" onClick="sendCode()"/>
   <input type="button" value="Show Only Code" onClick="showCode()" />
   <input type="button" value="Show Only Preview" onClick="showPreview()"/>
   <input type="button" value="Show Code and Preview" onClick="showBoth()"/>
</p>
</form>
</body>
</html>

What's Up?

OK, So I've been trying to add text to a <textarea> and text field tag inside of a frame via JavaScript, I did find a tutorial and using off-line html's it worked, But when I try to use a online frame, It doesn't work.

OK, So one html opens two frames which are.

Left.html
Code:

<HTML>
<HEAD>
<TITLE>JavaScript Example 13</TITLE>
</HEAD>
<BODY>
<INPUT type="button" value="Button" onClick="">
</FORM>
</BODY>
</HTML>

right.html
Code:

<form action="posting.php" method="post" name="post" onsubmit="return checkForm(this)">
<table width="100%" cellspacing="2" cellpadding="2" border="0">
<input class="post" type="text" value="" tabindex="2" style="width: 450px;" maxlength="60" size="45" name="subject"/>
<textarea onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" class="post" tabindex="3" style="width: 450px;" cols="35" rows="15" name="message"/></textarea>
<input type="submit" value="Submit" class="mainoption" name="post" tabindex="6" accesskey="s"/>

Anyone Know What To Do?

Thanks Bye.

First post!

Hey all! So I've been having trouble figuring out how to make this page work.

The page I'm working on has 3 frames: top/main/title frame, left frame, and right frame.

What the page is supposed to be is like a shopping page. The left frame has all the items that you can select, while the right page has the "receipt" of your selected items.

Now here's the problem:

The left frame has an "Update Order" button on the bottom that updates the receipt on the right frame. However, I can't get the button to work.

I'm not exactly sure how to write the code for the receipt frame (if there is any javascript code needed for that frame) or how to have the left frame send all that information to the right frame.


I hope this all makes sense. Thanks for taking the time to read all that!

I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please....


(roll over image) In the <head>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif";
staticImage1 = new Image();
staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif";
...........................................................
(button)

<a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;">
<img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a>
...........................................................



(two frames at once text) In the <head>

<script language="javascript">
function loadTwo(iframe1URL, iframe2URL)
{
parent.frame1.location.href=iframe1URL
parent.frame2.location.href=iframe2URL
}
</script>
...........................................................
(button)

<a href="javascript:loadTwo('info.html','home.html')">info</a>



Thanks!

New assignment. This is the code i have below already supplied now.
not exactly correct yet but want to just get something to work from

i need to insert an embedded script element in head section of document,
purpose os to hide htmlcode and csscode frames to provide more screen space

to hide 2 frames i am to change value of rows attribute in demo frameset to "100,1,*"

id of the frameset object is demo




Code:

<title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />
<script src="demo.htm" type="text/javascript"></script>
<script type="text/javascript">

function showPreview(id,x,y) {

 object=document.getElementById(id);
 object.style.visibility="hidden";
 top.FrameName.rows = "100,1,*";
 }
 
 
</script>

just for your reference
here is the demo part

Code:

<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 6
   Case Problem 3

   Web Design Demo

   Filename:         demo.htm
   Supporting files: css.htm, html.htm, title.htm
-->

<title>HTML Demo</title>
</head>

<frameset rows="100,210,*" id="demo" name="demo"> 
   <frame name="title" id="title" src="title.htm" scrolling="no" />
   <frameset cols="*,*">
      <frame name="code1" id="code1" src="html.htm" />
      <frame name="code2" id="code2" src="css.htm" />
   </frameset>
   <frame name="output" id="output" />
</frameset>

</html>

how does this look so far

just remember the top code is what i am working on

what should i change and add?

suggestions anyone?

hi Folks,

I am new for HTML FRAMES.

I have the code like as shown below.

Code:

<FRAMESET rows="0,*" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>


			<FRAME SRC="Javascript:parent.getStartupScreen ()" name="RP" scrolling="no"	>


			<FRAMESET rows="0,*,0,8%" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>


				<FRAME SRC="/jsp/hierarchy/control.jsp" name="cF" scrolling="NO">
				<FRAME SRC="Javascript:parent.getBlank()" name="vF" scrolling="AUTO"> 
				<FRAME SRC="Javascript:parent.getBlank()" name="dF" scrolling="NO"> 
				
				<FRAME SRC="/jsp/resourceplanner/ResourcePlannerFooter.jsp" name="RPF" scrolling="NO">   
			</FRAMESET>
             
	</FRAMESET>

i am currently on "RPF" Frame. I want to refer "RP" Frame loaded "Form" Elements .

Please suggest me .

Thanks...