JavaScript - Frame By Frame Animation Dont Work In Ie9 Working In All Other Browsers

Greetings,

I designed a catalog browsing system for the college I work for, and I'm having a problem with one final thing, and it's going to drive me insane.

The system uses individual PDF files for each page, and you can navigate using the controls on the side. It's not ideal, as it was made to replace a horrible system and has the limitations of the content being presented.

That being said, I think it's pretty good. The trouble area is related to navigation: when you navigate the documents, some JavaScript detects the current URL of the content frame and updates the nav controls (previous and next page numbers) and table of contents links (bold, highlight) if they have changed. That part works fine. The problem area is with IE and PDF links. If you click a page link within the PDF, it opens that PDF file in the same frame. In FF and every other browser, the JS URL detection works fine.

In IE, of course, it doesn't detect that a different PDF is being displayed. If it can't detect the new PDF file, and by extension, the file number, the nav controls don't work right. Now - before anyone asks - it DOES work in IE if you navigate to the PDF document by using the links in the navigation system that I built. It's just when you arrive at a PDF from another PDF that it fails.

This is hard to explain more clearly, so take a look:
http://www.aacc.edu/catalog/interactiveCatalog1011/

To see this in action, visit page 4, the table of contents. Click a page number link, for instance, page 9. Once it loads, click "next page" at the top left of the interface. In FF, it goes to page 10. In IE, it goes to page 5, since the JavaScript is unaware that the frame has changed PDF files. It doesn't make sense, since FF can see it plainly.

My code is all out in the open. This thing has to be designed to run off of a CD as well as on the website. If I could use server-side scripting, it would be VERY different, I assure you.

Any help with this would be phenomenal. I normally don't post for help, but I've searched practically all day, and I'm tired of running in to dead ends.

Thanks so much!
Jamie

