JavaScript - Frames And Mat Page

Please take a look at my site at http://purdypoodles.webs.com/index2.html to see what I have set up with frames. I'm looking for code that will allow users to click on "meet the parents" in the top frame, for example, and nicely scroll from the current position in the bottom frame to the Meet the Parents section also in the bottom frame. Then, if the user wants to go to Poodle Facts from there, it'll scroll smoothly from Meet the Parents to Poodle Facts. etc. I got a JS code somewhere, but it doesn't work. Any ideas??

This seems like it would be so simple and I have absolutely no idea.

I have one page with no frames, and two links on it.

The second page has an iframe on it. Both links on page 1 point to page 2 (which houses the iframe), but based on which link is clicked will determine what that iframe will display.

Basically I need to figure out a way to target the iframe on page 2 after executing a window.open statement. Much like how google images creates a frame at the top after you click on one of the images from the search results.

I've attached two simple files to better explain what I'm trying to do.

FrameSet.zip

I'd appreciate the help, I'm losing my mind.

Hello, I'd need some help for scripting.
Here is what I need to do.

I got links in frameA which open pages in frameB.
Pages might be long to load, so when I click on the link, from frameA, I want to have the "wait" cursor until body of frameB loads, then return to "default" cursor in frameA.

I'd also want the cursor to be on "wait" in all my 4 frames during the load if possible.

I can't do it with a:active in CSS cause the cursor is stuck on "wait" when it's clicked even after page in frameB is loaded.

I searched hours in forums, tried lots of things and didn't fix my problem.

Would need help, thanks

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...

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!

Hi,

I have a problem with my script displaying tabs (jquery tabs) in frames. When the scripts (not in frames) are viewed in the browser, the tabs are displayed correctly.
I created a script containing frames for existing scripts to be displayed in certain frames. Some scripts display fine in the frames, even some of those that contain tabs. While some may display correctly, I still get some scripts when viewed in the frames script that are not displaying the tabs correctly.
Can anyone please give me a solution to this problem.

Thank you.

I am using a JavaScript page that acts as a 'side-by-side' tester. It sends the same form in a POST to two different servers. One server is usually the production server the other a server under test.

The results returned by the servers are displayed in two frames aligned side by side on the page.

This page has worked in Firefox for several years. It worked up till early last week. Now, instead of populating the two frames, a new window opens up to display the response received from the Server.

Nothing has changed in the code so I'm thinking that possibly the latest release of Firefox (10.0.2) has somehow broken this page.

Here is the code that is envolved:
Code:

// setting up the frames
<frameset rows="400,*">
	<frame src="file:///C:/TestSanity/controller.htm" name="controller"/>
	<frameset cols="50%,50%">
		<frame src="leftFrameInitialContent.html"   name="leftWindow"  onload='parent.controller.stopLeftFrameClock() ;'/>
		<frame src="rightFrameInitialContent.html"  name="rightWindow" onload='parent.controller.stopRightFrameClock();'/>
	</frameset>
</frameset>

// sending a request whose response will be displayed in a frame
// pick the form that matches the current command
	formToSubmit = document.getElementById(command + "_FORM") ;

	// set the left frame destination url (action) from the value on the UI
	formToSubmit.setAttribute("action", document.getElementById('leftFrameBaseUrl').value );

	// send left window request
	formToSubmit.setAttribute("target", "leftWindow");
	formToSubmit.submit();

I don't have any idea what to look for as a cause. Any help and/or suggestions would be appreciated.

Thanks,
bkey

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?

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!

Hi, im having a problem adding a frame busting killer that counteracts a frame killer script on sites so i can load them inside my iframes..

here is the code i use

<?php
$result = mysql_query("SELECT ru.id, ru.username, ru.owid FROM raidbar_users ru LEFT JOIN raidbar_groups rg ON ru.groupid = rg.id WHERE rg.id = '".(int)$_REQUEST['group']."'") or die(mysql_error());
$myRaidid = raidid();

if(isset($_GET['gm']))
{
echo '<FRAMESET rows="*,*,*,30" frameborder="0">' . "\n";
echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n";
$i = 0;
while($row = mysql_fetch_array($result))
{
if ($i == 2)
{
echo ' </FRAMESET>' . "\n";
echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n";
$i = 0;
}
echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/joinraid.php?raidid=' . $myRaidid . '&suid=' . $row['owid'] . '&serverid='.$siteConfig['userServer'].'">' . "\n";
$i++;
}
echo ' <FRAME src="">' . "\n";
echo ' </FRAMESET>' . "\n";
echo ' <FRAMESET frameborder="0" scrolling="no">' . "\n";
echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . $myRaidid . '">' . "\n";
echo ' </FRAMESET>' . "\n";
echo '</FRAMESET>' . "\n";
}
else
{
echo '<table cellspacing=1 cellpadding=1>' . "\n";
echo '<tr>' . "\n";
$i = 0;
while($row = mysql_fetch_array($result))
{
if ($i == 2)
{
echo '</tr>' . "\n";
echo '<tr>' . "\n";
$i = 0;
}
echo ' <td><iframe src="./acct.php?suid=' . $row['owid'] . '" width=450 height=225 scrolling=no frameborder=0></iframe>' . "\n";
$i++;
}
echo '</tr>' . "\n";
echo '<tr>' . "\n";
echo ' <td><iframe src=http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . raidid() . '&serverid='.$siteConfig['userServer'].' width=250 height=30 scrolling=no></iframe>' . "\n";
echo '</tr>' . "\n";
echo '</table>' . "\n";
}
?>

