JavaScript - Page Keeps Loading Once Iframe Removed

Hello!

I have a script that loads a popup window on any page of a website, in order to temporarily cover the page's content. This popup window is supposed to load on top of page's content, acting as a sort of page blocker. So the visitor can't see what's on the page until he clicks the popup.

The problem i'm having right now is when i put this script on a page that has iframe content. The iframe loads on top of this popup and not underneath as it's supposed to be.

Do you guys have any advise on what should i do to make this work properly when using iframes on a page?

Here is the script:

Code:

var blocker_originalHtmlOverflow;
var blocker_originalBodyOverflow;

function blocker_addLoadEvent(func)
{    
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    } 
    else 
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

blocker_addLoadEvent(blocker_init);

function blocker_init()
{    
    if(blocker_getCookie('content_unlocked')=='1')
        return;

    blocker_originalHtmlOverflow = document.getElementsByTagName('body')[0].style.overflow;
    blocker_originalBodyOverflow = document.getElementsByTagName('html')[0].style.overflow;

    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    document.getElementsByTagName('html')[0].style.overflow = 'hidden';

    function pageScroll() {

        window.scroll(0,0); // scroll to 0

        if(blocker_getCookie('content_unlocked')!='1'){

         scrolldelay = setTimeout('pageScroll()',100); // scrolls every 1 second

        }

    }

    pageScroll();


    var haze = document.createElement('div');
    haze.id = 'blocker_haze';
    haze.style.filter = 'alpha(opacity=50)';
    haze.style.opacity = .5;
    haze.style.height = '2000';
    haze.style.width = '2000%';
    haze.style.backgroundColor = '#000';
    haze.style.position = 'absolute';
    haze.style.top = '0px';    
    haze.style.left = '0px';
    haze.style.zIndex = 1000000;

    var centerPane = document.createElement('centerPane');
    centerPane.id = 'blocker_centerPane';
    centerPane.style.width = '500px';
    centerPane.style.height = '361px';
    centerPane.style.border = '5px solid #CCC';
    centerPane.style.position = 'absolute';
    centerPane.style.left = '50%';
    centerPane.style.marginLeft = '-250px';
    centerPane.style.top= '100px';
    centerPane.style.backgroundColor = '#FFF';
    centerPane.style.zIndex = 1000001;
    centerPane.style.backgroundImage = 'url(http://www.fasgasfga.com/sfasdfasdf.jpg)';
    centerPane.style.backgroundRepeat = 'no-repeat';
    centerPane.style.backgroundPosition = '20px 10px';
    centerPane.style.padding = '20px';

    var h1 = document.createElement('h1');
    h1.style.color = '#000';
    h1.style.textAlign = 'center';
    h1.style.fontSize = '36px';
    h1.style.margin = '0 0 10px 0';
    h1.style.padding = '8px 0 0 15px';
    h1.style.fontFamily = 'arial';
    h1.style.lineHeight = '36px';
    h1.innerHTML = blocker_headline;
    centerPane.appendChild(h1);

    var p1 = document.createElement('p');
    p1.innerHTML = blocker_instructionalText;
    p1.style.textAlign = 'center';
    p1.style.padding = '20px 0 20px 0';
    p1.style.margin = '0';
    p1.style.fontSize = '18px';
    p1.style.lineHeight = '18px';
    p1.style.color = '#000';
    p1.style.fontFamily = 'arial';
    centerPane.appendChild(p1);

    var ul = document.createElement('ul');
    ul.style.textAlign = 'center';
    ul.style.margin = '0 0 10px 0';
    ul.style.padding = '0';
    ul.style.listStyleType = 'none';
    for(var i = 0;i<blocker_surveryLinks.length;i++){
        var li = document.createElement('li');        
        var a = document.createElement('a');
        a.style.display = 'block';
        a.style.fontSize = '17px';
        a.style.lineHeight = '380px';
        a.style.color = 'Black';
        a.style.fontFamily = 'arial';
        a.style.textDecoration = 'underline';
        a.target = '_blank';        
        a.href = blocker_surveryLinks[i].url;
        a.innerHTML = blocker_surveryLinks[i].text;
        a.onclick = function(){
            window.setTimeout(unblockContent, 55000);
        }
        li.appendChild(a)    
        ul.appendChild(li);
    }

    centerPane.appendChild(ul);

    var p2 = document.createElement('p');
    p2.style.textAlign = 'center';
    p2.innerHTML = blocker_footerText;
    p2.style.padding = '20px 0 0 0';
    p2.style.margin = '0';
    p2.style.color = '#F50E0E';
    p2.style.fontFamily = 'arial';
    p2.style.fontSize = '15px';
    p2.style.lineHeight = '15px';
    centerPane.appendChild(p2);

    document.getElementsByTagName('body')[0].appendChild(haze);
    document.getElementsByTagName('body')[0].appendChild(centerPane);
}

