JavaScript - Loading Into An Iframe - Break Out?

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.

Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets.

Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets.

My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason.

Is there any solution that comes to mind for anyone out there?

You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found:

Get The Bookmarklet on this page

Again, it works great if you don't start the script from a sites home page.

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

Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much

Hi there everybody,
I've got this problem which I can't solve myself...

I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe.

Unfortunally I can't get this to work... Will somebody please help me?

Hi all,

I hope you can help

I have some code which:

1) Opens a URL (e.g. google.com) in a hidden iframe, then
2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded...

This works exactly as I need.

What I'd like to do is the following:

1) Open a URL (e.g. google.com) in a hidden iframe, then
2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe
3) The address bar of the full-screen iframe should be my domain (obviously!)

Here's what I have so far...

Hidden iframe -> New URL Code:

Code:

<html>
<body>
	<script type="text/javascript">

		var page_body = document.getElementsByTagName('body');
		var myframe = document.createElement('iframe');
		var id = Math.random();
		myframe.setAttribute('id', 'myFrame'+id);
		myframe.src = 'http://google.com';  //First open Google in hidden iframe 
		myframe.setAttribute('frameborder', '0')
		myframe.setAttribute('width', '0');
		myframe.setAttribute('height', '0');
		if (myframe.attachEvent)
			{
				myframe.attachEvent('onload', function()
					{
						top.location = 'http://yahoo.com';  //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html 
					});
					}
		else if (myframe.addEventListener)
			{
				myframe.addEventListener('load', function()
					{
						top.location = ('http://yahoo.com');
					}, false);
					}
		page_body[0].appendChild(myframe);

	</script>
</body>
</html>

I have an example of some code which displays the full screen iframe, but my problem is...

...I can't figure out how to redirect to this after the hidden iframe has loaded

Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded:

Code:

<html>
<head>
	<script type="text/javascript">
 		function sendParams() {
 			document.body.style.overflow = "hidden";
 		}
	</script>
</head>
<body>
	 <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> 
	<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>

I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas.

If you can help, you'll have some serious gratitude and good karma thrown your way!

Best wishes, and thanks in advance,
Paul

Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.

Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.
We have a central area which can be longer or shorter depending on the forum.

I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html
it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page:
http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html
which is not very clean at all, this is the javascript that i found that at least works:

Child iframe script:

Code:

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

Parent iframe Script:

Code:

<script type="text/javascript">
(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}
	var f = getQval('frame'), s = getQval('src');
	if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
		frames[f].location.href = s;
	}
})();
</script>

Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance.

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.

i have a program which gets values from different arrays and displays them on screen. how do i insert a break every 5 lines so its easier to read?

is there a way to make a javascript <br/> ??

Hey everyone, below is a very simple jquery slideshow script which functions exactly as it should. BUT, if I link an image in the DIV set (See proposed change section) the slideshow breaks, instead of cycling through each image in turn it keeps trying to cycle the first image over and over. What am i not getting here?



Script linking in header of HTML page

Code:

<script type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="script/slideshowsc.js"></script>

CSS on HTML controlling DIV position/opacity

Code:

#slideshow {
    position:relative;
    height:186px;
}

#slideshow IMG {
	position:absolute;
	top:0;
	left:20px;
	z-index:8;
	opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

DIV setup in HTML page

Code:

<div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;">
    <img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" />
    <img src="images/did-u-know2.png" width="499" height="186" />
    <img src="images/did-u-know3.png" width="499" height="186" />
</div>

PROPOSED CHANGE IN DIV CODE HERE

Code:

<div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;">
    <a href="whatever.html><img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" border="0" /></a>
    <img src="images/did-u-know2.png" width="499" height="186" />
    <img src="images/did-u-know3.png" width="499" height="186" />
</div>

Finally, Javascript / Jquery fired through body tag onload

Code:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 8000 );
});

Hello Coders, I am not a coder so this is a problem to me to solve this error. I checked javascript at JSLint and it droped me a error:
Code:

Problem at line 29 character 17: Unreachable 'break' after 'return'.

break;

Problem at line 50 character 21: Unreachable 'break' after 'return'.

break;

and the script is: Code:

<html>

<head>

<title></title>

</head>

<body>
<script type="text/javascript">
function keyDown(key) {
    if (currentstep == "1") {
        switch (key) {
        case 17:
            if (key1pressed == "") {
         changeKeyStyle("key1", "down");
         key1pressed = "1";
        showobj("step2");
            }
            break;
        case 67:
            if (key2pressed == "") {
         changeKeyStyle("key2", "down");
         key2pressed = "1";
            }
            if (key1pressed == "1" && key2pressed == "1") {
         step1Complete();
                return false;
                break;
            }
            break;
        default:
        }
    } else if (currentstep == "2") {
        switch (key) {
        case 18:
            if (key1pressed == "") {
         changeKeyStyle("key1", "down");
         key1pressed = "1";
         showobj("step2");
            }
            break;
        case 68:
            if (key2pressed == "") {
        changeKeyStyle("key2", "down");
         key2pressed = "1";
                if (key1pressed == "1" && key2pressed == "1") {
             step2complete();
                    return false;
                    break;
                }
            }
            break;
        default:
        }
    }
}

</script>
    

</body>

</html>

Thank you for all your help,
Arnas

Hey guys. I'm working on a "Preview Post" function. When the Preview Post button is clicked, it should reload the page, show the preview above the textarea, then send the text back to the textarea so the user can keep working.

It works until I move to a second line. If there are line breaks they don't get shown in the preview. Also, the text isn't sent back to the textarea.

I have a pair of functions that are supposed to handle the input string. The first function records the input when typing, and the second function picks up the post to print as a preview: You can see what I mean he

Code:

function preview() 
{
  var preview = window.document.postform.inputpost.value;
  window.document.hidden.inputpreview.value = preview;
}

function copypreview()
{
  var copypreview = '<?php echo $_POST[inputpreview]; ?>';
  window.document.postform.inputpost.value = copypreview;
}

Here's how I use them:

Code:

<body onload='copypreview();'>

<?php include("navbar.php"); ?> 

<?php if ($_GET[preview])
{
  echo "<table id=blog><tr><td>";
  echo $_POST[inputpreview];
  echo "</td></tr></table>";
} ?>

<form name="postform" action="submitpost.php" method="post">

Post Title 
<input size="40" type="text" name="inputtitle" id="inputtitle">

<?php include("tagbar.php"); ?>

<textarea onchange="preview();" cols="101" rows="20" id="inputpost" name="inputpost"></textarea>

<div align=center>
<input type="submit" value="Submit"/>
</form>

<form name="hidden" method="post" action="addpost.php?preview=1">
<input type="hidden" name="inputpreview">
<input type="submit" onClick="preview();" value="Preview Post"/>
</form>

Sorry I know it's a lot of code. I tried to make it as readable as possible. Can someone tell me how to fix this?

I thought I might have to find a way to insert <br> tags when the user hits the Enter key, but I could have sworn this thing was working with line breaks before.