Now im told to use the following..
<script type="text/javascript">
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://server-which-responds-with-204.com'
}
}, 1)
</script>

or
var prevent_bust = 0;

// Event handler to catch execution of the busting script.
window.onbeforeunload = function() { prevent_bust++ };

// Continuously monitor whether busting script has fired.
setInterval(function() {
if (prevent_bust > 0) { // Yes: it has fired.
prevent_bust -= 2; // Avoid further action.
// Get a 'No Content' status which keeps us on the same page.
window.top.location = 'http://server-which-responds-with-204.com';
}
}, 1);


But the window.top.location i dont know how to incorporate that to work.

Can anyone help?

Hi all,

I am working on a site which is in a frameset. There is content area, a footer and a workqueue on the right.

Now what I do is poll the workqueue every 30 seconds, check if there are any changes to any queues and if so, I make them go bold and red and play a beep. That's no problem, that works fine. The trouble is I am trying to make the title flash "New Item" if the window is out of focus (Minimised would be better but dont think that is possible to detect). The flashing bit is no problem, it's the triggering when the windows out of focus that is a problem.

Applying events to the window object doesn't work. The closest I have come to making it work is this, but it doesn't work in firefox...

Code:

	var debugwin = window.open("", "newwin", "width=300, height=300, scrollbars=1");
	debugwin.document.open();
	debugwin.document.write("<HTML><TITLE>Debug Window</TITLE><BODY>");
	debugwin.document.write("</BODY></HTML>");
	debugwin.document.close();

	function addDebug(msg) {
		debugwin.document.body.innerHTML = msg + "<BR/>" + debugwin.document.body.innerHTML;
	}

	<!--<frameset onblur="workitemAlerts.setItemAlerts(false);" onfocus="workitemAlerts.setItemAlerts(true);" id="titleframeset" rows="<%= HEADER_FRAME_RESTORED %>,*,<%= FOOTER_FRAME_HEIGHT %>" framespacing="0" border="0" frameborder="0">-->
	<frameset onblur="addDebug('Blur 1st frameset');" onfocus="addDebug('Focus 1st frameset');" id="titleframeset" rows="<%= HEADER_FRAME_RESTORED %>,*,<%= FOOTER_FRAME_HEIGHT %>" framespacing="0" border="0" frameborder="0">

		<frame onblur="addDebug('Blur frame 1');" onfocus="addDebug('Focus frame 1');" noresize scrolling="no" framespacing="0" border="0" frameborder="0" id="titlebar" name="titlebar" src="<wfmt:headerpage />">

		<frameset onblur="addDebug('Blur 2nd frameset');" onfocus="addDebug('Focus 2nd frameset');" id="mainframeset" cols="10,*,<%= MAIN_FRAME_RESTORED %>" framespacing="0" border="0" frameborder="0">
			<frame onblur="addDebug('Blur frame 2');" onfocus="addDebug('Focus frame 2');" noresize framespacing="0" border="0" frameborder="0" name="leftpad" src="mainColourFill.jsp" scrolling="no">
			<frame onblur="addDebug('Blur frame 3');" onfocus="addDebug('Focus frame 3');" noresize name="windmain" src="<wfmt:postloginpage />" scrolling="auto">
			<frame onblur="addDebug('Blur frame 4');" onfocus="addDebug('Focus frame 4');" noresize framespacing="0" border="0" frameborder="0" name="queues" src="workqueues.jsp" scrolling="no" style="BORDER-RIGHT: gray 1pt solid;">
		</frameset>

		<frame noresize scrolling="no" framespacing="0" border="0" frameborder="0" name="footerbar" src="footer.jsp">

	</frameset>

I have popped up a little window to help me view debug away from the window so I can focus and blur and still see the output to see what events are triggering.

IE seems to trigger the events on the <frame> tags fine, which means I can achieve what I need to in IE, however FF isn't playing ball. Anybody know what I can do to detect if the window is out of focus.

TIA,
Dale

Hey guys,

I'm using javascript in a menu to change the colour scheme of a page with frames and wondered how I could make this Javascript work across frames. The top frame is the colour picker with the Javascript and the bottom frame is the html template that will be changing colour scheme.

JS:
Code:

