|
JavaScript - I Need Iframe To Load Before The Code Below It Executes
Hi,
I have a webpage structured as below and want the contents in the iframe to load prior to the code below it. At the moment the javascript(resizing stuff) in the iframe code delays the iframe from loading in full before the "streaming music player" code. This iframe javascript is on the page as opposed to an external file. I would have thought the iframe would have to load in full before the code below it would be executed. How do I make the iframe load in sequence or delay/hide the code below it until iframe is fully loaded? Thanks ####header#### flash ####header menu#### flash ####iframe#### lots of javascript and content from page on mywebsite (not external url) ###streaming music player##### embedded flash player linked to external site ####footer menu#### flash Similar Tutorialsat the day i include to my web page an iframe , in browser like firefox , opera works fine, but in ie6 sometimes cannot load the content of iframe , and a code who load page in iframe <iframe frameborder="0" scrolling="no" src='index.php' name='mainFrame' onload='in_process = false; resizeIframe("mainFrame");' id='mainFrame' width="100%"> </iframe> the follow show IE6 Hi everyone, I run a streaming site and would like google adsense to appear at the bottom of the page/stream every 3 minutes, stay for 15 seconds and then close automatically. Then after another 3 minutes they'd appear again, stay for 15 seconds and then close again, etc, etc. I'd imagine having the adsense in an iframe would be easier. I'd also like to give users the option to close the adsense using a close button at the top of the iframe if they don't want to wait 15 seconds. Is this possible? Hi all I have an asp page page with a DIV container that is activated when a user clicks a link (using javascript to activate it. It pops up similar to a light box). The contents of the DIV is an Iframe from another website. The Iframe is hidden when the page loads. Loading in the Iframe when the page loads is affecting performance of the page. I'm wondering if there is a way to load the Iframe when the user clicks the link to activate the DIV light box. This way the page doesn't have to load the Iframe straight away... only when the user needs it... I appreciate any ideas. I am a javascript newbie. I have a radio website that runs a live stream 24/7. The live stream is loaded in to an iframe named "stream". I only ever have 2 files that show in that iframe. 1 for when the user has the stream on and another for when they turn it off. stream_on.php and stream_off.php I also have podcasts on the site and my goal is when the user clicks the .swf object to play the podcast, the live stream in the iframe changes to stream_off.php so that the 2 audios don't overlap each other. Here's the code I have so far for the .swf object. PHP Code: <object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur' onclick="window.open('stream_off.php','stream')\"> <param name='movie' value='player_mp3_maxi.swf' /> <param name='bgcolor' value='#666666'>"; if ($row['location'] == "") { echo "<param name='FlashVars' value='mp3=". $site ."podcasts/". $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />"; } else { echo "<param name='FlashVars' value='mp3=http://". $row['location'] . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />"; } </object> And the code for the iframe. It's default state is stream_on.php since on load I want the stream to start right away. I only need it to change upon clicking of any .swf object on the page. PHP Code: <iframe src='stream_on.php' id='stream' marginheight='0' width='195' height='110' frameborder='0' scrolling='no'></iframe> As you can see, I put the onclick in the object tag. Is this correct ? Is there a piece of javascript code I am missing ? Please Help. Hi, I am looking for some code that will do the following Form to post any URL to an iFrame and load said URL. I been told Javascript can do this, but I am also after the form bit as well if possible. From an iframe, I want to load and play a playlist in a wimpy mp3 player in the parent page. I can do it as if it is a popup window but it requires that from one iframe, I reload the player in the other iframe. Here are the functions given by wimpy: Code: <script language="JavaScript" type="text/JavaScript">
<!--
var wimpyWindow;
var winOpen= 0;
function wimpyPopPlayer(wimpyPopPage,theWidth,theHeight) {
wimpyWindow = window.open(wimpyPopPage,'wimpyMP3player','width='+theWidth+',height='+theHeight);
winOpen=1;
}
function wimpyPopPlayerWithFile(wimpyPopPage,initialFile,theWidth,theHeight) {
wimpyWindow = window.open(wimpyPopPage+'?theFile='+initialFile,'wimpyMP3player','width='+theWidth+',height='+theHeight);
winOpen=1;
}
function wimpyIsOpen(){
if (winOpen==1){
if (wimpyWindow.closed){
return false;
} else {
return true;
}
} else {
return false;
}
}
function wimpyPopAndPlay(startOnLoad, theFile, theArtist, theTitle, graphicURL, hotlinkURL){
if(wimpyIsOpen()){
wimpyWindow.wimpy_addTrack(startOnLoad, theFile, theArtist, theTitle, graphicURL, hotlinkURL);
} else {
wimpyPopPlayerWithFile('home2.shtml',theFile,'325','350');
}
}
//-->
</script>
Is there a way to do it that targets the player in the iframe without treating it like a popup window? Any help greatly appreciated! I'm slowly scraping away errors from a page im working on and ive found this forum to be very helpful- down to one more that i wanted to post on. sample page is he http://darrenlasso.com/freelance/loo.../lookbook.html Works fine in most all browsers except for IE8- ive even had to include built in ie7 compatibility to get it to work at all. Problem is most likely associated with my js, which is: Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
}
and html is: Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
etc etc.. Which is just something i found online - probly isnt right for what im trying to accomplish. If you go to the site- you navigate by hovering over/clicking the images at the top and that loads a new page into the iframe below. Id like to be able to fix the errors and get it working without having to force ie7 compatibility if possible too. Any help is much appreciated 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. Hello all, my second post! I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari. What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, I would love any input on how to make this work in other browsers. Here is the header code: Code: <SCRIPT type="text/javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>
<SCRIPT type="text/javascript">
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>
Here is the code on the page where a link click shows the hidden div and loads the iframe contained. Code: <p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', 'http://www.google.com');">show/hide me</a></p>
</td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4; width: 1010px; height: 500px; left: 5%; top: 15%; background-color: #f0f0f0; border: 1px solid #000; padding: 10px;"><iframe name="ifrm1" id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">Sorry, your browser doesnt support iframes.</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';
As always, any input is greatly appreciated! Hi, when my page loads it starts with a confrim box. If "Cancel" is selected then the rest of the page loads fine. If "Ok" is selected nothing after the confirm box loads. Any ideas. Also, it appears that IE and Firefox have trouble with this type of media and Chrome will only play the audio file for about 15 seconds. Any solutions? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Justin Revard</title>
<style type="text/css">
html, body {height: 100%; margin: 0; padding: 0;}
#background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<p><img id="background" src="Images/siteBackground.jpg" /></p>
<div id="content">
<h1>Justin Revard's Home Page</h1>
<p>
<script type="text/javascript"><!--
var r = confirm("Would you like a background tune?");
if (r == true)
{
document.body.innerHTML += '<object class="plugin_video" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640"><param name="autoplay" value="true" /><embed title="QuickTime" hidden="true" src="sounds/siteBG.wav" mce_src="sounds/siteBG.wav autoplay="true" loop="true" controller="true"></embed></object>';
}
else
{
alert("If you change your mind reload the page to choose again.");
}
// --></script>
</p>
<p>
<table>
<tbody>
<tr>
<td><a href="Source/page2.html" style="opacity:0">Page 2</a></td>
<td><a href="Source/page3.html" style="opacity:0">Page 3</a><br /></td>
<td><a href="Source/today.php" style="opacity:0">Today's Date</a></td>
<td><a href="Source/morePHP.php" style="opacity:0">More PHP</a></td>
<td><a href="Source/database.php" style="opacity:0">Database</a></td>
<td><a href="source/products.html" style="opacity:0">Products</a></td>
<td><a href="Source/origFileRead.php" style="opacity:0">Original File Reader</a></td>
<td><a href="Source/fileRead.php" style="opacity:0">File Reader</a></td>
</tr>
<tr>
<td><a href="http://justinrevard.com"><img src="Images/homeButton.jpg" /></a></td>
<td><a href="foosball.html"><img src="Images/foosballButton.jpg" /></a></td>
<td><a href="physics.html"><img src="Images/physicsButton.jpg" /></a></td>
<td><a href="skiing.html"><img src="Images/skiingButton.jpg" /></a></td>
<td><a href="message.html"><img src="Images/messageButton.jpg" /></a></td>
<td><a href="links.html"><img src="Images/linksButton.jpg" /></a></td>
<td><a href="aboutMe.html"><img src="Images/aboutMeButton.jpg" /></a></td>
</tr>
</tbody>
</table>
</p>
</div>
<p> </p>
</body>
</html>
I want to use the below code to warn users that they are leaving the web form and to confirm they have saved their work. When I try the below and click the google link to leave the page I have to click through the dialog box twice. Why is that and how can I just get it the appear only once? I see if the user attempts to close the window the script works great but if the user attempts to click a link on the page they have to click through the dialoog box twwice. Please help. Code: <script type="text/javascript">
function goodbye(e) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'Have you saved your work? You sure you want to leave?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload=goodbye;
</script>
<a href="www.google.com">google</a>
I have javascript that sets global variables to true. Here is the code: Code: <script type="text/javascript">
var count=0;
var castforfood=false;
var sc2mx=false;
var ozrak=false;
var chavodelocho=false;
var jimrising=false;
var day9tv=false;
function justinlive(arg){
if(arg != null){
if(count==2){
ozrak=true;
}
else if(count==5){
day9tv=true;
}
}
count++;
}
function livestatus(arg){
if (arg.channel.isLive == true){
if (count==1){
sc2mx=true;
}
else if (count==3){
chavodelocho=true;
}
}
count++;
}
function set_status(status){
if (status == "live"){
if (count==0){
castforfood=true;
}
else if (count==4){
jimrising=true;
}
}
count++;
}
[...]
</script>
[...]
<!-- THIS IS WHERE THE FUNCTIONS ARE CALLED. -->
<script type="text/javascript" src="http://api.ustream.tv/json/channel/castforfood/getValueOf/status?key=XXXXXX&callback=set_status"></script>
<script type="text/javascript" src="http://xsc2mxx.api.channel.livestream.com/2.0/livestatus.json?callback=livestatus"></script>
<!-- FIRST CALL TO justinlive IS THE LINE BELOW. IT WORKS FINE. -->
<script type="text/javascript" src="http://api.justin.tv/api/stream/list.json?channel=ozrak&jsonp=justinlive"></script>
<script type="text/javascript" src="http://xchavodelochox.api.channel.livestream.com/2.0/livestatus.json?callback=livestatus"></script>
<script type="text/javascript" src="http://api.ustream.tv/json/channel/jim-rising/getValueOf/status?key=XXXXXX&callback=set_status"></script>
<!-- SECOND CALL TO justinlive IS THE LINE BELOW. IT NEVER HAPPENS. -->
<script type="text/javascript" src="http://api.justin.tv/api/stream/list.json?channel=day9tv&jsonp=justinlive"></script>
The calls to set_status and livestatus work just fine. The problem is calling "justinlive". It only works correctly the first time. The second time, the function does not execute at all. (I tried inserting an "alert("Hello"); at the beginning of the function, so I know it only gets executed once.) I'm pretty sure this is a simple issue, but I've been stuck on this for weeks now. Help is appreciated. I have a browser game that's coded with javascript. It's a basic question and answer game. A question is asked and if they type the right answer it brings them to a new page with a new question and continues on. Right now it's coded in a way that each question is a separate HTML page. I'm trying to find a way to get it so it's all on one page. Due to the nature of my code the best way I can think of is to have the content of those HTML pages load and replace a certain section of HTML code that's already on the page. Does this make any sense and if so is there such a solution? hello, iam kind of new at javascript, but iam trying my best to be better and better. so i have 3 divs (my_block, my_image, my_description) as you see in my code below Code: <div class = "my_block">
<div class = "my_image">
<img src="images/pic.jpg" width="600" height="600">
</div>
<div class = "my_description">
<a> Description goes here.... ! </a>
</div>
</div>
just i want to display the "my description" div only after the 100% image loading completion which exist in "my_image" div. so how can i get this done with Javascript please ?? thanks a lot Hello, I am fairly new to javascript so patience is appreciated. I have some javascript I need to execute that is located in an SSI footer. The purpose of the code is to find out what domain the page was loaded at and then to tailor some links to match. Because of how the hosting environment is set up (which I have no control over) when the links don't match the domain they aren't included. I also have to use a complete url (as opposed to relative url) because the footer is included in many different web pages. The problem is that the code is executed but it also is displayed as plain text in firefox. The test site is http://test.ci.edina.mn.us Help! The code is: Code: <script type="text/javascript"> var domainName, strOut; domainName = document.domain; strOut = '<link rel="stylesheet" type="text/css" href="http://' + domainName + '/js/jquery.fancybox/jquery.fancybox.css" media="screen" />'; document.write(strOut); strOut = '<script src="http://' + domainName + '/js/jquery-1.3.2.min.js" type="text/javascript"></script>'; document.write(strOut); strOut = '<script src="http://' + domainName + '/js/jquery.fancybox/jquery.fancybox-1.2.1.js" type="text/javascript"></script>'; document.write(strOut); strOut = '<script src="http://' + domainName + '/js/jquery.easing.1.3.js" type="text/javascript"></script>'; document.write(strOut); </script> I need a code that will load multiple codes based on what minute it is. Example: If it's 12:31 it will load code A If it's 12:32 it will load code B (Lets just say there are only two codes) If it's 12:33 it will load code A If it's 12:34 it will load code B etc. I use to have this in a file somewhere, but over the course of the past few years I've misplaced it an am unable to find it. It would be much appreciated if I could get some help with this. Hello. I'm trying to improve page loads times on my site and I've tracked the issue down to the share buttons we have. We load the Tweet Button, Facebook Like Button, and Google +1 button sometimes up to 25 times on one page. What I'd like to do is, on initial load, display an image that looks like the Tweet Button, for example, and then when hovering over a div, change to the actual Tweet Button code. I know how to do this in general, but the key is that the actual tweet button code doesn't load when the page loads, only when you hover over the div does the actual code load. Can someone please give me a general template and I can integrate it in with my site? Thanks. Basically, what I'm trying to do is set the left margin of an image based on the width of the image, because I want the image to appear centered relative to the link table above. I've been using this code: Code: function insertImageMargin()
{
var marg = getImageMargin();
document.getElementById("comic").style.marginLeft = marg + "px";
}
function getImageMargin()
{
var com = document.getElementById("comic");
return 440 - com.width / 2;
}
What happens is, the first time com.width is 0, but if I hit reload, it is the width of the image, and the code works correctly. How do I get this to work the first time, or can you suggest an alternate approach? I tried to rework a short script to pull info from an iframe instead of the basic page it's sitting on, and I got confused. It's not working. Here's what I've got: Code: <script type="text/javascript" language="JavaScript">
function find_div_class() {
var divCollection = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
for (var i=0; i<divCollection.length; i++) {
if(innerDoc[i].getAttribute("class") == "list-journal-entry-wrapper") {
findMeText = divCollection[i].innerHTML;
alert(findMeText);
}
}
}
</script>
Press the button to find the divs with class "iframeId".<br />
<input type="button" onfocus="this.blur()"
value="iframeId" onclick="javascript:find_div_class();return false;""/>
I tried another way too, but still nothing: Code: <script type="text/javascript" language="JavaScript">
function find_div_class() {
var divCollection = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var info = document.getElementById("list-journal-entry-wrapper");
alert(list-journal-entry-wrapper);
}
}
}
</script>
Hi, I am using a password protection javascript code that works very well, but my problem is that I would like to edit the code so that the ".html" page will open inside an iframe on the main page. I think the code "window.location=verification+extension" needs to be edit to indicate the iframe that I want the html page to open in. The complete code is below in bold and parts of code in red text is where I think I need to edit, but I don't know how to edit the code to do what I want. Can anyone please Help Me, Thanks to all that respond. <!-- var pass=new Array() var t3="" var lim=7 pass[0]="TLMXe8VqAwsAllw" pass[1]="YeWAc9pfP1rmGrA" pass[2]="M8ljslaPqg0mQQp" pass[3]="SRdDwXWa0LSsGB" pass[4]="83I2WyO06m3aUjs0" pass[5]="453I2WyO06m3aUjs" var extension=".html" var enablelocking=0 var numletter="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" var temp3='' var cur=0 function max(which){ return (pass[Math.ceil(which)+(3&15)].substring(0,1)) } function testit(input){ temp=numletter.indexOf(input) var temp2=temp^parseInt(pass[phase1-1+(1|3)].substring(0,2)) temp2=numletter.substring(temp2,temp2+1) return (temp2) } function submitentry(){ t3='' verification=document.password1.password2.value phase1=Math.ceil(Math.random())-6+(2<<2) var indicate=true for (i=(1&2);i<window.max(Math.LOG10E);i++) t3+=testit(verification.charAt(i)) for (i=(1&2);i<lim;i++){ if (t3.charAt(i)!=pass[phase1+Math.round(Math.sin(Math.PI/2)-1)].charAt(i)) indicate=false }0 if (verification.length!=window.max(Math.LOG10E)) indicate=false if (indicate) window.location=verification+extension else alert("Invalid password. Please try again") } //--> |
|||||||