function unblockContent(){
    document.getElementsByTagName('body')[0].style.overflow = blocker_originalBodyOverflow;
    document.getElementsByTagName('html')[0].style.overflow = blocker_originalHtmlOverflow;

    document.getElementById('blocker_haze').style.display = 'none';
    document.getElementById('blocker_centerPane').style.display = 'none';
    //blocker_setCookie("content_unlocked", 1, 365, '/', '');
	Set_Cookie( 'content_unlocked', 1 , 365, '/', '', '' );
}
function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );

/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );

document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}

function blocker_setCookie(c_name,value,expiredays){
    var exdate=new Date();exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function blocker_getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1){ 
            c_start=c_start + c_name.length+1; 
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            return unescape(document.cookie.substring(c_start,c_end));
        } 
    }
    return "";
}

Hi Guys,

I have an situation. An DIV has two sections, one to prompt user info and other displays ads. While the ads section is in an iframe(inside DIV) whose src is set dynamically, i.e. when user tries to close the browser, then my code brings up the DIV and sets the src of that iframe also an browsers default prompt stays on top of the page asking for 'Ok' and 'Cancel' button to leave/stay on the page respectively.

My problem is that the iframe is not loaded unless user clicks on the 'Cancel' button. This happens in IE,Chrome and Safari but works fine in Firefox. I know this is an browser's behavior but still expect an cross browser solution.

Hi, folks!

Having a big issue he i got a code that works fine in Chrome, FF, but seems unreadable by IE.

Got a main HTML code that have a DIV tag, declared like this

Code:

<div id='leframe' style='visibility:hidden'></div>

Then, I call, through a Flash file, an external function that says:

Code:

function loadNextPg(nextPg) {
	var varDiv = "<iframe src='pg"+nextPg+".htm'></iframe>";
	document.getElementById("leframe").innerHTML = varDiv;
	}
}

It would load the HTML named (pg'+nextPg+'.htm), where nextPg is a String value ("01", "02", etc).

It works WONDERFULLY in Chrome, FF, etc, but not in IE.

Does anyone know if I'm doing anything wrong?

Best regards and thanks in advance.

Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he

The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>

About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.

When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.

I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.

I appreciate your help.

I've had some issues today that are driving me crazy and I've searched around, tried a variety of things to no avail.

The page in question:
http://www.sunrayinc.com/propview2.php?view=894

(There are a ton of pages on the site, all dynamically generated, but the problem is the same all around.)

There are several places on that page where window.open functions pop-up a small window: The "Email this listing", the little "(?)" on the home features, and the image thumbnails.

The email to a friend pop up looks something like so:
Code:

<a href="./friendmail.php?listing=894" onClick="javascript:window.open('./friendmail.php?listing=894','FriendMail','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=300'); return false">Click Here to Email this Listing</a>

If I remove the href entirely, the onclick executes fine, but then the link doesn't look like a link, just plain text.

Everything works fine in Firefox.

To get around that for those image thumbnails using the MSIE-only code onmouseover=this.style.cursor='hand', which at least gives the impression that it's a link, and obliterating the href.

Pop-ups in MSIE work fine on other pages (like my blog) but I can't seem to get them to work reliably on my day-job's site.

I've searched around, played with spacing of the quotes/commas in the pop-up declaration, names of the window (have a variable passing the image's ID as the pop-up name to make sure that wasn't an issue), and I'm stumped. Any idea why this would be happening?

(Note: Yes, I did turn of MSIE's pop-up blocker. And this is in MSIE7, but it doesn't work in MSIE8 or MSIE6, either).

Hi,

Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks.

Hi, I was working on my web page and noticed that depending on the width of the screen, the Iframe I created would not display correctly. Because of that I needed to come up with a piece of code that would detect the screens horizontal resolution and pick the right Iframe to be loaded. Below are the scenarios that specify which one should be loaded. I am very bad with javascript so could someone help me come up with a piece of code that would load the right frame? Thanks. The web address where the code will go is www.jumbledfun.com/nasa.html.



If the horizontal resolution of the screen is less then 1600 I would like this Iframe to be loaded: (It Would Go Under The If Part)

Code:

<iframe src="http://www.jumbledfun.com/nasaframes/nasalivelr.html"  width= "55%" height= "580%" scrolling="no" frameborder="0"/> </iframe>

