|
JavaScript - Iframe Load On Click
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. Similar TutorialsIs there a way onclick to load external html into a DIV tag, but without iFrame usage?
Hello Again, After much help and support i have decided that the best way to do what i want (if i can get it working is like the below). The idea is to click a link and content will load into a div from another div on another page in the same webspace. I can make a test page as directed by the guidance i recieved but there are some features that wont work properly or are not what i am after. For example in the test case the link to load the div is inside the div i want to update. In my case i want to click on the algebra link in the blue horizontal menu and then the main menu updates. I wont lie i have not got the skills to adapt this script on my own. here is the test page http://www.bushcottages.co.uk/loaddata.htm the main page i would like it to work on as its not working correctly is http://www.bushcottages.co.uk/new.htm test code is Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Click This Link To Load My Favor</title>
<script type="text/javascript" src="java/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loadData").click(function()
{
$(this).text("...One Moment Please...");
$("#container").append('<div id="favoriteMovies"></div>')
.children("#favoriteMovies").hide()
.load("theOtherPage.htm ul#favoriteMovies", function()
{
$("#loadData").remove();
$("#favoriteMovies").slideDown("slow");
});
return false;
});
});
</script>
<style type="text/css">
#container
{
width: 300px;
height: 200px;
font-family: georgia;
font-weight: bold;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
</style>
</head>
<body>
<div id="container">
<li><a href="#" id="loadData">Click This Link To Load My Favorite Movies</a></li>
</div>
</body>
</html>
code for main page is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mathematics Learning Zone</title>
<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">
<meta name="author" content="Peter Devlin">
<script type="text/javascript" src="java/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
if (document.getElementById('news')) {
var options = {
newsList: "#news",
tickerRate: 20,
loopDelay: 6000,
startDelay: 10,
placeHolder1: "_"
}
$().newsTicker(options);
}
});
-->
</script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
<script type="text/javascript">
var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'brainteasersolution.htm','height=400,width=400,left=40%,top=20%');
if (window.focus) {newwindow.focus()}
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#number").click(function()
{
$(this).text("...One Moment Please...");
$("#container").append('<div id="Algebra"></div>')
.children("#Algebra").hide()
.load("Algebra.htm ul#algebra", function()
{
$("#number").remove();
$("#Algebra").slideDown("slow");
});
return false;
});
});
</script>
<style type="text/css">
*
{
border: 0;
margin: 0;
padding-top:0;
}
#topmargin
{
width:900px;
height:5px;
margin:auto;
}
#banner
{
width: 900px;
height: 70px;
background-image: url('banner.png');
margin: auto;
margin-bottom: 5px;
background-color: #000066;
}
#horizontalmenu
{
width: 900px;
height: 25px;
margin: auto;
margin-bottom: 5px;
background-color: #000066;
}
#horizontalmenu ul
{
list-style-type: none;
margin: 0px;
padding: 2px 0px 0px 0px;
}
#horizontalmenu ul li
{
float: left;
display: block;
text-align: center;
width: 300px;
}
#horizontalmenu ul li a
{
text-decoration: none;
font-family: georgia;
font-size: 1em;
color: #fafafa;
}
#horizontalmenu ul li a:hover
{
font-family: georgia;
font-size: 1em;
padding: 5px 40px 5px;
color: #000000;
background-color: #ffffff;
}
#mainpage
{
width: 900px;
margin: auto;
}
#one
{
float: left;
width: 150px;
margin-right: 5px;
}
#two
{
float: left;
width: 590px;
margin-right: 5px;
}
#three
{
float: left;
width: 150px
}
#verticalmenu
{
float: left;
width: 150px;
}
#verticaltopmenu
{
float: left;
width: 150px;
height: 23px;
background-color: #000066;
}
#verticalmainmenu
{
float: left;
width: 146px;
height: 372px;
text-decoration: none;
border-style: solid;
border-width: 2px;
border-color: #000066;
padding-top: 2px;
padding-bottom: 2px;
}
#verticalmainmenu ul
{
text-decoration: none;
list-style: none;
padding: 0px;
margin: 0px;
color: black;
}
#verticalmainmenu ul li
{
list-style: none;
text-decoration: none;
display: block;
padding: 0px;
text-align: left;
font-family: georgia;
font-size: .8em;
color: black;
}
#verticalmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#verticalmainmenu a:hover
{
background-color: white;
color: #000066;
}
#tickercontainer
{
float: left;
width: 586px;
height: 21px;
margin-bottom: 5px;
border-color: #000066;
border-style: solid;
border-width: 2px;
}
#tickersidetitle
{
float: left;
width: 125px;
height: 21px;
background-color: #000066;
}
#tickercontent
{
float: left;
width: 461px;
height: 21px;
padding: 0px;
}
ul#news
{
margin: 0px;
height: 21px;
padding: 0px 0px 0px 0px;
}
ul#news li
{
list-style: none;
font-family: georgia;
font-size: 14px;
font-weight: bold;
color: #004400;
margin: 0px;
padding: 0px 0px 0px 10px;
}
ul#news li a:link, ul#news li a:hover
{
color: #004400;
text-decoration: none;
}
#contentwindow
{
float: left;
width: 590px;
}
ul.tabs
{
width: 590px; /*--Set width of container--*/
height: 23px; /*--Set height of tabs--*/
margin: 0px;
padding: 0px;
float: left;
list-style: none;
border-bottom: 2px solid #000066; /*--Set line at bottom of ul--*/
}
ul.tabs li
{
float: left;
margin-right: 1px; /*adjusts gap between tabs*/
height: 23px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 23px; /*--Vertically aligns the text within the tab--*/
margin-bottom: -2px;
background: #000066;
border-color: #000066;
border-style: solid;
border: 2px;
}
ul.tabs li a
{
text-decoration: none;
color: #FFFFFF;
font-family: georgia;
font-size: 14px;
display: block;
padding: 0 20px;
}
ul.tabs li.active a
{
color:#000000;
border-color: #000066;
border-style: solid;
border: 2px;
}
ul.tabs li a:hover
{
background-color: #330099;
border: 0px;
}
ul.tabs li.active, ul.tabs li.active a:hover /*--Makes sure that the active tab does not listen to the hover properties--*/
{
color: #000000;
background: #FFFFFF;
border-color: #000066;
border-style: solid;
border: 2px 2px 2px 0px;
border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 2px solid #000066;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width: 586px;
height: 346px;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
#testsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#teststopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#testsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#testsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#testsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('test.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#testsmainmenu ul li a
{
padding: 0px;
text-decoration: none;
text-align: left;
color: black;
}
#testsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#downloadsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#downloadstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#downloadsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#downloadsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#downloadsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('download.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#downloadsmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#downloadsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#worksheetsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#worksheetstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#worksheetsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#worksheetsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#worksheetsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('worksheet.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#worksheetsmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#worksheetsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#weblinksmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#weblinkstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#weblinksmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#weblinksmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#weblinksmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('links.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#weblinksmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#weblinksmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
p
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #FFFFFF;
padding-top: 2px;
}
p.a
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #FFFFFF;
padding-top: 0px;
}
p.b
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #000000;
padding-top: 0px;
}
p.c
{
text-align: center;
font-family: georgia;
font-size: 8px;
color: #000000;
padding-top: 0px;
}
</style>
</head>
<body>
<div id="topmargin"></div>
<div id="banner"></div>
<div id="horizontalmenu">
<ul>
<li> <a href="#" id="number">Number and Algebra</a></li>
<li><a href="url">Geometry and Measures</a></li>
<li><a href="url">Statistics - Data Handling</a></li>
</ul>
</div>
<div id="mainpage">
<div id="one">
<div id="verticalmenu">
<div id="verticaltopmenu"><p>Main Menu</p></div>
<div id="verticalmainmenu">
<ul>
<li><a href="url">Angles</a></li>
<li><a href="url">Properties of Shapes</a></li>
<li><a href="url">Circle Theorems</a></li>
<li><a href="url">Geometry of Cuboids</a></li>
<li><a href="url">2d and 3d Shapes</a></li>
<li><a href="url">Area</a></li>
<li><a href="url">Perimeter</a></li>
<li><a href="url">Prisms</a></li>
<li><a href="url">Surface Area</a></li>
<li><a href="url">Using Pi</a></li>
<li><a href="url">Volumes</a></li>
<li><a href="url">Transformations</a></li>
<li><a href="url">Scale</a></li>
<li><a href="url">Coordinates</a></li>
<li><a href="url">Vectors</a></li>
<li><a href="url">Bearings</a></li>
</ul>
</div>
</div>
</div>
<div id="two">
<div id="tickercontainer">
<div id="tickersidetitle"><p class="a">Brainteasers</p></div>
<div id="tickercontent">
<ul id="news">
<li>How many Degrees in a Triangle?</li>
<li><a href="javascript:poptastic('brainteasersolution.htm');">Algebra - What is 4x = 20 - X? Click for answer</a></li>
<li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li>
</ul>
</div>
</div>
<div id="contentwindow">
<ul class="tabs">
<li><a href="#tab1">Acute</a></li>
<li><a href="#tab2">Obtuse</a></li>
<li><a href="#tab1">Reflex</a></li>
<li><a href="#tab2">Vertex</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p class="b">hello</p>
<p class="c">Page Created by P.Devlin</p>
</div>
<div id="tab2" class="tab_content">
<p class="b">well done</p>
<p class="c">Page Created by P.Devlin</p>
</div>
</div></div>
</div>
<div id="three">
<div id="testsmenu">
<div id="teststopmenu"><p>Online Tests</p></div>
<div id="testsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Averages</a></li>
<li><a href="url">Algebra</a></li>
</ul>
</div>
</div>
<div id="downloadsmenu">
<div id="downloadstopmenu"><p>Downloads</p></div>
<div id="downloadsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
<div id="worksheetsmenu">
<div id="worksheetstopmenu"><p>Worksheets</p></div>
<div id="worksheetsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
<div id="weblinksmenu">
<div id="weblinkstopmenu"><p>Web Links</p></div>
<div id="weblinksmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Many thank to you all for your help so far. Peter Hey guys. I need a Javascript that clicks on particular co-ordinates on page load. I'll even make do with a script that clicks on a random co-ordinate on page load. Just a simple click has to be made automatically on page load on the page. I tried using and editing this code: Code: <html>
<head>
<script>
window.onload = function(){
document.getElementById("autoid").click();
}
</script>
</head>
<body>
<a href="http://google.com" id="autoid">Search Engine</a>
</body>
</html>
but its of no use because I want it to click on another javascript, thats another Code: <script type="text/javascript"> [Script data goes here that takes about 700 x 700 pixels on the screen] </script> I want a click to be made on this script somehow. I can add Code: window.setTimeout('clickit()',5000);
function clickit(){
location.href = document.getElementById("autoid");
myself which will delay it so the click occurs after page load but I just want a click to happen on top of that javascript. Any help will be greatly appreciated. Cheers! So I wrote a script to slide various divs horizontally. It takes 2 seconds to start and then begins, sliding, then stops, then slides, until all four slides are shown, and the slides back to the first one. My issue is I have two buttons that should take over and kill the auto sliding. Also the script is giving me errors. That mastertimer, and loopertimer is not defined... Why is that? Here is the code Code: <script type="text/javascript">// <![CDATA[
function restartSlide(item){
item.style.left = parseInt(item.style.left) + 60 +'px';
var resetLooperSl = setTimeout(function(){restartSlide(item)},15);
if(parseInt(item.style.left) >= 0){clearTimeout(resetLooperSl);return;}
}
function stopSlide(){
clearTimeout(loopTimer);
}
function animateSlide(element,limit,transition){
if(transition == "stop" && parseInt(element.style.left) > -2460){
limit = limit - 820;
}
else if(transition == "stop" && parseInt(element.style.left) <= -2460){
limit = limit + 820;
stopSlide();
}
element.style.left = parseInt(element.style.left) -20 + 'px';
if(parseInt(element.style.left)<= limit){
setTimeout(function(){animateSlide(element,limit,"stop")},4000);
clearTimeout(MasterTimer);
}
var loopTimer = setTimeout(function(){animateSlide(element,limit,"flow")},15);
}
function autoSlide(){
var MasterTimer;
var RestarterTime;
var adContainer = document.getElementById('adwrap');
adContainer.style.left = '0px';
MasterTimer = setTimeout(function(){animateSlide(adContainer,0,"stop")},3000);
RestarterTimer = setTimeout(function(){restartSlide(adContainer)},25000);
}
addEvent(window, 'load', autoSlide);
function btnSlideNow(elem, incremental){
elem.style.left = parseInt(elem.style.left) + incremental + 'px';
setTimeout(function(){btnSlideNow(elem, incremental)},30)
}
function btnActions(elem){
var incremental;
if(elem.id == 'btnAdLeft'){incremental = 30}
else if(elem.id == 'btnAdRight'){incremental = -30}
btnSlideNow(elem, incremental);
}
function adButtons(){
document.getElementById('btnAdLeft').onclick = function(){btnActions(this)}
document.getElementById('btnAdRight').onclick = function(){btnActions(this)}
}
addEvent(window, 'load', adButtons);
// ]]></script>
Also I'd like to see how you experienced scripters would write this cleaner. I'd like to see that, as I am new to js. It would help me learn. thanks Hey all, I'm trying to make it so that when a user clicks on a radio button, the image that is related to the radio button is displayed next to it (without reloading the page). At the moment all it shows is the image related to the currently saved option, which I'd like to keep on page load. Is this possible? If so, I'd appriciate any help. Here is my code for the radio buttons. Thanks. Code: <tr valign="top">
<td id="community-legal-services-logo-selection">
<p><label><?php _e('<strong class="table_tags">Display the following Community Legal Services logo:</strong>'); ?></p>
<p><label for="cls-mono">
<input class="" id="cls-mono" name="cls_logo" type="radio" value="cls_mono" <?php if($general_options['cls_logo'] === 'cls_mono'){ echo 'checked="checked"'; } ?> />
<?php _e('Mono'); ?></label>
</p>
<p><label for="cls-color">
<input class="" id="cls-color" name="cls_logo" type="radio" value="cls_color" <?php if($general_options['cls_logo'] === 'cls_color'){ echo 'checked="checked"'; } ?> />
<?php _e('Colour'); ?></label>
</p>
<p><label for="cls-none">
<input class="" id="cls-none" name="cls_logo" type="radio" value="cls_none" <?php if($general_options['cls_logo'] === 'cls_none'){ echo 'checked="checked"'; } ?> />
<?php _e('None'); ?></label>
</p>
<p>
<label><?php _e('<span class="table_tags">Link to the Community Legal Services website<span>'); ?></label>
</p>
<p>
<input class="large_input_box" id="cls-link" name="cls_link" type="text" value="<?php echo $general_options['cls_link']; ?>" /></label>
</p>
</td>
<?php if($general_options['cls_logo'] && $general_options['cls_logo'] !== 'cls_none'){ ?>
<td>
<img id="community-legal-services-logo-preview" class="image-preview" src="<?php echo $general_options['cls_logo_path']?>" />
</td>
<?php } ?>
</tr>
Hey there. I'm creating my web-site now. I'm planing to have some slide/object change by itself. I know Java Script perform this task. I have get the code and apply to the image I want. It works. My idea is each of my image upper left corner have the representative number of the slide. When the slide1 go to slide 2 automatically, the number will change colour from 1 to 2. When the user click the number, the slide will change according to the number. Let said I have 3 slide. Each slide and have no 1 ,2 ,3 move forward, move backward icon on the upper left corner. I have slide1 ,slide2, slide3 change by itself within 2.5 second. When the user go thru slide 1, slide 2 and till slide3, user find out he/she interested on slide 1 and by clicking 1 on the upper left corner, the slide will change back to slide 1. Something like showing on the home page at www.easyjet.com.EN or http://www.thomascook.com/ . Both home page show a slide. This is what exactly I want. I learn HTML code before but not Java Script. I have borrow many Java Script reference book. but no idea how to inside the number on the upper left corner on each slide and how the number work accordingly with the slide. So sorry if you can't understand what I was talking about. But, anyone who understand me or have any idea how can I mortify the Java script to what I want. Just answer or email me to trista_soo@yahoo.com or facebook me on sym107@hotmail.com. Thanks for your time and efforts. Your help I really appreciate. Cheers! 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? at 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 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 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 Hi all, Very new to this but I am trying to automate some webdownloads I need to do daily. I have a link I am trying to click via applescript do javascript I can return the frames html by doing tell application "Safari" do JavaScript "document.getElementById('iframesearch').contentDocument.getElementById('frmAccountList').innerH TML" in document 1 end tell the html returned contains the link link I want to click/fire <span id="SWGrdAccSearch_ctl06_lblAsterix"> </span> <a onclick="javascript:return getDefaultAccount('John Doe','0890','0','0');" id="SWGrdAccSearch_ctl06_lnkAccount" href="javascript:__doPostBack('SWGrdAccSearch $ctl06$lnkAccount','')">123456</a> how can I get his link to launch/fire? Any and all help deeply appreciated. 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. I have a script which creates an element of iframe. I have a button which refreshes the iframe link. I need to do something to change a variable in the iframe src on every click of the button. I'll explain the real issue. I have a list of games I have with random name like, boomer.swf, kingdom.swf, balloon.swf and so on. So I somehow made this, Code: var r_text = new Array ();
r_text[0] = "boomer";
r_text[1] = "kingdom";
r_text[2] = "balloon";
var i = Math.floor(3*Math.random())
var gamedrome = { game: ""+r_text[i]+""};
Now I have a .js file which creates iframe element Code: function embed_game(params, options)
{
var data = [];
for(var i in params)
{
data.push(i + "=" + encodeURIComponent(params[i]));
}
data = data.join("&");
var frame = document.createElement("iframe");
frame.src = "http://website.com/embed/game.html?"+ data;
frame.style.width="100%";
frame.style.height="100%";
frame.style.border = "0";
frame.frameBorder = "0";
frame.id="newroom";
....
and another small script to refresh the inner iframe and not the page to change game. Code: <script type="text/javascript">
function Reload () {
var f = document.getElementById('newroom');
f.src = f.src;
}
</script>
It all works fine until the game is loaded, but the problem is that if once the game is loaded in site, the iframe source is already set and my button keeps loading the same game. I need to randomize it on every click. Please help me out. 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! Hello all I am new here but this place looked great and like one of the only places where I could find the answer to my question. I have created a page which pulls search results from various sites using PHP. It displays each result in a row in a table upon running. I wanted to add a button saying "More information" at which point, a div would appear and load the associated link for that search result within an iframe within the newly appeared div. I've been able to get a div appear and disappear on button click but, I couldn't get it to dynamically load an iframe on click with the associated search results link. Any suggestions are greatly appreciated. Also let me know if you need more information before assisting. Thanks! Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. Hi all Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now? I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load. Example of how the tabs look. Code: <div class="tabbertab">
<h2>Australia_____</h2>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
<caption class="highlight_Red">澳洲 Australia
</caption>
<tr>
<td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc
the other tabs look the same. LT |
|||||||