I've been fooling around with developing an IETMs interface (Interactive Electronic Technical Manual - like an interactive parts catalogue) to display the data live from an existing Access database. The idea is to be able to run this interface on a network hosted intranet with straight HTML, plain Javascript, VBScript & ActiveX objects, so that it doesn't require IIS etc to run ASP or PHP etc (I don't want to involve corporate IT for the IIS).

All is going pretty well, & I'm impressed with the setup except for a few minor things - checking if a frame is loaded, & global variables.

My setup is a HTML page hosting 5 frames with each containing an empty <DIV> (which gets the page written to it dynamically), but I need to ensure all frames are loaded before getting into the heavy stuff (which Javascript is handling brilliantly!). But I'm finding that Javascript sux at truly detecting if a frame is loaded (someone please prove me wrong!). I have all 5 frames call a function fnInitialiseIfReady(), then if I could either successfully test if all frames are loaded, or if I could globally count if this function has been called 5 times, I can proceed with confidence & call my function fnInitialise(). But unfortunately neither is working for me.

From tireless internet searches, I've tried the 'frames always load in order' theory, & that is simply not correct. I have set up a test with the frames calling a function passing their name as a parameter, & each time the frames load in a different order every time. It is totally random. Note: I proved this by having the first 4 frames call a certain function(which contains an alert() line showing the frame name parameter passed), & having the last frame call a different function (which contains an alert("all are loaded!") line). The "all are loaded!" does not always appear last.

I've also tried the '.frames["FrameName"].document.loaded' approach, & it ALWAYS returns 'undefined' for every frame. Am I doing something wrong here?

I've also tried the '.frames["FrameName"].window.location.href' approach & it ALWAYS returns the html filename regardless of whether that page has loaded or not, so it is not an indicator of loading completion.

I've also tried the '.frames["FrameName"].document.location' approach & it's ALWAYS the same as the '.window.location.href' approach.

Also, I'm finding Javascript will not hold global variables for me at all. I don't know if it's a combination of multiple frames & using Javascript & VBScript together, but global variables just do not hold a value at all. Local variables (within functions) are fine. Any ideas? I don't have many globals, so I'm thinking of using a cookie. A valid Solution?

BTW, the reason for also using VBScript is that it accesses the ActiveX controls by default, & being a corporate intranet app I can guarantee MSIE usage.

It's frustrating because if I can solve these 2 relatively minor issues, then I'm super impressed with the robustness of this Javascript/VBScript approach. By leveraging each of their strengths, it's crunching the data just as quickly as the VB, C#, & C++ programs I've written for this particular dataset. I'm impressed!

Thanks in advance,

Dave Lock.

I have this offer iframed on my website and I want it so that when they get to a certain page (i have the specific url), I can redirect it to another site. Is this possible by any chance?

i was doing some 3d things with unity3d, and i want to embed them into web pages, or to allow others to embed it into their pages...so i managed to do it with frames. now, there is a problem when i want to open the link to my site
from the application that is embedded, it opens the window but in frame, so that is just bad... embedded window is small, a bit larger then youtube default size, so it looks ugly when it opens site in it....

is there a way to pop up the window, or to open new tab from the frame?
and not to involve making scripts outside the frame because it will be harder to present the user what he needs to do in order to embed this content into his page?

any ideas? thank you!

Hi, I am sure there is a simple thing I am doing wrong.

I am using serif plus, (instead of dreamweaver), I have 12 pages, and am using 3 seperate master pages for various pages.

Master page B holds the repetitive information for page7.html and contained within page7 is an iframe linked to page18.html. On page7.html, beside the iframe I have six 'hot spots' anchored within the page displayed (page18). This works really well.

The problem I have is when page7.html loads it comes up at the top of the iframe, (half way down the main page), not the top of the page that contains it. I have tried putting an anchor at the top of page7.html and inserting code as in OnLoad, go to anchor etc., window.location, and just about everything else I could think of, but nothing seems to make the page open in the correct place. You have to scroll to the top each time.

Can anyone help with this please.

Not very experienced but hoping to learn.

Sybs

Here is the story...

There is a submit button (POST) that targets to a frame, given that there is no way to change it through DOM manipulation.

Code:

        
<script language="JavaScript" type="text/javascript">
<!--
    window.onload = function() { if (top!=window) top.location=window.location }
-->
</script>

That piece of code is not elegant in the sense that it will show the parent window and the frame for like one second, then the content in the frame takes over to cover up the parent window.

Is there a way for the frame to take over the parent window instantly?

I'm trying to write a little Greasemonkey script (in Firefox) to manipulate the top bar Google Translate produces when translating a site. For example: http://translate.google.com/translat.../www.google.de.

Google has employed traditional HTML frames. According to many websites, I can use something like window.frames[0].contentDocument to access the first frame. However, this is refusing to work!

I have been debugging this for hours. I have verified that I am indeed running the script from the top-level window (window.parent === window.top), and I am able to manipulate the frames themselves without a problem. When I try something like window.frames[0].contentDocument.URL, it returns as about:blank (I also get this with the other frame, i.e., frames[1]). I have tried several different methods of getting at that frame, including getElementsByTagName("frame")[0] (which works for manipulating the frame itself, but not for editing the frame's content through contentDocument).

Here's my little script so far. I've included the first part so you can see for yourself that I'm definitely in the top-level window and using the right @include because it works. In this example, the URL returned is "about:blank" (again, I'm in Firefox).
Code:

// ==UserScript==
// @name           GTranslate
// @include        /^https?://translate\.google\.com/translate\?.*/
// ==/UserScript==

// change how the frame is displayed
var bar = document.getElementsByTagName("frame")[0];
bar.removeAttribute("noresize");

// manipulate the content inside the frame
var gt = bar.contentDocument;
alert(bar.URL);

In here is an example of a frameset im currently working. i have this frameset: http://www.mediafire.com/?75dvswgvelw19a9

what i want is when i select radio button "YES" and click on the "create" button in form1 http://www.mediafire.com/?eld7a1rb21h799e it will pass the value to radio button "ON" in form 2 http://www.mediafire.com/?f0o060cdpyf06ya and will call the function of the radio button "ON" -shows the hidden textarea. And if i select radio button "NO" in form1 and click on "create" button, it will select radio button "OFF" in form 2. help plsssssssss

Hello everybody

I have two frame in one page. say frame1 & frame2. Now I want to replace <body> to <body bgcolor="#FFFFFF"> in frame2. Is it possible?
if possible then please help me

Say you have a document with 2 frames with 2 buttons in one of the frames. If one button opens a window, how can you make the other button close it?

hi-

trying to set frame source from javascript- i cant get it to work..

Code:

<script>
stud = mm_adl_API.LMSGetValue("cmi.core.student_id");
newlink = ('https://blah.blah.blah&stud_id='+stud);
// -->
</script>
<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
  <frame src="javascript:window.location(this.newlink)" name="thisname" />
  <frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="Scorm Handling" onload="mm_adlOnload()" />
</frameset>

.



• How do submit your input box value to another frame without the input box vanishing?
• This code is bloated. Below is the code with the gist highlighted (scroll).
• Relevant options?:
--- document.forms[].action
--- document.forms[].value
--- document.getElementById(typer).value

EXAMPLE: Type & Hit Enter (Viewable on: FF 3.6)


FRAME 1:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<script type="text/javascript">

window.onload = function() {
  document.getElementById("typer").focus();
}





</script>











<style type="text/css">
body 
    {
     text-align:left;
     background-color: #FFFFFF;
     overflow: hidden;
     font-family:sans-serif;
     font-size: 60px;
     
     
    



    }



form, input, select, textarea {
     font-family:  Verdana, Arial, Helvetica, sans-serif;
     font-size:  100%;
     border: 0;
     position:absolute;
     top:180px;
     left:60px;

     


}



img
{
position:absolute;
left:0px;
top:300px;
z-index:1;
}

</style>
</head>
<body>







 <iframe id="ifm" name="ifm" src="F2.htm" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no"></iframe>



<form name="form2" method=GET action="http://www.google.com/search">
<input type=text id="typer" name=q size=31 maxlength=255 value="">
</form> 










</body>
</html>

FRAME 2:
Code:

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




<style type="text/css">

html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}