If the horizontal resolution of the screen is 1600 or more I would like this Iframe to be loaded: (It Would Go Under The Else Part)

Code:

<iframe src="http://www.jumbledfun.com/nasaframes/nasalive.html"  width= "100%" height= "300%" scrolling="no" frameborder="0"/> </iframe>

This is the format that I would want it in:

Code:

<script type="text/javascript">

if (condition)
  {
  code to be executed if condition is true
  }
else
  {
  code to be executed if condition is not true
  }

</script>

Hi guys,

right now I'm trying to write a comet application, that communicates with a server by iframe streaming. The problem is, that in my applications the browser does the "loading thing" (loading bar, loading cursor).
I have seen many applications, where iframe streaming is used, without any loading signs in the browser. For example:

http://www.stream-hub.com/demo/StockDemo/index.html
http://orbited.org/wiki/LiveHelp
http://lib1.freeliberator.com/exampl...e-example.html

(some examples use XHR streaming)

Could somebody tell me how to do it without the loading stuff?

Thanks and best regards,
Markus

I have an entirely javascript page that once it is done it still looks like it is loading. This is more of an annoyance than anything harmful. The page can be viewed at http://mikedombrowski.com/mRNA.html
Thank you for your help in advance.

I am not sure if this is the proper place to ask this or not or even what to ask for.

I am very new to this and this is just for learning. The code is not mine.
The code is just a blue table with a bookmark option. When I remove the javascript code for the bookmark the blue table disappears.

Can anyone tell me why that happens?


Code:

<html>
<body>

<table width="95%" align="center" cellpadding="0" cellspacing="0" bgcolor="#3399ff"> 
  <tr bgcolor="#3399ff"> 
    <td colspan="11" align="right" valign="middle" bgcolor="#3399ff">
    
    
<script language="javascript"> <!--blue area below tabs-->

//This code is for IE v4 or better
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= "4.0")
{document.write( "<SPAN class='bookmark' onClick='window.external.AddFavorite(location.href, document.title);'>*Bookmark this page*</SPAN>")}

//This code posts text if not
else
{document.write("<span class='bookmark'>book mark this page</span>")}
</script>

    </tr>
    
    </table>

</body>
</html>

This is the code exactly how it was sent. I am trying to remove the bookmark option but keep the table the way it is.

Anyone have any idea what I am doing wrong?

Thank you very much

Basically, I have a total of three different JavaScripts that need to be loaded when the user opens the page; let's call them script_a.js, script_b.js, and script_c.js

script_a.js and script_b.js each need to be loaded on every page; however, they do very different things (one displays text, the other creates buttons), and in the interest of readability and ease of editing later, I want to keep them separate.

script_c.js only needs to be loaded on one page; there will be a few variants (script_c2, script_c3, etc), but again, each of them only needs to be loaded on a single page.

The scripts are also too large and unwieldy for me to put them directly into the HTML (basically because I have to do a lot of different switches, and conditionals, and output formatting).

At present, the only way I know how to load a JavaScript is to use window.onload, so obviously I'm getting into the issue of competing onLoads.

Any help would be appreciated!

Hi, nothing to serious, but definitely annoying. Every time i load my page, it loads to the halfway Y position down the page. I want to page to always load top every time it is refreshed or referenced to. You can see the problem here. Try and go to www.simeoncreative.com and click on any of the menu nav links. the page will load, but just halfway down the page. I tried both the

Code:

$(document).load().scrollTop(0);

and

Code:

$(document).ready(function(){
    $(this).scrollTop(0);
});

JS codes in the linked .js file. How can I fix this? Thanks in advance for any help.

Hello,

I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points).

The content is shown in a div and called and loaded via Ajax.

Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.htmlAfter you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments.

Here is the content page that appears in the div after you click "Go":
http://www.gilchrist.leon.k12.fl.us/...tByAuthor.html

If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded.

I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both...

Any help with this would be greatly appreciated.

Thank you,
Deborah

Something is up with my coding, when I try to load the page.. it will only load in notepad. Help!


<html>
<head>
<title>Other ways to help</title>

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}


function validateForm(form) {
var fName = form.txtFname.value;


var dataIsValid = true;

var errMsg = "The following inputs are missing or invalid:\n\n";


if(fName == '') {
errMsg = errMsg + "First Name\n";
dataIsValid = false;
}


if(lName == '') {
errMsg = errMsg + "Last Name\n";
dataIsValid = false;
}




if(dataIsValid) {
return true;
} else {
alert(errMsg);
return false;
}
}