var cols = {
  red: [
    { el: '.headertitle',    color: '#FF0000' },
    { el: '#wrapper #maincontent #leftpanel ul.leftnavigation li a.current',       bgcolor: '#FF0000', color: '#FFFFFF' },
    { el: '#wrapper #maincontent #leftpanel',                                      border: '#FF0000' },
    { el: '#wrapper #maincontent #leftpanel ul.leftoffers li div.titlebody a',     color: '#FF0000' },
    { el: '#wrapper #maincontent #editable h2',                                    color: '#FF0000' },
    { el: '#wrapper #maincontent #rightpanel',                                     border:   '#FF0000' },
    { el: '#wrapper #footer',                                                      bgcolor:  '#FF0000' },
	{ el: '#wrapper #maincontent #leftpanel ul.leftoffers li',                     bgcolor:     '#F6D9D9'},
    { el: '.choosecolour',                                                         border:  '#fff' },
    { el: '#cbred',                                                                border:  '#000' }
  ],
  orange: [
    { el: '#header',            bgcolor: '#ff8c10', color: '#ffffff' },
    { el: '#nav li a',       bgcolor: '#d63b18', color: '#ffffff', hoverbgcolor: '#fc6827', hovercolor: '#ffffff' },
    { el: '.primaryBgCol',   bgcolor: '#ff8c10', color: '#ffffff' },
    { el: '.secondaryBgCol', bgcolor: '#f8a955', color: '#ffffff' },
    { el: '.footerBgCol',    bgcolor: '#f2441c' },
    { el: '.footerTextCol',  color:   '#ffffff' },
    { el: '.borderCol',      border:  '#ff8c10' },
		{ el: '#logo',           src:     'images/logo_orange.gif'},
    { el: '.choosecolour',      border:  '#fff' },
    { el: '#cborange',       border:  '#000' }
  ]
};

function changeColour(col) {
  $A(cols[col]).each(function(i) {
    $$(i.el).each(function(j) {
      if (i.bgcolor)
        j.setStyle({ backgroundColor: i.bgcolor });
      
      if (i.color)
        j.setStyle({ color: i.color });
      
      if (i.border)
        j.setStyle({ borderColor: i.border });
      
      if (i.src)
        j.writeAttribute('src', i.src);
      
      // hover colours
      if (i.hovercolor || i.hoverbgcolor) {
        j.onmouseover = function() { this.setStyle({ backgroundColor: i.hoverbgcolor, color: i.hovercolor }); };
        j.onmouseout   = function() { this.setStyle({ backgroundColor: i.bgcolor, color: i.color }); };
      }
    });
  });
}

JS picker HTML code:
Code:

    <div class="colours"> 
        <div class="choosecolour" id="cbred" style="background-color: #c90c12;" onclick="changeColour('red');"></div> 
        <div class="choosecolour" id="cborange" style="background-color: #ff8c10;" onclick="changeColour('orange');"></div>  
    </div>

Anyone know how I can make the colour scheme of page in lower frame change when colour is picked in top page frame?

I'm new to client side js, so I'm trying to figure out the relationship between the js frames object and the <frame></frame> tags. I have read and reread the information in my book on this subject and googled many examples, but still need clarification.

if I have the following code in the body of an HTML document.
Code:

<frame name="f1">
</frame>

<<frame name="f2">
</frame>

Then I should get back 2 when I do this
Code:

alert(document.frames.length);

Instead I get document.frames is undefined from Foxfire and get 0 from ie8. If I replace document with top, window, self or parent I get 0 in both Foxfire and ie8.

I'm confused,
J.

Hello,

I am making a website with 4 frames lined up vertically. Frame 1 (from the left) is the menuFrame, Frame 2 (mainFrame) is a frame with subcategories/information, Frame 3 (rightFrame) is a frame where some information pops up on a click on one of the subcategories and Frame 4 (rightFrame1) is where a pictures pops up corresponding to the information about the subcategory.

I have been working on getting frame 3 and frame 4 to clear on one click on one of the menu links and I have got it to work using this java script in the head of my frames and framset file:

Quote:
<html>
<head>

<SCRIPT LANGUAGE="JavaScript">
function setFrame(frameName, frameSrc)
{
parent[frameName].location=(frameSrc);
}
</SCRIPT>
</head>
</html>
and links like this in the body section:

Quote:
<a href="javascript:setFrame('mainFrame','information.html');setFrame('rightFrame','blank.html');setFra me('rightFrame1','blank.html')">LINK</a>
I have tried uploading the site to the Internet and when I access it from the computer where I made it, it works like a charm.

The problem is: when I access the website from other computers these java links doesn't work - no information or anything pops up in any of the frames.

Any thoughts on where I could have made an error?


Best Regards,

Hello,

I am not the best JS programmer, but I was wondering...

Is there a way to do this:

HTML Document /w/ 2 frames, A & B.

When you click a button in frame A:
"Click" (X,Y coords) in frame B.

If that's not possible in JS, please let me know what language I need.

- Waffles