</style>



<body>
</body>
</html>

.

I have a web page with two frames, frame1 and frame2. I have javascript code and an unordered list (<ul><li>...) in frame1. In the javascript code I am creating a new <div> element, but I am creating it in the html of frame2. Then I am attempting to append the <ul> node from frame1 to the <div> of frame2. Internet Explorer does not appear to allow this, I am getting an error when I attempt this. Firefox seems to allow this. Is this a security issue in IE? If so, is there any way to do this in IE?

I have two vertical frames. The left frame has an image that scales to 100% of the window's height. I am trying to make the page automatically resize the width of that left frame so that it exactly fits the scaled image's width in order to always give the right frame as much space as possible, but I can't seem to get it to work. Can anyone help me out? Here's the code for my frameset:

Code:

<html>
<frameset id="MyFrameset" cols="25%,*" frameborder="no" border="0">
<frame noresize="noresize" src="Leftframe.html" name="LeftFrame">
<frame noresize="noresize" src="Rightframe.html" name="RightFrame">
</frameset>
</html>

And here's the code for my left frame:
Code:

<html>
<body style="overflow:hidden; margin:0; padding:0"
onload="parent.document.getElementById('MyFrameset').setAttribute('cols', 'document.body.clientWidth,*', 0);">
<img src="image.JPG" style="border:none;" height="100%" alt="image"/>
</body>
</html>

Oh yeah, the reason why I need to do this is so if someone is viewing the page on a widescreen monitor, the left frame won't eat up more space than necessary.

Hello,

Sorry to bug again, need some help here. Need the search results to pop up on another frame.

Code:

 <script language="JavaScript" type="text/javascript">
<!--

//
// Script by Jari Aarniala [www.mbnet.fi/~foo -- foo@mbnet.fi]
//
// This script makes it easy to choose with which search engine
// you`d like to search the net. You may use this if you keep this
// text here...
//

function startSearch(){
searchString = document.searchForm.searchText.value; 
if(searchString != ""){
searchEngine = document.searchForm.whichEngine.selectedIndex + 1;
finalSearchString = "";

if(searchEngine == 1){
finalSearchString = "http://www.excite.com/search.gw?trace=a&search=" + searchString;
}
...

location.href = finalSearchString;
}
}


// -->
</script><basefont face="Verdana, Arial, sans-serif">

  <form name="searchForm" id="searchForm">
    <table cellspacing="2" cellpadding="3" width="320" bgcolor="#444444" border="1">
      <tbody>
        <tr>
          <td bgcolor="lightblue"><font face="Verdana, Arial, sans-serif" size="1">Search for:<br></font></td>

          <td bgcolor="lightblue"><font face="Verdana, Arial, sans-serif" size="1">Search from:</font></td>

          <td bgcolor="lightblue">&nbsp;</td>
        </tr>

        <tr>
          <td bgcolor="navajowhite"><input name="searchText"></td>

          <td bgcolor="navajowhite"><select name="whichEngine">
            <option selected>
              BMP
            </option>

            <option>
              AOTS
            </option>
...
            
          </select></td>

          <td bgcolor="navajowhite">
		  <input onClick="startSearch()" type="button" value="Send"></td>

And I'm using real frames.

Thanks