//-->
</SCRIPT>

</head>

<body>
<a name="other">
<body background="otherbackground.jpg">
<center><table border="2" cellspacing="2" width="900" height="190" bordercolor="#000000">
<tr>
<td width="60%" td bgcolor="white">
<b>To make a donation, fill and submit the following form. You can also make a cash donation directly by filling out your credit card information.<br/>
Also, be sure to check yes if you would like to subscribe to our online monthly newsletter.</b><br/>
<form name="Donations" method="post" action="#" onsubmit="validateForm(this);">
First Name<input type="text" name="txtFname" size="25" tabindex="1">
M.I.<input type="text" name="M.I." size="1">
Last Name<input type="text" name="Last Name" size="25"><br/>
Street Address<input type="text" name="Street Address" size="25">
Street Address 2<input type="text" name="Street Address 2" size="25"><br/>
City<input type="text" name="City" id="myCity" size="20">
State<input type="text" name="State" size="2">
Zip<input type="text" name="Zip Code" size="10"maxlength="9"><br/>
Email<input type="text" name="Email" size="25"><br/>
Credit Card Number<input type="text" name="Credit Card Number" size="10"maxlength="8">
Expiration Date<input type="text" name="Expiration Date" size="5">
Security Number<input type="text" name="Security Number" size="3"maxlength="3">
<textarea cols="50" rows="4" name="Comments">Comments or Questions:</textarea><br/>
Subscribe to newsletter? <input type="radio" name="choices" value="Yes">Yes<input type="radio" name="choices" value="No">No<br/><br/>
<input type="submit" value="Submit">
<input type="reset">
</form><br/>
</table><br/>

<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Choose a Destination...
<OPTION VALUE="home.html">Home Page
<OPTION VALUE="dogs.html">Learn About Dogs
<OPTION VALUE="cats.html">Learn About Cats
<OPTION VALUE="exotics.html">Learn About Exotics
<OPTION VALUE="other.html">Other Ways To Help
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
<br/><br?>

</body>

</html>

So I have an HTML page with javascript that takes input values, computes some results, and then puts these results in a table. Works great. Now I realize some users might want to print just the results table. So I add a button that allows the user to request the table in a separate window; clicking the button invokes a script to re-create the table in a separate window. Works fine except:

* In the status bar, the window appears to never finish loading
* If you go to File -> Print then nothing seems to happen; however,
if you close the generated window _then_ the print dialog appears;
the window you want to print, however, is gone.

Any suggestions?

The code invoked by clicking the newly added button:

[CODE]
function grabResults()
{
var w = window.open("","ROIResults"+winCount++,
"height=400,width=600,menubar=yes");
var d = w.document;
d.write('<head>');
d.write('<link href="style.css" title="compact" rel="stylesheet" type="text/css" />');
d.write('<title>Return On Investment Calculations</title>');
d.write('</head>');
d.write('<body>');
d.write('<div id="logoholder">');
d.write(' <img src="TTFlogo2.gif" alt="Cannott display logo" "width="322" width="322" height="51"></p>');
d.write('</div>');
d.write('<div id="header">');
d.write(' <h2>Return on Investment Estimator for Classroom Training</h2>');
d.write('</div>');
d.write('<table rules="all" frame="box">');
d.write('<caption>Results - Estimated ROI</caption>');
d.write(' <tr><th>Course</th>');
d.write('<td class="center" id="courseName">'+cname+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Duration (Days)</th>');
d.write('<td class="center" id="courseDur">'+cdays+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Class Size</th>');
d.write('<td class="center" id="courseSize">'+csize+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Location</th>');
d.write('<td class="center" id="courseLoc">'+teach_loc+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Training Cost</th>');
d.write('<td class="justr" id="courseCost">'+TC+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Initial Value</th>');
d.write('<td class="justr" id="courseInitial">'+startValue+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Returned Value</th>');
d.write('<td class="justr" id="courseValue">'+RV+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Increase in Value</th>');
d.write('<td class="justr" id="courseIncr">'+Inc+'</td>');
d.write(' </tr>');
d.write(' <tr><th>Net ROI after costs</th>');
d.write('<td class="justr" id="courseROI">'+ROI+'</td>');
d.write(' </tr>');
d.write(' <tr><th>ROI Rate</th>');
d.write('<td class="justr" id="courseROIRate">'+ROIR.toFixed(2)+'%</td>');
d.write('</tr> '); */
d.write('</table>');
d.write('<p class="in3">(All amounts are in US Dollars.)</p>');
d.write('</body>');
d.write('</html>');

d.close();
return true;
}

[ICODE]